UIデザインとは？使いやすいWebサイトの基本ポイントと事例

Webサイトやアプリは、もはや現代人の生活に不可欠です。Webサイトやアプリにおける「UIデザイン」は極めて重要で、玉石混交の「UI原則」や「UIテクニック」が数多く公開されています。しかし、UIデザインに関する膨大な情報を得ても、いざ自分のWebサイトやアプリ開発となると、「良いUIデザインは結局どうすれば作れるの？」と迷うことも多いのではないでしょうか。

本記事では、UIデザインとは何か、優れたUIデザインの原則、最新トレンド、成功事例などをわかりやすくご紹介します。無料でダウンロード可能なUIデザインに関する資料もご用意しておりますので、ぜひご活用ください。

UIデザインとは？

まずはじめに、「UIデザインとは何か」について整理しましょう。

UIデザインの意味

UIとは、「ユーザーインターフェース」の略称です。ユーザーインターフェースとは、「コンピューターとユーザーが情報をやりとりするためのインターフェース（接点）」を指します。したがって、WebサイトやアプリにおけるUIデザインとは、「コンピューター（＝Webサイトやアプリ）とユーザーが情報をやりとりするためのインターフェースをデザインすること」と言えます。

もう少し噛み砕くと、UIデザインとは、「ユーザーがWebサイト・アプリをスムーズに使えるようにする」ことであると言えるでしょう。

UIとUXの違い

似たような言葉に「UX（ユーザーエクスペリエンス）」という言葉があり、しばしば混同されます。

UXは、Webサイトやアプリの利用時だけでなく、利用前の期待や、利用後の印象を含めたトータルでの「ユーザー体験」のこと。UIは「Webサイトやアプリの設計品質」が主な対象であり、UXは「ユーザーの利用品質」を考えることに主眼を置きます。

また「設計品質」「利用品質」は以下に分かれます。

上記4区分をまとめると、UIは「客観的／主観的設計品質」、UXは「客観的／主観的利用品質」であると言えます。なお、客観的設計品質は「ユーザビリティ」、主観的利用品質は「ユーザーの満足感」です。

UIとUXでは、「時間軸（利用時に限るのか／利用前後も含めたものか）」と「視点（設計の品質か／利用品質か）」の2つが大きく異なります。

UIデザインとビジュアルデザインの違い

次に「ビジュアルデザイン」と「UIデザイン」の違いを簡単に整理します。

一般的に、「デザイン」という言葉で連想されるのは、「ビジュアルデザイン」ではないでしょうか。ビジュアルデザインの目的は、装飾や色合い、写真、イラストといった「ビジュアル（見た目）」により「良い印象（狙った印象）を与えること」です。一方で、UIデザインの目的が「ユーザーが（サイトやアプリを）スムーズに使えるようにすること」であることは前述のとおりです。

これまで、実務上は1人のデザイナーが「ビジュアルデザイン」と「UIデザイン」との両方を担当することも多く、両者は密接かつ不可分な関係にありました。しかしながら、両者の目的は異なり、UIデザインの重要性が上がるにつれ、UIデザイナーにもより専門的な知識やスキルセットが必要になっています。

デザイナーのスズキアユミ氏によると、Webデザイナー（ビジュアルデザイナー）は「装飾美」を、UIデザイナーは「機能美」をより重視する傾向にあります。また、前者にはビジュアル表現力が求められるのに対し、後者には設計力が求められるなど、「ビジュアルデザイン」と「UIデザイン」の役割はもはや大きく枝分かれしていると言えるでしょう。

なぜUIデザインは重要なのか？

UIデザインの概要をお伝えしましたが、次はそんなUIデザインがなぜ重要なのか整理してみましょう。ユーザーがWebサイトやアプリを使うときには当然、使用目的（知りたいこと、やりたいこと）があります。その前提だと、「良いUIデザイン」「悪いUIデザイン」の定義は以下のように考えられます。

「目的が達成されない」というのは、例えば以下のような状況です。

つまり、「UIデザイン」を考えるということは、「ユーザーが目的を達成するために何をすべきか」を考えることです。目的が達成できないWebサイトやアプリ（それを提供する事業者や開発者）だと、ユーザーが大きな不満を抱くことは簡単に想像できるでしょう。

上記の理由から「UIデザイン」は極めて重要なのです。

優れたUIデザインの原則

