UI/UXを向上させるガイドライン作り

エクストーン ディレクターチームの柳澤です。

最近、私たちの日常生活において、コミュニケーション、ショッピング、行政手続き、医療、教育などの多くの活動がデジタルサービス上で行われており、ウェブサイトやスマートフォンアプリはもはや日常において不可欠なツールとなっています。

日常的に使うアプリやウェブサイトはさまざまですが、使いやすいものもあれば、逆に使いにくいものもあります。
良いUI/UXデザインが提供されると、タスクの達成がスムーズになり、サービス提供者とユーザーの両方にとって理想的な状態が生まれます。
逆に不十分なUI/UXデザインは、ユーザーの離脱、サポートコストの増加、そして目標の未達成を引き起こす可能性があり、好ましくない状況を招くことがあります。

この記事では、UI/UXを向上させる方法の中で、「ガイドラインの作成」に焦点を当てて説明したいと思います。

良いUI/UXとは?

一体「良いUI/UX」とはどのようなものを指すのでしょうか?

簡潔に言うと、初めて使う人にとっても「簡単に理解し、直感的に操作ができる」ことや、さまざまな状況下でも「迷わずに目的を達成できる」ことを指し、総じて高い満足度が得られることを言います。

UXについては範囲が広いですが、良いUIの良い例としては、以下などがあります:

  • フォントの大きさや色が読みやすい
  • 背景やボタンの色、大きさ、配置が適切
  • 見出しやボタンの名称が次のアクションを誘導する言葉を使用
  • 情報を探す際に迷わないような言葉の選定
  • ページや画面ごとの情報量の調整
  • 同じ意味やレベルの内容が階層的に整理されていること

ウェブサイトやアプリの開発プロジェクトにおいて、良いUI/UXを提供するためには、全体方針(コンセプトなど)と具体的なガイドラインの確立は有効です。これにより、プロジェクトが一貫性を持って進行し、最終的な成果物の品質が確保されやすくなります。

特に、プロジェクトの規模が大きい場合や、異なるチームが画面や機能を担当している場合、UI/UXガイドラインは非常に有効で、統一的なルールや品質基準を維持するのに役立ちます。

デジタル庁「ウェブアクセシビリティ導入ガイドブック」

様々な企業や官公庁が公開しているガイドラインの中でも、デジタル庁が『誰一人取り残されない、人に優しいデジタル化』を実現するために発行した「ウェブアクセシビリティ導入ガイドブック」は、シンプルでわかりやすく、良い参考例になるのではないかと思います。

専門知識がない人でも理解しやすく、多くの実例や解説が提供されています。PDFファイルの作成から最新のスマートフォンに対応する方法まで、さまざまな内容が包括的に取り上げられています。

www.digital.go.jp

また、デジタル庁のウェブサイト自体が、このガイドブックのアクセシビリティに従ったデザインになっているため、ガイドラインを読みながら実際の適用例を確認することもできます。

日本工業規格「JIS X 8341-3」

『JIS X 8341-3:2016』は、高齢者や障害のある人を含むすべてのユーザーが、使用している端末、ウェブブラウザ、支援技術などに依存せずにウェブコンテンツを利用できるようにすることを目的とした規格です。

waic.jp

この規格は、適合レベル(A〜AAA)ごとの実装チェックリストを提供しており、どのレベルに準拠しているかによってアクセシビリティの品質を判定することができるようになっています。

官公庁のサイトではウェブアクセシビリティ方針の中で適合レベルや検証結果を公開していたりします。

www.cao.go.jp

www.soumu.go.jp

達成レベルが上がるにつれて、規格はより厳格になり、目標達成には高いハードルが設けられ、最高ランクであるAAAを達成するには、相当な労力と費用が必要です。 実際、多くの官公庁でも、適合レベルA〜AAとしているところが多い印象を受けます。

Xtoneでも以前のプロジェクトで「JIS X 8341-3」に対応する実務経験があり、達成基準のチェックリストを順に詳細に検証した経験があります。

独自のUI/UXガイドラインを作ってみる

UI/UXを向上させるためのガイドラインの有効性については前述した通りですが、ここではガイドラインの作成手順を簡単に説明します。

1. ターゲットユーザーの理解

はじめに、サービスのターゲットユーザーが誰なのかを明確に定義します。そのターゲットユーザーがこのサービスを使ってどのような目的を達成する(したい)のかを明確に表現します。

2. 設計方針(UI/UXのコンセプト)の確立

ターゲットユーザーが目標を達成するために必要なUI/UXを明確に定義し、その方針を明示します。これらの方針は、UI/UXのコンセプトとして捉えることができます。

3. 個別のガイドラインの策定

ターゲットユーザーと設計方針を元に、具体的な施策としてのガイドラインを定めていきます。 以下は項目の一例です。

  • トンマナ・カラー
  • ナビゲーション
  • レイアウト
  • ボタンとリンク
  • 画像
  • フォント
  • 手続きや設定における画面遷移
  • フォーム
  • 注釈や注意事項の表現
  • ワーディング

4. プロジェクト全体でガイドラインを遵守する

ガイドラインを策定するだけでは、絵に描いた餅になってしまいます。プロジェクトの関係者に適切に伝え、内容を理解し、実行してもらうことが重要です。これによって、ガイドラインが本来の目的を果たすことができます。

5. 見直しと改善

優れたガイドラインであっても、時代やトレンドに適応しなければ陳腐化してしまいます。ガイドラインの定期的な見直しや改訂により、変化し続ける環境の中でも、フレッシュな状態を保つことができます。

まとめ

UI/UXガイドラインの策定には一定の労力がかかりますが、それに見合ったリターン(サービスの品質向上・それに伴うユーザーの満足度の向上)が得られるのではないかと思います。

ガイドラインは、1つのプロダクトを対象とする場合もあれば、組織が提供するサービス全体を対象とする場合もあります。より対象が多い場合に、ガイドラインは本領を発揮します。

サービスのトンマナがバラバラで統一感がない、、、
使い勝手に一貫性がない、、、
ユーザー体験が今ひとつよくない、、、

そうした課題をお持ちの場合は、ガイドラインを作成してみると良いかもしれません。