初心者が陥りやすいデザイン作成時のミス

私がデザインを初めたてのころにレビューで指摘されていた点、今自分がレビューするときに意識して見ている点についてまとめました。

だいたいが下記項目に分類されるかと思います。

• グルーピング
• 強弱
• 色のバランス
• あしらいのトンマナ
• 視線誘導
• フォントの利用ルール
• エリアアライメント

それぞれの項目についてさらに詳しく解説していきます。

グルーピング

これはデザイン4原則の近接（Proximity）にあたります。
関連する情報をまとめて一つのかたまりとして認識できるようにすることです。この時に特に意識するのが線を多用して要素区切らないようにすることです。
あくまで空白のリズムで要素のまとまりが表現できるようにまずはレイアウトしてみましょう。

強弱

これもデザイン4原則の強弱（Contrast）にあたります。
何を目立たせ、何を目立たせないかを整理し、その上で要素に対して視覚的に強弱を施します。
自分が思っているよりも大きくするように心がけています。普段からビジュアルデザインを見ているデザイナーは目が肥えていて、少ない強弱でも判別ができるようになっているので。

色のバランス

よく画面単体をデザインすると視点が近視眼的になりバランスについて盲目になっていることがあります。今している要素が全体的に見てどうなのかという視点が大事です。
デザインツールであれば引きにして見る、物理的に離れてみる、薄目にしてみるのような方法で確認してみましょう。

また、強弱をつけるのに色を使用しすぎてしまいバランスが崩れてしまう状況が見受けられます。ガイドラインがあればそれに従い、ない場合は自分で割合を決めてやっておき指針として持っておくのが大事です。

あしらいのトンマナ

これは各要素に対してのあしらいが統一感があるかどうかになります。つい初心者の頃は色々なものを詰め込みがちなので注意しましょう。せっかくインプットしたものは適切な要素・タイミングで使いましょう。

視線誘導

人間の視線の動かし方は色々とありますが、ことアプリやWEBサイトでベースとするのはFとZになります。
読んで欲しい順番がこの流れに沿っていない場合は、情報が見つけにくくストレスを与えてしまうため気をつけましょう。

フォントの利用ルール

これは割と当たり前なので記載する必要もないですが、ガイドラインがあればそれに従い、なければ3つ以内に収まるようにしましょう。たくさんのフォントを利用してのデザインは難易度がかなり高いですし、WEBフォントを読み込む場合は数が増えれば増えれるほどページの表示スピードなどにも影響を与えてしまいます。

エリアアライメント

デザイン4原則の整列（Alignment）は気をつけているが、数値的には揃っていても視覚的に揃っていない場合があります。
その場合は単に数値的に正しい値に揃えるのではなく、要素のバランスを見てずらすことが大事です。