デザインの世界では、「一貫性」はユーザーが製品やサービスを理解し、使いこなすための鍵となります。 Figma社が提供する Design Basicsコースから「デザインの一貫性」に焦点を当て、一貫性がデジタルプロダクトの使いやすさや魅力をどのように高めるのか、その背後にある理論や実践的なアプローチを探っていきます。
Consistency – 一貫性
デジタルプロダクトにおいて、一貫性をもって構築し、維持することはユーザーの体験を向上させることを意味します。 一過性のあるUIによって、ユーザーは特定のインターフェースオブジェクト（例えば、検索バーやハンバーガーメニュー等）の配置に慣れ、製品はより使いやすいものになっていきます。
本記事では、いくつかのキーワードを用いて、一貫性を保つ方法について検討していきます。
Cohesiveness – まとまり
最初のキーワードは Cohesiveness（まとまり）です。 ユーザーの体験は、まるで小説を読むかのようにストーリー性をもたせた”要素のまとまり”であるべきでしょう。 色やフォント、配置を一貫させることが ユーザーがこのストーリーに集中できるようになります。
Utilize a design pattern – デザインパターンの活用
この考え方は、Simplicity のレッスン に通じるものがあります。 以下のような一貫性のあるまとまりは、デザインパターン です。別の言い方をすると、デザインパターン を適用することで、一貫性を保つこともできるということです。
- メニューボタンが上部の角のどちらかにある
- スワイプ操作でコンテンツ間を移動できる
- 主要機能へのナビゲーションバーが下部にある
Intuitiveness – 直感
人は既存のパターンに慣れ、脳はパターンを思い出し、繰り返すことに最適化されています。このはたらきによって、はじめてみる製品についてもどのように動作するかを想像することができます。 デザイン業界全体がデザインパターンを用いることで、こういった直感性をより活かすことになってきています。
Interface copy tone – UIの文言が与える雰囲気や印象
製品UIの以下のような文言についても同様のことが言えます。
- ボタン上のラベル
- ナビゲーションメニューの項目
- エラーメッセージ
- 入力フォームのヒント文字
これら、製品のUIに実装される文言が与える雰囲気や印象も製品自体との整合性を保つべきです。 例えば、あなたの製品がエンタープライズ向けの製品で、ランディングページでフォーマルでプロフェッショナルな方法で説明していたら、製品詳細ページでカジュアルなトーンを用いるべきではありません。
Case: Shopify (Voice and tone)
Shopify では、以下のようなガイドラインを通じて、「ビジネスカジュアルな言葉を使用し、明確で共感的なコミュニケーションを心がける」ことを推奨しています。
Colors and fonts – 色とフォント
経験則として、Webサイトやアプリでは使用するフォントスタイルを2、3種類に留めるとしています。 それ以上使ってしまうと、製品にまとまりが感じられなくなり、気が散ってしまう懸念もあります。
Color palette – カラーパレット
色使いに関しては、一つの主色と一つの副色をベースに、主色副色のトーン違いのパターンに加えて、白と黒あたりから始めるのがよいでしょう。
| 項目 | 説明 |
|---|---|
| Primary Color (主色) | 主要な色で、最も広く使用される色 |
| Secondary Color (副色) | 主色を補完する色で、視覚的興味を加えたり、注意を引くために使用される色 |
| 主色副色のトーン違い | 主色副色の異なるトーン（明るさや彩度のバリエーション） |
| 白と黒 | 一般的にテキスト、背景、または他のデザイン要素に使用される色 |
この色使いは minimal color palettes と呼ばれることもあります。
また、カラーパレットを紹介するサイトを活用することで、膨大なサンプルから自分の製品やブランドに適したものを見つけることができます。
例えば、上記のような白と黒を交えたカラーパレットについては以下のサイトでサンプルを見ることができます。
Alignment – 位置合わせ
ドキュメントやUIを優れたものに見せる最も簡単なものの一つに オブジェクトの位置合わせの一貫性があります。いかにいくつか位置合わせについてのヒントを挙げます。
Grid system – グリッドシステム
Figma を含むデザインツールには グリッドシステム が搭載されていることが多くあり、これを用いることで、縦横、行列の規則的な配置を容易に実現することが可能になります。
| 項目 | 説明 |
|---|---|
| グリッドシステム | 縦横、行列の規則的な配置を容易に実現することが可能になる、配置を整える機能 |
| 8ポイントグリッド | 全ての要素（マージン、スペース、要素サイズ）に8の倍数のサイズを適用することで、デザイン全体に一貫性とリズムを生む手法 |
| スペーシングトークン | あらかじめ定義した値に沿って各要素のサイズを適用する手法。 例えば、x-small: 4px, small: 8px, medium: 16px, large: 32px, x-large: 64pxなど |
Inconsistency – 一貫性のなさ
いままでは一貫性を持たせることに注目してきましたが、あえて一貫性のなさを活用して、コンテンツに焦点を当てる手法もあります。
| 項目 | 説明 |
|---|---|
| ビジュアルコントラスト | 通常とは異なる色、サイズ、またはフォントスタイル（太字、イタリック体など）を使用して、特定のテキストやオブジェクトを強調 |
| 空間的なコントラスト | 引用ブロックのインデントのように、各要素の配置やスペーシングに変化をつけることで、視覚的な際立ちを生み出す |
| 情報階層の明確化 | 情報の階層を明確にすることで、ユーザーの視線をガイドし、どの情報に注意を払うべきかを助ける |
| 一貫性の意図的な破壊 | デザインにおいて一貫性を故意に破ることで、創造性や驚きを加え、ユーザーの注目を集める |
Summary
この記事で整理してきたとおり、デザインの一貫性を維持することはとても重要です。 ただし、その一方でその考えにあまり固執しすぎるのもよくありません。 大事なのはユーザーのニーズであり、ユーザーの問題を解決することが最も重要なことであることを忘れないようすべきです。
ここでも、デザインパターンの重要性が強調されていましたね
カラーパレットの考え方は、家の家具の配色の参考にもなりますね。確かにオシャレに感じるインテリアのコーディネートは比較的少ない色が用いられていることが多い印象ですね。
考察
一貫性は、ユーザーに安心感と信頼感を提供するための重要な要素ですが、時には意図的にそのルールを破ることで、創造性や驚きを生み出し、ユーザーの体験をより豊かなものにすることができます。重要なのは、一貫性を保ちつつも、ユーザーのニーズに柔軟に対応し、彼らの問題を解決するデザインを提供することです。Figmaのレッスンは、私たちがこのバランスを理解し、実践するための貴重なガイドとなるでしょう。
どういった人に利用してもらう製品なのか、というところをきっちりと押さえた上で、利用者が快適に利用できるように、今回整理してきたテクニックを用いて一貫性を保つのが重要ということが理解できました。