Chapter01 Webサイト制作基礎

ワークフロー 一般的なWeb制作会社の、
ワークフローを知ろう。

一般的なWeb制作会社は、以下のようなワークフローで制作している。

  1. ヒヤリング
    要望を聞く
  2. コンセプトメイキング
    要望に応えるサイトを提案
  3. プランニング
    サイト/デザイン/システムを設計
  4. ページ制作
    HTML+CSS+JS+PHPなどでページを制作
  5. 運用・管理・更新
    ページの修正や更新など

Webメディアの特性 印刷物とWebの違い。

Webは、印刷物とは異なり、見え方がユーザーの環境によって変わります。
Webサイトの制作者は、見た目のデザインの前に、Webの特性について適切に理解しておくことが、
必要となります。

RERUN

新しいウインドウで表示する

  1. 可視領域

    • 印刷物： 同じ印刷物ならどれを見ても大きさは同じで一定
    • Web ： ブラウザのウインドウの大きさは、ユーザー側の環境にって変わるので不定
      → 可視領域内（ウインドウ内）に全ての要素が表示されるとは限らない。

  2. 再現性

    • 印刷物： 同じ原版から印刷されたものなら、基本的にどれも同じ（一定）
    • Web ： OSやブラウザによって、同じページでも見た目は様々（やや不定）
      → 見た目はユーザ側の環境にかなりの部分で依存する。（ユーザが情報の見え方をある程度コントロールできる。）

  3. 表現の仕組み

    • 印刷物： 紙に定着したインクによって色や形を表現
    • Web : モニタの発行によって色や形を表現
      → 長時間見続けることが、肉体的苦痛となりうる。

  4. 情報の順序

    • 印刷物： 本などの冊子の場合、ページの順列は一定で、今のページと次のページは常に1:1
    • Web : １つのページからリンクをたどって表示できる次のページが複数存在するので、1:n
      → 上手にデザインされていれば、望む情報を迅速に入手できる。

ディスプレイの表示領域 市場に出回っている
ディスプレイのサイズは様々

Webページはディスプレイで閲覧されるメディアであることから、解像度によって見え方に大きな影響を受けます。市場に出回っているディスプレイには様々な解像度のものがあります。

主なディスプレイサイズ
名称 解像度 実際の表示可能領域（目安）
VGA 640 × 480 600 × 380
XGA 1024 × 768 980 × 650
SXGA 1280 × 1024 1240 × 920
UXGA 1600 × 1200 1560 × 1100
FHD 1920 × 1080 1900 × 980

最新のディスプレイのシェアを確認する（デスクトップ）

ブラウザのバージョンと種類 スクロールなしで、
パッと表示される領域

Web制作者にとって、ブラウザの情報は必須です。
種類によって表示に違いがあったり、同じ種類でもバージョンによって、サポートされている要素や拡張機能に違いがあります。
なるべく多くのブラウザでチェックをし、より多くの人がストレスなく閲覧できるような配慮が必要となります。

主なブラウザ
種類 説明 描画エンジン
Internet Explorer Windowsの標準ブラウザ。IE11が最後のバージョンとなった Trident
Microsoft Edge Windows10の標準ブラウザ。非対応サイトはIEとして表示する。 EdgeHTML
Google Chrome Googleが開発するブラウザ。表示速度が早くセキュリティも高い。 Blink
Firefox アドオンによるカスタマイズが人気のブラウザ。 Gecko
Safari Apple製品の標準ブラウザ。Windows版もある。 WebKit
Opera モバイルやゲーム機にもシェアを持つブラウザ。 Blink

最新のブラウザのシェアを確認する（デスクトップ）

Webセーフカラー どんな環境でも同じ色にしたい、
じゃあ、Webセーフカラーを使おう。

Webセーフカラーとは、OSやコンピュータの違いによらず、どんな環境でも表示できるように選定した216色のカラーのことです。
指定したカラーがユーザマシンのシステムパレットに内場合は、色の置き換え（カラーシフト）が発生し、環境によっては見た目が変わってしまいます。
制作者の意図したままの色で表現したい場合は、色数は制限されますが、このWebセーフカラーを使用することが推奨されます。

Webセーフカラー

Webセーフカラーを見る

ユーザビリティとは Webサイトの使いやすさ。

