「なんか違う」を直せるようになる非デザイナーの見た目5原則
センスではなく原則で直します。余白・そろえる・まとめる・色数・文字の大小の5原則と、違和感をAIに伝える「感想＋場所＋方向」の言い方。
- 公開日
- 更新日
- 著者
- ペイ博士
「なんか違う」はセンスの問題ではありません。原則で診て、言葉で伝える— この2つができれば、素人っぽさは直せるようになります。
自分で作ったサイトを見て、間違ってはいないのに何かが物足りない。その違和感は正しくて、まだ言葉になっていないだけです。
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点です。どう感じるか、どこが、どっちへ直したいか。これがそろうと指示は一気に通ります。
感想だけだと、AIはどこを直せばいいか分からず、全体を無難な形に作り変えます。気に入っていた部分まで変わり、結局もとに戻すことになります。
BEFORE
なんかダサい。もっといい感じにして。
AFTER
見出しまわりが、かたい印象に見えます。もう少しやわらかい雰囲気にして、余白を広めにとってください。
感想（かたい印象）＋場所（見出しまわり）＋方向（やわらかく・余白を広く）。3つそろうと、直す範囲が限定されます。
BEFORE
メニューのところが見づらい。
AFTER
料理の一覧が窮屈で読みづらく感じます。1品ごとの上下の間隔を広げて、値段の色を1色だけに絞ってください。
「見づらい」で止めず、窮屈なのか・うるさいのかまで踏み込むと、7つの質問がそのまま指示の材料になります。
言葉が出てこないときは「形容詞＋お手本」
方向を言葉にできないときは、なりたい雰囲気を形容詞で伝え、参考にしたいサイトのスクリーンショットを添えます。「落ち着いた」「やわらかい」のひとことでも、お手本と一緒なら伝わります。「余白の取り方と色の絞り方だけ寄せてください。文章や写真はそのままで」と範囲も指定すると、狙った所だけが変わります。
参考にしてよいのは、余白・配色・構成といった雰囲気の要素までです。文章・写真・ロゴ・イラストをそのまま真似ることはできません。「参考」と「複製」の線は引いてください。
鉄則は、一度に1つだけ変えることです。余白を直して見比べ、次に色、最後に文字の大小。まとめて変えると、良くなった理由も悪くなった理由も分からなくなります。1つずつなら「戻して」の一言で引き返せます。
指示そのものの組み立て方はAIへの頼み方で結果が変わる — 伝わる指示5つの型にまとめています。デザインに限らず、依頼のたびに使える型です。
まとめ：直せる人は、言葉を持っている
デザインを直せる人との差は、センスではなく語彙です。「なんか違う」で止まるか、「窮屈だ、見出しまわりだ、余白を広げたい」まで言えるか。5原則で診て、7つの質問で正体を探し、感想＋場所＋方向で伝える。この順番で、違和感は指示に変わります。
そもそも自分で作るか、人に頼むかを迷っている段階ならホームページは外注と自作でどう違う？で、公開後に自分で直せるかどうかという観点から整理しています。
Author
ペイ博士
理学博士・AIエンジニア
実名・経歴は詳しいプロフィールでご覧いただけます。
Read Next
