Webサイトやバナーをデザインしていると、
「間違ってはいないはずなのに、なんか変…」
「それぞれは悪くないのに、全体を見るとしっくりこない」
そんな状態になることがあります。
私自身、デザインをしていて「何かがおかしいけれど、どこを直せばいいのか分からない」と手が止まることがあります。
今回は、そんなときにチェックしたいポイントと対処法をまとめてみます。
① 余白がバラバラになっている
「なんか変」の原因として、まず確認したいのが余白です。
例えば、
見出しと文章の距離
カード同士の間隔
セクション上下の余白
画像とテキストの距離
これらが場所によってバラバラだと、きれいに作っているつもりでも全体がまとまりにくくなります。
対処法
一度デザインを細かく見るのをやめて、余白だけに注目して全体を見るようにします。
「同じ役割の余白は同じくらいになっているか?」
「関連するもの同士は近く、別のグループは少し離れているか?」
と確認すると、違和感の原因を見つけやすくなります。
② 揃える位置が微妙にズレている
文字や画像の開始位置が少しずつズレているだけでも、デザインは落ち着かなく見えます。
特にWebデザインでは、
左端・中央・右端などの基準を揃えること
がとても大切です。
対処法
「何を基準に揃えているのか」を確認します。
例えば、見出し・本文・ボタンの左端を揃えるだけでも、かなり整って見えることがあります。
デザインがしっくりこないときほど、装飾を追加する前に位置を揃えることを意識したいです。
③ 文字の強弱が多すぎる
大きな文字、小さな文字、太字、細字、色付き文字…。
情報を分かりやすくしようとして強調を増やしすぎると、逆に「どこを見ればいいの?」という状態になることがあります。
対処法
まず、
「このエリアで一番見てほしいものは何か?」
を1つ決めます。
そこを一番強くして、それ以外は少し抑える。
全部を目立たせるのではなく、優先順位をつけることで視線の流れが作りやすくなります。
④ 色を使いすぎている
色も「なんか変」の原因になりやすいポイントです。
アクセントカラーを追加しているうちに、
「ここにも色が欲しい」
「こっちも目立たせたい」
と色が増えてしまうことがあります。
対処法
一度、
ベースカラー・メインカラー・アクセントカラー
に整理してみます。
特にアクセントカラーは、ボタンや重要な数字など、本当に目立たせたいところに絞ると全体がまとまりやすくなります。
⑤ 要素を詰め込みすぎている
デザインが寂しく見えると、つい何かを追加したくなります。
でも、
「なんか変だから足す」
を繰り返していると、さらにまとまらなくなることも。
対処法
そんなときは、足すのではなく一度引いてみるのがおすすめです。
背景色をなくす。
枠線をなくす。
アイコンを減らす。
文字を少し減らす。
装飾を1つ外してみる。
それだけで、急にすっきりすることがあります。
⑥ パーツではなく「全体」で見る
作業中はどうしても、今作っている部分だけを見続けてしまいます。
すると、
「このカード単体ではかわいい」
「この見出し単体ではいい感じ」
なのに、ページ全体では統一感がない、ということが起こります。
対処法
ある程度作ったら、画面を縮小してページ全体を眺めてみるようにします。
細かい文字を読むのではなく、
色のバランス
余白
セクションの高さ
情報量
視線の流れ
を見るのがポイントです。
少し離れて見ることで、作業中には気づかなかった違和感が見つかることがあります。
⑦ それでも分からないときは、一度離れる
長時間同じデザインを見ていると、だんだん何が良くて何が悪いのか分からなくなることがあります。
そんなときは無理に修正を続けず、少し時間を置いてから見直します。
翌日に見たら、
「ここ、明らかに余白がおかしい!」
と一瞬で気づくこともあります。
「なんか変」は、直すためのヒントかもしれない
デザインをしていると、「何か変だけど理由が分からない」という場面は何度もあります。
そんなとき、すぐに装飾を追加するのではなく、
余白 → 揃え → 文字 → 色 → 情報量 → 全体
の順番で確認してみると、原因を見つけやすくなります。
最近は私も、「なんか変」と感じたときほど、何かを足すのではなく一度シンプルに戻してみることを意識しています。
違和感をそのままにせず、「なぜ変に見えるんだろう?」と考えること自体が、デザインの練習になるのかもしれません。