ユーザビリティ（Usability）は、「使い勝手、使いやすさ」と訳されます。
つまりWebユーザビリティとはWebサイトの使いやすさのことです。
文章やボタン、画像などの各要素のわかりやすさや大きさ、配慮、ページ間移動の効率性、ページの読み込み時間の短さなどの観点から評価されます。
どれだけ、「良い内容」でも「使いやすさ」の伴っていないWebサイトでは、内容をみる前に、見る意欲が無くなり、違うページに移動してしまうかもしれません。
Webユーザビリティを向上させることで、利用者がそのサイトを再訪問する確率を押し上げることができるほか、Webサイトに定められた最終成果を達成する確率（コンバージョン率）を上昇させる効果もあります。

ユーザビリティの定義

○ ISO（国際標準化機構）が定めた 「ISO9241-11」

「特定の利用状況において、特定の利用者によって、
ある製品が指定された目的を達成するために用いられる祭の、
有効さ、効率、利用者の満足度合い」

ユーザビリティのチェック 使いやすいWebサイトのためのチェック項目。

(1) 有効さ（正確性）

「何のサイトか」「何があるのか」「何ができるのか」が5秒以内にわかるサイトにしましょう。

  1. ロゴやサイト名の配置

    サイトの訪問者は、誰のサイトにやって来たのか、誰が提供しているコンテンツなのかが気になります。ロゴやサイト名をわかりやすいところに（通常は左上）に配置することで安心感や信頼感が向上します。

  2. キャッチコピーでページの役割を明確に表す

    説明的なキャッチコピーで、そのページには何があるのか、何が出来るのかを明確に表しましょう。
    ユーザーの疑問に簡潔に答えるようなキャッチコピーであれば、ページの好感度が向上します。

  3. サイト運営者の情報やお問合せページ

    サイトの訪問者はサイトやその内容の信憑性が気になります。
    誰が提供しているコンテンツかを容易に確認できるように、運営者の情報ページやお問合せページを、見つけやすい場所に配置しましょう。

(2) 効率（操作性）

訪問者が迷子にならないように、しっかりとナビゲーションを作りましょう。

  1. メニュー項目の数

    メニュー項目の数が多すぎると、どのメニューをクリックすればいいか悩んだり、あとで項目を思い出すことも困難になります。
    可能であれば、メニュー項目の数は、5〜7固定度になるようにしましょう。

  2. ロゴにトップページへのリンクを指定

    一般的なWebサイトのロゴには、トップページへのリンクが設定されています。
    ユーザーはこのような習慣を無意識に記憶しており、ロゴにリンクが設定されていないサイトを使いにくいと感じてしまいます。
    自分のサイトが使いにくいと判断されないためにもロゴにはトップページへのリンクを指定しましょう。

  3. リンクの表現

    リンクは、そこがクリックできる箇所だと視覚的にわかるような装飾にしましょう。
    下線付きの青色のテキストは、テキストリンクの象徴です。
    通常のテキストに見えるようなCSSを設定したり、通常のテキストがテキストリンクに見えるようなCSSは控えましょう。

(3) 満足度合い（快適性）

品質の高い、整理された読みやすいコンテンツを作成しましょう。

  1. デザインの一貫性

    Webサイトのレイアウトや見出し、ボタンなどの装飾は、サイト内で一貫させましょう。
    ユーザーはその一貫性によって、あなたのサイト内にいることやサイト内のルールを認識します。

  2. Webサイトに適した文章

    サイト上での文章は、印刷物以上に、その読みやすさが重要になってきます。
    文章はウインドウの幅2/3程度で区切って、行間や余白を適切に調整しましょう。
    なお、文章が長くなる場合は、中身出しや、小見出しを使って話題を整理し、
    流し読みでも伝わるように工夫しましょう。

  3. Webサイトの表示速度

    1つのページに情報を詰め込みすぎると、表示に時間がかかり訪問者にストレスを与えてしまいます。
    1ページあたり100KB程度に抑え、10秒以内に表示できるサイトにしましょう。

  4. 閲覧環境の違い

    利用者によってOSもブラウザもディスプレイも様々です。
    ユーザの閲覧環境の違いを意識してWebサイトを制作しましょう。

  5. 404ページの用意

    Webサーバは、リクエストされたページが存在しない時に、「404 Not Found」というページを表示します。独自の404ページを作成することで、訪問者に代替えのコンテンツを提供したり、サイト内検索のフォームを提供することが可能になり、サイトの離脱率を低下させることができます。

アクセシビリティとはそもそもWebサイトを利用できるかどうか。