UIデザインの重要性についてご理解いただけたところで、優れたUIデザインを設計・制作する際の「たったひとつの原則」をご紹介します。

私の過去10年間のUIデザインやユーザビリティのコンサルティング経験を振り返ったときに、最も重要であると確信したのは、Webユーザビリティの権威の1人であるSteve Krug（スティーブ・クルーグ）氏の以下の言葉です。

Don’t make me think.（「ユーザーに考えさせない」）

「考えさせない」とは、つまり「ユーザーが考えなくても、それが何か分かるようにせよ」ということ。

上記などのように、ユーザーがわざわざ考えたり迷ったりすることなく、自明のものとして判断できることが、「ユーザーに考えさせないUIデザイン」です。一見、当たり前のように感じると思いますが、実は世の中の多くのWebサイトやアプリは「ユーザーを無駄に考えさせる要素」に満ち溢れています。

「ユーザーに考えさせない」ナビゲーション事例

「ナビゲーション」機能とは、Webサイトやアプリを訪れたユーザーが、探し求めている情報にたどり着く手掛かりとなるリンクつきの表示のこと。その機能は、UIデザインの使い勝手の良し悪しを大きく左右します。

例えば、アコースティックギターを購入しようとあるサイトを訪れたとします。あなたは、ナビゲーションの「アコースティックギター」のリンクをクリックしますか？ それとも、検索ボックスでわざわざ「アコースティックギター」と入力するのでしょうか。

答えはもちろん前者ですね。

では、もしナビゲーションのリンク名が「ギター」だったらどうですか？ もし「楽器」だったら？
……ではもし、「電子機器」だったら？

「ユーザーを考えさせない」優れたナビゲーションのUI例は、以下の記事を参考にしてみてください。

UIデザインのゴールは、ユーザーの疑問を取り除くこと

UIデザインの最重要原則が「ユーザーに考えさせない」とすると、やるべきことは極めてシンプルで、ユーザーを考えさせる要素、ユーザーの疑問を取り除くことです。具体的な作業は以下のようになります。

こうした改善・改修により、ユーザーの疑問をできる限り取り除くことができれば、UIデザインの目的である「ユーザーが、Webサイトやアプリをスムーズに使えるようにすること」の実現に大きく近づきます。この内容の詳細は、スティーブ・クルーグ氏の著作『超明快！Webユーザビリティ～ユーザーに「考えさせない」デザインの法則』をぜひご参照ください。

また、ユーザーテストで実際にユーザーの声を聞いてみることも、デザイナーには気づけない、ユーザーの「考えるポイント」の洗い出しに大変効果的です。

ユーザーの疑問を捉えきれない2つの理由

ユーザーが迷ってしまう要素を捉えることは、一見簡単なように見えますが、意外と難しいものです。それには2つの理由があります。

理由1：人間は十人十色、想像力にも限界あり

当然のことですが、人間は一人ひとりが異なります。パソコンやスマートフォンの利用経験も異なれば、知識やバックグラウンドも人それぞれです。そのため、ある人にとっては自明のことが、別の人にとっては「なんだこれ？」となってしまうことがあります。

デザイナーは、UIデザインやユーザビリティ経験をある程度積むと、ついつい「これはこのパターンで大丈夫」「これで誰にでも分かる」と思ってしまいがちですが、実はそんなことはありません。

ベテランのUIデザイナーだと、ユーザーの利用シーンやさまざまな「つまずきポイント」を経験則として知っており、経験からの指摘（ヒューリスティック評価）もある程度までは可能です。しかしそれはあくまでも、その人の過去経験に依存した指摘に過ぎません。1,000人のユーザーの動きを知っていたとしても、それは日本の人口のわずか10万分の1であって、1,001人目のユーザーの動きは未知数なのです。

理由2：慣れによる”当たり前”の感覚

制作者やデザイナーは、制作過程で同じWebサイトやアプリを幾度となく使ったり見たりする結果、段々とそのサイト・アプリに慣れてしまいます。慣れというのは怖いもので、最初は「なにこれ？」「わからない」という新鮮な視点があったとしても、すぐに「何がわからないのかわからない」状態になってしまいます。

この状態になってしまうと、「自分が分かるんだから、ユーザーもこのぐらいは分かるだろう」と考えてしまいがちです。では、どのようにしてユーザーの疑問を見つけていけばよいでしょうか。

