🎨 失敗しない！自分で作るホームページの「配色」と「フォント」の基本ルール

「自分でホームページを作成したいけど、デザインセンスがないから不安」
「どの色やフォントを使えば、プロっぽい？」

自分でサイト作成を始める際、デザインで悩む方は多いですが、特別なデザインセンスは必要ありません。必要なのは、「失敗しないための簡単なルール」を知っておくことです。

この記事では、自分でサイトを作成する方が、HTMLやデザイン知識がなくても、プロ並みの見た目を実現するための配色とフォントの基本ルールをわかりやすく解説します。

🌈 自分で決めるデザインの基本：「配色3色ルール」

色をたくさん使うと、サイトは素人っぽく、ごちゃごちゃした印象になります。プロのデザイナーは、基本的にサイト全体で3つの役割の色に絞って使っています。

色の役割	割合の目安	使い方と目的
ベースカラー	70%	背景色（白、薄いグレーなど）や余白に使う。清潔感と読みやすさを作る。
メインカラー	25%	ブランドの色（ロゴの色など）。見出しや重要な区切りに使い、統一感を作る。
アクセントカラー	5%	最も目立たせたい場所にだけ使う。「予約」や「問い合わせ」ボタンなど。

自分でデザインする際の最大のコツは、アクセントカラー（目立つ色）を「訪問者に次に何をしてもらいたいか」という行動（ボタン）に集中して使うことです。

悪い例
- 見出しや写真の枠にもアクセントカラーを使うと、ボタンが埋もれて目立たなくなります。
良い例
- 目立たせたい「予約する」「資料請求する」「SNSをフォローする」「クーポンをゲットする」などのボタンだけにアクセントカラーを使うことで、訪問者の行動を視覚的に促せます。

自分で色を決めるのが難しい場合は、あなたのビジネスのイメージに合った色を選びましょう。

ホームページは「読む」コンテンツです。デザイン性よりも「読みやすさ」を最優先してフォントを選びましょう。

種類	特徴	使い方と目的
ゴシック体	線の太さが均一で、遠くからでもハッキリ見える。	本文、見出しなど、サイト全体のメインのフォントとして使う。（推奨）
明朝体	縦線が細く、横線が太い。新聞や小説で使われる。	キャッチコピーや装飾など、限定的に使う。

【ポイント】
自分でサイト作成をする場合、特にスマホで見たときに、細い明朝体は非常に読みにくいことがあります。
ゴシック体を選んでおけば失敗しません。

対策
- 自分でパソコンで見て「ちょうどいい」と感じるサイズは、スマホでは小さすぎることが多いです。
ルール
- 本文の文字サイズは16px（ピクセル）以上に設定しましょう。
- フォントが小さすぎると、訪問者は読むのを諦めて離脱してしまいます。

自分でホームページ作成をする際、配色とフォントはセンスではなく、ルールで決めましょう。
「3色ルール」と「ゴシック体の読みやすさ」を守れば、集客に必要な信頼感のあるサイトデザインは実現できます。

もし、「デザインのルールを考えるのが面倒」「プロがデザインしたものをそのまま使いたい」と思った場合は、てんデザにご相談ください。

格安制作代行では、集客に最適化された配色のテンプレートを豊富にご用意しています。自分でデザインに悩む時間を、集客に効く文章作成の時間に変えましょう！

てんデザの特徴：1
テンプレートに沿ってテキストや写真をご提出いただき、1週間程度でホームページとブログを制作いたします。

てんデザの特徴：2
制作費用は2万円からとリーズナブル。月額費用、管理費用、保守費用などのランニングコストはいただいておりません。
※ただし、有料サーバー・有料ドメインの費用は除く。