「なんか違う」を直せるようになる非デザイナーの見た目5原則
センスではなく原則で直す方法。余白・そろえる・まとめる・色数・文字の大小という5つの原則と、違和感をAIに伝える「感想＋場所＋方向」の言い方を解説します。
- 公開日
- 更新日
- 著者
- シュン博士
結論から言えば、「なんか違う」はセンスの問題ではありません。原則で診て、言葉で伝える— この2つができれば、素人っぽさは直せるようになります。
自分で作ったサイトやチラシを見て、間違ってはいないのに何かが物足りない。そう感じたことがあるなら、それは正しい違和感です。ただ、まだ言葉になっていないだけです。この記事では、見た目を判断するための5つの原則と、違和感の正体を探す質問、そしてそれをAIに伝える言い方を整理します。
The Real Cause
素人っぽく見える原因は、たいてい「足りない」ではなく「多い」
物足りないと感じると、人はつい足そうとします。飾りを増やす、色を足す、文字を大きくする。ところが実際に素人っぽさをつくっているのは、その逆です。色が多い。文字サイズの種類が多い。要素が詰まっていて、休む場所がない。
つまり、最初にやるべきは足すことではなく、減らして、そろえて、空けることです。この記事の5原則も、ほとんどが「減らす」方向の話になっています。
5 Rules
非デザイナーのための、見た目5原則
プロの世界には無数のルールがありますが、小さな商売のサイトなら、この5つでほとんど決まります。順番にも意味があります。上から順に効きやすく、上ほど直すのが簡単です。
余白をとる — 詰めるほど安く見える
ぎっしり詰まったページは、それだけで安い印象になります。スーパーのチラシが情報を詰め込み、高級ブランドの広告が広い余白の中に商品を1つだけ置くのは、狙っている印象が逆だからです。迷ったら、足すのではなく削って空ける。とくに、写真のまわりと見出しの上下は広めにとります。
そろえる — 左端・上端をそろえるだけで整う
見出し、本文、写真、ボタンの左端が数ピクセルずつずれているだけで、理由の分からない「ちぐはぐさ」が生まれます。中央ぞろえと左ぞろえを混ぜるのも同じです。そろえる対象は位置だけではありません。角の丸み、写真の縦横比、ボタンの大きさ、言葉づかい。そろっていること自体が、それだけで信頼につながります。
まとめる — 近いものは近くに、遠いものは離す
人は、近くにあるもの同士を「関係がある」と読み取ります。見出しとその本文がぴったり近く、次の見出しとのあいだが広く空いていれば、説明されなくても中身のかたまりが伝わります。逆に、全部が等間隔に並んでいると、どこからどこまでが1つの話なのか分かりません。行間をそろえるのではなく、関係の近さで間隔を変えるのがコツです。
色数を絞る — 基本2色＋強調1色まで
背景と文字の基本2色に、差し色を1つ。それ以上増やすと、にぎやかを通り越してうるさくなります。差し色は、いちばん押してほしいボタンや、ここだけは見てほしい見出しのために取っておきます。あちこちに使った時点で、それはもう強調ではありません。文字色を黒ではなく少し薄いグレーにするだけでも、印象は落ち着きます。
文字の大小をはっきりつける — 中途半端な差が一番よくない
人はページを読まず、まず眺めます。大きな文字だけを拾い読みして意味が通るなら合格です。よくないのは、見出しが本文より少しだけ大きい状態。大きくしたつもりが、読み手には差として届かず、ただ整理されていない印象だけが残ります。見出しは思いきって大きく、本文は落ち着いて。差をつけるなら、はっきりつけます。
Diagnose
「何か違う」を診る、7つの質問
5原則は「作る目」ですが、これを裏返すと「診る目」になります。モヤモヤしたら、自分のサイトをスマホで開いて、上から順に自分に聞いてください。たいていは、どこかで「これだ」が見つかります。答えが出た時点で止めて構いません。
- ① 窮屈に感じる？ → 余白不足。要素を詰め込みすぎているサインです（原則1）
- ② うるさく感じる？ → 色が多い。太字や飾りの使いすぎも同じ症状です（原則4）
- ③ 読む気がしない？ → 文章が長い、文字が小さい、段落が壁になっています（原則5）
- ④ ちぐはぐに見える？ → そろっていない。大きさ・角丸・言葉づかいの不統一です（原則2）
- ⑤ どこを見ればいいか迷う？ → かたまりが作れていない。間隔が全部おなじです（原則3）
- ⑥ 暗い・くすんで見える？ → 写真が暗い、または背景色と写真が合っていません
- ⑦ 誰向けか分からない？ → 言葉が一般論になり、お客様の顔が消えています
①から⑤までは、5原則がそのまま診断項目になっています。⑥と⑦は原則の外の話ですが、実務ではこの2つが原因のことも多いので入れてあります。とくに⑥は効きます。明るい写真1枚は、どんな装飾よりも印象を変えることがあります。
自分では気づけないときは、家族や知人に30秒だけ見せて感想を聞いてみてください。「何か違う」は、作った本人より他人のほうがよく見えます。聞くときは「どう思う？」ではなく、「窮屈？ うるさい？ 読む気がする？」と質問の形で渡すと、答えが返ってきやすくなります。
Tell AI
違和感をAIに伝える、3点セット
正体の見当がついたら、AIに直してもらいます。ここで効くのが「感想＋場所＋方向」の3点セットです。どう感じるか（感想）、どこが（場所）、どっちへ直したいか（方向）。この3つがそろうと、指示は一気に通りやすくなります。
感想だけを伝えると、AIはどこを直せばいいか分からず、全体を無難な形に作り変えてしまいます。あなたが気に入っていた部分まで変わってしまい、結局もとに戻すことになります。
BEFORE
なんかダサい。もっといい感じにして。
AFTER
見出しまわりが、かたい印象に見えます。もう少しやわらかい雰囲気にして、余白を広めにとってください。
感想（かたい印象）＋場所（見出しまわり）＋方向（やわらかく・余白を広く）。3つそろうと、直す範囲が限定されます。
BEFORE
メニューのところが見づらい。
AFTER
料理の一覧が窮屈で読みづらく感じます。1品ごとの上下の間隔を広げて、値段の色を1色だけに絞ってください。
「見づらい」で止めず、窮屈なのか・うるさいのかまで踏み込むと、7つの質問がそのまま指示の材料になります。
言葉が出てこないときは「形容詞＋お手本」
方向を言葉にできないときは、なりたい雰囲気を形容詞で伝え、参考にしたいサイトのスクリーンショットを添えます。「落ち着いた」「やわらかい」「きちんとした」といったひとことでも、お手本と一緒に渡せば方向は伝わります。あわせて「余白の取り方と色の絞り方だけ寄せてください。文章や写真はそのままで」と範囲を指定しておくと、狙ったところだけが変わります。
なお、参考にしてよいのは余白・配色の考え方・構成といった雰囲気の要素までです。文章・写真・ロゴ・イラストをそのまま真似ることはできません。「参考」と「複製」のあいだに線を引いてください。
直すときの鉄則は、一度に1つだけ変えることです。余白を直して見比べる、次に色、最後に文字の大小。まとめて変えると、良くなった理由も悪くなった理由も分からなくなります。1つずつなら「戻して」の一言で引き返せます。料理の味見と同じで、調味料は1つずつです。
AIへの指示そのものの組み立て方はAIへの頼み方で結果が変わる — 伝わる指示5つの型にまとめています。デザインの直しに限らず、依頼のたびに使える型です。
まとめ：直せる人は、言葉を持っている
デザインを直せる人とそうでない人の差は、センスではなく語彙です。「なんか違う」で止まるか、「窮屈だ、見出しまわりだ、余白を広げたい」まで言えるか。その差だけです。5原則で診て、7つの質問で正体を探し、感想＋場所＋方向で伝える。この順番をたどれば、あなたの違和感は指示に変わります。
そもそも自分で作るか、人に頼むかを迷っている段階ならホームページは外注と自作でどう違う？で、公開後に自分で直せるかどうかという観点から整理しています。
Author
シュン博士
理学博士・AIエンジニア
実名・経歴は詳しいプロフィールでご覧いただけます。
Read Next