UIデザインで効果的なアプローチ方法と成功事例

ここまでで、ユーザーの疑問を取り除き「ユーザーに考えさせない」を実現することがUIデザインである、という話をしました。ここからは、具体的にはどのようなアプローチを取ればよいのかについて、事例を交えながら解説していきます。

ユーザーの疑問を捉える手軽な方法「ユーザーテスト」

ユーザーの疑問を捉える際、最も手軽で効果的な方法は、ユーザーテスト（ユーザビリティテスト）です。ユーザーテストは自分以外のユーザーに、実際にWebサイトやアプリを、ある状況・目的で利用してもらい、迷わず問題なく使えたかを確認する方法です。

ユーザーテストの効果は極めて大きく、「ユーザーはここまでつまづくのか」という驚きや気づきが多く得られ、デザイナーには気づけない「ユーザーの考えるポイント」の洗い出しができます。専門的にしっかり実施するとそれなりにコストがかかりますが、会社の同僚や家族に協力してもらい、自分で行うだけでも、極めて多くの気づきが得られます。

ユーザーテストで疑問を発見し、改善するだけで、圧倒的に良いUIデザインに近づけることができるのです。

成功事例1：その場Q&A

ユーザーテストによりさまざまな疑問を洗い出し、改善することは、ビジネス成果にも直結します。

ある旅行サイトでは、料金が格安であるがゆえに、ユーザーが「金額に航空券代は含まれているのか？」と不安になっている、という課題が見つかりました。この疑問への対応は、料金表示の下に「航空券代込み」という一行を足す、というものでした。たったこれだけの改善で、航空券の購入率が20％もアップしたのです。

UIデザインの改善というと、ビジュアルデザインを大きく変えないといけないというイメージもあるかと思いますが、それは誤りです。たった一行の補足を足すだけでも、「ユーザーの目的達成」に大きく寄与することができます。

成功事例2：要素を減らす

ユーザーの疑問に対応するコンテンツがあったとしても、要素が多すぎたり、UIがごちゃついていると気づかれない場合があります。

ある携帯サイト（有料課金サービス）の事例では、ユーザーは「お試し登録＝自動的に更新」という強い先入観がありました。元々、サイトには「自動更新はない」と記載してありましたが、ユーザーテストを行ったところ、「他にもさまざまな要素があり『自動更新はない』という記載に気づかれない」という課題が明らかになりました。そこで、メッセージの量を減らし、「自動更新はない」というメッセージを引き立たせたところ、お試し登録数がなんと3倍にもなったのです。

これも、いわゆるビジュアルデザインの変更ではなく、ユーザーの疑問・先入観を真摯に捉え、「要素を減らす」というUI改善により成果が出た事例です。

UIデザインで知っておくべき4つの基本ポイント

UIデザインの原則である「ユーザーに考えさせない」という考え方をお伝えしましたが、実現するためにはどのようなことに留意すればよいのでしょうか。

UIデザインの「4つの基本原則」について解説しているRobin Williams（ロビン ウィリアムズ）氏の名著「ノンデザイナーズ・デザインブック」によれば、デザインの基本原則は4つあります。

ここでは、それぞれのポイントについて解説します。

1. 整列

要素を配置する際には、ルールを決めて整列させると見やすくなります。

2. 近接

関連性の高い要素をまとめてグループ化すると、読み手が情報を受け取りやすくなります。
グループ化のことを「チャンク（情報の固まり）を作る」「チャンキング」と言うことも。チャンキングによって、記載する要素の数自体は変わらなくても、読み手は情報を受け取りやすくなります。

3. コントラスト

重要な要素は、他の要素に比べて目立たせるようにします。文字のサイズ、太字、フォント変更、装飾、アイコン設置などの方法があります。

4. 反復

類似要素に対して同じパターンを使うと、意味がわかりやすくなります。
例えば「見出しやリストの体裁を揃える」「同じアイコンを使う」などの方法です。同じパターンの反復により一貫性を保つことで、ユーザーの考える負荷が下がります。

2024年最新版！ UIデザインのトレンド3選

ここでは、2024年注目のUIデザインについて、その特徴と取り入れるメリットをご紹介します。提供する商品やサービス、情報などに合ったデザインを選ぶことで、その中でユーザーが直感的に操作できる快適なサイトを目指しましょう。

クレイモーフィズム

