【保存版】これを意識すればデザインはさらによくなる! デザインを機能的にさせる40の項目

スポンサーリンク
design

デザインはお絵かきをして見栄えを整えることではなく、ターゲットユーザーにコンテンツに含まれる内容を伝え、伝わり、使ってもらうためのもの。つまり機能であると考えます。

伝えたいものが伝わるような技法が考えられているか、また、情報の優先順位をデザインの技法によって表現できているかなど、依頼者と制作者両方が意識して作り上げればきっと良いデザインに近づくと考えます。

なんとなく良いではなく、以下チェック項目がきちんと考えられているかをチェックし、デザインが機能しているかを良し悪しの判断としていただければ幸いです。

また、ありがちなのが、先にPC版をデザインしてよく見えるのだが、スマホ版にしてみると情報の優先順位が崩れたり、1カラムで表現できなかったりする場面があります。PC版は面積が広い分構成しやすですが、先にスマホ版でデザインしてもらって情報の優先順位や操作などをチェックすることをおすすめします。

写真選定やグラフィック

  • 選定した写真は言葉に置き換えても通用するものにする(写真も言い換えれば情報である)
  • 写真の色調やコントラストは適切に処理されているか
  • 拡張子は適切か(可逆圧縮、不可逆圧縮は適切か。例写真なのにgifにしているとか)
  • 本当にその写真は必要か(スペースがあまったから入れるとかではダメ)
  • なぜそのグラフィックを選択したのか(フラットデザイン、リッチデザインどちらでも良いがなぜ選択したかを説明できるか)

色彩設計

  • 基準色が設計されているか(例:ロゴの色を基準にしていますとか)
  • ドミナントカラーは設計されているか(支配する色。このサイトは何色の印象になっているかが説明できること。ターゲット目線で)
  • 基準色を元にプライマリカラー、セカンダリカラー(類似の調和)が設定されているか
  • アクセント色は適切に設計されているか(補色の活用。また対比の調和の活用)※調和していなければダメ
  • アクセント色を乱発してないか(たくさん使っている時点でアクセントではない)
  • 色の統一(行動が同じなのに色が異なるor行動が異なるのに色が全部同じなのはNG)
  • 色立体視を意識しているか(赤と青、赤と緑を隣り合わせにしない)
  • 色の性質を活かしているか(高級感を伝えたいのにやたらカラフルとか)
  • 視線誘導を意識しているか(目立たせようとしてないものが目立っているとか、ボタンより周りのデザインの方に目が行ってしまうとか)

フォントや文章

  • 書体の使い分けができているか、なぜそれを選択したか(ゴシックと明朝、セリフとサンセリフ)
  • 複数のフォントが乱立してないか
  • 可読性 文章の読みやすさを考慮しているか(1行あたりの文字数や行間。数字は半角にし、カンマをつける)
  • 視認性 パッと見た時に認識のしやすさ(数値にはカンマ)
  • 判読性 誤読がないか(年月日は極力4/1などにしない)
  • ジャンプ率は適切か(ジャンプ率が大きすぎたり小さすぎたりしてないか)
  • カーニング、トラッキング処理はされているか
  • 表記揺れなど

レイアウト(構成)

  • 情報過多、情報の干渉はおきてないか(削ぎ落としすればよいというわけではない)
  • 周辺視野で画面全体の概略がわかるか(あれもこれも強調してないか)
  • イレギュラーを活かせているか(例:四角い要素でたまに丸いものがあると強調される。しかし乱発すると見にくいものになる)
  • 飛ばし読みできるか、また、情報の選択はしやすいか(欲しい情報にジャンプできる設計か。進んでみないとわからないようではいけない)
  • レイアウトに数理的秩序はあるか(何を基準にしているか。数理的秩序はあるか)
  • 階層深度は適切か(奥、手前のルールがおかしくなってないか)
  • 情報のグルーピングは適切か
  • グルーピングの手法を活かしているか(揃える、まとめる、余白をつけてグルーピングできているか)

アイコン

  • アイコンは標準的な視点で描かれているか(3次元にしない)
  • そのアイコンは必要か(なぜアイコン化したかが説明できるか)
  • 行動アイコンなどは右脳で伝わるものになっているか(考えないとわからないような複雑なアイコンでは意味がない)
  • アイコンに一貫性はあるか(単色だったりカラフルだったり、リアルだったりするものが混在したりしてないか)

操作

  • シグニファイアを意識しているか(リンクや次の動作がわかるようにしてあるか)
  • ページ遷移、ページ内遷移、部分遷移がわかるものになっているか(全部同じ矢印になっていてはダメ)
  • ボタンは48px以上確保されているか(スマホ)
  • 予想と違う遷移やアクションになってないか(タップできそうなのにできない、スワイプに気がつかないではダメ)

ブラウザ

  • スマホとPCで情報に差異がないか
  • スマホのファーストビューでターゲットユーザーが興味を示すものになっているか

コメント