Webサイトのフォントと配色の決め方｜AIに相談しながら読みやすさと印象を両立する
フォントと配色はサイトの印象を大きく左右しますが、好みだけで決めると読みにくさや統一感のなさにつながります。基本の考え方、配色の比率、AIへの相談の仕方と決定までの手順を解説します。
サイトの雰囲気を決めるうえで、フォント（書体）と配色の影響はとても大きいものです。同じ文章でも、書体と色を変えるだけで、堅実にも、親しみやすくも、高級にも見えます。
その一方で、「社長の好きな色をたくさん使いたい」「個性的なフォントで目立たせたい」と好みを優先した結果、読みにくく、まとまりのないサイトになってしまうことも少なくありません。フォントと配色は、印象と読みやすさの両方から判断する必要があります。
この記事では、Webサイトのフォントと配色を決めるときの基本的な考え方と、生成AIに相談しながら候補を絞り込む手順を解説します。
フォント選びの基本
日本語のWebサイトで使う書体は、大きく分けてゴシック体と明朝体の2種類です。
| 書体 | 特徴 | 与えやすい印象 | 向いている使い方 |
|---|---|---|---|
| ゴシック体 | 線の太さが均一で、小さくても読みやすい | 明快、親しみやすい、現代的 | 本文、ボタン、スマホでの表示全般 |
| 明朝体 | 線に強弱があり、とめ・はねがある | 上品、落ち着き、伝統 | 見出し、キャッチコピー、長文の読み物 |
迷ったら、本文は読みやすいゴシック体にし、印象づけたい見出しで明朝体を使うかどうかを検討する、という考え方が分かりやすいです。
フォントで気をつけたいこと
- 使う書体は2種類までを目安に：種類が増えるほど統一感が失われます。太さの違いで変化をつけるほうがまとまります。
- 本文の文字は小さくしすぎない：特にスマホでは、小さな文字は読み飛ばされやすくなります。
- 行間をゆったりとる：日本語は文字が詰まって見えやすいため、行間に余裕があると読みやすくなります。
- Webフォントの表示速度に注意する：Webフォント（サーバーから読み込んで表示する書体）は表現の幅が広がる反面、日本語は文字数が多いためデータ量が大きくなりがちです。表示速度への影響を制作者に確認しましょう。
- 利用条件を確認する：商用利用できるかなど、書体ごとのライセンスを公式情報で確認します。
配色の基本
配色は、使う色を役割ごとに分けて考えると整理しやすくなります。よく使われるのが、ベースカラー・メインカラー・アクセントカラーの3つに分ける考え方です。
- ベースカラー：背景や余白に使う色。白や薄いグレーなど。画面の大部分を占めます。
- メインカラー：サイトの印象を決める色。見出しの装飾や帯などに使います。ロゴの色を基準にすることが多いです。
- アクセントカラー：問い合わせボタンなど、特に目立たせたい部分に使う色。使う場所を絞ることで効果が出ます。
面積の比率は、ベース70％、メイン25％、アクセント5％がよく紹介される目安です。厳密に守る必要はありませんが、アクセントカラーを多用すると、どこが重要か分からなくなる点は覚えておきましょう。
また、文字色と背景色の組み合わせは、コントラスト（明るさの差）が十分あるかを必ず確認します。色の印象を優先して淡い組み合わせにすると、読みにくさにつながります。
配色でよくある失敗
- メインカラーとアクセントカラーが似ていて、ボタンが目立たない
- ページごとに担当者が色を足していき、気づくと10色以上使われている
- ロゴの色をそのまま文字色に使い、背景によっては読みにくくなる
- パソコンのモニターで決めた色が、スマホでは想定より派手または暗く見える
どれも、色の役割と使う場所を最初に決めておけば防げる失敗です。色は複数の画面や端末で確認してから決定しましょう。
AIに相談しながら決める手順
生成AIは、色やフォントの候補を出したり、それぞれの印象を説明したりするのが得意です。次の手順で使うと、効率よく候補を絞り込めます。
- 前提を伝える：事業内容、主な読者、目指す印象（トンマナで決めた言葉）、ロゴの色を伝えます。
- 配色案を複数出してもらう：ベース・メイン・アクセントの色コードと、それぞれの意図を3〜5案出してもらいます。
- 画面に当てはめて見る：色コードを、実際のページに近い見本（簡単なスライドやデザインツールの画面）に当てはめて比べます。色は言葉だけで判断せず、必ず目で確認します。
- フォントの組み合わせを相談する：決めた配色と印象に合う見出し・本文の書体の組み合わせを提案してもらいます。
- 読みやすさを確認する：コントラスト比を確認ツールで計算し、スマホでも表示して文字の読みやすさを確かめます。
- 関係者で決める：2〜3案に絞った見本を関係者に見せ、トンマナに照らして決定します。
プロンプト例
- 「当社は地域密着の歯科医院です。サイトを見るのは近隣に住む子育て世代とシニア層で、目指す印象は『清潔』『やさしい』『安心』です。ロゴの色は落ち着いた緑です。Webサイトのベースカラー・メインカラー・アクセントカラーを色コードつきで4案提案し、それぞれの印象と注意点を説明してください。」
- 「この配色案の中で、白い背景に文字色として使ったときに読みにくくなる色があれば指摘してください。」
- 「目指す印象に合う日本語の見出し用と本文用の書体の組み合わせを3案出してください。Webで一般的に使える書体に限定し、それぞれの印象の違いを説明してください。」
AIが出す色コードや書体の情報は、そのまま正しいとは限りません。実在しない書体名を挙げたり、コントラストの判断を誤ったりすることもあります。色は見本に当てはめて目で確認し、書体は提供元の公式情報で利用条件を確認してください。
決めた後に残しておくもの
フォントと配色が決まったら、次の情報を一つの資料にまとめておくと、公開後の運用で役立ちます。
- 各色の色コードと役割（どこに使い、どこに使わないか）
- 見出し・本文・ボタンなどに使う書体と太さ
- 文字用の濃い色、背景用の薄い色など、派生色の一覧
- 色と書体を当てはめた見本画面
これをブランドガイドラインに組み込んでおけば、バナーや資料を作る担当者が替わっても、サイトとの統一感を保ちやすくなります。
まとめ
フォントと配色は、好みではなく「目指す印象」と「読みやすさ」の両面から決めるものです。書体は2種類まで、色は役割ごとに3つに分けるという基本を押さえ、AIには候補出しと説明を頼み、最終判断は見本を目で見て行いましょう。
次にやることとして、まずは自社のロゴの色コードを確認し、目指す印象の言葉と一緒にAIに渡して配色案を3つ出してもらってください。それを簡単なスライドに当てはめて並べるだけで、議論が一気に具体的になります。