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