クレイモーフィズムとは、「粘土（clay）」のようなマットな質感と丸みが特徴で、3Dのような立体感を表現する手法です。やわらかい質感と温かみを感じさせ、ユーザーに対して親しみやすさやポジティブな感情を抱かせることができます。

また、立体的なデザインには強調効果があり、ユーザーにとって重要な情報やアクションボタンを見つけやすくしてくれるため、操作性も高まります。

ネオブルータリズム

ネオブルータリズムは、1950年代にみられるようになった力強く粗野な印象を与える建築様式「ブルータリズム」からインスピレーションを受けながら、現代のデザインやテクノロジーの要素を取り入れたスタイルです。

派手な色彩や大胆なタイポグラフィ、非対称または一貫性のないページレイアウトなどが特徴です。他のスタイルとは一線を画する視覚的なインパクトがあるため、ユーザーの目を引きやすく、ブランドやサイトの独自性を強調することができます。

この手法をうまく利用すれば、ユーザーが何度も戻ってきたくなるような忘れられない体験を生み出すことができるかもしれません。特に、賑やかで楽しいデザインスタイルを探しているのであれば、ネオブルータリズムの採用を一度検討してみてください。

BENTO UI

BENTO UI（弁当箱グリッド）は、名前の通り「お弁当箱」の特徴に基づくデザインで、お弁当箱の中で様々な食品が整理され、きれいに詰められている状態をデジタルの画面上で表現したものです。

BENTO UIを採用する最大のメリットは、内容の異なるコンテンツでもグリッド状のデザインを使用することで、わかりやすさを保ったまま一画面に並べることができるという点にあります。また、ボタンや各コンテンツを縦に並べるだけでスマホでもきれいに表示できるので、モバイルファーストなデザインを取り入れたい場合に推奨されています。

UIデザインのトレンドは、技術の進歩や人々の好みの変遷などの影響から年々移り変わっていくため、これを押さえておけば確実にユーザーを満足させられるというものではありません。

Webデザインに関わらず、日頃から世の中のデザインに目を通しておくことも大事です。引き出しを増やすことで、サイトやアプリを制作するタイミングで生かせるようにしておきましょう。デザインの引き出しを増やす方法のひとつとして、グッドデザイン賞のニュースやアーカイブなどに日頃からアンテナをはっておくといいかもしれません。

メンバーズが実施したUI・UX事例

ポップインサイトは、株式会社メンバーズの社内カンパニーです。メンバーズでは、ユーザー体験設計をUXリサーチから設計、実装、ユーザー評価まで一貫性を持った一連のサービスとして提供しています。ここでは、実際にメンバーズがサイト改善のために実施したUI・UX事例をご紹介します。

UXアプローチによるサイトリニューアル！ SMBC信託銀行さま

メンバーズでは、「SMBC信託銀行」および「PRESTIA」ブランドの認知拡大と理解促進を効果的に図りビジネス成果を上げるため、SMBC信託銀行さまのサイトリニューアルを実施。その結果、口座開設への送客を31%向上させることに成功しました。

SMBC信託銀行さまの事例に関する詳しい説明は、以下のページをご覧ください。

UIデザインの基礎が学べる資料を紹介！

UIデザインについてさらに基礎を学びたいという方には、こちらの資料がおすすめです。

英語のタイトルに思わず身構えてしまいますが、2ページ目以降は日本語となっております。UIとUXの違いもわかりやすく説明されており、感覚的にUI・UXとは何か理解したい方向けの資料です。スライド枚数は多いですが、素早く最後まで目を通すことができるので、ぜひご覧ください。

UIデザインとUXの超基礎「UI Design & UX for ENGINEER」 from Kazuki Yamashita

まとめ：「ユーザーに考えさせない」を意識しよう

UIデザインについて、この記事でお伝えしたかった内容をまとめます。

実際にUIデザインを意識しながらサイトやアプリを制作しようとしても、思うようなデザインにならなかったり、ユーザーの満足度につながらない可能性もあります。
UIデザインや、Webサイトの改善についてお困りごとなどあれば、ぜひお気軽にお問い合わせください。

無料DL｜UI改善の基礎

4つのデザイン構成要素を操り、優先順位をつけるための「レイアウト / 配置」「形」「色」「動き」について図付きで解説します（全45ページ）。ぜひUIの改善にご活用ください。

ダウンロード（無料）