第13講

演習と制作手順

ここでは、実際にWebページを作る前提で、考える順序を整理します。いきなり色や飾りを決めるのではなく、目的、情報、順序、型、確認へ進みます。

制作前に決めること

  1. このページの目的は何か。
  2. 誰に読んでほしいのか。
  3. 読んだ人に何をしてほしいのか。
  4. 最初に伝えるべき情報は何か。
  5. 最後に置くべき導線は何か。

構成案を作る

まず、文章だけで構成案を作ります。例えば会社トップページなら、次のようになります。

  1. 会社名とメニュー
  2. 大きな見出し
  3. 短い説明
  4. 主要サービス3つ
  5. お知らせ
  6. お問い合わせボタン
  7. 会社情報

この段階では、色や細かな装飾は決めません。まず、情報の順序が自然かを確認します。

型を選ぶ

説明中心なら1カラム、比較ならカード、補足が多いなら2カラム、入力なら縦並びフォーム、というように、目的に合った型を選びます。

視覚確認前の自己チェック

  • 見出しの順序が自然である。
  • ボタンの文言が具体的である。
  • 同じ種類の情報は同じ形式で書かれている。
  • 色だけで意味を伝えていない。
  • スマートフォンでは縦に読んでも意味が通る。

演習1：トップページの骨組み

課題架空の会社サイトを想定し、トップページの構成を文章だけで作ってください。ヘッダー、メイン見出し、サービス紹介、問い合わせ導線、フッターを含めます。

演習2：色の役割を決める

課題基本色、強調色、警告色、成功色、背景色を決め、それぞれ何に使うかを文章で説明してください。色名だけでなく、役割を必ず書きます。

演習3：目視確認依頼を作る

課題第12講のテンプレートを使って、見える人に確認してもらう依頼文を作ってください。「どこを見るか」「何を答えるか」を具体的にします。