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

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。
プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。

第14弾は、レイアウトのグリッド・使いやすいフォーム・配色で悩んだ時に関するデザインのテクニックです。

UI & UX Micro-Tips: Volume Fourteen.
by Marc Andrew

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• 1. グリッドの間隔はハードではなく、ソフトに
• 2. フォームはインタラクションの後、すぐにフィードバックを提供
• 3. 配色で悩んだ時は、類似色
• 4. テキストの見栄えを良くするグリッドの使い方
• 5. 検索ボックスの幅は広くする
• 6. 素早いアクセスは、ナビゲーションをスティッキーに

はじめに

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

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

第14弾となる今回のテーマは、グリッド・フォーム・配色です。前回までの小技は、以前の記事をご覧ください。

• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.1
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.2
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.3
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.4
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.5
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.6
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.7
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.8
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.9
• 2021年、最も注目されたUIデザインのテクニックのまとめ
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.10
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.11
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.12
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.13

1. グリッドの間隔はハードではなく、ソフトに

デザインでグリッドシステムを使用するとき、ハードにするかソフトにするか？
私からのアドバイスは、ソフトにしましょう。

私は、8ptグリッドなどを使用してデザインをするときは、常に「ソフトグリッド」のアプローチを選択しています。「ソフトグリッド」は、要素間のスペースを8ptで増減するだけです。

「ハードグリッド」は要素を8pt刻みのグリッドのマス目に配置するアプローチですが、これは実装するときに実用的ではありません。

すべての要素をグリッドに配置するのではなく、スペースを定義する

2. フォームはインタラクションの後、すぐにフィードバックを提供

フォームの場合、特に多くの入力欄があるフォームでは、ユーザーがフォームを操作したときに即座にフィードバックが表示されるのは励みになります。

ただし、シンプルにしてください。入力欄に正しく入力できたかどうかを、ユーザーに知らせるだけでよいです。

たとえば、シンプルなアイコン、場合によっては短いテキストを表示するだけで、アクセシビリティが大幅に改善され、フォームに関するユーザーエクスペリエンスが向上します。

入力欄に正しく入力できたかどうかを、すぐに表示する

3. 配色で悩んだ時は、類似色

以前、アナログカラーについて説明しましたが、プロジェクトの配色を決めるのに苦労している人にとって、アナログカラーがいかに有益であるかを知っているので、もう一度触れておきたいと思います。

アナログカラーは隣接色相とも呼ばれ、カラーホイール上で隣り合う3色（もっと多くすることも可能）で、1つの支配色（マザーカラーとも呼ばれる）とその両側にある補助色で構成されています。

アナログカラーを使用すると、調和のとれた配色を見つけることができ、デザインの統一感や一貫性を高めることができます。

アナログカラーを使用すると、配色の調和がとれる

4. テキストの見栄えを良くするグリッドの使い方

このシリーズを読んでいる人は、私が8ptグリッドの大ファンであることを知っているでしょう。特にテキストの配置で、このグリッドルールを時々曲げる必要があることに気がつきました。

UIは数学的ではなく、視覚的に最適な見た目にすること望みますが、グリッドに従うことが必ずしもそれを可能にするとは限りません。たとえば、見出しに16pxの左パディングが必要だとしても、視覚的に整列させるために2px加えることがあります。

グリッドに固執する必要があるとは思わないでください。 たまにはグリッドから外れてみましょう。

数学的に整列させるのではなく、視覚的に整列させる

5. 検索ボックスの幅は広くする

可能な限り、検索ボックスはユーザーが入力した完全な検索クエリに対応できる大きさにしてください。

検索クエリが長くて検索ボックスに表示しきれなくなり、水平にスクロールするのを見たがる人はいません。

コンテンツが多いサイトでは特に、ヒーローセクションに幅が広い検索ボックスを設けるか、単に検索アイコンをクリックするとユーザーの検索クエリ全部を表示するのに十分な、幅が広い検索ボックスが表示されるようにすることができます。

検索ボックスは幅が広い方が使いやすい

6. 素早いアクセスは、ナビゲーションをスティッキーに

スクロールが少しのページの場合、ユーザーが下に行くときにナビゲーションバーを隠すのはクールです。

しかし、長いページの場合、特にサインアップや購入ボタンなどの重要なアクションに素早くアクセスする必要がある場合、ナビゲーションをスティッキーにすることが賢明です。

ナビゲーションバーに表示された重要なCTAから、ユーザーがどんどんスクロールしてしまうようなことは避けましょう。スティッキーにして、いつでもすぐにアクセスできるようにしてください。

右: ナビゲーションをスティッキーにしたので、重要なアクションにいつでもアクセスできる

デザインにちょっとした調整を加えるだけで、あなた自身とユーザーの両方にとってより良い結果が得られるということを少しでも理解いただけたらと思います。