UIデザインを考える上で重要な4つのポイントとは

UIの基礎知識

UIはユーザーとの接点のこと

UIは英語のUser Interfaceからきている言葉です。Interfaceには、「接点」とか「接触面」といった意味があります。ウェブマーケティングでは、ユーザーとサービスの接点の意味に使われています。ユーザーに伝えるべきことを伝え、コミュニケーションを促進する。それがウェブでの成果アップにつながっていくのです。正しいUI設計が欠かせないのは、そういったところにあります。

ユーザーの目に見えるもの全てがUI

さて、具体的にはUIとは何のことなのでしょうか？ウェブサイトやアプリについて考えてみると、ユーザーの目に触れるものは全てUIと言うことができます。画像やテキストはもちろんのこと、フォントやスタイル、余白、レイアウトもUIなのです。ともすると、デザインをつくるときは見た目だけにこだわりがち。しかし見た目だけではダメで、いかにUIに最適化されたデザインがつくれるかが勝負なのです。

UIとUXの違い

UIに似た言葉として、UXがあります。この2つの違いについても簡単に見ておきましょう。UIとは、上でご紹介したようにユーザーとサービスの接点のこと。UXはそれとは少し違って、サービスによってユーザーが得られる体験のことを指しています。生活が豊かになったり、感動が得られたり。購入手続きがスムーズにできることも、UXと言えます。まとめると、良いユーザー体験（UX）を提供するための一つの方法が、ユーザーとサービスとの設定（UI）ということになります。UIはUXの一部なのですね。

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

ここからは、UIデザインに取り組むにあたっての基礎的なポイントについて解説していきます。これからUIに取り組む方だけでなく、UIに悩んでいる方にも参考にしていただければと思います。

事前準備

ターゲットを明確にしておく

UIに取り組む前に、行っておかなければいけないことがあります。それは、ターゲットを明確にしておくことです。ターゲットが明確であればこそ、UIについて改善したり最適化していくことができます。繰り返しになりますが、UIはユーザーとサービスとの接点のことです。対象としているユーザーがわからなければ、どのように接点をつくっていけばいいかがわかりませんよね。UIデザインの成否も、ターゲットが握っていると言っても過言ではないのです。

ターゲットの設定方法ですが、一般的によく行われるのがペルソナと呼ばれる手法です。ペルソナとは、サービスや製品の対象となる、理想的な人物像のことです。アンケートやアクセス解析などの具体的な情報を基に、ペルソナを設定していきます。より刺さるマーケティング施策につながりますし、チーム内で共通認識を持つことにもなります。ぜひ取り組んでみてください。

何を伝えるのか？

次に、ターゲットとなるユーザーに何を伝えるのかを決めておきましょう。ターゲットのニーズを探り出し、どんな価値を提供すればいいのか。自社のサービスや製品の特徴も考慮し、見せる情報に優先度をつけてみてください。

UIデザインのポイント4つ

準備ができたところで、具体的なUIデザインのポイントについて見ていきましょう。数多くのポイントの中から、重要なポイントだけに絞って解説していければと思います。

デザインの原則を守る

ウェブデザインには、そのベースともなる原則があります。「近接」、「整列」、「対比」、「反復」の4つのことです。この4つの原則を忠実に守ることで、デザインに統一感が出ますし、UIも向上します。それぞれ、簡単に解説しておきましょう。

「近接」とは、関連性の高い要素は近くに表示して、逆に関連のない要素同士は離して配置することです。これによって、テキストや画像について知らなくても、一目で関連性がわかります。「整列」とは、整然としたレイアウトに要素を配置することを指しています。「コントラスト」と呼ばれることもある「対比」とは、情報に強弱をつけることです。身近なところで言うと、見出しと本文のフォント（サイズや色など）を変えることがあげられます。最後の「反復」とは、情報のまとまりを繰り返すこと。繰り返しがあることでリズムが生まれて、情報が読み取りやすくなるのです。

情報を減らす

UIに取り組むときは、できるだけ情報を減らすように意識するといいでしょう。情報が多すぎると、ユーザーはどこを見ていいかわからなくなりますし、伝えるべき情報が埋もれてしまう可能性があります。事前準備のところで、情報に優先順位をつけることをあげましたよね。この優先度順に、ページに表示する内容を絞り込んでシンプルにしていきます。

ユーザーの目線に沿って配置する

ユーザーがウェブサイトを閲覧するときは、一般的に左上から右下にかけて目線が移動すると言われています。よく知られているのが、Fの法則です。アルファベットのFの書き順に沿って、左上から右上へと目線が動き、その後はスクロールしながら下部のコンテンツを見ていきます。そのため、左上から順に重要な要素をレイアウトしていくと、スムーズに閲覧してもらえるのです。

スマホに対応する

UIを考えるにあたり、スマホやタブレットなどのデバイスについて考える必要があります。特にスマホは、手のひらほどの画面サイズしかありませんし、タップやスワイプなどの特有の操作があります。パソコンとは異なるレイアウトやフォントサイズを使ったり、スマホ専用の要素を制作する必要になることもあります。最近では、リキッドデザインを採用したレスポンシブデザインが隆盛ですね。簡単に導入するCSSライブラリやプラグインも多くなってきたので、うまく取りいれていきましょう。

あとがき

UIデザインの基本について解説しました。一度デザインしたら終わりではなく、継続的に取り組んでいっていただければと思います。定期的にチェックや見直しをして、最適なUIデザインを目指していってください。