この記事での学習内容 ITパスポート 基本情報 応用情報
Web デザインにおけるユーザビリティの考え方，ユーザビリティを向上させるための手法，スタイルシートの利用によるデザイン全体の統一や，複数種類のWeb ブラウザ対応などを考慮してWeb デザインすることを理解する。また，ユーザビリティに関する国際規格が存在すること，ユーザビリティ評価手法，Web サイトのナビゲーションの手法を理解する。
用語例：フレーム，空間近接原理，アフォーダンス，サイト内検索機能，ISO 9241，サイトマップ，クロスブラウザ，プログレッシブエンハンスメント
Webデザイン
多くの企業や団体などが、Webサイトを構築し、インターネット上でWebページを公開しています。
Webページを公開すると、最新の情報を多くの人に発信することができますが、ページが適切にデザインされていなければ効果が上がりません。
- インデックスの分類やメニュー
- ユーザの見たい情報の在り処が、ひと目で分かるようにします。
サイト全体の内容を把握できるようなインデックスやメニューを用意し、トップページから見られるようにしておきます。 - ページレイアウト、デザインの統一性
- ユーザがどのページを見ても迷うことなく、どこに何があるか類推できるようにします。
項目のレイアウトやボタンなどのパーツの使い方を統一し、リンクの付け方などにも共通ルールを作っておきます。 - 画面の構成、画面遷移
- ユーザが見たい情報まで素早くたどりつけるようにします。
クリックによる画面の切り替えやドラッグによる移動、前の画面に戻す操作がなるべく少なくて済むような画面遷移を用意します。 - ユーザへの配慮
- どんな環境からでも快適に利用できるようにします。
データ量は抑えて、動画再生などの使用は必要最小限にします。
また、色々なユーザに使ってもらうために、ユニバーサルデザインに配慮します。
スタイルシート
Webページを作成する時、スタイルシート（CSS：Cascading Style Sheets）を用意すると、レイアウトの指示をページ毎に記述しないで済むようになります。
CSSは、HTML文書の段落の配置や文字の色といったレイアウト情報だけをまとめてスタイルシートとして定義するファイルです。HTML文書とCSSファイルに関連付けておけば、Webページのレイアウトを統一できます。また、CSSを修正すれば、それを参照する全てのWebページのレイアウトが変更できます。
CSSの規格はW3Cで標準化されています。
画面遷移図
どの画面からどの画面へ移ることが出来るかという流れを、画面遷移といいます。
Webサイトなどを設計するときには、画面遷移図を作成して画面の遷移関係を整理します。
画面遷移図では、各画面を円や四角形、直線で表して画面名を記入し、その間を矢印で結んで、画面間の移動関係を図にします。
画面を円や四角形で表す場合、画面の数だけ円や四角形を描き、図形内に画面名を記入して、その間の移動の有無と方向を、図形を結ぶ矢印で示します。
画面を直線で表す場合には、画面の数だけ直線を引いて横に画面名を記入して、画面間の移動の有無や方向を。直線間を結ぶ矢印で示します。
円や四角形、直線のいずれを用いる場合でも、図中の1本の矢印は、画面操作上のクリックやキー入力といった一つのアクションを指しています。