3. スライド学習① ( 3 / 10 )
これまで、情報デザインとして「ポスターでの表現」、「音楽での表現」、「動画での表現」について学習しました。今回は「Webページのデザイン」について学習します。
スライドの学習内容
Webページとは、インターネットにある文章や写真などの情報を、ブラウザというアプリを利用して見ることができるページのことです。
Webページのデザインとは、Webページの見た目や使いやすさなどを考えてデザインすることです。
現代では誰もがPCやスマートフォンなどでWebを利用します。 誰もが使いやすく分かりやすいように、Webページはユニバーサルデザインを考慮して作成することが大切です。
次の例で、ユニバーサルデザインされたものとそうでないものを比較してみましょう。
1-1. 部品のデザイン
次の２つのボタンを比べましょう。
どちらが押せそうに見えるでしょうか？
右の方が押せそうなボタンに見えますね。立体的にすると押せるように見えます。
1-2. 色のデザイン
次の2つの文字はどちらが見やすいでしょうか？
スター AI・情報塾
スター AI・情報塾
右の方が文字がはっきり見えますね。色の組み合わせで見え方が変わります。
1-3. フォントのデザイン
次の2つの文字はどちらが見やすいでしょうか？
吾輩は猫である。名前はまだない。
どこで生れたか頓（とん）と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である。名前はまだない。
どこで生れたか頓（とん）と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
右の文字はUDフォント(ユニバーサルデザインフォント)を使っています。よく見ると、漢字の横画がくっきり見えていることやひらがなの濁点などが見やすくなっていることがわかります。
同じボタンや情報でも形や色が異なるとユーザビリティ（使いやすさや見やすさ）が異なることがわかります。
Webページを作るときは、誰が利用しても使いやすく見やすくすることが大切です。
UDフォント
UDフォントはWebページで文字が読みやすいように次の4点が考慮されています。
引用元：独立行政法人情報通信研究機構「情報バリアフリーのための情報提供サイト 文字のユニバーサルデザイン 「イワタＵＤフォント」の開発(2/5)」https://barrierfree.nict.go.jp/topic/service/20130314/page2.html
Webページのレイアウトは自由に作ることができますが、基本的には「ヘッダー」、「グロ－バルナビゲーション」、「コンテンツ」、「フッター」の4つのパーツに分け、ページを構成します。
Webページのレイアウト例
各パーツの説明
①ヘッダー
Webページの最上部に位置するパーツです。主に次の要素を配置します。
など
②グローバルナビゲーション
メニューの役割を持つパーツです。目的のページが見つかるように配置します。
③コンテンツ
Webページの本文を記載するパーツです。主に次の要素を配置します。
など
④フッター
Webページの最下部に配置するパーツです。主に次の要素を配置します。
など
Webページのレイアウトには、上記以外にもサイドメニューがあるものなど多くの種類があります。
Webページのレイアウトに決まりはありませんが、作成する場合はこれらのパーツに分けてデザインすることが多いです。
Webページの例
IPAのページ(スマートフォン用)
スマートフォン用のページはパソコン用に比べ幅が狭いので縦長のレイアウトになります。
メニューを展開した場合
スマートフォン用Webページのメニューには(ハンバーガーメニューと呼ぶ)が良く使われています。
引用:
