この記事では、UIデザインの概要や原則、目的といった基礎知識を解説したうえで、2023年度グッドデザイン受賞作品から優れたUIが受賞の要因となったプロダクトを紹介します。

「優れたUIデザインの事例から学び、自社のプロジェクトに活かしたい」といった方は、ぜひ参考にしてください。

UIデザインとは何か？

UIとは、「User Interface（ユーザー・インターフェース）」の略で、プロダクトとユーザーの接点を意味します。例えば、WebサイトやアプリといったWebサービスにおけるデザイン要素は、ボタン、アイコン、テキスト、画面などが挙げられます。

以下の記事ではCUIやGUIといった代表的なUIや、Webサービスを構成する基本的なUI要素について、詳しく解説しています。ぜひご覧ください。

関連記事：UIデザイナーとは？ 仕事内容やスキルについても解説

UIデザインの原則

UIデザインの原則として重要なポイントは以下の3つです。

1. 一貫性
2. 直感的理解
3. 明確さ

一貫性のあるデザインパターンやスタイルを用いることで、ユーザーは直感的に操作性や機能性を理解でき、安定感を得られます。

例えば、WebサイトのUIで他のサイトと同じく上部にヘッダーを配置するなど一貫性のあるデザインを行えば、ユーザーは「他のWebサイトと同様に使えるだろう」と認識し、スムーズに操作できるでしょう。逆に異なるパターンで同じ動作をするようにデザインすると、ユーザーは操作を誤り、ストレスを感じて離脱してしまう可能性があります。

ユーザーが必要な情報を迅速に理解し、見つけられるようにする明確さも重要です。整理されたレイアウト、明瞭なラベリングなどにより、いかにユーザーの混乱を防いで効率的に情報を伝えらえるかがポイントになります。

このようにUIデザインでは、一貫性があり明確なUIにより、ユーザーが機能や操作を直感的に理解でき、スムーズにタスクを完了できるように設計することが原則となります。これによりユーザーの満足度が高まり、ブランドやプロダクトへの信頼性が向上します。

UIデザインの目的と役割

UIデザインの目的は、ユーザーにとってわかりやすく使いやすいようインターフェースを設計し、デザインすることです。

ただし個々のプロジェクトにおける目的としては大きすぎて漠然としているため、どのようにして優れたUIデザインを実現したらよいかが見えにくいでしょう。

そのためプロジェクトに応じてUIデザインの目的を分解することが重要です。

UIデザインの目的は主に以下の7つに分けられます。

1. ユーザビリティを向上させるため
2. アクセシビリティを確保するため
3. エンゲージメントを促進するため
4. 情報を明確化するため
5. ブランドアイデンティティを強化するため
6. エラーを削減するため
7. ビジネス目標を達成するため

大きすぎる目的では適切な目標を設定することが難しいため、上記のように、UIデザインの目的を分解して明確化し、重要度に応じて優先順位付けをすることが重要です。明確化した目的は、プロジェクトにおいてUIデザインが果たすべき役割とも言えます。

この分解した目的を実現するために具体的な目標を設定することで、本質的な目標の達成につながります。ここで言う本質的な目標とは優れたUIデザインの実現に他ならず、優れたUIデザインはプロジェクト成功への鍵となります。

UIデザインを設計する7つの目的については、以下の記事で詳しく解説しています。ぜひご覧ください。

関連記事：UIデザインを設計する目的と重要性、考え方や基本原則、具体実例を徹底解説

UIデザインとUXデザインの違い

ここで、混同されやすいUIデザインとUXデザインの違いを説明します。

UIデザインがユーザーとプロダクトの接点であるインターフェースを設計することを意味するのに対して、UXデザインとはユーザーがプロダクトを利用することで得られる体験をデザインすることを意味します。

そのためUIはUXの一部であり、UXを向上させるためには優れたUIを実現する必要があるのです。

UIとUXの違いについて詳しく知りたい方は、以下の記事をご覧ください。

関連記事：UIとUXの違いとは？具体的な事例と合わせて解説
関連記事：UXデザインとは？ 基礎解説や具体的な事例を解説

優れたUIデザインを作るためのポイント

優れたUIデザインのプロダクトを開発するための重要な3つのポイントとして、以下の3つが挙げられます。

• ユーザーニーズとタスクの理解
• ビジュアルデザインとユーザビリティのバランス
• ユーザビリティテストとフィードバックを活用した改善

それぞれ詳しく説明します。

ユーザーニーズとタスクの理解

ユーザーが何を求めているのか、どのような問題を解決したいのかを分析し、明確化しましょう。そのためには、ユーザーの年齢、性別、趣味、職業などの情報を収集してターゲットの特性を把握し、ユーザーがプロダクトを使う目的やニーズを理解することが重要です。

