UIデザインの三原則について
最初にお伝えしておきますが、この三原則はUIデザインの基本的なスキルを抽象化したもので、私のオリジナルです。なので、「UIデザインには三原則がある！」というような理解はしないでくださいね。
UIデザインには、多くの原則とテクニックが存在しますが、その中でも特に重要な三つの「まとまり」に着目してみました。
- 情報のまとまりをつくる
- 視覚的なまとまりをつくる
- 行動のまとまりをつくる
です。
これらの原則は、どんなデザインプロジェクトにおいても欠かすことのできない基盤となります。
以降、これらの原則に焦点を当て、UIを学んだ事のないデザイナーやエンジニアにも理解しやすいように解説します。UIデザインの魅力的な世界に足を踏み入れ、デザインの基本を学ぶことで、デザイナー、エンジニアとしてのスキルセットに新たな次元を加える準備ができるでしょう。
UIデザインの三原則とは
次に、三原則の各項について説明します。高いUXを提供するためのデザインプロセスを、3つの「つくる」領域に分けました。このデザインプロセスに適用することで、使いやすく魅力的なUIデザインを生み出すことができます。
情報のまとまりをつくる
情報のまとまりは、ユーザーがコンテンツを理解しやすくするための重要な要素です。
UIデザインでは、関連する情報をグループ化し、一貫性のあるデザインで表示することで、ユーザーの情報取得が容易になります。
グループ化や階層構造の設計には、コンテンツの重要性や関連性を考慮する必要があります。利用頻度などが関係することもあります。
視覚的なまとまりをつくる
視覚的なまとまりによって、画面が整理され、ユーザーが情報を見やすくなります。
レイアウト、色彩、フォントなどの要素を統一し、視覚的な統一感を持たせることが大切です。
コントラストや整列、知覚的法則（プレグナンツの法則）を活用して、デザイン要素をまとめることが効果的です。
行動のまとまりをつくる
行動のまとまりは、ユーザーが期待通りの操作を行いやすくするために重要です。
類似のアクションや機能をグループ化し、適切な場所に配置することで、ユーザーがスムーズに操作できるようになります。
インタラクションの流れやユーザーフローを考慮して、行動のまとまりを設計することがポイントです。
チャンキングについて学ぼう
まとまりをつくることをチャンキングと言います。チャンク（塊）＋ingでチャンキングなので、単なる英訳ですが…一応、専門家の間ではチャンキングと言われている気がします。
情報のチャンキングとは、大量の情報を小さなまとまり（チャンク）に分けて整理することです。ユーザーが情報を小さな塊で受け取ることで、情報の取得が容易になります。例えば、電話番号をハイフンで区切ったり、リストをバラけた情報よりも整然と表示したりすることがあります。
情報のチャンキングには、さらにいくつかのテクニックが存在します。以下にそれぞれのテクニックについて詳しく説明します。
チャンクアップ（Chunking Up）
チャンクアップとは、複数の小さなまとまり（チャンク）をグループ化して、より大きなまとまりを作るテクニックです。複雑な情報を分析し、関連するチャンクをまとめ上げることで、情報を理解しやすくします。例えば、複数の関連記事をテーマごとにまとめることが挙げられます。
チャンクダウン（Chunking Down）
チャンクダウンとは、大きなまとまりをより小さなチャンクに分割するテクニックです。複雑なタスクや情報を、小さなステップや要素に分解して理解しやすくすることが目的です。プロジェクトのタスクを細かなステップに分割することが例です。
水平チャンク（Horizontal Chunking）
水平チャンクとは、同じレベルの情報を横に並べて表示するテクニックです。水平に配置された情報は視覚的に比較しやすく、ユーザーが異なる選択肢や要素を比較する際に効果的です。価格の比較や機能の一覧表示が水平チャンクの例です。
まとまりをつくる、の考え方についてご理解いただけましたか。
それでは次に、各々のまとまりをつくる方法について学んでいきましょう。
情報のまとまりをつくる
まずは、情報のまとまりをつくりましょう。情報のデザインと言っても良いですね。
これらのアプローチは、情報の整理と伝達を支援し、ユーザーに快適なエクスペリエンスを提供するための重要な手法です。UIデザインにおいて、適切なアプローチを選択して情報を整理することで、ユーザーが効果的に情報を理解しやすいデザインを実現できます。
構造化
情報の構造化とは、情報を階層やパターンに基づいて整理し、関連性を明確にすることです。階層的な構造を持つメニューやフォルダ構造などが例ですが、階層構造以外の構造を持つこともあります。ユーザーが必要な情報にスムーズにアクセスできるようになります。
階層化
階層化は、情報を異なる階層に分けて整理するアプローチです。主要なカテゴリやセクションを一番上の階層に配置し、サブカテゴリや詳細情報を下位の階層に配置することで、情報の見やすさとアクセス性を向上させます。
分類とタグ
分類は、類似した情報をグループにまとめて分類することです。タグはキーワードやラベルを使って情報を特定のカテゴリに関連付ける方法です。ユーザーが特定のテーマや興味に合わせて情報を絞り込むことができます。
時系列やプロセス
時系列やプロセスの表現は、情報の流れや順序を視覚的に示すための手法です。タイムラインやフローチャートを使って、イベントの順序やプロセスのステップを明確に伝えることができます。
フローの情報
一定の時間内に発生するデータや情報の流れをフローの情報と呼びます。これは通常、リアルタイムまたは短期間内に変化する情報を指します。フローの情報は、例えばセンサーデータ、リアルタイムのトランザクション、ソーシャルメディアの投稿などです。フローの情報は、その特性により高頻度で更新され、時間とともに価値が減少する場合があります。
ストックの情報
ある特定の瞬間や時間点で存在するデータや情報の状態をストックの情報と呼びます。一時的なものではなく、長期間にわたって存在する情報を指します。ストックの情報は、例えばデータベース内の保存されたデータ、アーカイブされたドキュメントなどです。ストックの情報は、時間が経っても価値が下がりにくく、一度記録されると頻繁に変化しない傾向があります。
視覚的なまとまりをつくる
「情報のまとまり」を視覚的に表現する方針を考える段階です。
視覚的要素は多岐に渡り大変複雑ですが、原理原則が存在します。装飾的だったり、細かく規則を考えすぎると、原理原則から離れてしまうので、極力シンプルにすることを目指しましょう。これらの要素と原則を総合的に理解し、デザインに適用することで、視覚的にまとまりのある魅力的なUIデザインを実現できます。
レイアウトとグリッド
レイアウトは要素の配置と相互関係を指します。適切なレイアウトは情報を整理し、ユーザーがスムーズにナビゲーションできるようにします。
グリッドは要素を整列させ、一貫性を保つための基準。グリッドに沿った配置はデザインの統一感を高めます。
またUIデザインでは、いくつかの典型的なレイアウトパターンが存在します。レイアウトの類型と特徴を覚えて活用しましょう。
色彩とカラースキーム
色彩は情報を強調し、感情や意味を伝える重要な手段です。カラースキームの選択はブランドイメージやコンテンツの性格を表現します。
カラースキーム（Color Scheme）とは、デザインやビジュアルプロジェクトにおいて使用する色の組み合わせのことを指します。
カラースキームを持つことで、色の使いすぎによる混乱的な状況を割けることができます。デザインの一貫性や調和を保ちつつ、特定の感情や雰囲気を伝えるために用いられます。
色の対比やバランスに気をつけることで、情報の視認性と一貫性を維持します。
フォントとタイポグラフィ
フォント選択はコンテンツのトーンとスタイルを決定します。一貫性のあるタイポグラフィは読みやすさと品質の高さ、プロフェッショナリズムを生み出します。
フォントサイズ、行間、文字間隔などの要素を調整して、視覚的な快適さを実現します。
ただし、UIデザインではシステムやプラットフォームに関連する技術制約として、フォントの選択に自由度がない場合があります。デザインツールで使えるフォントでも、表示環境によっては使えないことがあるので注意しましょう。
コントラスト
コントラストは要素間の差を強調し、重要な情報を際立たせます。
明暗対比、大小対比、カラー対比、形状対比、テキストスタイル対比などによりコントラストを生み出します。
適切なコントラストを選ぶことで、視覚的なヒエラルキーや重要性を示します。
整列と余白
要素を整列させることで、デザインの秩序を構築し、ユーザーの視覚的なガイダンスを提供します。
垂直・水平な整列を活用し、情報の関連性やフローを示すことができます。
余白は要素間の間隔を指します。デザインの呼吸感や視覚的な整理感を提供するのですが、余白もひとつの面であると理解した方がよいかも知れません。余剰のスペースではなく、必要なスペースとして認識します。適切な余白は情報の過密さを避け、読みやすさや心地よさなどのエクスペリエンスを向上させます。
知覚や認知の心理学の援用
知覚心理学の原則（プレグナンツの法則や認知科学など）を活用して、ユーザーの情報処理を助けるデザインを行います。
ユーザーの認知パターンを考慮し、あるいは利用し、直感的な使いやすさと理解しやすさを向上させます。
行動のまとまりをつくる
「情報のまとまり」「視覚的なまとまり」を実装レベルで設計する段階です。
ユーザーが特定の目的やタスクを実行する際に、スムーズで一貫性のある体験を提供する必要があります。以下の要素を統一的なデザインでまとめることで、ユーザーが目的を達成するために必要なアクションをスムーズに実行できるようになります。行動のまとまりは、一貫したデザインとユーザビリティによって向上させることができますが、そのために必要になるのがユーザー中心のデザイン思考です。
ユーザーシナリオの理解
ユーザーフローを設計する前に、ユーザーがどのようなタスクやゴールを達成する必要があるのかを理解します。ユーザーシナリオを明確にし、ユーザーの行動とニーズを把握することが重要です。
ユーザーフローマップの作成
ユーザーフローマップを作成して、ユーザーがサイトやアプリ内でどのように移動するかを可視化します。これによって、ユーザーの行動の流れや重要なポイントがわかりやすくなります。
主要なアクションの特定
ユーザーが達成したい主要なアクションを特定し、それらのアクションをスムーズに行えるようにデザインします。例えば、商品の購入、フォームの送信、情報の閲覧などのアクションを考慮します。
インタラクションデザイン
ユーザーフロー内での各ステップやアクションの具体的なインタラクションデザインを検討します。ボタンの配置、フォームの入力方法、ナビゲーション要素など、ユーザーがスムーズに操作できるようにデザインします。
進捗とエラーの管理
ユーザーフローが進行するにつれて、ユーザーに進捗がわかるような表示や、エラーが発生した際に適切なフィードバックを提供します。ユーザーが行動を継続しやすいようにサポートします。
アラートや通知
ユーザーフロー内で重要な情報やアクションがある場合、アラートや通知を使用してユーザーに知らせます。新しいメッセージ、アップデート、特別なオファーなどをユーザーに示すことができます。
ユーザーテストとフィードバック
ユーザーフローをデザインした後、ユーザーテストを行って実際のユーザーのフィードバックを収集します。ユーザーがフローをスムーズに進められるか、どのような問題があるかを特定し、改善に役立てます。
閑話休題：プレグナンツの法則
UIデザインの三原則について、それぞれの役割とスキルセットについて説明してきました。
視覚的なまとまりをつくる、の中で少し触れた、知覚心理学について、ゲシュタルト心理学で研究されたプレグナンツの法則をご紹介します、
ゲシュタルト心理学は、知覚や認知におけるパターンや構造の捉え方に焦点を当て、それによって物事を理解し説明しようとする心理学的アプローチです。
その法則の一つであるプレグナンツの法則は、人間の知覚プロセスにおいて、刺激や情報を簡潔で整然とした形態に組織化し、不必要な複雑さを避ける傾向があるという原則を指します。この法則は、ゲシュタルト心理学の全体的な理念と一致しており、知覚や認知に関するパターンと構造の理解に影響を与えています。
UIデザインに関連するプレグナンツの法則をいくつかご紹介します。
単純性の原則
複雑で不必要な解釈や形状を避け、よりシンプルな解釈を選ぶ傾向があるとされます。例えば、図形が複数の要素から構成されている場合でも、それをより簡潔な形態として認識する傾向があります。
近接の法則
要素が互いに近接して配置されている場合、それらの要素は一つのグループとして認識されるという法則です。この法則により、要素同士の距離や配置が近い場合、それらは一体的なまとまりとして捉えられます。
類同の法則
類似した特性を持つ要素は、同じグループとして認識されるという法則です。色や形、大きさなどの特性が類似している要素は、視覚的にまとまったグループとして認識される傾向があります。
連続の法則
連続的なパターンや流れが存在する場合、それは一つのまとまりとして認識されるという法則です。要素が一定の方向やパターンで配置されている場合、それらは同じグループに属すると捉えられます。
閉合の法則
不完全な形や輪郭を持つ要素がある場合、それを補完して閉じた形として認識するという法則です。人間の脳は不足している情報を補完し、全体的な形状を認識しようとする傾向があります。
共通運命性の原則
同じ方向や動きを共有する要素は、一つのグループとして認識される傾向があります。アニメーションや動きのデザインで利用されることがあります。
対称性の法則
対称的な形状や配置は一つのまとまりとして認識されやすいという法則です。対称性を持つ要素は、バランスや整合性を感じさせ、視覚的に魅力的に映ります。
ゲシュタルト心理学全体のアプローチにおいて、プレグナンツの法則は知覚プロセスの原則の一つとして取り上げられ、デザインや視覚的なコミュニケーションにおいて、情報の整理や伝達の際に重要な指針となっています。
それでは、ここからさらにUIデザインのスキルアップを図っていきましょう。
次に、UIデザインの制約事項とデザイン制作のフローについて見ていきましょう。
制約を考える
視覚的まとまりをつくる、のフォントとタイポグラフィの項で少し触れたように、UIデザインでは技術的な制約に留意する必要があります。
これらの技術制約は、デザインの実現可能性やユーザーエクスペリエンスに影響を及ぼす重要な要素です。デザイナーはこれらの制約を理解し、柔軟に対応しながらデザインを進めることが重要です。
レスポンシブデザイン
異なるデバイスや画面サイズに適応するためのデザイン。デザインが異なる画面サイズや解像度に対応できるように調整する必要があります。
ウェブブラウザの互換性
異なるウェブブラウザ（Chrome、Firefox、Safariなど）でのデザイン表示の違いを考慮する必要があります。特定のブラウザに依存しないデザインを実現することが重要です。
アクセシビリティ
ウェブアクセシビリティガイドラインに従ったデザインが求められます。視覚障害者や障害を持つユーザーがコンテンツにアクセスしやすいようなデザインを構築する必要があります。
プラットフォームのガイドライン
特定のプラットフォーム（iOS、Android、Windowsなど）におけるデザインガイドラインを遵守する必要があります。各プラットフォームのデザインパターンやインタラクションを理解し、適切なUIを提供することが求められます。
データセキュリティ
デザイン内で表示される情報が個人情報や機密情報を含む場合、セキュリティを考慮したデザインが必要です。情報の適切な表示や保護策を実装することが重要です。
バックエンドの制約
UIデザインはシステムのバックエンドと連携して機能します。バックエンド側のテクノロジーや制約に合わせてデザインを調整する必要があります。
パフォーマンス
デザイン要素の重さや読み込み速度などがユーザーエクスペリエンスに影響を与えることがあります。パフォーマンスを犠牲にしないようにデザインを最適化することが求められます。
UIデザインの制作フロー
UIデザインのワークフローは、プロジェクトやデザイナーのスタイルによって異なることがありますが、一般的なステップを以下に示します。以下は一般的なガイドラインであり、プロジェクトに合わせて調整することができます。
このワークフローを通じて、UIデザインは良好なユーザー体験を提供することが目標になります。そのために、ユーザーのニーズやフィードバックに対応しながら進行します。
リサーチと理解
ユーザーのニーズや目標を理解するためのリサーチを実施します。
ユーザーのプロファイル、行動、課題などの情報を収集し、洞察を深めます。
ユーザーフローの設計
ユーザーがアプリやウェブサイト内でどのように移動するかを可視化するために、ユーザーフローを作成します。
ワイヤーフレームの作成
ユーザーフローを基に、画面の配置やコンポーネントの配置などを簡単な線画で示したワイヤーフレームを作成します。
スケッチやプロトタイプ
ペーパープロトタイピングやデジタルツールを使用して、アイデアを簡単なスケッチや簡易なプロトタイプに落とし込みます。
デザインの詳細化
プロトタイプを元に、デザインの詳細を追加。UI要素のデザイン、色彩、フォントなどを決定します。基本的なレイアウトパターン、モジュールやコンポーネントを考案します。
プロトタイプの制作
XDやFigmaなどを利用して高精度のプロトタイプを制作し、ユーザーが実際にインタラクションできるようにします。
ユーザーテスト
制作したプロトタイプをユーザーにテストしてもらい、フィードバックを収集。問題点や改善点を特定します。
修正と再デザイン
ユーザーテストの結果を元に、デザインを修正し、UIを改善します。
ファイナルデザイン
デザインの最終的なバージョンを完成させます。コンテンツや画像の配置を調整します。
開発支援
デザインを開発チームに提供し、必要なアセットや仕様を提供します。
最終テスト
開発されたUIをテストし、動作やデザインの整合性を確認します。
リリースとフィードバック
UIを公開し、ユーザーのフィードバックを収集します。運用中の問題点や改善点にも継続的に対応していきます。
おまけ：インタラクションデザインの要素
視覚的なまとまりをつくる、行動のまとまりをつくるの2項にまたがる知識として、インタラクションデザインの類型を知っておくと良いでしょう。
UIデザインに関する定性的な指針である「ヤコブ・ニールセンの10原則」も記事にしていあるのでご参照ください。
ナビゲーション
ユーザーがサイトやアプリ内を移動する際のナビゲーションは、使いやすく一貫性のあるものであるべきです。ヘッダーメニューやサイドバー、フッターリンクなどの配置やスタイルを統一し、ユーザーがサイト内を簡単に移動できるようにします。
アクションボタンとリンク
ユーザーが特定のアクションを実行するためのボタンやリンクは、一貫性があり目立つデザインにすることが重要です。同じアクションが異なる箇所にある場合でも、同じスタイルや位置を使って統一感を持たせます。
フォームと入力
ユーザーが情報を提供するためのフォームは、デザインやインタラクションが統一されていることが重要です。フォームフィールドの配置、ラベル、エラーメッセージなどを統一し、ユーザーがスムーズに入力できるようにします。
ユーザーガイドとフィードバック
ユーザーが新しい機能やプロセスを学ぶ際には、一貫したガイドラインやヒントが役立ちます。ツールチップ、ヘルプアイコン、ツアーガイドなどを通じて、ユーザーに適切なサポートを提供します。
エラーメッセージと成功メッセージ
ユーザーがアクションを行った結果やエラーの際に表示されるメッセージは、一貫性を保ち、わかりやすく提示する必要があります。エラーや成功のフィードバックが統一されたデザインで表示されることで、ユーザーの理解を助けます。
ワークフローとステップ
複雑なプロセスやワークフローがある場合、ステップごとに適切なナビゲーションや進捗表示を提供します。ユーザーが作業を追跡しやすく、中断しても再開できるようにします。
UIデザインと緊密に関わる”デザインシステム”とは
ここからは、UIデザインの上級編です。UIデザインとデザインシステムは非常に関連性が高い概念です。デザインシステムは、UIデザインの一貫性を保ち、効率的なデザインプロセスを確立するための体系的なアプローチです。
デザインシステムとは、デザインされた要素やパターン、ルール、ガイドラインなどを組み合わせた一連の体系を指します。これにより、一貫性のあるデザインを確保し、効率的なデザインプロセスを実現するためのリソースや手法を提供します。以下がデザインシステムの役割です。
- デザインの一貫性を確保し、効率的なデザインプロセスを実現。
- スタイルガイド、パターンライブラリ、コンポーネントライブラリなどを提供。
- デザインの品質とコラボレーションを向上させる。
デザインシステムは、UIデザインやプロダクトデザインにおいて、一貫性を保ち、品質を向上させるための重要なツールなのです。
以下は、デザインシステムの構成例です。
スタイルガイド
色、フォント、テキストスタイル、ボタンスタイル、アイコンなどのデザイン要素の基準を定義したドキュメント。これにより、一貫性のあるデザインが確保されます。
パターンライブラリ
再利用可能なUIコンポーネントやレイアウトパターンのセット。これにより、同じデザインパターンを繰り返し使用することが可能となります。
コンポーネントライブラリ
個別のUI要素やコンポーネントを実装したライブラリ。これを使用することで、一貫性のあるUIを効率的に構築できます。
デザインガイドライン
ユーザーエクスペリエンスの方針やデザイン原則、ベストプラクティスに関する指針。これにより、デザインの品質やコミュニケーションが向上します。
アセット管理
グラフィックや画像、アイコンなどのアセットの管理と共有を容易にします。
バージョニングとアップデート
運用しながらデザインシステムは進化するため、バージョン管理やアップデートのプロセスを提供します。
デザインシステムの導入により、デザイナーや開発者は一貫性を保ったデザインを迅速に実装できるだけでなく、チーム内のコラボレーションが向上し、プロジェクトの効率性が向上します。
デザインシステムの例
デザインシステムは、多くの企業や組織で導入され活用されています。有名な事例を挙げてみましょう。
まぁ結局は一貫性が重要という話になりますが、デザインシステムではユーザーの体験価値の向上とブランド体験が一体化していることに着目する必要があります。
Google Material Design
Googleが提案するデザインシステムであり、アプリやウェブサイトのユーザーインターフェースの一貫性を確保し、直感的なユーザーエクスペリエンスを提供することを目指しています。マテリアルデザインは、色、レイアウト、アイコン、アニメーションなどの要素に関する指針を提供し、多くのGoogle製品で使用されています。
Apple Human Interface Guidelines
Appleのデザインシステムで、iOSやmacOSなどのプラットフォーム上で一貫したデザインエクスペリエンスを提供するための指針です。アプリケーションの外観や操作方法に関するガイドラインが含まれています。
IBM Design Language
このデザインシステムは、デザイナーや開発者がIBM製品やサービスのデザインを一貫性のあるものにするための指針やツールを提供します。IBMの製品ポートフォリオ全体でデザインを統一するための基盤として使用されています。
Shopify Polaris
Polarisは、ショッピングカートや商品管理など、eコマースに特化したUIコンポーネントやガイドラインを提供し、Shopifyのアプリやウェブサイトをデザインする際に利用されます。これにより、異なる部分で一貫性のあるデザインを実現し、ユーザーがShopifyのエコシステム内でシームレスな体験を得られるようサポートしています。