プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.8

サイト構築 -デザイン

Post on:2021年8月3日

はじめに

次のプロジェクトのために効率的で美しいUIを作成するとき、デザインをすばやく改善するためにわずかな調整で済むことがあります。

UIのデザインにちょっとした一手間を加えるだけで、クライアント、ユーザー、そしてあなた自身が本当に満足できるものを作ることができるかもしれません。

第8弾となる今回のテーマは、アクセシブルです。前回までの小技は、以前の記事をご覧ください。

1. メッセージは正しい順序で構成する

メッセージはアクションの説明からではなく、ゴールを先に示すようにしましょう。ゴールとそれを達成するために必要なアクションを説明するときは、ゴールから文章をはじめます。

メッセージをこのように構成すると、メッセージが理解しやすくなり、ユーザーのミスを減らすことができます。

左: アクションの説明からはじめたメッセージ
右: ゴールからはじめ、その後にゴールを達成するために必要なアクションの説明

2. すべての要素のシャドウは一つの光源を元にする

UIデザインでシャドウを使用するとき、光源は一つになっていますか？
すべての要素のシャドウが一つの光源を元にしていることを確認してください。通常は上からが多いです。

異なる角度のシャドウは単純なミスかもしれませんが、デザインがずさんに見える可能性があります。わたし達が住んでいる世界には、太陽は一つしかありません。

画像のシャドウは同じ光源ですが、右上のアイコンのシャドウは異なる光源

3. ホワイトスペースでビジュアルヒエラルキーを構築

ホワイトスペース（空白）は、ネガティブスペースとも呼ばれ、デザインでバランスをうまくとり、ページ上にしっかりとした視覚的階層（ビジュアルヒエラルキー）を構築します。

ホワイトスペースが少なすぎると、視覚的な階層が完全に失われてしまい、ユーザーは気が散るような気分になってしまいます。読みやすさを保ち、スキャンしやすく、ユーザーの集中力を高めるには、ホワイトスペースのバランスが必要です。

左: ホワイトスペースが少ない
右: ホワイトスペースが十分にあり、視覚的な階層がある

4. 一行の長さを適切にすることで、読みやすさが向上する

本文をあつかう際、適切な行の長さを決めるのはバランスをとるのが難しいものです。1段組のページでは45-75文字が適切であると考えられており、その中間の66文字（文字とスペースの両方を含む）が最適であるとも言われています。

もちろん、フォントのサイズや行の高さも読みやすさに影響を与える要素ですが、行の長さについては45-75文字の制限を守っていれば問題ありません。

上: 一行の長さが長すぎる
下: 一行の長さは45-75文字の間にする

5. 空の状態を工夫することで、ユーザーの初期行動を促す

空の状態（エンプティステータス）は、ユーザーエクスペリエンスを向上させる上で非常に有益ですが、軽視されてしまうことがよくあります。空の状態のデザインを工夫することで、ユーザーが自分に役立つ情報・機能をすばやく見つけ、目標をより早く達成できるように、サイトやアプリを意図したとおりに使用する機会として利用しましょう。

ユーザーが最初に何をすべきかわからない状態にはしないで、どうすればよいのかを案内してください。