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

サイト構築 -デザイン

Post on:2021年7月6日

はじめに

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

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

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

1. スマホアプリではタブバーを常に表示する

ユーザーがアプリ内で2階層以上進んでいる場合は、すぐに必要な場所に戻れるようにタブバーを表示しておいてください。何度もタップするのはクールではなく、ユーザーにフラストレーションを与えます。

スマホアプリではタブバーを常に表示するようにして、不要なタップバックを避けるように設計しておきましょう。

左: タブバーなし、右: タブバーが常にある

2. ウェイトを使用するだけで、強調と階層を作ることができます

フォントはウェイトを使用するだけで、強調と階層を作ることができます。同じタイプファミリーで、ファミリーメンバーのウェイトを変えるだけで、フォントサイズが変わっていなくても、階層の変化を示すことができます。

フォントで強調と階層を作成するために必要なのは、ウェイトだけ十分な場合があります。そうですね、とてもシンプルなデザインのテクニックです。

フォントのサイズは同じ、ウェイトだけで強調や階層を示せます

3. スマホではタップ可能な領域を広くする

スマホのデザインでは、指で簡単にタップできるようにタップ領域を十分に大きくしてください。iOSとAndroidで推奨される最小のタップ領域は、下記の通りです。

44 x 44pt for iOS
48 x 48dp for Android

人間の指にはさまざまなサイズがあるので、余裕を持たせて、ユーザーがイライラせずに正確にタップしやすいようにしてください。

左: タップ可能な領域が狭い、右: 十分な大きさを確保

4. サイト内のナビゲーションは一貫性のあるものにする

ベストプラクティスに従い、サイト全体でナビゲーションの一貫性を保つようにしてください。わずかな変更であっても、ユーザーの認知的不協和音やフラストレーションの原因となります。

特定のタイプのサイトでは小さな例外があるかもしれませんが、大半のサイトではナビゲーションを一貫して維持してください。

上: 一貫性のないナビゲーション、下: 一貫性のあるナビゲーション

5. コンテンツが豊富なサイトでは検索を目立たせる

可能な限り、特にデスクトップで表示する場合は、コンテンツの多いサイトで検索が目立つようにしましょう。検索機能は、コンテンツの多いサイトで重要な役割を果たしており、注意を払う必要があるため、検索を小さなアイコンだけにして目立たないようにしないでください。

デスクトップで目立つように表示して、準備完了です。

左: 検索がアイコンだけで目立たない、右: 検索が目立っている

6. 適当にフォントサイズを選ぶのではなく Type Scaleを使う

フォントサイズを決める時はなんとなくではなく、迅速かつ実用的に、推測なしで定義する必要がある場合は、Type Scaleを使用すると便利です。その名の通り、Type Scaleはスケール係数（例: 1.25）に基づいて動作します。

使い方は簡単です。基本フォントサイズ（例: 18px）を設定し、それにスケール係数（例: 1.25）で乗算（または除算）し、上位階層（例: 見出しなど）または下位階層（例: キャプションやボタンなど）のフォントサイズを得るという方法です。Type Scaleを使用すると、調和のとれたテキストを作成することができ、タイポグラフィに一貫性、リズム、階層性をもたらすことができます。