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