BLOG
Web サイトのデザインチェックリスト — 5 つの視点で自分のサイトを点検する
自分のサイトを眺めていて、「なんか気になるな」「もうちょっと良くしたいな」と思う。でも、どこを・どう直せばいいのか は、いざとなると分からない——。デザインは感覚的なもののように見えて、実は 点検できる項目 に分解できます。この記事では、Web サイトのデザインの良し悪しを自分で点検できる チェックリスト を、見た目の 5 要素（配色・フォント・コピー・レイアウト・動き）ごとに「□ 〜になっているか」の形で用意しました。手元で自分のサイトを見ながら、1 項目ずつチェックしてみてください。チェックし終わる頃には、「なんとなく気になる」が「ここを直せばいい」に変わっているはずです。
デザインは “5 つの視点” で点検できる
デザインの良し悪しは、才能やセンスの問題に見えて、実は 配色・フォント・コピー・レイアウト・動き という 5 つの視点で、1 項目ずつ点検すると見えてきます。「色が多すぎないか」「文字が読みやすいか」——一つひとつは、答えられる問いです。チェックリストの良いところは、漠然とした不安を、具体的な項目に変えてくれる こと。全部にチェックが付けば安心できますし、付かない項目があれば、そこが直しどころです。
なお、ここで扱うのは 見た目のデザインの点検 です。誤字脱字やリンク切れ、表示速度、ブラウザ対応といった 制作実務の技術チェック や、アクセス数を見る アクセス解析 とは別物で、この記事は配色・フォント・コピー・レイアウト・動きに絞ります。また、「なぜそれが良し悪しを分けるのか」という考え方は 良い Web サイトと悪い Web サイトの違い・見分け方 にまとめているので、原理から知りたい人はそちらもどうぞ。この記事は、手を動かして点検することに専念します。
デザインチェックリスト・5 つの視点
さっそく、5 視点のチェックリストです。自分のサイトを開いて、当てはまるものに □ チェックを付けていってください。
1. 配色のチェック
- □ 色数が 3 色程度（主役の色＋差し色＋背景）に絞られているか
- □ ベースの色と差し色の役割が分かれているか
- □ 役割の曖昧な色が、あちこちに散らかっていないか
色数を数えて役割を書き出すのが、配色チェックの基本です。手元で色を 1 色ずつ確かめたいときは 色数を数えて役割を確かめる方法 が使えます。
2. フォントのチェック
- □ 書体が 2 種類程度に絞られているか
- □ 本文が読みやすいサイズ・行間か（小さすぎ・詰まりすぎていないか）
- □ 見出しと本文が、太さやサイズで区別されているか
読みやすさは、いちばん分かりやすい点検ポイントです。書体が印象をどう左右するかは 日本語フォントで、サイトの印象はどう変わるか で読み解いています。
3. コピーのチェック
- □ 最初の一言（メインキャッチ）で、何のサイトか一目で伝わるか
- □ 誰向けのサイトか、伝わるか
見た目が整っていても、何のサイトか伝わらなければ意味がありません。この「伝わらない」が起きる原因は サイトの言葉が「何屋か・良さが伝わらない」原因の当たりのつけ方 で扱っています。
4. レイアウトのチェック
- □ 余白が十分に取られているか（詰め込みすぎていないか）
- □ 要素の端が整列しているか
- □ 情報の優先順位が配置に表れているか（大事なものが大きく・先に）
とくにファーストビューの作りは、点検の効果が大きいところです。良いファーストビューの条件は 良いファーストビューは、なぜ人を惹きつけるのか で掘り下げています。
5. 動きのチェック
- □ 動き（fade・slide・hover など）が過剰で、うるさくなっていないか
- □ ボタンやリンクなど、操作に対する反応（動き）があるか
動きは、多すぎても少なすぎても気になります。適量は目的によりますが、過不足は点検できます。動きの過不足の見分け方は サイトの動きは「足りない？多すぎ？」— 動きの過不足を分析で読み解く で紹介しています。
自分では気づきにくい項目もある → 自動チェックという選択肢
ここまでのチェックリスト、他人のサイトなら迷わず □ を付けられます。ところが 自分のサイト になると、手が止まる項目が出てきます。「色が散らかっていないか」「文字が読みやすいか」——見慣れているぶん、客観的に判断しづらいのです。自分では気に入っているデザインほど、粗が見えなくなります。
そんなときに便利なのが、自動チェック です。yorunoma に URL を入れると、配色・フォント・コピー・レイアウト・動きの 5 要素が どうなっているか を自動で読み解き、言語化してくれます。「色数はいくつで、それぞれどんな役割か」「本文はどのくらいのサイズ・行間か」——チェックリストで自分では判断しづらかった項目の、答え合わせ に使えます。手作業のチェックリストと自動チェックを組み合わせれば、点検の精度がぐっと上がります。しかも、見慣れて麻痺した自分の目では拾えなかった発見が出てくることもあります。
ひとつ正直に言うと、yorunoma は「ここが正解／不正解」と採点する道具ではありません。出すのは、点検を助ける 手がかり（要素がどうなっているかの解読） です。最終的に「これで良し」と判断するのは、サイトの目的を知っているあなた自身。チェックリストの答え合わせをしてくれる相棒、くらいに捉えると、ちょうどいい距離感です。
yorunoma で実際にチェックすると
実際に yorunoma に URL を入れると、チェックリストの 5 視点にあたる要素が、まとめて読み解かれます。
たとえば 配色 では、使われている色が 1 色ずつ、役割（ベース・アクセントなど）と占有率つきで解読されます。「色数が絞られているか」「役割が分かれているか」というチェック項目の答えが、一目で分かります。コスメ LP を分析すれば、主役のミディアムピンク（#cf5074）が「どこに・どれくらい・どんな印象で」使われているかまで言語化されます。
コピー では、キャッチ・本文・CTA の役割が分類され、「最初の一言で何のサイトか伝わるか」を確かめられます。フォント・レイアウト・動きも同じように読み解かれるので、手作業では時間のかかる 5 視点のチェックリストが、URL 1 つで一度に答え合わせ できます。「どこを直せばいいか」の当たりが、ぐっとつけやすくなります。
こんな使い方
デザインチェックリストは、次のような場面で役立ちます。
- 自分のサイトを点検する — チェックリストで手作業で点検しつつ、判断しづらい項目は yorunoma で答え合わせ。「なんとなく気になる」が「ここを直せばいい」に変わります（分析は全プランで使え、登録なしの無料体験でも試せます）。
- お手本サイトをチェックして学ぶ — 「良い」と感じるサイトをチェックリストで点検すると、配色・フォント・レイアウトのどこが効いているかが言語化でき、参考サイトを見る目が変わります。
- さらに、優先度つきの改善点まで欲しいとき — 自分のサイトについて「どこから直すと良くなるか」を優先度つきで出す「診断」は Pro プラン以上、2 サイトを並べて見比べる「比較」は Premium プランの機能です。
チェックリストは、完璧を目指すための減点表ではなく、気になる場所を見つけるための地図 です。気楽に □ を付けていくうちに、直しどころが見えてきます。
よくある質問（FAQ）
無料で使えますか。
はい。URL を入れて配色・フォント・コピー・構造・アニメの 5 要素を読み解く「分析（解析）」は全プランで使え、登録なしの無料体験で 1 回試せます。まずは気になっているサイトの URL を 1 つ入れてみるところから始められます。それ以降はプランによって 1 か月に解析できる回数が変わります。詳しくは 料金プランを見る からご確認ください。
誤字脱字やリンク切れもチェックできますか。
いいえ。yorunoma は 見た目のデザインを点検するツール です。誤字脱字・リンク切れ・表示速度・ブラウザ対応といった技術的なチェックは対象外です（それらは制作実務の点検や、専用の検証ツールの領域です）。yorunoma が扱うのは、配色・フォント・コピー・レイアウト・動きという、デザインの中身です。
良いか悪いかを判定してくれますか。
いいえ。yorunoma は「良い/悪い」を採点・断定する道具ではなく、チェックの 手がかり（要素がどうなっているかの解読） を出す道具です。最終的に「これで良し」と決めるのは、サイトの目的を知っているあなた自身です。そもそもデザインの良し悪しは目的によって変わる面もあるので、断定ではなく「点検の材料を揃える」という立て付けにしています。
自分のサイトもチェックできますか。
はい。自分のサイトの URL を入れれば、同じように 5 要素を読み解けます（分析は全プランで使え、無料体験でも試せます）。自分のサイトについて優先度つきの改善点まで出す「診断」は Pro プラン以上、2 サイトを並べて見比べる「比較」は Premium プランの機能です。
まとめ
デザインの良し悪しは、感覚ではなく チェックリスト で点検できます。配色（色数・役割）・フォント（書体数・読みやすさ）・コピー（何屋か伝わるか）・レイアウト（余白・整列・優先順位）・動き（過不足）——この 5 視点で「□ 〜になっているか」を 1 項目ずつ確かめれば、「なんとなく気になる」が「ここを直せばいい」に変わります。自分では判断しづらい項目は、yorunoma で答え合わせを。気になったら、いま見ているそのサイトの URL を 1 つ入れるだけ。1 分もかからず、5 視点のチェックリストの答え合わせができます。完璧を目指す必要はありません。まずは 1 項目、気楽に点検するところから始めてみてください。
あわせて読みたい
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。