色・フォント・余白・レイアウト — 担当者は作らない、見るだけ。崩れやすいのは CMS 更新のとき
この記事でわかること
Lesson 4-1 で「印象 × 行動」、4-2 で「WF → カンプ」を整理しました。 この Lesson はその中身に踏み込みます。 色、フォント、余白、レイアウト — デザインの 4 要素を、担当者の目線で扱います。 ただし本書のスタンスはシンプルで、担当者はデザインを作りません。 判断材料を持っていれば、それで十分です。
1. 担当者は「デザインしない」、けど「デザインを見る」
1-1. 担当者の役割：作るのではなく、判断する
Lesson 1-1「成果を引き出す人」と連動します。 担当者はデザインの主役ではありません。 でも、出てきたデザインを判断する役は担当者が担います。 作らない、けど見る。 この線引きを最初に押さえておくと、迷いにくくなります。
1-2. デザインの 4 要素を一望
デザインを構成する基本 4 要素は、次のとおりです。
- 色
- フォント
- 余白
- レイアウト
1-3. 担当者が見るべきは「印象の伝わり方」と「読みやすさ」
Lesson 4-1「印象 × 行動」と連動します。 担当者が見るのは、印象の伝わり方と読みやすさの 2 点です。 その他は、デザイナーの領域として安心して委ねましょう。
1-4. 「ルール」を細かく覚える必要はない
デザインの細かいルール(ジャンプ率、カーニング、近接の法則など)を担当者が覚える必要はありません。 デザイナーが知っています。 担当者は判断材料を持っていれば十分です。
2. 色 — ブランドカラーと「3 色の原則」
2-1. ブランドカラー
会社・サービスを代表する色がブランドカラーです。 これは Web 制作の前に決まっているはずで、もし無いなら、デザイン議論の前に決めておきたいところです。
2-2. 3 色の原則
Web デザインの基本ルールに「3 色の原則」があります。 メインカラー + サブカラー + アクセントカラー、の 3 色構成です。
2-3. 各色の役割
- メイン：印象を決める(ブランドカラー)
- サブ：背景・調和
- アクセント：CV ボタン・強調
2-4. 色は印象を直撃する
色は、ユーザーが最初に受け取る印象を直撃します。 ターゲットに与えたい印象と、色の選択が合っているかを担当者が判断します。
2-5. 色の選定はデザイナーの領域、担当者は印象だけ評価
具体的に「この色がいい」を担当者が選ぶ必要はありません。 出てきた色の組み合わせが、目的(印象)に合うか合わないかを判断するだけです。
3. 余白 — 「スカスカに見える」を恐れない
3-1. 余白は「読ませる」ための手段
余白は「何もない場所」ではありません。 「読ませる」ための手段 です。 余白がない文章は読まれません。 人間の目は休息を求めるので、適度な余白がないとページから離脱します。
3-2. 初心者は「余白 = 何もない」と詰め込みがち
新米担当者がやらかすパターンです。 「もったいないからここに何か入れたい」と思って、余白を詰めようとする。 経営層や上司にも「ここ空いてるよね、何か入れたら?」と言われがちです。 でも、余白を詰めると読まれなくなります。 詰めずに残すのが正解です。
3-3. 余白を許す勇気
デザイナーが提案した余白は、意図があってのものです。 その意図を尊重して、余白を残す勇気を持ちたいところです。 詰め込みたくなる衝動をぐっと抑えるのも、担当者の大事な役割です。
3-4. 余白の判断軸
余白が適切かどうかは、スマホで実機表示してターゲットになって読んでみるのが一番です(Lesson 1-6 連動)。 実機で読みづらいなら、余白の取り方を再検討。 読みやすいなら、そのまま採用です。
3-5. Lesson 4-2「上部の詰め込みすぎは避ける」とつながる話
Lesson 4-2 の WF チェックで扱った「ファーストビュー詰め込み禁止」も、同じ余白の話です。 余白は 「読まれる」ための投資 であって、無駄ではありません。
4. 統一感が崩れやすいのは CMS 更新のとき
4-1. そもそも担当者はデザインしない
本書のスタンスです。 新米担当者だからこそ、自分で凝りすぎないのがおすすめです。 デザインそのものは業者・デザイナーに安心して任せましょう。
4-2. やらかすのは CMS で情報を入れる時
では、担当者がやらかすポイントはどこか。 答えは CMS で情報を入れる時 です。 制作完了後、運用フェーズで担当者が CMS から情報を更新するときに、既存デザインの統一感を崩しがちです。 具体例を並べます。
- 色を勝手に追加(ブランドカラー以外を使う)
- 画像のトーン(明るさ・色味)が他ページと合わない
- 文字装飾(太字・下線・色文字)を盛りすぎ
- フォントサイズを勝手に変更
- 表組み・箇条書きのスタイルがバラバラ
4-3. 既存デザインとの統一感を保つ運用ルール
やらかしを防ぐには、運用ルールを最初に決めておきます。
- ブランドカラー以外の色を使わない
- 画像のトーンを揃える(撮影 / レタッチガイド)
- 文字装飾は最小限、既定のスタイルのみ
- フォントサイズは決まった選択肢の中で
4-4. 「デザインガイドライン」を業者から貰っておく
Lesson 3-5 と連動します。 制作完了時に、業者からデザインガイドラインを忘れず受け取っておきましょう。 色、フォント、写真トーン、間隔、装飾ルール — これらを文書化したものです。 運用時の参照書になります。
4-5. 悩んだらディレクターに聞く
自分で判断するのが難しいときは、遠慮なくディレクターに聞いてみましょう。 「この更新でデザインルール上問題ないか」を確認してから出すと、安心して進められます。
5. デザイナーとの会話 — 語彙は要らない、違和感を素直に
5-1. デザイン語彙を覚える必要はない
「ジャンプ率」「カーニング」「グリッド」「タイポグラフィ」 — これらを担当者が口に出す必要はありません。 デザイナーが知っているから問題ないのです。
5-2. 違和感は素直に伝える
違和感を覚えたら、感じたままを素直に伝えてみましょう。 「なんか窮屈に感じる」「目が滑る感じ」「ちょっと寂しい」 — このレベルで十分です。 無理に専門用語へ変換しなくて大丈夫です。
5-3. ディレクターを通して翻訳してもらう
担当者の素直な違和感は、ディレクターがデザイナーへ翻訳してくれます。 デザイナーと直接やり取りせず、ディレクター経由で進めるのが基本フローです。
5-4. ディレクターの役割
ディレクターは、担当者とデザイナーのあいだの 翻訳役 です。 担当者の生の違和感を、デザイン用語に翻訳して伝える。 デザイナーは翻訳された情報をもとに、具体的な修正に落とし込む。 この三者の役割分担で進めると、認識ズレが減ります。
5-5. 「自分の意見が間違っているかも」と恐れない
違和感は素材です。 最終的な判断はディレクターと一緒に出します。 だから「言ったことが間違っていたらどうしよう」と恐れる必要はありません。 違和感を飲み込まずに口に出すことが、いちばん大事です。
5-6. 担当者が専門家ぶると、かえって伝わらない
中途半端な用語で議論しようとすると、かえって混乱を生みます。 自分が分かっていない用語を使うより、素直に「なんとなく」で伝えるほうが、結果として正しく届きます。
6. フォント — 基本は 1〜2 種類(デザイナー領域だけど、最低限だけ知っておく)
6-1. 明朝体とゴシック
日本語フォントの大きな分類は、明朝体とゴシック体です。 明朝体は知的・伝統的・落ち着き、ゴシック体は現代的・力強い・読みやすさ、というのが大まかな印象差です。 用途と印象に合うほうを選びます。
6-2. 1 種類で本文 + 見出し、複数使うなら 2 種類まで
フォント種類は基本 1 つで統一。 変えても 2 種類までです。 3 種類以上のフォントを混ぜると、サイトがちぐはぐになります。
6-3. Web フォントのライセンス
Lesson 3-5 と連動します。 Web フォントは商用利用のライセンスが必要なものが多く、サブスク終了で使えなくなるリスクもあります。 契約時に範囲を確認しておくと安心です。
6-4. 担当者はフォント選定に深入りしない
フォントは深入りしなくて大丈夫です。 印象だけ評価できれば十分です。
7. レイアウト — 「上から下に読まれる」原則
- 上に重要なものを置く(ただし詰め込みすぎは避ける / Lesson 4-2 連動)
- 関連情報を近くに置く(近接の法則)
- 類似要素はサイズ・色を揃える(整列の法則)
- 担当者は「判断材料」として持つだけ、自分で詳細決定しない
8. 担当者の「最低限のデザインリテラシー」(自己チェック表)
担当者として最低限持っていてほしいのは、次の 4 つの判断軸です。
- 「印象」を見られるか
- 「読みやすさ」を見られるか
- 「統一感」を見られるか
- 「ブランドガイドラインに沿っているか」が判断できるか
これだけで十分です。 それ以上はデザイナーに安心して任せましょう。
デザインは「作る力」より「見て判断する力」が担当者の出番です。 色と余白、そして統一感 — この 3 つを意識して見られれば、もう十分に役割を果たせています。 細かいルールはデザイナーが守ってくれますし、迷ったらディレクターに違和感を伝えればいいのです。 完璧な目を持つ必要はありません。 「なんとなく気になる」を飲み込まずに口に出す。 それだけで、サイトはきっと少しずつ良くなっていきます。