また、ユーザーがプロダクトを使って行いたい具体的なタスクを理解することも重要です。タスクの流れをユーザーの視点で考え、ボタンの配置やアイコンの意味、メニューの構成など、ユーザーが迷わずに目的を達成できるようなシンプルで一貫性のあるUIデザインを設計しましょう。

ビジュアルデザインとユーザビリティのバランス

優れたUIデザインを実現するためには、視覚的な美しさと使いやすさの両方を考慮することも重要です。

ビジュアルデザインはブランドのアイデンティティを表現する役割を果たし、ユーザーに好印象を与える一方、ビジュアル要素が過剰だとユーザーが混乱するでしょう。

逆に、ユーザビリティを重視しすぎると、デザインが退屈になる可能性があります。

ユーザビリティテストとフィードバックを活用した改善

ユーザビリティテストとユーザーからのフィードバックを活用して、UIデザインを改善しましょう。

まず、ユーザビリティテストやアンケート、インタビュー、行動観察などを行い、Googleアナリティクスやヒートマップツールなどを用いてデータを収集します。

次に、調査結果を分析して課題を特定し、カスタマージャーニーマップなどを活用してユーザーニーズを明確化します。

そして、仮説を立ててユーザーニーズを考慮した機能や導線を設計し、プロトタイプを作成します。プロトタイプテストで課題を解決できるか検証を行い、ユーザーフィードバックを収集して、改善点を修正します。

ユーザビリティを向上させるためには、このプロセスを繰り返し行うことが重要です。

関連記事：ユーザビリティとは？効果的な改善を行うための5つのポイントとサイト事例を紹介！

優れたUIデザインの事例

ここで、2023年度グッドデザイン受賞作品から優れたUIが受賞の要因となったプロダクトを7つ紹介します。受賞した背景や評価ポイントも解説するので、自社プロダクトのUIデザインを改善する際に、ぜひ参考にしてください。

トヨタ　プリウス

世界初の量産ハイブリッドカーとして誕生し、エコカー市場を切り開いてきた先駆者「プリウス」の最新モデルが「2023グッドデザイン金賞」を受賞しました。ファーストインパクトと普遍的な美しさを表現した未来的な外形デザインや、操作性を重視したレイアウトなど、エコカーの概念を一層する挑戦的なデザインと走りの楽しさが高く評価されました。

https://toyota.jp/prius/design/

AISIN　音声認識システム YYSystem

「2023グッドデザイン金賞」を受賞した「YYSystem」は、主に聴覚障がいのある方のコミュニケーションを支援するアプリです。コロナ禍で自社内の工場で働く聴覚障がいの方が、マスクを着用した際に、唇の動きが読めずコミュニケーションがとりにくくなったことから開発プロジェクトを始動し、職場だけでなくプライベートでもシームレスに使えるようにアプリを開発。当事者の声を積極的に開発に取り入れるインクルーシブデザインの手法が高い評価を受けています。

https://www.g-mark.org/gallery/winners/14596?years=2023

渋谷区　公式サイト 渋谷区ポータル

リニューアルした渋谷区の公式サイト「渋谷区ポータル」が「2023グッドデザイン・ベスト100」に選出されました。サイトリニューアルでは、渋谷区のブランドパーソナリティを打ち出すと共に、膨大なコンテンツを再整理・構造化し、ユニバーサルデザインの原則を取り入れてあらゆるユーザーが使いやすいUIデザインを実現。渋谷区らしさを表現しつつ、視認性とアクセシビリティの高いデザインが評価されました。

https://www.city.shibuya.tokyo.jp/

ホンダ　SmaChari（スマチャリ）

ホンダによる自分好みの自転車を電動アシスト化・コネクテッド化するサービスと、それに連動するアプリ「SmaChari（スマチャリ）」が、「2023グッドデザイン・ベスト100」に選出されました。デザインのポイントの1つが、走行データや調整機能を見やすく集約したアプリケーションUI。通勤通学からスポーツバイクとして趣味で利用するユーザーまで幅広い層に受け入れられやすいUIデザインになっています。

https://www.honda.co.jp/SmaChari/

ミルボン　milbon & AROMATIC

美容室専売品の「milbon & AROMATIC」が「2023グッドデザイン賞」を受賞。ミルボンのリサーチによると近年、美容室専売のヘアケア商品を購入する際に香りとパッケージが重視される傾向があることが明らかになりました。それを反映して、化粧箱には香りをかいだときの気持ちの変化を連想させる情景イラストを施し、本体は直感的に癒しを感じる形状の容器を採用。この香りとパッケージデザインの融合が評価を集めました。

https://global.milbon.com/milbon-and/

LIPPS　リップスヘアー ワックス

