読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

Webページを表示する仕組み

基礎知識

Webページを表示する仕組み

Webページ
  • Webにおける文書の単位
  • 1ページあたりの分量はページごとに異なる
  • ひとつのWebページに URL(Uniform Resource Locator)が対応する
  • ブラウザのアドレスバーに URL を入れてアクセス
  • Webページの中には、テキスト(文字)・画像・音声・動画といったコンテンツが含まれる


HyperText Transfer Protocol(http)

  • WebブラウザとWebサーバの間でHTMLなどのコンテンツの送受信に用いられる通信プロトコル
Webとインターネット
  • Webは、インターネットのしくみを利用した一つのサービスとして存在する
  • Web(HTTP)
  • メール(SMTP/POP)

Webページの実体
  • ある規則に従って記述されたテキストファイル
  • メモ帳などテキストエディタで編集可能
  • 特定の編集ソフトを必要としない
  • その規則さえ分かればWebページを作成できる
視覚に訴える表現の特徴


The Evolution of the Web


http://www.evolutionoftheweb.com

Web制作現場の分業

  • 3つの役割
    1. デザイナー(デザイン、レイアウト、マークアップなど)
    2. デベロッパー(CSSスタイリング、コーディング、JavaScriptなど)
    3. エンジニア(サーバーサイドプログラミングなど)
変化していく分業形態
  • これまでの役割は、Web技術が進化しデバイスやユーザーのニーズが変化していく中で、分業の境目が曖昧になり、同時に各役割に求められる内容も変化してきています。
  1. デザイナー(デザイン、ユーザー体験、高度なイラストレーションなど)
  2. デベロッパー(マークアップ、インタラクション、ハイパフォーマンスなど)
  3. エンジニア(サーバーサイドプログラミング、API作成、データストアなど)


コーダーは、デベロッパー、エンジニアへ

  • これまでは、マークアップができればコーダーと呼ばれていました
  • 現在では、以下のようなスキルが求められます


CSS3以前のワークフロー

CSS3時代のワークフロー

  1. デザイン(CSSでの表現を考慮に入れる)
  2. スタイルガイド(デザインの共通点をまとめ、マークアップ
  3. 画像作成(画像である必要がある場合のみ用意)
  4. CSSコーディング(コンポーネントを使ってページ作成)
CSSで実現
  • 角丸ボタン
  • インタラクション
  • 透過表現
  • レイヤー表現
  • 様々な図形
  • 共通デザインルール

単なる「ページ」ではなく、Web「システム」を作る

  • ページという表示概念は薄くなり、必要なタイミングで必要なデータにアクセスするころができることが求められます
    1. 効率化
    2. パフォーマンス
    3. デバッグ
    4. コマンドライン操作