デイトラWebデザインコース 中級編 の学び ～その3～

WEBサイトを構成するパーツ

• ヘッダー・グロナビ（グローバルナビゲーション）
• メインビジュアル
• コンテンツ
• フッター
• コンテンツを構成する要素

① ヘッダー・グロナビ（グローバルナビゲーション）

• サイトの上部に配置、基本的に全ページ共通
  （左側に配置される場合もある）
• 役割は「目次」のようなもので、「サイトのロゴ」や「グローバルナビ」が配置される

【デザインのポイント】

• 高さと取り過ぎない
• メニュー数を適切な数にする（多すぎず、少なすぎず）
• 視認性を確保する（スクロールした後のことも考える）

② メインビジュアル

• 表示した時に、最初に目に入る部分
• 役割は「"ひと目で！" ユーザーに内容を伝え、興味を持たせ、スクロールしてもらう」こと

【デザインのポイント】

• キャッチコピー（文字のデザインも含む）
• 内容を的確に伝える写真の選定
• 優先順位を決め、目立たせたい要素をしっかり目立たせる

③ コンテンツ

• Webページの内容部分
• 役割は「内容を的確に伝えること」

【デザインのポイント】

• 内容が伝わる構成（ユーザーの要求に応えられるか）
• 全体のバランス（デザインをルール化して統一する）
• 内容に見合ったスクロール量

④ フッター

• Webページの最後の部分、全ページ共通
• 役割は「ユーザーに次の行動を与えること」
• 内容を的確に伝えること

【デザインのポイント】

• ユーザーにアクションを促す（資料請求/お問い合わせ など）
• ヘッダーに掲載しなかったナビゲーション（プライバシーポリシーや利用規約など）
• SNSリンクを載せるときは、ロゴの利用規約を確認すること

⑤ コンテンツを構成する要素

• ボタン
• セクション見出し
• 本文見出し
• 本文
• セクション

【デザインのポイント】

• 「ボタン」は、クリックできることがわかる、移動先がわかる、クリックできるサイズ（44px以上）にする、アクセントカラーで目立たせる。
• 「セクション見出し」は、スクロール中に目に留まるデザイン、本文との大きさに差をつける
• 「本文見出し」は、セクション見出しよりは目立たず、本文よりは目立つように
• 「本文」は、見出しよりも小さく、読みやすい色、サイズ、行間、文字間に気を配る。長くても 800pxまでに。
• 「セクション」ごとに。「全体」として。
  視線誘導を意識して構成する