全国展開するヘアサロン「LIPPS hair」がZ世代をターゲットに独自のアイデアとフィロソフィーを反映して開発したプロダクトです。Z世代の多様な価値観を表現したデザインと、機能性向上や環境負荷への配慮のために容器の形状を細部まで見直した姿勢が評価され、「2023グッドデザイン賞」受賞につながりました。

https://lipps-product.com/

SALONIA　ピュア ブライト スチーマー

従来のフェイススチーマーはサイズが大きく、使用後に出しっぱなしにしておくことがためらわれるというユーザーの声を反映して、インテリアに馴染むジェンダーレスでミニマルなデザインを実現。男性の美容意識への高まりも考慮したUIにより、ターゲット層を広げている点が高く評価されました。

https://salonia.jp/special/steamer/

参考になるUIデザインが見つかる！ギャラリーサイトやサービス7選

続いて、UIデザインのトレンドの把握や、自社プロダクトの参考になるギャラリーサイトやサービスを7つ紹介します。

UI Garage

「UI Garage」は、Web、モバイル、タブレットに特化したUIギャラリーサイトです。厳選された約7,000ものUIがカテゴリ別に分類されており、検索・閲覧することができます。404やアラートからカレンダーまでカテゴリが充実しているため、Webサイトに関連する特定のデザイン要素を探す際にも便利です。

参考：UI Garage

UI Pocket

「UI Pocket」は、国内外の優れたUI/UXを提供しているアプリのUIデザインギャラリーサイトです。セクションごとにスクショがまとめられており、参考になるデザインにアクセスしやすいよう設計されています。構造設計から表層デザインまで充実しており、デザインのアイデアを探す際に役立ちます。

参考：UI Pocket

Mobbin

「Mobbin」は、世界最大級のWebデザインライブラリーです。iOS、Android、Webなどのさまざまなプラットフォームの300,000 以上もの画面のライブラリを利用することで、UI/UXのリサーチにかかる時間を節約し、デザインに集中できます。

参考：Mobbin

Muzli

「Muzli」は、トレンドの最新デザイン、UI、UX、インタラクティブ・コンテンツのビジュアル・ハブとなるブラウザ拡張機能です。70万人を超えるデザイナーやプロダクトマネージャーなどが参加しており、厳選されたデザイン、テクノロジー、ニュース、アート、イラスト、タイポグラフィー、写真などを閲覧できます。

参考：Muzli

Collect UI

「Collect UI」は、デザイナーがインスピレーションを得られるパターンを厳選して提供しているWebサイトです。Web、モバイル、タブレット向けのUIデザインがカテゴリ別に整理されており、LP、アプリアイコンといった特定の要素を探す際に便利です。

参考：Collect UI

Tailwind UI

「Tailwind UI」は、Tailwind CSSの開発者によってデザインされた公式のコンポーネントとテンプレートを提供するWebサイトです。コンポーネントはモジュール化されており、簡単にカスタマイズできます。

参考：Tailwind UI

UI Sources

「UI Sources」は、スマホアプリの優れたUIデザインを厳選して掲載しているWebサイトです。世界でもトップクラスの収益を誇るアプリがどのように動作するかを確認できる点が特徴です。

参考：UI Sources

わかりにくいユーザー・インターフェースの事例と注意点

わかりにくい・読みにくい・間違いやすいUIはヒューマンエラーのきっかけになり、「BADUI（Bad User Interface）」と呼ばれています。BADUIは、ユーザーがプロダクトを使用する際に混乱を招いてストレスを引き起こし、UXを損ないます。

ここで、事例を参照しながらBADUIについて考えてみましょう。

例えば、エレベーター内の操作パネルのUIは、ユーザーが目的の階を選択するための重要な要素です。このボタンの配置や配列は統一されていないものの、日本エレベーター協会の基準によると、階数ボタンが2列になる場合は数字が小さい順に下から上に積み上げて表示する方式が望ましいとされています。そのため以下のような操作パネルが多くなっています。

では乗り込んだエレベーターの操作パネルが、以下のようなUIだった場合はどうでしょうか。タワーマンションのエレベーターボタンを想定したものです。高層ビルのエレベーターの操作パネルでよく見られる配列となっていますが、階数ボタンが4列になり左右に蛇行しているため、即時に目的の階を選択するのは難しいでしょう。

そのため、以下のように数字の上下を優先させて、1列ずつ下から上に表示する方式のほうがわかりやすいという声も多いようです。実際に階数ボタンの非常に六本木ヒルズの業務用エレベーターなどではこの方式が採用されています。

また、先ほどのタワーマンションのエレベーターの操作パネルのように、開閉ボタンのアイコンが数多くの階数ボタンと同じ色や大きさの場合、目立ちにくくヒューマンエラーのきっかけになりそうです。一方、一般的によく見かける以下の開閉ボタンであれば、他のボタンとデザインが異なるため探す時間が短縮でき、文字の補足もあるため押し間違えることも少なくて済むでしょう。

