Posted at

画面デザインに関するメモ

More than 5 years have passed since last update.

デザイナー不在のプロジェクトに関わってる人も多いと思うのでシェアします。

何年か前、ユニバーサルデザインを考慮しないといけなかったときに調べたやつです。


色弱対応


  • ブルー系+イエロー系は安全圏。

  • 赤と緑はとにかく避ける。どうしても使いたい場合は明度で見分けがつくようにする。

  • 「楽しさ」を配色だけで表現するのは難しい。レイアウトやイラストで工夫する。

  • パステルカラーは避ける。


その他の注意


  • 色による意味づけをする。意味のない配色は見づらい。

  • ただし、色だけによる情報伝達は避ける。

  • 文字、絵、背景を分ける。

  • 説明が必要なアイコンは好ましくない。

  • 〒など、日本人にしか通じない記号を使ってはいけない。

  • エフェクトにも意味づけが必要。

  • エフェクトの多用は禁物。

  • 視線の流れを意識してレイアウトする。


    1. 画面全体

    2. 四隅

    3. 左上→右上→左下→右下(Z型の視線)



あとは、AndroidとかiOSのアプリであれば画面デザインのガイドラインに従う、という感じ。