頑張って色や装飾を足したのに、なぜかまとまらない。「ダサい」と感じる原因は、センスよりも情報の優先順位やルールのばらつきにあることが多いです。直す場所を具体的に見ていきましょう。
よくある原因は、強調のしすぎ、揃え方のばらつき、余白不足、色やフォントの使いすぎ、文字の読みにくさです。一度に全部を変えず、主役を決めて一つずつ直します。
装飾を減らすと地味になりませんか？
PORT編集部主役がはっきりすれば、色や装飾が少なくても印象に残ります。まず情報を伝え、そのうえで必要な表現を足しましょう。
- 原因1｜何もかも目立たせている
- 原因2｜揃える位置がばらばら
- 原因3｜余白が足りない
原因1｜何もかも目立たせている
見出し、価格、日付、ボタンをすべて太字と強い色で見せると、どこから読めばよいか分かりません。まず一番伝えたい内容を一つ選び、その部分だけ大きさや色で強調します。補足の装飾は控えめにします。
| 違和感 | よくある原因 | 最初の修正 |
|---|---|---|
| ごちゃごちゃ | 強調が多い | 主役を一つに絞る |
| 雑然とする | 軸がずれる | 左端を揃える |
| 窮屈 | 余白が少ない | 内容を整理して間を空ける |
| 読みにくい | 文字と背景の差が小さい | 文字を濃くする |
装飾を減らすと伝わる
右は見出しを一つだけ主役にし、開催情報をまとめています。文字色を増やさなくても要点が伝わります。
原因2｜揃える位置がばらばら
見出しは少し右、本文は左、ボタンはなんとなく中央。こうした小さなズレが積み重なると雑然と見えます。左端や中央など一つの軸を決め、役割が同じ要素を揃えましょう。
原因3｜余白が足りない
文字を端まで広げ、各情報を同じ距離で並べると窮屈になります。画面の外側に余白を残し、見出しと本文を近づけ、別の話題との間を広げます。説明が入りきらなければ、削るかページを分けます。
原因4｜色とフォントのルールがない
一枚に何色も使い、見出しごとに別の書体にすると、まとまりが失われます。まず背景・文字・強調の役割を分け、フォントも本文と見出しを基準に揃えます。例外は「この情報を強調するため」と説明できるときだけにしましょう。
原因5｜文字が読みにくい
写真の上の細い文字、白背景に淡いグレーの文字、小さすぎる注釈は、画面では見えにくい場合があります。スマホで実寸に近いサイズで見て、文字と背景の差を確かめます。
直す順番を決めよう
①誰に何を伝えるか、②最初に読む場所、③情報のまとまり、④揃える線、⑤色と装飾。この順番で見直すと、細かな装飾に時間をかける前に大きな原因を直せます。
実例｜一枚の投稿を順番に直す
背景に模様、文字色は4色、見出しも本文も太字。端は揃わず、読んでほしい内容が埋もれている。
背景をシンプルにし、見出しだけ強調。本文の左端を揃え、色の役割を文字・背景・強調に分ける。
直す手順
- 誰に何を伝える画像か一文で決める。
- 強調を一つ残し、ほかの装飾をいったん外す。
- 揃え方と余白を直し、最後に必要な色だけ戻す。
まとめ
「ダサい」を感覚だけで終わらせず、「どこが、なぜ読みにくいか」に変えると、改善の手順が見えてきます。
