縁の下の UI デザイン──小さな工夫で大きな効果をもたらす実践 TIPS & テクニック

UI デザインの中でも普段はあまり注目されることのない細かい部分にフォーカスした書籍です。デザイナーがどのような意図を持って UI をデザインしているのかを解説します。身近なサービスを例として取り上げているので、実感を持って理解できます。筆者のデザイナーとしてのノウハウがふんだんに織り込まれているので、Web サービスの UI デザインをもっと良くするためのヒントになるはずです。

『縁の下の UI デザイン』 (池田拓司 著、技術評論社、2023 年 4 月 21 日発売) は、UI デザインの中でもふだん注目されにくい細かな部分に焦点を当て、デザイナーがどのような意図で UI を作っているのかを、身近なサービスを例に解説した本です。副題は「小さな工夫で大きな効果をもたらす実践 TIPS & テクニック」で、技術評論社の WEB+DB PRESS plus の一冊として刊行されました。版元のプロフィールによると、著者は 2002 年に多摩美術大学を卒業後、ニフティとはてなでサービスの開発にデザイナーとして関わり、2012 年からクックパッドでスマートフォン向けの UI デザインとフロントエンド開発を担当し、2017 年にデザインアンドライフを設立しています。

色とボタンから画面遷移、チームの進め方まで全 7 章

目次は全 7 章で、どの章も複数の話題を収めています。第 1 章「色、文字、動きによる見せ方の工夫」は赤の使い方や配色のコツ、使い方を文字で説明する UI、アニメーションとトランジションを扱い、第 2 章「機能表現の工夫」は「いいね!」のようなライトフィードバック、保存のデザインの使い分け、未読と既読のデザインを取り上げます。第 3 章「UI コンポーネントの使い方による工夫」はボタン、数値の入力と選択の UI、カード UI の向き不向き、メッセンジャーの画面設計を、第 4 章「ユーザーの行動への配慮」はエラーと確認、受動的な体験、異なるユーザー層、待ち時間、コンテンツがない状態を扱います。第 5 章「画面と画面遷移の設計」では画像の置き方、長くなるコンテンツ、横配置メニュー、「もっと見る」の設計、入力フォームを分割するかどうか、画面遷移を意識した改善を、第 6 章「コミュニケーションとツール」ではエンジニアとの実装の認識合わせ、デザインシステム、Google アナリティクスによる仮説検証、デザインを説明する工夫を、第 7 章「考察、雑感」ではモバイルのデザインガイドライン、業務利用サービスのデザイン、中国のスマートフォンアプリ、長押し、ユーザーの思い込みを取り上げています。

目立たない細部が使いやすさを左右する理由

UI の使いやすさは、トップページの見た目のような目立つ部分よりも、エラーの伝え方や待ち時間の見せ方、空の画面の扱いのような細部で差がつきやすい領域です。利用者は操作が思いどおりに進んでいる間は UI を意識しませんが、送信ボタンを押したあとに画面が変化しない、入力の誤りがどこにあるのか分からないといった場面で、ストレスを感じて操作をやめてしまいます。本書の目次には、スピナーとプログレスバー、スケルトンスクリーン、状況に応じた確認の手段、画面全体が空の状態と一部が空の状態の対応策といった項目が並び、場面ごとに選べる手段を比べる形になっています。

細部の判断を画面ごとにばらばらに下すと、同じ種類の操作が画面によって違う形になり、利用者は操作の意味を学び直すことになります。部品と規則を体系にまとめた デザインシステム は、この食い違いをプロダクト全体で防ぐための仕組みです。また、スマートフォンとパソコンの両方で使われるサービスでは、レスポンシブデザイン で画面幅に応じて配置を変えることが多く、同じ情報でも幅によって適した見せ方が変わります。細部の工夫は、こうした全体の仕組みや画面幅の条件と組み合わせて初めて効き目を持ちます。

UI デザイナーとエンジニア、ディレクターそれぞれの使い道

版元が挙げる読者は、自分のデザインの視点を広げたい UI デザイナー、UI デザインに興味を持つデザイナー、UI デザインも担当しているエンジニア、デザインラフまで自分で考えることがあるディレクターです。第 6 章にはエンジニアに意識してほしいことや、デザイナーのこだわりとの付き合い方の節があり、職種の違う人どうしが同じ画面について話すときの材料にもなります。一方で、目次はデザインツールの操作手順や、デザインの基礎理論を順に学ぶ構成ではないので、UI デザインを初めて学ぶ人は基礎の入門書と組み合わせるほうが進めやすいでしょう。画面の細部で迷ったときに判断の理由を言葉で説明したい人には、身近なサービスの例とともに場面ごとの選択肢を並べた本書が、判断の引き出しを増やす一冊になります。