Refactoring UIで公開された「Labels are last resort」より許可をもらい、日本語抄訳しています。
ユーザーにデータを表示するとき（特にベータベースから読み込むとき）、一般的なlabelプロパティを使って表示するという罠に陥りがちです。
このアプローチの問題点は、データをなにかしらの階層構造で表示することが難しくなること。どのデータも等しく重視されるようになります。
ラベルはまったく必要ないかもしれない
多くの場合、書式を見るだけで、そのデータが何であるか直感的に理解できます。
たとえば、nanashi@example.comはメールアドレス、(619)765-4321は電話番号、￥980は価格といった具合です。
フォーマット形式が分かりにくいときは、コンテンツにすでに含まれていることもよくあります。たとえば、従業員名簿で誰かの名前の下に「カスタマーサポート」と記載されていたら、ラベルがなくても、その人が働いている部署であることが分かるでしょう。
ラベルなしでデータを表示することができれば、重要な情報や識別情報を強調することがはるかに簡単になり、インターフェースが使いやすくなると同時に、より「デザインされた」ものに感じられるようになります。
ラベルと値を組み合わせよう
データの一部がラベルなしではわかりにくい場合でも、値に特定のテキストを追加することで、ラベルの追加を回避できることがよくあります。
たとえば、ショッピングサイトのインターフェースで在庫を表示したいとき、「在庫 : 12」ではなく、「残り在庫12個」のようにします。
もし不動産向けアプリを手掛けているのであれば、「ベッドルーム : 3」のようなときは、単に「3ベッドルーム」としましょう。
ラベルと値を1つのユニットにまとめることができれば、わかりやすさを犠牲にすることなく、各データに個別のスタイルを追加しやすいというメリットも。
ラベルはいつも二の次で
たとえばダッシュボード画面のように、似たようなデータを複数表示していながら、パッと見ただけでゆーざーに理解してもらう必要があるときもあるでしょう。
そのような状況ではラベルを追加しますが、あくまでのコンテンツのサポートとして扱います。データそのものが重要であって、ラベルは分かりやすくするためにすぎません。
ラベルを小さくしたり、文字のコントラストを下げたり、フォントのウェイトを細くするのも良いでしょう。またはこれら3つを組み合わせて、とにかくラベルを強調しないよう心がけましょう。
ラベルを強調したいときは？
ユーザーがラベルを探すことが分かっているインターフェースをデザインしているときは、データーの代わりにラベルを強調するのは理にかなっていると言えます。
たとえば製品の技術仕様書のような、情報量の多いコンテンツではよくあることです。
ノートパソコンに搭載されているモデムを調べようとしているユーザーは、おそらく「インテル」や「クアルコム」といったキーワードではなく、「モデム」や「WiFi」、「ワイヤレス」という単語を探すために���索しているはずです。
このようなケースでは、データをあまり強調しないようにしましょう。ラベルには濃い色を使い、値には少しだけ薄い色を使うだけで十分なことが多いのです。
前回の内容と合わせて、今後のWeb制作に活用してみてはいかがでしょう。
オンラインツールやFigmaプラグインを活用することで、効率的でより短時間で、プロのようなUIデザインを手軽に手に入れることもできます。自分の用途に合ったツールをうまくワークフローに取り入れてみましょう。
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
