配色を直しても、垢抜けなかった — Webデザイン初心者がつまずく「文字組み」の話

1.「配色のせい」だと思っていた

前回の配色編では、色は「誰に・何を届けたいか」から逆算して決めるという話を書いた。
ターゲットの一日を想像して、若葉色を選んだ。3段階の濃淡で画面を組み上げて、お試し購入ボタンだけ赤と黄で差し色にする。論理的に決めたつもりだった。
それでも、画面を眺めると、なにか違和感が残った。
「なんか、まだ素人っぽい」
背景や差し色をいくら微調整しても、その感じが消えない。色のせいだと思って、何度も色だけを直していた。
でも、原因は色ではなかった。
文字の置き方だった。

2. 文字組みは「センス」じゃなく「順番」

垢抜けない文字組みには、共通点がある。

「全部の文字が、同じ強さで並んでいる」状態。

タイトルも本文もキャッチコピーも、サイズが似ていて、色も同じで、強弱がない。読み手は、どこから読めばいいのか分からない。

プロは、情報に優先順位をつけている。

要点は3つ。

(1) 助詞（て・に・を・は）を一段小さくする
「お試しセット【を】注文」と書くとき、「を」だけ小さくすると、視線が「お試しセット」と「注文」に集まる。

(2) 数字や固有名詞を主役にして大きく
「3,000円で始まる、無農薬野菜の食卓」と書くとき、「3,000円」だけを2サイズ上げると、印象が変わる。

(3) 一番伝えたい一文だけを残して、あとは削る
書きたいことを全部書くと、結局なにも伝わらない。「これだけは伝えたい一言」を決めて、ほかは削る。

センスではない。順番のルールがあるだけ。

3. 余白は「何もない場所」じゃない

初心者ほど、画面を情報で埋めたくなる。
「せっかくスペースがあるんだから」「もう少し説明を足したい」「ここに写真を入れたら」——気がつくと、画面が情報でぎっしり埋まる。
でも、余白は視線の通り道だ。
「間」があるから、主役が際立つ。
詰めすぎが、素人見えの最大要因。
行間を1.5にする、要素と要素のあいだを少しだけ空ける、見出しの上下に空気を入れる。
「意図して空ける」だけで、同じ文章が急に読めるようになる。

4. あしらいは「足す」より「削る」

線、囲み、装飾、アイコン。
文字組みに自信がないほど、足したくなる。
「ここに線を引けば締まるかな」「囲みを入れれば目立つかな」——足せば足すほど、画面はうるさくなる。
プロのあしらいは、「視線を導くため」だけに、最小限置かれている。
引き算で整える。
「これがないと伝わらない」一つだけを残して、ほかは消す。
それだけで、文字組みは静かに整っていく。

5. なぜ「ちょっとの工夫」で変わるのか — Design with Story

文字組みは、小手先のテクニックに見えて、その実は「読む人への配慮」そのもの。

どこを大きくするか、どこを小さくするか、どこに余白を置くか——その判断は、「相手にまず何を受け取ってほしいか」の判断と同じ。

つまり、文字組みは「想いを翻訳する」作業。

「今日いちばんのあなたに、今日いちばんのデザインを」

kyouichi design works のコンセプト「Design with Story」は、配色だけでなく、文字組みにも宿っている。

文字の大きさひとつで、読む人への配慮が伝わる。

それが、垢抜けと素人見えの分かれ道だった。

さいごに

あなたのサービスの「いちばん伝えたい一言」を、いちばん伝わる形に組み直すお手伝いをしています。

▶ 公式LINEで相談する（@kyouichi_design）

文字組みの前に決めておくことは、こちらに書きました。
▶ 【保存版】想いが伝わるLPの「流れ」— ストーリー設計の考え方

— kyouichi design works / kris

マガジンフォローのお願い

「Design with Story（コラム）」は、設計判断と思考のプロセスを記録するマガジンです。
これからも案件ごと・学習ごとの設計の話を書いていきます。
よかったらフォローしてもらえると嬉しいです。