いかがでしたでしょうか。

BADUIは意図的に生み出されるものではありませんが、前章で優れたUIデザインを作るためのポイントとして挙げた、ユーザーニーズとタスクの理解が不足していたり、ビジュアルデザインとユーザビリティのバランスがとれていなかったり、ユーザビリティテストとフィードバックを活用した改善が充分に行われていなかったりといった点が要因として考えられるでしょう。

そのようなBADUIを生み出さないために注意すべき点は以下の4つです。

1. ユーザーに考えさせない
2. ターゲットが不明瞭な状態にしない
3. ユーザーを迷わせない
4. ゴールを曖昧にしない

ただし、デザイナーがユーザー視点でUIを検討していても、プロダクトの開発過程で、社内外からの要求などによってほかの目的を達成するために、結果的にUXを損なうUIになってしまうことがあるでしょう。優れたUIを実現させるためには、プロダクト開発に携わるメンバー全員がユーザー視点を持ち、上記の4点を常に意識して進めることが重要です。

社員を雇用する場合とフリーランスに外注する場合のメリット・デメリット比較

ある求人サイトの調査で、UIデザイナーの平均年収は約598万円であることが明らかになりました。国税庁の「令和4年分 民間給与実態統計調査」によると、正社員の平均給与は523万円であり、UIデザイナーの年収は平均より高いことがわかります。雇用すると給与のほかに社会保険料や福利厚生費などもかかるため、UIデザイナー1人当たりにかかる人件費はさらにふくらみ、他の職種の社員と比較して高額になるでしょう。

そのため、コストを抑えて効率良く優れたUIのサービスを開発したい場合は、フリーランスに外注することをおすすめします。理由は、外注費であれば経費に算入でき、仕入税額控除の適用を受けられるためと、人件費を抑制でき社会保険料の負担がないためです。

ただし、雇用契約の社員と比較するとコミュニケーションが少ない傾向にあり、社内にノウハウを蓄積しにくい点や、成果物の質がコントロールしにくい点がデメリットです。

これらの点を含めて、UIデザイナーを雇用する場合と外注する場合のメリット・デメリットを表にまとめると以下のようになります。

出典：求人ボックス「UIデザイナーの仕事の年収・時給・給料（2024年4月）」
　　　国税庁「令和4年分 民間給与実態統計調査」

以下の資料では、デザインのリソースを確保する2つの手法として、外注と採用について比較しながらご紹介しています。無料でダウンロードできますので、お気軽にご覧ください。

【お役立ち資料】
デザイン外注とデザイナー採用 コスト比較表

xdesigner.jp

また、以下の資料では、デザイナー専門のエージェントサービス『クロスデザイナー』に登録している注目デザイナーのリストの一部をご覧いただけます。無料でダウンロードできますので、お気軽にご利用ください。

【お役立ち資料】
法人・クライアント向けデザイナーリスト

xdesigner.jp

関連記事：UIUXデザインを依頼できる会社は？採用とも比較して解説
　　　　　UIデザイナーに必要なスキルとは？UXデザイナーとの違いも紹介

フリーランスのUIデザイナーを採用するならクロスデザイナーがおすすめ

本記事では、UIデザインの概要や原則、目的といった基礎知識を解説したうえで、2023年度グッドデザイン受賞作品から優れたUIが受賞の要因となったプロダクトを紹介しました。

「優れたUIデザインの事例から学び、自社のプロジェクトに活かしたい」といった方は、ぜひ参考にしてください。

UIデザイナーを雇用する場合と外注する場合は双方にメリット・デメリットがありますが、コストを抑えて効率良く優れたUIを開発したいなら、フリーランスへの外注するのも一つの手です。その際、クラウドソーシングやSNS、ブログなどを通してフリーランスへ依頼することも可能ですが、いずれの方法もスキルと実績のある優秀な人材を見つけるには、結果的に時間とコストがかかる可能性があります。

そのため、フリーランスへの依頼を検討している場合は、フリーランス専門のエージェントサービスを利用するのがおすすめです。デザインの知識やスキル、費用相場について熟知した、実績と信頼のあるエージェントサービスに依頼すれば、業界に詳しく安心して任せられるでしょう。

デザイナー専門の国内最大級エージェントサービス『クロスデザイナー』なら、厳正な審査を通過した即戦力デザイナーが7,000人以上在籍。採用コンサルタントが、自社に必要なデザイナーのスキルや要件をヒアリングして最適な人材を紹介します。

以下よりサービス資料を無料でダウンロードできます。即戦力デザイナーをお探しの方は【お問い合わせ】ください。平均1営業日以内にご提案します。