誰も教えてくれないUIの基本！ 10のポイントでユーザーの視線をキャッチする。

見栄の良さと使いやすさを両立したデザインを作るには、たくさんのテクニックやルールが必要です。近年当たり前に囁かれるようになったUIデザインという言葉を、どのくらい理解していますか？

UIデザインとは？

アプリケーション/ウェブサイトの設計に置いて、ユーザーが操作する表面上の要素や要素同士の関係をデザインすることです。デザイナーは、常にユーザーとの”対話”を重視し、適切なインタラクションを構築しようと心がけます。

その結果、ユーザーは快適にアプリケーションやWebサイトを使用できます。優れたインターフェイス設計が、優れたUXを体現するのです。

UIデザインの基本的なポイントをチェックして行きましょう。

UIデザインの基本ポイント10選

1. 一貫性を持たせる

Prakhar Neel Sharma / dribble

一貫性が適応されるのは、デザイントーンだけではありません。特定のアクションを実行するためのジェスチャーにも、一貫性を持たせましょう。ページの遷移に一度ダブルクリックを用いたなら、ユーザーは基本的に、同様のアクションを起こすときにダブルクリックをするはずです。

一貫性は、配置、配色、類似性のあるラベルやメッセージの面においても重要です。突然トーンが変わると、別のサービスに飛んでしまったかのような不安を与えてしまいます。ユーザーを安心感を与えることで、トレーニングやサポートの手間を省くことができ、あなたにとっても、ユーザーにとっても喜ばしい利点となるでしょう。

2. 簡素なものにする

Justin Greene / greenhouse.com

優れたUIとは余計なものが取り払われ、シンプルなもの。説明文なしでもユーザーを誘導できます。もちろん高品質のコンテンツを用意する前に、興味をそそるような操作性を実現しましょう。

例えあなたが優れたバランサーでなくても、またプロのようなイラストを描く技術がなくても、基本を捉えたUI設計の力でコンテンツをより快適で目を引くものにできます。

3. コントラストをつける

Flatstudio / dribble

ユーザーが特定のリンクに集中できるように、コントラストを用いるのも一つの手です。特にニュースプロバイダ、ブログ、フォーラム等のコンテンツを含むサイトに有効です。多くの情報を扱うときの基本は、ユーザーがそれを瞬時にスキャンし、本当に必要な情報を見つけやすくなるように工夫する必要があります。

4. 空白をリフレッシュする

Emily Richard / dribble

UIデザインの制作現場に立っていると、できるだけ要素を詰め込みたくなる気持ちはとてもよくわかります。しかし、空白の重要性は無視できません。

空白があることによって、ユーザーはそこに “空気”や”ヌケ感”を感じ取ります。際立たせたい見出しや、画像とにコントラストが生まれます。ユーザーが何度もアクセスしたくなるような、クリーンさも演出できるはずです。

5. 簡単なUIにする

Miklos Barton / miklosbarton.com

ユーザーを第一に考えれば、巧妙なエフェクトよりもシンプルな機能のみを取り揃え、簡単なものにすべきです。ユーザーはエンジニアのように知識や経験があるわけではないのですから、凝ったアイディアを提供しても理解してもらいづらいです。

基本に立ち返り、あなたの製品が何を意味し、どのように使用されるのか考えましょう。説明を追加するなど、定期的なフィードバックも検討して下さい。視覚的・直感的な目印となるものを盛り込んで、ユーザーが難なく目的の情報に辿り着けるようにしましょう。

6. アイコンを使用する

アイコンは、ナビゲーションの役割を果たしいます。どんなWebサイトやアプリにも適しています。また、アイコンを取り入れることで、サイトにキャラクター性が出て親しみやすいものになるでしょう。

さらに、アイコンは見た目もキャッチーなので、ページをより生き生きと見せてくれます。混同を避けるため、テキストラベルを付けたり、相互に関連したアイコンをグループ化し、特定の動作に注意を向けさせることもできます。

7. レイアウトとフローを一般的なものにする

UI設計に置いて、レイアウトやフローのパターンをコピーするのは決して悪いことではありません。

最も人気のあるサイトや製品でさえ、この法則に沿っています。これは偶然ではなく、デザイナーはユーザーにとって使い慣れたパターンを使用した結果、類似パターンが続出しているのです。

例えばGoogleのマテリアルデザインが生み出したFABボタンは、今や多くのアプリで使われるスタンダードとなっていますね。

8. 動詞を表示する

CYRA / dribble

「はい」や「いいえ」、「キャンセル」は、多くのUIに含まれている言葉です。しかしそれは、ユーザーにとってあまりにも雑駁としたワードです。「買う」「戻る」「選び直す」のように、具体的な動詞として選択肢を与えましょう。

結果として、ユーザーは適切なアクションを実行するためのにどのような動作を行えばいいかが瞬時にわかり、アプリ/サイトはより使いやすくなります。デザイナーも、ユーザーの行動パターンを把握し、そこからデザインのヒントを学ぶことができるでしょう。

9. ユーザーとコミュニケーションをとる

ユーザーが、何が起きているのかを常に把握できる仕様にして下さい。すべてのエラー、ステートの変更、場所、または正常に機能したアクションを通知しましょう。基本を抑えながら、たくさんのUIエレメントとデザイン戦略を用いれば実現できます。

10. デフォルトを忘れない

ユーザーは常に明確な目標を持った上でウェブサイトでを訪れます。なので初期設定は重要です。特に、登録フォームを提案するサイトで重要になります。上記の画像では、すでに確認済みのものか、未確認済みのものかを見分けるために「チェック」が行えます。

Arron Hunt / dribble

高い機能性は、決してコンテンツの美しさの邪魔にはなりません。両者は、持ちつ持たれつの関係性です。多くを盛り込んだデザインより、シンプルなデザインの方がスタイリッシュに仕上がるケースは稀ではありません。しかし、見た目の美しさと機能性のいずれかの選択を迫られた際には、迷わず機能性を選びましょう。

UIの基本を理解していただけましたか？今更聞けないようなポイントをご紹介しました。ぜひデザインに生かしてください。

（翻訳：Ayaka Takei）