アクセシビリティ (Accessibility)とは、「近づきやすさ・接近容易性」と訳されます。
つまり、WebアクセシビリティとはWebサイトを誰もが使うことができるかどうか、ということです。
身体的理由でパソコンの一般的な操作が難しいユーザに配慮する技術と言うこともできるでしょう。

アクセシビリティのガイドラインや規格

○ W3Cが勧告した 「WCAG 2.0」

  1. 知覚可能　・・・　非テキストには代替えテキストを提供するなど
  2. 操作可能　・・・　キーボードでの操作や、ページを移動の手助けを行うなど
  3. 理解可能　・・・　読みやすい、ページ表示や動作を予測できるなど
  4. 堅牢性　　・・・　現在および将来の支援技術を含む環境でも利用できること

WCAG 2.1 へ

○JIS（日本工業規格）が定める「JIS X 8341-3」　・・・　高齢者・障害者等配慮設計指針

2004年に制定され、 2010年8月に 「WCAG 2.0」の基本的な概念や内容をベースに改正。
2016年3月に 「WCAG 2.0」がISO/IECの国際規格になったことを受け改正

アクセシビリティのチェック 全てのユーザーが利用できるかをチェック。

(1) 知覚可能

  1. 代替えテキストや代替えコンテンツ

    すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供しましょう。（画像のalt属性 など）
    映像や、音声などの場合は、セリフの書き起こしなどの代替コンテンツを提供しましょう。
    また、文字画像はロゴなどの必要不可欠な場合のみに利用しましょう。

  2. 文字サイズとコントラスト

    視覚障害者だけでなく、高齢者など弱視のユーザのことを考えて作りましょう。ブラウザの「文字サイズの変更」機能を妨害しないでください。小さい文字サイズへの変更は、必ず相対指定にしましょう。
    また、文字の色と背景色には十分なコントラストを確保しましょう。

  3. 色に依存しない

    色覚障害を持っているユーザのことを考えて作りましょう。ページを利用する上で色に依存しないように設計しましょう。（フォームの必須項目を色だけで識別させない など）

(2) 操作可能

  1. キーボード操作可能

    すべての機能をキーボードから利用できるようにしましょう。

  2. コンテンツを見つけやすくする

    各ページのタイトルにはページの内容を適切に説明した固有のタイトルを付けたり、各セクションに見出しを付けてコンテンツを整理したりすることで、ユーザーがコンテンツを探す手助けを行いましょう

  3. 現在位置と移動のためのサポート

    下層ページにはパンくずナビゲーションを設置し、現在地の情報を提供しましょう。
    また、メインコンテンツにすぐアクセスできるように、複数のページに繰返し登場するコンテンツ（ヘッダーなど）をスキップするリンクを用意することも効果的です

(3) 理解可能

  1. 読みやすく、理解しやすい文章を書く

    トピックごとに整理されたコンテンツを提供しましょう。専門用語や、一般的ではない用語にその用語の定義元のリンクを提供したり、注釈を入れるなどの工夫をしましょう。

  2. ページの表示や挙動を予測可能にする

    リンクやボタンは、クリックしたときに何が起こるかをユーザが容易に予測できるようにしましょう。
    （外部サイトへの移動、PDFの表示、ダウンロード など）
    また、グローバルナビゲーションの項目の順番は、どのページでも同じ順序で表示するにしましょう。

  3. 利用者の間違いを防ぐ

    操作を求められるフォームなどは、利用者の間違いを防ぐ工夫や、入力の支援をおこないましょう。
    具体的には、入力内容の説明文や例を提供したり、電話番号や郵便番号などのフォーマット（ハイフンの入力を要求 など）をユーザーに求めないなどです。また、エラーがある場合は、どの項目がどのようなエラーなのかをユーザーに説明しましょう。

(4) 堅牢性

  1. 仕様に基づいたマークアップ

    Webコンテンツは、セクション・見出し・段落・リストなどの要素を用いて文書の構造を明確にしましょう。なお、各要素は仕様に基づいた配置ルールで入れ子になっていて、要素には重複した属性がなく、どのIDも一意的である必要があります。また、終了タグの省略も推奨されません。

まとめ Webの特性を活かしたサイト制作を。

全てのユーザーが利用できるやさしいWebサイトを作れるようになりましょう。

  • Webは対話性のあるpull型メディア
  • 使いやすさを向上するとコンバージョン率も向上する
  • 全てのユーザーが使えるようにアクセシビリティを考慮する