付録：Web制作チートシート

全体の流れ

1. 企画
2. ペルソナ設定
3. コンセプト決定
4. サイトマップ作成
5. ワイヤーフレーム
6. デザイン
7. コーディング

企画

目標設定

ユーザーにどんな行動を取ってほしいか。

現状分析

ライバルを調べ、このサイトの強みを見つける。

ペルソナ

以下がペルソナに書く項目の例です。

基本情報

名前（仮名）、年齢、性別、住んでいる地域、職業、年収、家族構成

ライフスタイル

趣味、休日の過ごし方、よく使うSNS（Instagram、Xなど）

顔写真

その人物の写真やイラスト（架空のものでOK）

課題や悩み

その人が今困っていることや、叶えたいこと

例）

コンセプト決定

「サイトコンセプト」と「デザインコンセプトを決めましょう。

サイトコンセプト

• 目的：最終ゴールを再確認します。「目的（予約を増やす、商品の魅力を伝えるなど）を果たすためのデザイン」を実現するためのWebサイトにします。
• ターゲットユーザー：作り上げたペルソナをここに当てはめます。
• 提供する価値：ユーザーがサイトを使った後に「どんな感情になり、どう行動するか」という価値を定義します。
• コンテンツの方向性：サイトで扱うコンテンツの種類やその内容を決めます。（例: ブログ、商品ページ）

デザインコンセプト

• ビジュアルのトーンやスタイル：フレンドリー、プロフェッショナル、ミニマル、ポップなど。
• レイアウトとユーザビリティ：スマホで片手操作しやすい、3秒以内にメニューがわかる、文字を大きめにするなど、使いやすさの基準を決めます。
• 色彩設計：メインカラー、アクセントカラーなど3〜4色程度に絞ってルール化します。
• フォント：高級感なら「明朝体」、親しみやすさなら「ゴシック体」を選びます。
• ビジュアル要素：写真やグラフィックなどの要素をどのように取り入れるか決めます。

サイトマップ

サイトに書く内容をまとめ、ページ構成を考えましょう。

シングルページ

マルチページ

ワイヤーフレーム

各ページの大まかな設計を決めましょう。

POINT

• 色を使わず、モノトーンで書く！
• 写真やイラスト・ロゴは灰色の四角などで代用。
• 実際の文章をこの時点で決めて入れられるとGood。

各種要素の大きさ

• 本文のフォントサイズ…14~16px（高齢者・子ども向けサイトは17~18pxがベスト。）
• ヘッダー…PC：70~140px、スマホ：50~70pxが一般的
• コンテンツ幅…PC：1000~1400px、スマホ：320px~480px程度。（画面幅に対し90%）
• コンテンツ幅横の余白…16~20px
• セクションごとの余白…PC：60~120px、スマホ：40~80px