2024年3月13日にオンラインセミナー『業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは？』を開催いたしました。
この記事では当日用いた資料を公開しています。
目次
UXデザインの五段階モデル
UXデザインの五段階モデルという概念があります。
- 戦略段階は、誰のために、何を、なぜ作るのかを明確にしていきます。
- 要件段階は、ユーザーニーズとビジネス目標に基づいて、必要な機能やコンテンツを定義していきます。
- 構造段階は、情報設計やインタラクションデザインを通して、製品の骨格を設計していきます。
- 骨格段階は、画面構成や操作方法などを具体的に設計していきます。
- 表層段階は、ビジュアルデザインを通して、製品に魅力的な外観を与えます。
ノンデザイナーが身につけるべきUX/UI設計の基本
ノンデザイナーが身につけるべきUX/UI設計の基本を、色、画面の動き、コンポーネントの適切な選択、ユーザーの持つ共通認識やインタラクションコストといった観点から解説していきます。ワイヤーフレームを作成する際のツールの選択方法や、ユーザーテストの必要性といった実践的な部分や、デザイン内製化支援の実際にも触れます。
色の特性
色の持つイメージ
色は、さまざまな意味や効果を持っています。下図では、一般的なカラーイメージとシステムが持つカラーイメージを示しています。
緑は、一般的に安心感、成長、自然などを表す色です。システムのUIでは、成功や完了を表すメッセージなど、ユーザーに安心感を与えるものとしてよく使用されます。
黄色は、一般的には躍動や快活というイメージがありますが、システムのUIでは注意喚起、警告などを表す際によく使用されます。
また赤は、一般に情熱や自信などのイメージのある色ですが、システムのUIにおいては、緊急性の高いメッセージや、ユーザーの注意を引く必要がある部分に使用される色となっています。
色はさまざまな意味を持っているため、その意味を理解した上で、適切に使用することが重要です。適切に使用することで、ユーザーにとって使いやすいUIを実現することができます。
補色を使用するときの注意点
使用する色に関連して、補色を使用するときの注意点についても解説していきます。
補色とは、下図で示したように、色相環上で正反対に位置する2色のことを指します。
例えば、補色は互いの色を引き立て合いコントラストを強調するので、重要な部分に補色を使うことで、目立たせ、訴求力を高めることができます。ただし、補色は互いの色を引き立て合う一方で、全体のバランスを考慮しないと派手になりすぎる可能性があるため、注意が必要です。
ロゴデザインや広告といった強い印象を与えるツールでは補色をうまく使うと効果的ですが、システムのUIにおいては全体の色バランスが悪くなる可能があるため、できれば使用を避けた方が良いでしょう。
なぜ色数をむやみに増やしてはいけないのか
「なぜ色数をむやみに増やしてはいけないのか？」という問いに答える前に、前提知識として人間の色に対する認知能力について触れておきます。
人の目は色に対する認知能力が高いため、色を効果的に使うと、対象の数が多い場合にも瞬時の識別を可能します。
例えば、下図左の同色の表から「え」の文字だけ探すのは困難ですが、右隣の色がついた表からだと瞬時に「え」の位置を識別することができます。
デザインの注意点としてはよく「色数をむやみに増やしてはいけない」と言われますが、その理由のひとつがここにあります。
「色数をむやみに増やしてはいけない」 もうひとつの理由は、運用の不可逆性です。
具体的なUIを例に見てみましょう。
上図は、検索結果がテーブルで表示されている状態です。ステータスをチップの色分けで表現していますが、多くの色が使用されているため、対象がどのようなステータスにあるのかが一見分かりにくくなっています。ここでは検索結果をソートしてステータスごとにまとめて表示することも可能になっているため、本来であればこのような機能との組み合わせの中で色を選定し、３色程度に絞り込んで使い分けるのが望ましいでしょう。
しかし、システムのUIを運用していく上で、色を増やすことは簡単ですが、一度増やしてしまう＝ユーザーが色で内容を識別できるようになってしまうと、減らすという変更は難しくなります。
最初に多数の色を使ってデザインしてしまうと、取り返しがつかなくなってしまうため、「色数をむやみに増やしてはいけない」のです。
基本的な配色パターン
基本的な配色のルールとしてよく使用される「60-30-10」は、UIデザインにおいても良い配色を考えるのに役立つ指針になります。3つの色を以下の比率で使用することで、簡単にバランスのとれた配色を実現できます。
60-30-10ルールの使い方
60-30-10ルールは、以下の手順で簡単に使用することができます。
メインカラーは30%程度の領域で使用されます。メインカラーはブランドカラーから検討することが多いと思いますが、必ずしもブランドカラーを使用するのが正解ではないので、次項（ブランドカラーの訴求効果）も参考にして全体の調和が取れる色を選びましょう。
最後のアクセントカラーは、重要な要素を強調するために使用する色なので、多用はせず10%程度の領域に止めます。ベースカラー・メインカラーとは対照的な色を選ぶとよいでしょう。
このような色の比率を意識するだけで、簡単にバランスのとれた配色を実現できます。ただし、60-30-10ルールはあくまでも目安なので、必ずしもこの比率にこだわる必要はありません。状況に合わせて、色合いや面積比を調整することも可能です。
ブランドカラーの訴求効果
ブランドカラーの訴求効果についても触れておきましょう。
色がブランドイメージの構築に役立つ好例として、CMなどでよく見かける人事労務クラウドサービスSmartHRさんの例を紹介します。
ご覧の通り、SmartHRのブランドカラーは、グリーンとブルーの間のような色になっています。はじめに色の持つイメージについて紹介しましたが、グリーンには「 成長、革新、可能性」、ブルーには「 信頼、安心、安定」といったイメージがあります。
これらのカラーは、SmartHRの「働くを、もっと自由に、もっと楽しく。」という未来を志向するキャッチフレーズを体現すると同時に、企業にとって重要な人事労務を任せるに足る信頼できるパートナーであることも象徴していると言えそうです。
ただし、ブランドカラーが赤やオレンジといった、システムのUIにおいて「注意喚起」の意味でよく使われる色に近い場合には注意が必要です。この場合は、ブランドカラーをシステムのUIに取り入れることに拘らず、システム上で注意喚起を示す色として使用することを優先させることも考えなければなりません。
読みやすさに配慮した色の選択
これまで紹介したように、色の持つイメージやバランスを考えて配色をすることは大事ですが、文字の読みやすさを考慮して色を選択することも重要です。
WCAGとは
WCAG（Web Content Accessibility Guidelines）という国際規格のガイドラインがあります。これは、ウェブコンテンツを障害のある人にも使いやすいようにするための、ウェブアクセシビリティに関するガイドラインです。選択した色がユーザーにとって可読性の高いものになっているか判断に迷ったときは、このようなガイドラインを参照するとよいでしょう。
WCAGは1995年に勧告されたWCAG1.0を皮切りに、時代や技術の発展に合わせてアップデートを繰り返していますが、2008年に勧告されたWCAG2.0からは、ひとつの問題に対して適合レベルA（最低レベル）、AA、AAA（最高レベル）まで最大３つの異なるレベルの基準に沿って適合性を判断する達成基準を設けています。
テキストと背景のコントラスト比
文字の読みやすさに関連して、WCAG2.2では、テキスト（および文字画像）と背景のコントラスト比が少なくとも4.5:1以上ある状態をレベルAAと定めています。以下のように、文字色と背景色をそれぞれ入力すると色のコントラストを計算してくれるサービスもあるため、必要に応じて活用してください。
参考：コントラストチェッカー https://colorbase.app/ja/tools/contrast-checker
画面の動きによる認知
このような細かなインタラクションも、ユーザーが迷わず使用するために必要な仕掛けです。ここでは、画面の動きがユーザーに与える影響から、良い画面を作成するためのポイントを探っていきましょう。
現実世界では、物質がある状態から別の状態へと変化するとき、一瞬で形状が変わったり、移動したりすることは基本的にありません。どんなに短い時間であっても、変化には連続的な過程が含まれます。ソフトウェア上でも、現実世界に即して連続的なものとして状態変化を表現すれば、ユーザーはより体感的に変化を認知できるようになります。
先に紹介したiOSの設定画面の遷移時に発生するスライドインのアニメーションは、１秒にも満たないような短いものですが、こうした細やかなアクションの積み重ねが使いやすさにつながっていくと考えられます。
マイクロインタラクションとは
ユーザーと製品の間で発生する最小単位の相互作用のことを、マイクロインタラクションと言います。これは、ユーザーが製品とどのように関わり、どのように反応するかを決定する重要な要素となります。
マイクロインタラクションは、以下の例のように、ユーザーが製品を操作するあらゆる場面で発生します。
- ボタンをタップした時、アプリ側が何かしらのリアクションを返してくれる
- スワイプした時に画面が移動したり、別の画面へ遷移したりする
- 入力フォームにテキストを入力した時に、誤りがあるとエラーメッセージを表示する
- 致命的なエラーが発生した場合、モーダルウィンドウで詳細なエラーメッセージを表示する
これらの小さなやり取り一つ一つが、ユーザーの製品体験に大きな影響を与えます。
マイクロインタラクションの重要性
このように、マイクロインタラクションはユーザーの使いやすさ、分かりやすさにも大きく影響します。
マイクロインタラクションをデザインする際の注意点
ユーザーの使用感に大きく影響するマイクロインタラクションですが、デザインする際には、以下の点に注意する必要があります。
- 目的を明確にする
マイクロインタラクションを利用する場合、ユーザーに何を伝え、どのような行動を促したいのかを明確にする必要があります。目的がなければ、そのインタラクションがユーザーにとって意味のないものになり、かえって混乱を招いてしまう可能性があります。
- 過剰な演出は避ける
マイクロインタラクションは、あくまでも補助的な役割です。過剰な演出は、ユーザーの注意をそらしたり、操作を妨げたりする可能性があります。
マイクロインタラクションは、製品の重要な要素ですが、それだけで製品の使いやすさや魅力を決定するものではありません。製品全体のデザインや機能性も考慮する必要があります。
ユーザーを惑わせない正しいコンポーネントの選択と使用
このように、ボタンが持っている情報をユーザーに適切に伝えられるよう、正しいコンポーネントを選ぶことが重要です。
また、ボタンの適切なデザインやよくある誤りなどについては、以前のセミナーで詳しく解説しているので別の記事「業務システムのUI設計・改善の勘所。ノンデザイナー向けに基礎から解説」をご参照ください。
直感的なデザインとは
デザインの改修でよく依頼されることのひとつに、「直感的にしてほしい」というものがあります。
では、直感的とはいったい何なのでしょうか。タッチパネルの操作を例に考えてみましょう。タッチパネルのピンチイン（縮小）、ピンチアウト（拡大）操作は直感的と言えるでしょうか。
スマートフォンやタブレットの操作経験が豊富なユーザーならば、迷わずできる直感的にできる操作でも、初見の人にとっては難しい場合があります。つまり、直感は、ユーザーの持つ経験や概念に依存しているのです。それまでの学習経験と、影響を受けてきた文化などによって、ユーザーが身につけている直感は異なります。
それでは個々のユーザーが身につけている異なる直感を前提にした、「直感的なデザイン」とは何でしょうか。
それは、人間の認知特性を活かして、シンプルで一貫性があり、共通認識に従った一目瞭然な状態、つまり「あらかじめ予測したとおりの動きをするデザイン」であると思います。「インタラクションコストを極限まで下げたデザイン」とも言い換えられます。
デザインに活かせる共通認識とは
先ほど、直感的なデザインを「共通認識に従った一目瞭然な状態」という言葉で表現しました。ここでは、デザインに活かせる共通認識について考えていきます。
私たちの日常生活は、誰もが知っているサインやルールを適用することで成り立っています。例えば、エレベーターのボタンに表示された三角形。向きの違いによって、「上に移動するか下に移動するか」「扉が開くか閉じるか」を表現していることを私たちは知っていて、このルールに従ってエレベーターの操作を行います。
「共通認識」とは、このような誰もが知っている文化的なルールのことです。
私たちは、周知の事実となった概念を適用することで、新しいルールを習得するための学習コストを軽減しています。インターフェースのデザインでも同様に、既知の文化的なルールに則って操作の大部分が成り立っています。
インターフェースデザインにおける共通認識の例
- ハンバーガーボタン……押したらメニューが出てくる
- プレースホルダーの矢印……押したらプルダウンが表示される
- 青文字……リンクになっている
- 虫眼鏡のマーク……検索ができる
- 星のマーク……お気に入りか評価ができる
- サービスのロゴ……トップページへのリンクになっている
このような共通認識をデザインに反映していくと、ユーザーの直感的な操作に繋がります。
インタラクションコスト
インタラクションコストとは、以下のように表現することができます。
頭の負荷（認知負荷）とは、ユーザーがUIを理解・操作するために必要な処理能力の量のことで、体の負荷（身体的負荷）とは、操作するために必要な身体的努力の量のことを指します。これらユーザーに求められる処理能力や身体的な努力の量が少ないもの、つまりユーザーのインタラクションコストが少なく済むものが良いインターフェイスだと考えられています。
認知負荷を下げるデザイン
認知負荷の高さを決定づける要因として、次のようなものが考えられます。
- 複雑なナビゲーション⇔シンプルで分かりやすいデザイン
- 情報過多⇔適切な情報量
- 分かりにくい用語⇔分かりやすい用語
- 直感的でない操作⇔直感的な操作
ユーザーが考える・悩む・判断する際に必要となる認知負荷を下げるためには、ユーザーに考えさせない、直感的に「分かる」デザインであることが重要です。
ボタンを例に見てみましょう。
身体的負荷を下げるデザイン
また、身体的負荷の高さを決定づける要因としては、次のようなものが考えられます。
- 小さなボタン⇔適切な大きさの要素
- 硬いボタン⇔軽い操作
- 遠いリーチ⇔操作範囲の考慮
- 長時間の操作⇔休憩時間の確保
ユーザーが指を動かす、繰り返し操作するといった身体が支払うコストである身体的負荷ですが、「使いにくさ」が発生する場面において、その原因のいくつかはこの身体的な負荷に起因していると言えます。
身体的な負荷の多寡は、デバイスごとの違いが大きく影響するのが特徴です。
例えば、下図のように画面上部にある検索ボタンを押したい場合、PC（マウス）であれば特に問題なくても、スマートフォン（タッチパネル）であれば親指を伸ばす必要があります。それで届かなければ持ち方を変えるか、もう片方の手を使うなどすることになり、ユーザーの身体的負荷を高めることになります。
屋外での使用が想定される、片手での操作が想定されるなど、ユーザーの置かれた状況を考慮しながら身体的負荷を軽減するようなデザインを目指すことが重要です。
UIデザインにおけるシンプルさと複雑さ
UIデザインにおいて、シンプルさと複雑さは相反する要素として議論されがちです。しかし実際には、どちらかが優れているというものではなく、状況に応じて適切なバランスを取ることが重要になっています。具体的な例を見てみましょう。
上図左のようなシンプルな画面は、ステッパーを用いることで、ユーザーに入力の手順を段階的に示しているので分かりやすく簡単な印象を与えます。一方で、上図右のGmailのような画面は一見複雑な印象を与えますが、毎日使うようなツールであれば、一画面に必要な要素が収まっている方が使い勝手が良く、逆にステッパーを用いたような画面数・工程数の多いUIデザインは煩雑な印象を与えることになります。
このように、ユーザーの使用頻度等を考慮しながら、シンプルさと複雑さのバランスを取る必要があります。
インタラクションコストを低減させるためのヒントについては、ペルソナ定義の話題などと合わせて以前のセミナーでも詳しく解説しているので別の記事「業務システムのUI設計・改善の勘所。ノンデザイナー向けに基礎から解説」も併せてご参照ください。
ワイヤーフレーム作成時のツールの選択
ワイヤーフレームを作成する際に使用するツールには、主に以下のようなものがあります。
もちろん、これらのツールでも不足はありませんが、デザインツールのメリットにも触れておきたいと思います。今回は、Figmaを例にご紹介します。
Figmaを使用するメリット
- UIキットがある
UIキットとは、画面デザインやレイアウトからボタン等のパーツに至るまで様々な要素が集まったデザインテンプレートを指します。
これらを活用すれば、ノンデザイナーでも簡単に画面を製作することができます。 - 作った画面が簡単に共有できる
プロジェクトメンバーが作成した画面に直接コメントが付けられるため、画面のキャプチャーを撮って、修正箇所を指定して、メールでやり取りをするというような手間が省けます。 - デザインのスペック情報が確認できる
画面上で使用したカラーコードやマージンのサイズなど、実装時に必要な情報が簡単に参照できます。 - プロトタイプツールを使ってユーザーテストができる
実際の操作感についても、プロトタイプツールを用いて容易に検討することができます。
このように、専用のデザインツールを使用することのメリットは複数あります。ノンデザイナーの方でも簡単に活用することができるので、ワイヤーフレームを作成する際に取り入れてみてはいかがでしょうか。
ユーザーテストの必要性
やはり実際に使用してみなければ、作成した画面の良し悪しを判断することは難しいと思います。先ほどもプロトタイプツールを使ったユーザーテストについて触れましたが、重大な問題にせよ軽微な修正点にせよ、手戻りが発生しないためには、ワイヤーフレームができた段階でユーザーテストを実施するのをお勧めします。
以下にユーザーテストの要点をまとめましたので、必要に応じて、早い段階での実施を検討してみてください。
ユーザーテストとは
サービス／システムのプロトタイプをユーザーに操作体験してもらう様を観察し、得られた様子、発話の内容などの質的情報を分析することで設計の問題点を見つけ出すリサーチ手法。
ユーザーテストのメリット
- サービス／システムの操作性に問題がある場合、リリース前に発見できる
- サービス／システムがユーザーのニーズを満たしているかどうかについてフィードバックが得られる
ユーザーテストのデメリット
- 人的・時間的コストがかかる
- 計画実施にあたり、適切なスキルを持った人員が追加で必要になる
デザイン内製化支援の実際
最後に、NCDCがご支援したデザイン内製化の事例を紹介します。
デザインの内製化といっても、デザイナーを新たに採用して社内にデザインを専業とするチームをつくるというものではありません。システム開発チームのノンデザイナーのメンバー（たとえば設計を行うエンジニア）が、システムのUIデザインの基礎やデザインツールの使い方を学ぶことで、デザインの内製化に取り組んだ事例です。
A社、B社の2つの例を紹介します。
- NCDCのデザイナーがお客様にデザインツールの使い方をレクチャーする
- 実際に使用する画面デザインをお客様と分担して制作する
- NCDCのデザイナーが作ったデザインの意図を解説する、お客様が作成した画面のレビューを行うなどして、ノウハウをお伝えする
これらのプロセスは両者に概ね共通しており、デザイナーではない方に実践を通じてUIデザインの基礎を学んでいただくのには良い手法ではないかと考えています。
一方で、図の着色部分はA社とB社でプロセスがかなり異なります。
A社のケースではフロントエンドの実装のまでNCDCで行っているのに対し、B社のケースでは実装は行わず、あくまでもUIデザインのレクチャーを行うことが内製化支援の着地点となっています。ひとくちにデザインの内製化（デザインスキルの獲得）といっても、期間や予算、目的がそれぞれ異なるため、このようにプロセスが異なるのです。
NCDCでは、お客様のご要望やお客様が解決したい課題に応じて支援の内容を柔軟にカスタマイズしながらご提案していますので、関心のある方は是非一度ご相談ください。
UX/UI設計・改善のご相談はNCDCへ
ここでご紹介したポイントを踏まえて、新規システムの開発や既存システムのUI改善に取り組んでいただければ幸いです。
NCDCでは、業務システムのUX/UIデザインからアプリのUX/UIデザインまで幅広くサポートしています。UX/UI改善のためにまず何から取り組むべきか分からないというような初期のお悩みから、業務用アプリの開発など具体的なプロジェクトまで、UX/UIに関するご相談がある方はぜひお問い合わせください。
