UIデザインとは？デザイナー監修で5つのポイントと事例を紹介
UIデザインとは、製品やサービスを使いやすくする仕組みづくりです。
画面の見た目だけでなく、ユーザーが操作しやすい仕掛けを考えます。具体的にはボタンの配置、色使い、文字の大きさなど、細かな点に気を配り、直感的に使える設計を目指します。
主にアプリやウェブサイトで重要ですが、機械や道具にも応用可能です。
ユーザーが製品やサービスを「使いやすい」「心地よい」と感じるように、Webサイトやアプリのボタンやメニュー、アイコンなどの見た目や配置を設計することがUIデザイナーの役割です。
優れたUIデザインは、ユーザーの満足度向上につながり、製品やサービスの価値を高めます。また、中長期的に見ると製品の使い勝手にとどまらず、ブランド価値の向上にも寄与するのです。
しかし、最近のユーザーは優れたUIデザインを「当たり前」だと感じています。
そのため製品やサービスを開発する際は、ユーザーの期待を超える高品質なUIデザインを提供することが求められます。
とはいえ「優れたUIデザインとは？」「UIデザインとはそもそも何なのか？」「どうすれば良いUIデザインが作れるの？」と疑問を抱えている方も多いのではないでしょうか。
本記事では、2011年の創業以来、デザインファームにおけるパイオニアとして多くの企業に向けてUIデザインの支援を行ってきたグッドパッチが、UIデザインの考え方や重要なポイント、UXデザインとの違いや活用事例まで幅広く解説します。
ぜひ最後まで読んで、あなたのプロダクトのUIデザイン設計に活かしてみてください。
監修者：丸 怜里（usagimaru）
目次
UIデザインとは
UIデザイン（ユーザーインターフェイス・デザイン）とは、製品やサービスの優れたUIを設計するための様々な考え方や手法、ツールなどをまとめた取り組みです。
業界や分野によってはその定義や認識に細かな差異があるかもしれませんが、特に2000年代以降のWebやアプリの分野においてはUIデザインが非常に重視されており、ソフトウェアを作るということはUIデザインに取り組むことと同義と捉える見方もあります。
UIデザインは広義の意味ではソフトウェアに限った取り組みではなく、例えば自動車のハンドル、ビデオゲームのコントローラ、券売機の操作盤など、さまざまな機械や道具を操るための仕組みを形作ることを言います。
つまり、Webやアプリなどの何か画面の中の表現のみならず、ユーザーとなる人間と道具との間に起こるインタラクション（相互作用）の生じ方に着目してコミュニケーションの方法を設計することがUIデザインと言えるのです。また、ユーザーのことを調査・分析する取り組みをUIデザインの過程に含むこともあります。
グッドパッチにおいて「UIデザイン」と呼ぶ場合には、ソフトウェアのUIを設計するという狭義の意味で捉える場合が多いです。ユーザーの調査や分析はUXデザインに分担し、ソフトウェア製品のUIを形作ることに注力します。
この辺りの捉え方や分担・分業の在り方は業界や会社によってもさまざまな考え方をしますので、一概に「こうでなければならない」というような体制はありません。グッドパッチではUIデザインはもちろんのこと、各分野の専門性を持ったメンバーが同じプロジェクトに参画することによって、高品質なデザインを実現するためのソリューションを提供いたします。
UXデザインとの違い
グッドパッチでは、UX（ユーザー体験）を「個人的で主観的な心のプロセス」と位置付けています。
UIデザインが具体的な機能や製品の振る舞い方に焦点を当てるのに対し、UXデザインはユーザーが製品・サービスを利用する際の過程で得られる総合的な体験に焦点を当てます。
また、UXはデザイナーが直接設計できるものではなく、「体験を設計する」と言い切ることには注意が必要です。UXとはあくまでユーザー個人個人の心のことなので、UXデザインというものは「何かを体験できる環境づくり」と捉える方が実情に近いかもしれません。
UXデザインでは、ユーザーの主観的な感情、時間的な経過（製品使用前・中・後）、そして状況的な要素（使用環境や文脈）を考慮します。
例えば、UIデザインがボタンの仕組みや表現を決定するのに対し、UXデザインはそのボタンを押すことでユーザーがどのような利益を享受し、どのような感情を抱くのかといった過程そのものや心の変化を強く考慮します。
UIデザインとUXデザインは類似したものであると思われがちですが、本来は異なる概念です。ただし近似している部分があることも事実ですので、基本的にはUIデザインに取り組む場合にはUXとも向き合う必要があります。しかしUX起点でこれを考えた時には、その具体的な対象物が何かのソフトウェアのUIと定まるわけではありません。
UIデザインでは何かの製品や特定プラットフォームの都合を強く意識しながら製品作りに注力し、UXデザインではより広い視野を持ってユーザーの心のプロセスに目を向けるようにしましょう。
【関連記事】UXデザインとは？UIデザインとの違いや設計プロセス、事例を紹介
ビジュアルデザインとの関係性
ビジュアルデザインはUIデザインに完全内包される分野ではありませんが、ユーザーが直接見て触れる部分を設計するわけですから、当然その見た目や表現にも細心の注意を払って設計していく必要があります。UIデザインにおいてはビジュアルデザインがUIの表層部分の設計に強く関わることになります。
ビジュアルデザインでは、UIの外観や触り心地に関する部分に責任を持ちます。これは単なる見た目の美しさだけでなく、ユーザーを製品に惹き込み、長期的な使用を促すための「楽しさ」や「心地良さ」を創出することにつながります。
UIデザインでは、ユーザーのユースケースや機能要件の実現、正しい情報設計に基づく確かなデザインというものが重要です。一方で、その見た目や触り心地といった感覚的な部分の設計にも目を向けなければなりません。さまざまなアイデアやコンセプトを元に、感覚からユーザーの心を動かすような世界観を作り上げることも大切です。
出典：Goodpatch グッドパッチ｜ワンキャリアクラウド｜Work
関連記事：Goodpatch流再解釈「デザインの5段階モデル」
UIデザインが求められる理由
現在、ユーザーはデジタル上、つまりソフトウェア上で多くの体験をする時代になっています。
グッドパッチではUIデザインを「ソフトウェアデザイン」とも表現することが多く、UIとは単にグラフィック要素など見た目だけで設計できるものでは決してなく、それがソフトウェアの一部としてインタラクティブに振る舞うものであるという考えに基づいています。
つまり、ソフトウェアを前提にしたときに、UIデザインとは何かの絵を描くことではなく、ソフトウェアを作ること（＝ソフトウェアデザイン）なのです。
ソフトウェアデザインの目的の一つは、UIを通してユーザーがソフトウェアに触れられるようにすることです。そして、ソフトウェアにおけるUIデザインの目的は、ソフトウェア的に振る舞うUIを設計することと言えるでしょう。
UIデザインはユーザーと製品とを繋ぐ部分を作ることです。特にソフトウェアにおいては、物理的に形のないソフトウェアというものをユーザーがきちんと知覚できるように表し、あたかも直接見て触れられるような感覚をそこにもたらしてあげることが大切です。
単に機能の実現やサービスの提供といった観点のみならず、ユーザーがそのソフトウェア製品に触れて何かを感じ取ることができ、製品そのものやサービスに対して愛着を持てるような環境を作ってあげることが、その製品の魅力を高めることにつながります。結果的には、事業者とユーザーの双方に大きな価値をもたらすことでしょう。
事業者にとって、優れたUIデザインはユーザーとのコミュニケーションの直接的な手段となります。UIこそがユーザーにとっての製品イメージであり、ブランドであり、価値となるのです。この仕組みを形作ることは競合製品との差別化要素にもなり、市場競争力を強化します。
また、製品開発の早い段階からUIデザインを重視することによって、後の修正コストを大きく削減できます。サービスの価値をユーザーに確実に届けるためにも、UIデザインは重要な役割を果たします。
UIデザインで大切な5つのポイント
UIデザインでは、次の5つの観点に注意しながら取り組むことが大切です。これらのポイントを押さえることで、ユーザーがより快適に、滞りなく価値を享受できる製品を実現できます。
- ユーザビリティを向上させる
- アクセシビリティを確保する
- デバイスやプラットフォームの特徴に合わせる
- ユーザーにとって学習コストが低い設計にする
- ユースケースに基づいた設計を行う
1.ユーザビリティを向上させる
ユーザビリティとは、簡単に言えばその製品の使いやすさを示す性質や度合いです。厳密な定義としては、一般財団法人日本規格協会により以下のように示されています。
特定のユーザが特定の利用状況において，システム，製品又はサービスを利用する際に，効果，効率及び満足を伴って特定の目標を達成する度合い
引用：JIS Z 8521:2020 人間工学―人とシステムとのインタラクション―ユーザビリティの定義及び概念 | 日本規格協会 JSA Group Webdesk
「特定のユーザー」「特定の利用状況」というところがミソで、必ずしもあらゆる状況下で万人受けする製品設計を常に心がける必要はなく、実際の想定ユーザーや利用実態を踏まえて現実的な設計を目指すことがバランスの取れたUIデザインにつながります。その際にターゲットユーザー像やユースケースというものを明確に定義することによって、迷いのない設計を行いやすくなります。
2.アクセシビリティを確保する
アクセシビリティとは、簡単に言えば情報への到達容易性を示す度合いです。
ユーザーの環境や状況、属性、境遇に関わらず、あらゆる人々があらゆる手段を用いて確実に情報を手に入れられ、そして活用することができる環境づくりを心がけることが目的となります。
アクセシビリティというと、よく障がい者の方に向けた何か特殊な操作方法や表示方法に関する設計であると捉えがちなのですが、そうではなく、どのような境遇の人であれ、何か操作方法に不具合を抱えたり、表示情報にアクセスしづらかったりする場面は誰にでも起こり得ることだとまず認識することが大切です。
例えばパソコンを操作するマウスがたまたま壊れていて、マウスカーソルを操作する手立てを失うということは、その人にとって一時的な障害が生じていると解釈することができます。このことをさまざまなデバイスや身体機能との関わりにまで拡張し、ユーザーと製品との間の情報のやり取りが滞りなく十分に行えるかどうかに焦点を当て、その仕組みを形作ることがすなわちアクセシビリティを確保していく、ということになります。
一般的なソフトウェア製品の開発場面では、例えば次のような観点に注目し、アクセシビリティを検討すると良いでしょう。
- 情報表現を色のみに依存していないか
- コントラスト比が十分に確保されているか
- ダークモードに対応しているか
- ダイナミックタイプ（OS等の自動テキストリサイズ機能）に対応しているか
- 読み上げ機能に対応しているか
- 音声入力に対応しているか
- キーボードナビゲーションに対応しているか
- そのほか、OSが提供するアクセシビリティ機能に対応しているか
これらを考慮したUIデザインを心がけることで、より多くの人々にとって使いやすい製品を実現しやすくなるでしょう。
3.デバイスやプラットフォームの特徴に合わせる
ソフトウェアのUIというものを考えたときに、UIはソフトウェアの一部として実装されます。
そのソフトウェアはプラットフォームと呼ばれる基盤ソフトウェアの上で駆動するアプリケーションの一種と捉えることができますから、大前提としてプラットフォームの特徴に矛盾しない仕組みを作らなくてはなりません。ネイティブアプリならOSのUIフレームワークやOSサービス（プッシュ通知やウィジェットなどの仕組み）に積極的に準拠し、デザイン言語もOSの定義するものに合わせていきます。
想定デバイスが持つ機能にも積極対応し、アプリとOSとデバイスに一体感を持たせることが重要です。なぜなら、あなたのアプリのユーザーは、アプリのユーザーであるのと同時に、そのOSのユーザーでもあり、そのデバイスのユーザーでもあるからです。
例えばApple社はiOSなどの自社プラットフォームに関わるデザイン言語を規定したHuman Interface Guidelines（通称HIG / ヒグ）を公開しています。このガイドラインを参考にすることで、iPhoneのためのiOSらしいアプリというものを簡単に実現できるようになります。
Webにおいては一つの定まったデザイン言語は存在していませんが、セマンティックWebの考えやWebアクセシビリティなどの指針が業界内で示されています。また、ドメインごとに独自のデザインシステムを構築し運用していく機運が高まりつつあり、Webにおいても一貫性のあるデザインを志すことが優れた方法であるとの理解が広まっています。
ブラウザごとの機能的差異や特徴への配慮等も行いつつ、なるべく多くの環境、多くのブラウザで問題なく駆動できるWebソフトウェアを実現していく姿勢を持つことが前提となるでしょう。
その上で、自社のサービスのどこに独自性を持たせ、どのような価値をもたらすのかといったことを考慮することも大切です。これらの分野に携わるデザイナーには、プラットフォーム・アプリ・サービス、それぞれのバランスを鑑みたデザインに向き合える感性が強く求められます。
【関連記事】【事例あり】デザインシステムとは？作り方を5ステップで解説！事例や導入メリットも
4.ユーザーにとって学習コストが低い設計にする
どのようなUIでも、ユーザーは以前に見たことがある形やルールに基づいてその使い方を想起します。
今日ではパソコンのマウスの使い方はほぼ誰でも理解できる仕組みだと思いますが、最初にマウスが登場した当時は、マウスの使い方が分からずに、それを手に持って空中でくるくる回す人が現れたほどです。どのような素晴らしい直感的と思われる仕組みだとしても、本当に最初の一回目ではそのルールを一から学ぶ必要があるのです。
UIデザインではさまざまなデザインパターンを組み合わせて表現や使い方を設計していきます。それらパターンは過去の有名な製品が備えていた仕組みから一般化したものがほとんどで、まったく新規のものはほとんど含まれません。
私たちが長細い角丸の長方形に文字が付いているものを見たらそれを「ボタン」と認識できるのは、私たちが普段からそのようなパターンを目にしているからで、このパターンから外れた奇抜な形のボタンを作ってしまうと、それはユーザーにとって「学習コストが高いもの」となってしまうものかもしれません。
ユーザーにとって学習コストが低いとは、過去のデザインパターンにどれだけ則し、適切に応用した設計になっているのかということです。
5.ユースケースに基づいた設計を行う
UIデザインにおいては、ユーザーの意図や用途、目的をなめらかに達成できる仕組みになっているかが重要です。これはユースケースとも呼ばれます。基本的にはユースケースをすべての設計の論拠とし、ユースケースで定義していない事柄はUIの仕組みや機能には含めないようにします。
そうすることで、UIデザインプロセスの全体がユーザーの用途に基づく発想で進められるので、需要のない機能や目的を外した機能設計といった「場違いの設計」にならずに済みます。グッドパッチではこのことをユースケース中心設計と呼ぶこともあります。
ユースケースを定義するには、その材料となるユーザーストーリーやペルソナモデルの定義が必要になります。グッドパッチではこの過程は主にUXデザインの業務として行うことが多く、UIデザインの業務と分担して進めます。ユースケースを基点にすると、不明瞭になりがちなUXデザインの成果を直接UIデザインに接続可能になりますので、無駄なく確かなUIデザインというものを目指しやすくなります。
関連記事：Goodpatchの先輩デザイナーに聞いた！UIのフィードバックをする時の観点って？
効果的なUIデザインの取り組み事例
グッドパッチでは、これまでさまざまな企業のソフトウェア製品・サービスに関わるUIデザインを支援してきました。その取り組みの一部を紹介します。
- 株式会社ワンキャリア：「ワンキャリアクラウド」
- 株式会社ジンズ：「JINS MEME OFFICE」
- サントリー食品インターナショナル株式会社：「サントリープラス」
株式会社ワンキャリア：「ワンキャリアクラウド」
出典：Goodpatch グッドパッチ｜ワンキャリアクラウド｜Work
株式会社ワンキャリアは、就職活動中の学生を対象にしたキャリア支援サービスを提供する企業です。戦略人事をターゲットとしたSaaSプロダクト「」では、50万件の就職活動の体験情報を独自に保有しており、このデータを活用して新卒採用の課題を解決しています。
グッドパッチは、「拡張性」や「柔軟性」を備えた体験設計とソフトウェアUIデザインで、SaaSの将来的な事業成⻑を見据えた開発をサポートしました。
UIデザインでまず取り組んだのが、「拡張性」を意識した構造設計でした。例えば、製品の中の情報構造の在り方、それを反映したUI表現、インタラクション（ユーザーのアクションに対してシステムが必要な反応をすること）の仕組みなどです。
中でも、この製品全体の基盤となる部分に関しては、サービスの事業ロードマップを強く意識しながら、先々の事業成長にも柔軟に対応できる拡張性を持たせました。将来のバージョン2、3で機能追加したくなった場合に、この構造のどこに機能を追加できるのか、その時のUIの形はどのようになっているのかなどを検討しやすい基盤というものを構造設計によって実現しました。
UIデザインのもう一つの特徴は、これを単なる「Webサイトの延長」ではなく、パソコンなどで使う一般的な「GUIアプリケーション」として捉え、その思想に則ってデザインすることを強く意識しました。細部の動きや見た目も、通常のWebサイトとは異なるセオリーが適用されており、メディアではなくツールであることを実感しやすく、Webベースでありながらも操作しやすいUIに仕上がっています。
こうした取り組みを通して、株式会社ワンキャリア代表取締役 宮下さんは「サービスを作ることに留まらず、概念モデル図や共通言語を作るワーク、スクラム開発の提案など、プロセスの選択肢をたくさん教えてもらいました。会社の資産、アセットになるものを残してもらえたことは大きな価値だったと思います」と振り返ります。
株式会社ワンキャリア：「ワンキャリアクラウド」のご支援内容詳細は、以下バナーから資料をダウンロードできます。
株式会社ジンズ：「JINS MEME OFFICE」
出典：Goodpatch グッドパッチ｜JINS MEME OFFICE｜Work
JINS MEME OFFICEは、株式会社ジンズが開発したメガネ型デバイス「JINS MEME」と連携するモバイルアプリです。
デバイスが備える3つのセンサーでアタマ・ココロ・カラダのデータを計測し、集中力を可視化。計測データを振り返ることで、集中を使いこなすための勝ちパターンやルーティンを見つけられます。グッドパッチでは、JINS MEMEの可能性を世の中に届けたいという想いのもと、iOSアプリとApple WatchアプリのUIデザインおよびアプリ開発をサポートいたしました。
JINS MEMEはスマートフォンとBluetooth接続することでデータのやり取りをしています。しかし、ほとんどの新規ユーザーはメガネとスマートフォンを接続させるということを初めて体験します。そのため、できるだけ接続・切断を意識しないようなインタラクションを心掛けました。
例えば、デスクにスマートフォンを置いたままその場を離れるとBluetooth接続は切れますが、その度に接続切れのエラーを通知するとユーザーにとっては煩わしくなります。そこでユーザーがデスクに戻ってきたときに自動的に再接続するに留めました。 複数のデバイスが関わるアプリケーションを開発する際にはエラーを含めたインタラクション設計が特に重要だったのです。
Apple Watch (watchOS) 向けアプリでは、「2秒で自分の状態がわかる」ことをコンセプトにUIを設計しました。ユーザーが頻繁に目にするComplicationに表示する内容と量、Notificationで伝える内容と量、そしてタイミングに強く配慮しています。JINS MEMEとiPhoneとApple Watch、デバイスの特性を考慮しながら何度もプロトタイプを作り、そして実際に試用しながら、ユーザーの集中の妨げにならない体験というものを目指しました。
サントリー食品インターナショナル株式会社：「サントリープラス」
出典：Goodpatch グッドパッチ｜SUNTORY＋｜Work
サントリー食品インターナショナル株式会社の「サントリープラス」は、企業の「健康経営」をサポートするヘルスケアサービスです。
グッドパッチは、サントリープラスが構想段階であった2018年12月から参画。0→1のアイデア創出からプロダクト開発・グロース、プロモーションまで一気通貫で共創。ブランドの思想を言語化したVision-Mission-Valueをもとに、iOSおよびAndroidアプリ、サービスサイト、プロモーションツールなど、ユーザーとのあらゆる接点で統一感のある体験をデザインしています。
ユーザーの感情に対するアプローチとして、VMVを起点にパーソナリティを言語化したTone of Voiceを設計、ユーザー体験のコアとなる健康タスクの設計、ビジュアル表現、Appのアーキテクチャと実装に、ブランド思想を装着。使いやすさに対するアプローチとして、ユーザーが成し遂げたい「目的」をベースにしたUIデザインを行っています。
「操作する対象に向かうUI」として、ユーザーの目的を定義・明示し、目的を中心とした操作が可能なUIを実現。「健康タスク」を「実行」する順序でソフトウェアとしての構造設計を行い、違和感の無いUIを実現することを強く心がけました。
こうした点が評価され、「2020年度グッドデザイン賞」、「iFデザインアワード2021」を受賞。後者の受賞においてはさまざまな審査項目の中でも、特にビジュアルデザインや審美性のことを指す「Form」にて最も高い得点を獲得しました。
当サービスは2024年6月に累計導入企業が1000社を突破。確かなUIデザインにより、より多くのユーザーに愛される存在になっています。
サントリーのご支援事例の詳細は以下のバナーからダウンロードしてご覧ください。
関連記事：企業の健康経営をサポートする「SUNTORY＋」（サントリープラス）、導入企業1,000社突破！
UIデザインに活用できるツール
UIデザインに取り組むにはツールの活用が不可欠です。作業内容とツールの特徴をよく理解し、適したものを選ぶことが重要です。
人気の高い代表的なツールを紹介します。
Figma
Figmaは現在もっとも人気のあるデザインツールです。Web／クラウドベースで利用でき、複数人でのリアルタイムコラボレーションが簡単に実現可能なことが特徴です。豊富なプラグインやコンポーネントライブラリにより拡張性が高く、デザインシステムの運用や開発を意識したワークフローへの効率化にも適しています。
そのほか、デジタルホワイトボードのFigJamや、プレゼンテーションスライドを制作できるFigma Slidesなど、UIデザインに限らない新しい機能も増えてきているので、リモートでのあらゆるデザイン作業をFigmaに集約することも現実的かもしれません。
主な特徴
- Webベース
- ブラウザから利用可能
- Figmaアプリ（デスクトップアプリ）から利用可能
- SketchやAdobe XDなど他社製ツールのデータを取り込み可能
- リアルタイムコラボレーション
- プラグインやライブラリなどの豊富なエコシステム
- SaaS型課金モデル
料金
- スターター：無料
- プロフェッショナル：¥2,250/フルシート/月
- ビジネス：¥6,750/フルシート/月
- エンタープライズ：¥11,250/フルシート/月
※2024年7月現在
Sketch
Sketchは欧州のSketch社（旧Bohemian Coding）が開発しているUIデザインツールです。macOS専用ネイティブアプリとして設計されているのでWindowsやWebブラウザで直接利用することはできませんが、macOSの美しいインターフェイスやOS機能と相性が良いので直感的に扱いやすく、Macを使っている一部ユーザーには根強い人気があります。
Figmaが普及する前にはSketchがUIデザイン分野の標準ツールだった時代もありますが、現在ではFigmaほどの大きな仕組みが必要でない小規模の開発現場や、Appleプラットフォーム向けのソフトウェア開発スタジオや個人開発者が導入する傾向にあるようです。
Figmaのようなリアルタイムコラボレーション機能やクラウド機能、ブラウザでのプレビュー、Figmaファイルの読み込みにももちろん対応しているので、SketchからFigmaへの移行、あるいはFigmaからSketchへの移行は既存のワークフローを大きく変えることなく乗り換え検討しやすくなっています。
主な特徴
- macOS専用ツール（ネイティブアプリ）
- macOSに合ったインターフェイスと直感的な操作性
- Apple公式のUIコンポーネントライブラリに対応
- 高機能なシンボルとライブラリ
- ファイルベースのデータ形式
- クラウド保管とブラウザプレビュー
- リアルタイムコラボレーション
- SaaS型課金モデル、またはMacアプリ専用買い切りモデル
料金
- サブスクリプション：10ドル/月（1年間）
- Mac限定プラン：120ドル/Macデバイス（1年間のアップデート権保証）
- 無料トライアルあり
※2024年7月現在
Adobe XD
Adobe XDはAdobe社が提供しているUIデザインツールです。Sketch、Figmaに続く第三極としてAdobe Creative Cloudシリーズの一つとして2017年に登場しましたが、AdobeがFigmaを買収しようとした際にサービス終了が告知され、Figmaの買収断念後もその方針は変わらず、現在ではAdobe XDの単体販売は終了しています。
Adobe Creative Cloudを導入している開発現場の一部では追加料金が必要ないという強みから人気を博しましたが、機能的にはFigmaやSketchに劣る上、今後のサービス提供も望めないことから、新規の利用は控えた方が良いでしょう。
主な特徴
- PhotoshopやIllustratorとのデータ連携が可能
- UIデザインやプロトタイプ制作に特化
- macOSとWindowsに対応
- Adobe Creative Cloudのプランで追加料金なく導入可能
- 非デザイナーにも扱いやすい導入コスト
UIデザインを学ぶ方法
UIデザインを学ぶ方法には、書籍やWebの資料にあたる方法のほか、実際に製品のインターフェイスを模写して構造や表現の特徴を直接捉えるといった実践的方法があります。ソフトウェアの場合には簡単なアプリを作ってみてプラットフォームのUIデザインを学習するチュートリアル的方法も検討できます。
ここでは、分野別におすすめの書籍や資料を簡単に紹介します。
書籍
About Face
About Faceは、初期Windowsのデザインを支えたAlan Cooper氏による著書です。彼は現在でもよく知られる「ペルソナ」を活用した方法論を提唱した方でもあります。UIデザインの原理原則や、ペルソナモデリングを含むさまざまな方法論を紹介しており、本書は現代においてもまったく遜色ないUIデザイン書籍の金字塔と言えます。
旧和訳版としては「ユーザーインターフェイスデザイン Windows95時代のソフトウェアデザインを考える」（= About Face 1）、「About Face 3 インタラクションデザインの極意」（= About Face 3）の2冊が有名ですが、どちらも絶版で中古市場でも高騰しており入手が困難です。
しかし2024年8月に新和訳版「ABOUT FACE インタラクションデザインの本質」がマイナビ出版より新たに刊行予定となっています。
About FaceはUIデザインに携わるならば必ず手に取りたい一冊と言えるでしょう。
ユーザーインターフェイスデザイン: Windows95時代のソフトウェアデザインを考える
インタフェースデザインの教科書
インタフェースデザインの教科書は、人間の認知の仕組みから情報デザインの方法まで、広くインターフェイス設計に関する事柄を扱っています。UIデザインの初級〜中級者の方が改めてUIデザインというもののアカデミックな捉え方を学び直すのに最適な一冊と言えるでしょう。
融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論
融けるデザインは、ハードウェアとソフトウェアの関わり方から情報デザインの形を考えるための発想とロジックをわかりやすく解説しています。iPhoneのなめらかさと心地よさの正体とは何か、最重要キーワードである「自己帰属感」を軸に、これからのインターフェイス設計の考え方を解き明かします。
特にソフトウェアにおいてはインタラクティブなUIというものが非常に重視されますので、UIデザイナーのみならず、ソフトウェアエンジニアにも是非手に取ってもらいたい一冊です。
オンライン資料
Human Interface Guidelines
Human Interface Guidelines（通称HIG / ヒグ）は、Apple社が約半世紀にわたって刊行し続けているApple製コンピュータのためのデザインガイドラインです。
初期はApple ⅡやLisaコンピュータ、MacintoshのためのUIデザインの指針を説いたものでしたが、現在のHIGはmacOSやiOS、visionOSなど基本的にはAppleプラットフォーム全体を網羅する基本指針として位置付けられています。
しかしHIGの根底にある考えや思想はAppleプラットフォーム特有のものとは限らず、他のプラットフォームにおいても適用できるものが多く、UIデザインの学習資料としても活用することができるでしょう。
iOSアプリなどを手掛ける際には必ず目を通しておきたい資料の一つです。
2023年以降は公式の日本語訳も提供されていますので、日本語話者にとっては入門しやすい環境が整っています。
Material Design
Material Designは、Google社が提供するデザインシステムのためのオンラインリソースです。このガイドラインは、Android、iOS、Webアプリケーションなど、さまざまなプラットフォームにわたる一貫したユーザーインターフェイスを設計するためのガイドラインを提供しています。
Material Designの基本原則、視覚言語、モーションデザイン、コンポーネントライブラリなどを詳細に解説しています。色彩、タイポグラフィ、レイアウト、アニメーションなどの具体的なデザイン要素についても、実践的なガイダンスを提供しています。
高品質で確かなUIデザインによって、ユーザーの心を揺さぶる製品を実現しましょう
UIデザインは、ユーザーが直接触れる対象物との関わり方を設計することです。ユーザーにとってわかりやすく、適切な表現を与えることによって、対象との滞りのないインタラクションを実現することが大きな目当てとなります。
同時にシステムにとって処理しやすい情報構造を形づくり、インターフェイスと機能とが矛盾なく関わり合う仕組みを形作ることも必要です。このユーザーとシステム双方にとって良い形を目指すことが、品質の高いUIデザインを志す第一歩となります。
また、昨今のコンシューマー向けソフトウェア製品には高品質なものが多く、一般ユーザーにとっての「当たり前品質」の水準がかつてより高い傾向にあります。
人々が普段触れている人気の製品と同等品質のUIやユーザー体験が求められます。
そのため、単に機能要件を実現するようなシステム設計に終始するのでは不十分です。ユースケースを考慮した設計プロセスを取り入れ、ユーザーが目的を達成しやすい仕組みにしたり、ストレスなく使えるようにしたりする工夫が必要です。
同時に、その製品の「推し」となるような外観や振る舞い方を添えることで無機質さが取り払われ、より魅力的なユーザー体験を提供できるようになります。
グッドパッチでは「Designing the WOW」を標語に、ハートを揺さぶるような製品作りを志しています。UIデザインにおいても、システム的な機能の実現はもちろんのこと、実際にユーザーが触れたその瞬間の感覚まで、人間らしいデザインを実現したいと考えています。
私たちが提供しているプロダクト開発支援でもその志は変わらず、あなたの事業のさらなる発展と魅力を高められる自信を持っています。UIデザインでお困りのことがあれば、ぜひお気軽にご相談ください。
UI/UXデザインならグッドパッチへ
プロダクトのUI/UXを「ビジュアルデザイン」「コンテンツ機能」「情報設計」の側面から分析・レポート。アプリやWebサイトの、CVR改善、離脱防止、ユーザー数アップなど、成果に直結する改善点を最短1週間でご提案します。
このような方におすすめです
- ・事業の本質に踏み込んだUI/UX改善を求めている
・長期的なパートナーシップでデザイン価値を最大化したい
・ユーザー視点と事業成長の両立を目指している
単なる請負ではなく、御社の強い想いに寄り添い、時には事業提案にまで踏み込んだデザイン戦略で、企業価値の創造を支援します。