ブサイクなUIデザインを劇的に改善するための10のチェックリスト

お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。

左右の余白は揃っているか

左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪い例を探すのに苦労しましたが、MoneyF●rwardさんが題材として非常に優秀でした。左右の余白は14~20ptの間で揃えるのが定石です(迷ったら16ptにしておこう)。どうしても左右の余白を持て余してしまうという場合は右の改善例のように中央揃えに逃げるのも手です。

フォントの大きさは正しいか

fontサイズはまず、「読ませるテキストの大きさ」を決めてから、それを基準に組み立てていきます。読ませる文字、webでいう<p>タグは14~16ptに設定し、その文字とのバランスを見て<head>や、ボタン内のテキストサイズなどを決定していくととても楽です。アプリで使用できる最小テキストサイズや、最大テキストサイズなども頭に入れておくと良いでしょう。

LineHeightって知ってる?

行間を意味する「LineHeight」。特に長く、読んでほしいテキストの行間はゆったり目に取りましょう。行間が詰まっているとそれだけで胡散臭いアプリに見えてしまいます、気をつけましょう。

ボーダー色は濃すぎないか

ボーダーが濃すぎたり、主張しすぎているというのが初心者に多く見られます。ボーダーはあくまでレイアウトで実現が難しい場合の境目の強調に使用するため、存在をできるだけ隠したほうが良いです。rgba(0,0,0,0.12)を1ptで使用するのをおすすめしています。また、右の改善例のように、borderを使わなくていい場合は極力使用を避けるようにするとぐっとクオリティが高まって見えます。

Drop Shadowは甘え

要素の強調という目的に対してDrop Shadowを使用するのはおすすめできません。X軸、Y軸、Z軸を意識してレイヤーを並べていく工程で論理を破綻させる片棒をかつぐことになりかねません。安直にシャドーを使用せず、シャドー以外の方法で要素を強調することが出来ないか真剣に頭を捻らせましょう。

3つ以上のセルを縦に並べるのも甘え

読んでほしい情報をただ単に縦に並べるのも初心者に多く見られる傾向です。アイコンを付けたところで同じです。ユーザーに息継ぎをさせるために、情報にとって適切なレイアウトを考え抜きましょう。

アプリ特有の配色セオリーから外れていないか

メインカラー、アクセントカラー、4つの黒と白をうまくつかうことで公式っぽい印象を与えるアプリを作ることが出来ます。詳しくはこちらの記事をご覧ください。

黒とグレーを正しく使えているか

グレーを使うことを意識しはじめ、脱初心者の域に到達しようとしている人に多く見られるのが、グレーを多用しすぎてしまっているということです。読んでほしい文字や、大切な情報は必ず上記の記事で説明した4つの黒の中で最も濃いものを使用しましょう。

「カタマリ」を意識できているか

これが一番難易度が高いのですが、共通の情報の塊ごとに見えない箱を作り、それらを意識してレイアウトすることが、UIのレイアウトに置いて最も大切なことです。配色記事で紹介した「altoカラー」や、borderも最後の手段として活用しますが、基本的には「縦の余白」によって情報の塊を表現することが大切です。

また、塊を意識してレイアウトしていくことで、コンポーネントを分解、統合することも安易にできるようになるため常に塊の意識は頭に入れておいてください。

塊意識を習得する最も効果的な方法がトレースです。以下の記事を参考にして、好きなアプリをどんどんとレースしましょう。

さいごに

僕も人のアプリを勝手にリデザインしたりしていますが、やっていることは上記の10項目を1つずつ確認して実践しているだけです。人工知能でもできそうな単純作業ですね。基本的には数字で結果が出ればそれが正義なのですが、「なんか胡散臭そう」という印象を与えないためにもある程度はUIビジュアルの質は担保しておきたいところです。ぜひ上記の10項目を活用してみてください。それでは。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

775

Taiki IKEDA

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
36つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。