インタフェースデザインのお約束

実用的な Web およびアプリのデザインガイド!
デジタル製品のデザインに役立つ 101 の指針。製品のユーザビリティや性能を高める上で必須かつ基本のツボ、マスターすれば時間を節約し顧客満足度をアップできるテクニックが 101 のコンパクトなルールにまとめられています。メッセージが明確で説明もわかりやすいので短時間で気軽に読むことができます。101 のルールは、タイポグラフィ、コントロール、カスタマージャーニー、各種要素の統一、UX 全般に関わるプラクティスに分類されているのでリファレンス的に読むことも可能です。「よくある落とし穴」を巧みに回避し、自信をもってユーザーのために闘い、すばらしいユーザーエクスペリエンスを提供するプロへと成長させてくれる一冊です。

『インタフェースデザインのお約束』 (Will Grant 著、武舎 広幸、武舎 るみ 訳、オライリー・ジャパン、2019 年 11 月刊) は、Web サイトやアプリの画面設計で繰り返し出会う判断を、101 のルールにまとめたデザインガイドです。原書は 101 UX Principles で、副題は「優れた UX を実現するための 101 のルール」です。版元は、101 のルールがタイポグラフィ、コントロール、カスタマージャーニー、各種要素の統一、UX 全般に関わるプラクティスに分類されており、リファレンス的に読むこともできると案内しています。画面を作る人にも、画面をレビューする人にも、判断の根拠を短い言葉で持たせてくれる一冊です。

全 9 章の構成、プロローグとエピローグに挟まれた 101 のルール

構成は第 1 章「プロローグ」から第 9 章「エピローグ」までの全 9 章で、ルールには 001 から 101 までの通し番号が振られています。第 1 章はルール 001 の 1 項目だけで、第 2 章「文字と言葉」は書体の数、フォントサイズで表す情報の階層、文字色と背景色のコントラスト、製品内での用語の統一などを扱います。第 3 章「アイコンやボタン」と第 4 章「UI 部品」に続く第 5 章「フォーム」は、入力データの検証、郵便番号や電話番号、メールアドレスの扱い、決済時の情報入力、パスワード入力欄の設計を扱います。第 6 章「ナビゲーションとユーザージャーニー」は無限スクロールとページネーションの使い分けやパンくずリスト、ハンバーガーメニューを取り上げ、第 7 章「ユーザーへの情報提示」はプログレスバーとスピナー、検索結果の並べ方、通知の設定を扱います。第 8 章「アクセシビリティ」は読み上げ機能、色覚障害者への配慮、画面表示の拡大と縮小、Tab キーでの移動の順序に関する項目で、第 9 章「エピローグ」はデフォルト設定、フラットデザインと視覚的シグニファイア、本物のユーザーを対象にしたユーザーテストといった全体に関わる項目で締めくくられます。

目次では、101 のルールと「最後にもうひと言」、訳者あとがきに続いて、201 から 208 までの番号を振った 8 項目が並びます。文字情報を画像ではなくテキストで示すこと、パスワードの定期的な変更の強制、桁区切りのカンマや全角数字の扱い、英語として意味のとおらないカタカナ語など、日本語の画面に固有の論点を含む項目です。

画面設計の約束事が判断の根拠として効く理由

画面のレビューが長引きやすいのは、多くの判断が好みの問題に見えてしまうからです。ボタンをボタンらしく見せるか、日付の入力にどの部品を使うか、選択肢が 2 つか 3 つしかない場面でドロップダウンメニューを使うかといった論点は、根拠を示せないと発言力の強い人の意見で決まりがちです。UI の約束事の多くは、利用者がほかの製品ですでに身につけた操作の型を裏切らないことに根拠があり、我流のコントロールを作らず既存のコントロールやデバイスに備わった入力方法を使うべきだとする本書の項目も、この考え方を示しています。文字色と背景色のコントラストを比率の数値で示す項目のように、アクセシビリティ への配慮を日々の判断の単位に落とし込んだ項目もあります。原則を短いルールの形で持っておくと、レビューの指摘を個人の好みではなく約束事への違反として伝えられ、議論にかかる時間を減らせます。

英語の画面に固有の項目と、2019 年時点という前提

版元は、メッセージが明確で説明もわかりやすいので短時間で気軽に読めると案内しています。注意したいのは、原書が英語の製品を前提にしている点です。第 2 章には、英語のページで log in より sign in を、register より sign up を使うといった項目があり、日本語だけの製品ではそのまま当てはまりません。その分を補う位置にあるのが、先に挙げた 201 から 208 の項目です。また 2019 年 11 月の刊行であり、モバイル対応を前提とする項目などは 2019 年時点の環境を踏まえて書かれています。

UI デザインのルール集が役立つ人、別の本を選ぶ人

画面の仕様を書く人、デザインを実装するエンジニア、画面のレビューで指摘を出す立場の人にとって、迷ったときに番号で引ける 101 のルールは、判断を速くし、指摘に根拠を添える道具になります。一方、配色やレイアウトの理論、デザインツールの操作から順に学びたい場合は、目的に合う本を Web デザイン本の選び方 から探すほうが近道です。フォームやナビゲーションの細部で毎回同じ議論を繰り返しているチームなら、共通の参照先として 1 冊置いておく価値があります。