デザインの考え方——はじめてでも迷わない超シンプル版

前回まとめた「5つの準備（目的／ターゲット／予算・スケジュール／コンテンツ／更新体制）」を、今日は見た目＝デザインに落とし込みます。
むずかしい専門用語は使いません。「誰に・何を・どうしてほしいか」だけを軸に、やることを順番に見ていきましょう。

1) まずは“このページで何をしてほしいか”を決める

• 例：
  • パン屋さん → 「予約フォームから明日の食パンを予約してほしい」
  • 整体院 → 「LINEで初回体験を予約してほしい」
• これがゴール（行動）。デザインはこのゴールを押しやすくするためにあります。

ボタンの文言テンプレ

• 「予約する」→ 「3分で予約する」
• 「お問い合わせ」→ 「無料の相談を申し込む」
• 「資料請求」→ 「料金表を受け取る」

2) 並べ方（ページの順番）は「ひと目で→納得→安心→行動」

1. ひと目で：1行で要点（見出し＋短い説明）
2. 納得：写真・実績・お客様の声・料金の目安
3. 安心：よくある質問、場所、営業時間、対応方法
4. 行動：予約・問い合わせのボタン（ゴールは1つに絞る）

たくさん並べるより、1ページ＝1メッセージ＋1ボタンがわかりやすいです。

3) 色は「3色」だけ使えば整って見える

• ベース色：背景（白 or 薄いグレー）
• メイン色：見出し・リンク（ブランドの色）
• アクセント色：一番押してほしいボタン（目立つ色はここだけ）

迷ったら白：メイン：アクセント＝6：3：1くらいの比率を目安に。
※「リンク色」と「ボタン色」は毎回同じ色にすると迷いません。

4) 文字は“少なめ・大きめ・区切る”

• 本文は大きめ（目安：16px前後）で読みやすく
• 2〜3文ごとに改行して、見出しで区切る
• 大事な言葉は太字に（色で装飾しすぎない）

NG例：ぎっしりの長文／改行なし／小さすぎる文字
OK例：短い文＋見出しで区切る＋必要なところだけ太字

5) スマホで“親指で押しやすい”が正解

• ボタンは指で押せる大きさ（目安：縦横44px以上）
• 余白をゆったり。詰め込みすぎると誤タップの原因に
• メニューは3〜5個までに絞ると迷いません

スマホで最初の3スクロールに、要点とボタンを入れるのがコツ。

6) 写真は“サービスが伝わる1枚”を

• 使っている様子／人の表情／ビフォー→アフターがわかる写真が◎
• ロゴやアイコンはくっきりした画像（できればSVG）を使う
• 画像は軽くしてページを速く（「WebP」や「遅延読み込み」を使う設定があるとベター）

7) よくある失敗とカンタン修正

• 色が多い → 3色に戻す。アクセント色はボタンだけ
• 文字だらけ → 3〜4倍に行間と改行を増やす
• ボタンが弱い → 文言を具体的に（例：「お問い合わせ」→「料金の目安を知りたい」）
• スライダー任せ → 最初は静止の1枚で伝える
• 専門用語だらけ → お客様が使う言葉に言い換える（例：「IA」→「情報の並べ方」）

8) 今日から使える“ファーストビュー”テンプレ

見出し： 何を、誰に
ひとこと： どんな良さがあるか（1〜2文）
ボタン： 何が起きるかがわかる文（例：3分で料金表をもらう）
画像： サービスが一目で伝わる写真（人・手元・成果）

例（整体院）

• 見出し：肩こり・腰痛に、やさしく効く整体
• ひとこと：初回60分3,980円。JR○○駅3分／21時まで受付
• ボタン：LINEで初回予約する
• 画像：施術の様子と笑顔のビフォー→アフター

9) かんたんチェックリスト（10個）

• 各ページのゴール（押してほしいボタン）が1つに絞れている
• 最初の表示で何をしてくれるサイトかが伝わる
• お客様の言葉で説明できている（専門用語に頼っていない）
• 色は3色運用、ボタン色は全ページ同じ
• 文字は大きめ、2〜3文ごとに改行
• スマホの3スクロール内に要点＋ボタン
• 写真はサービスが伝わる1枚を最初に
• 料金や目安時間など不安を減らす情報がある
• フォームは入力項目が少なめ（あとで聞ける内容は省く）
• 試しに家族や友人1人に見せて、迷わないか聞いた

まとめ

デザインはセンスより「やさしい段取り」です。
1ページ1メッセージ、3色、スマホで押しやすく――これだけで伝わるサイト**に近づきます。前回の「5つの準備」を軸に、今日のチェックリストをなぞってみてくださいね！