「縁の下のUIデザイン」が示した、縁の下に留まらないUIデザイン
今日のUIデザインやソフトウェアデザイン、プロダクトデザインといった領域を扱った文章においては、「デザイナーとエンジニアの協業」「デザイン組織の立ち上げや運営」のようなどんな環境で作るかといった題材や、「ユーザーの需要や行動の調査」「デザインシステムの運用」などといったUIデザインを取り巻く環境についての情報発信が活発なように感じられる。
そんな中、先月に刊行された「縁の下のUIデザイン──小さな工夫で大きな効果をもたらす実践TIPS＆テクニック」は、どのようなものを作るかへの直接的な関心が大きな比重を占める書籍だ。
副題の通り、本書はUIデザインでよく見受けられる事例やテクニックを、性質の近いパターンごとに章立てて解説している。リニアな流れが貫かれた構成というよりは章ごとに別々の題材が独立して扱われている感じで、冒頭で示されているように基本的にはどのような順番で読んでも問題ない。UIデザインを扱う書籍として、まずこの非線形な構成からポジティブな印象を受けた。
パターンごとに分類された各章ではそれぞれ細かい表現のテクニックにいたるまで広範な事例が扱われており、UIデザインの初学者が知識を増やすのにぴったりだと感じた。
例えば第1章「色、文字、動きによる見せ方の工夫」で最初に例示される「赤の使い方」では、UIにおいて半ば予約語的にエラーなどを表現する用法で多く見かける赤い要素について、その性質や効能、効果的な利用法や使わない方がよい場面など具体例までもが説明されている。
一見、注意やエラーを表す定番化した色だから使いやすいと考えがちではあります。（中略）定番化されているだけに意図を取り違えられてしまう可能性もあります。
色、文字、動きによる見せ方の工夫（p.8）
ソフトウェアのGUIデザインとは「Excelとどのような距離感を設定するかのデザイン」と呼んでもよいのではないか、と自分自身感じているのだが、つまりはドメインモデルがカラム/レコードに並列的かつ一元的・直接的に顕れた生のDBのようなUI（Excel的でプリミティヴなUI）から、段階的な認知や理解のため恣意的に情報へ強弱を設定したり出し分けたりするUI（今日の様々なプロダクトで見受けられるUI）にいたるまでが分布している。
また、ソフトウェアにおけるUI (GUI) とは、ユーザーにとって単なる操作盤に留まらず、システムそのものを象徴する存在でもある。対象となるドメインの世界そのものを形作る上で、こうしたUIの表層部分はシステム全体の「縁の下」に留まらず、ユーザーにとってシステムがどのような存在となるか定義している。
こういったUIをデザインする際の恣意的な情報ヒエラルキーの設計、情報整理においては、とりわけ「目立たせる」場面が多く、その中でもデザイナーやそれ以外の職種を問わず真っ先に提案として検討されるのが「要素を赤くする」アプローチであることは多くの読者が経験しているように思う（あと「要素を大きくする」とかも）。
それだけ多くの場面で検討され、目に入る機会の多い「赤くする」是非や長短が、まず最初に示されている点。これは本書の特徴が表れた象徴的な部分ではないか、とまず感じた。本書ではおすすめの対象読者をデザイナーだけでなくエンジニアやプロダクトマネージャー・ディレクターまで広げており、そういった職域横断的なプロダクトデザインで検討される機会の多い「赤の使い方」など表層のテクニックから触れることで、プロダクトデザインを推進するための議論やデザインの方針に厚みを持たせることができるはずだ。
第1章のUIにおける表層的な表現にはじまり、Native AppとWeb Appそれぞれの性質による違いが大きく現れる「データ保存」のパターンごとの紹介などデータバインディングやインタラクションに踏み込んだ機能的なデザインを扱った章、そしてボタンやリストなどUIコンポーネントに注目した章などが、実際のUIをキャプチャした画像も添えられた形式で解説されている。
僕が前職で携わっていたWeb Appも好ましいUIの事例としてキャプチャして紹介されていて、ちょっと面白かった。
このような“わかりやすい”事例の取り上げ方や解説に関しては自社プロダクト開発におけるUIガイドラインを手がけている自分としても参考にしたい点が多くあった。「どんなことが書いてあればすぐ活かせそうな感じになるか」に気配りがあっての文章なのだと感じられ、初学者だけでなくUIのレビューや教える機会の多い人にとっても見応えのある内容ではないだろうか。
冒頭で示したようなUIデザインを取り巻く組織や環境についても言及されていないわけではなく、第6章「コミュニケーションとツール」などで取り上げられている。表層の審美性に閉じて作り込まれたいわゆる“Dribbble UI”を例に挙げつつ、定期的に話題になる「デザイナーはコードを書くべきか論」に接近する形でUIデザインにおけるエンジニアリング観点の重要性について示されているのが印象的だった。
しかし最近では、各開発フェーズでより専門性が求められ、コーディングは専門のエンジニアが行うことがほとんどです。そのため、サービスのクオリティはどんどん高いものになっている一方、デザイナーがコーディングなどの技術面に触れる機会が減ったことで齟齬も起こりやすくなっているようにも思います。
コミュニケーションとツール（p.166）
同章では、開発スケジュールやユーザーの需要調査などの都合で行われる「ミニマムリリース」および「初期リリースにおける理想像とのずれをどうするか」についても「段階的なUIコンセプトを決めておく」など現実的な方針が提示されており、すぐプロダクト開発へ活かせるような気配りの行き届いた本書らしい項目だと感じた。
このように本書では、UIデザインの分野で、問題や課題に対して誰にとっても当てはめやすい具体的なアプローチや解決策が提示されている。UIデザインのテクニックや解決策、tipsといったものは以前より各所の記事などで多く発信されていた題材でもあったが、玉石混淆で断片的な情報の量に溺れてしまう初学者にとっても知識をある程度体系化して捉え、段階的に知識として蓄積する助けとなるような内容だ。
一方で、UIの根源的な部分や基礎的な概念については深入りしない形でまとめられている点にも併せて留意したい。例えばモーダルな拘束的フローティングビューは多くの場合「モーダル」と一絡げに扱われがちなのだが、本書でもその風潮へ乗る形で扱われており、デザインが本有するモード性についての理解が抜け落ちた状態でUIを考えるような状況を招きかねない（もちろん、UIデザイン界に広く浸透した呼び方に触れて、単に共通言語の辞書的な項目数を増やす効果はあるだろう）。また、ユーザーのコンテクストを起点にした線形なフローを称揚する傾向や、根源的なUIないしUX観についても自分として気になる点があった。
しかしこういったモード性などUIに関する基礎的な概念については、例えば「Modeless and Modal」（およびその続編的な「オブジェクト指向UIデザイン」）といった書籍を読めばより体系的な知識も得られる。本書のみではなく、他の書籍も併せて参照することで自身のUIに関する知識を補完することができるはずだし、その第一歩としても本書は足がかりにしやすい形でまとめられている。
何より良いUIと認識されることの多いパターンを数多く触れることができる点こそが本書の肝だろう。UIの基礎的な概念や知識はもちろん重要だが、そういった知識の体系化はある程度型に触れた後から付いてくる部分でもある。まずこの書籍を読んで良さそうに感じたテクニックに触れ、実際のUIデザインに当てはめて考えることで得られた感覚は大切だし、何よりそれで実際に手を動かして作ってみるのは楽しいはずだ。
本書で扱われている事例の全てでなくとも、まず自らが触れてみたいと感じた目当ての項目に触れること。さらに、その範囲を広げてテクニックを内面化した上で、先述したGUIの基礎概念など歴史的に知識が蓄積されている領域へ踏み出す道筋も良いのではないだろうか。
そして第7章「考察、雑感」ではこれまで扱われていったテクニックに留まらず、「クロスプラットフォーム」や「メンタルモデル」、他国でのUI事情といった方面にまで言及されている。こういった領域での知識をデザイナーはもちろん他職種も含めて共有しておくと、例えば事業会社における施策の提案などにも活かせるかもしれないし、主題で示されている「縁の下」に留まらないUI観点からの議論を推進できるかもしれない。
本書ではUIデザイナーとして長期的に成長へ繋がる（ある時点での自身から視点の転換や知見の獲得によって別の自身へ変化できる）というより、すぐ活かせそうなテクニックが紹介されている。
初学の段階で本書に触れ、さらに上述したUIの基礎概念を扱った書籍などでより体系的にUIを捉えて深入りして考えられるようになったあとで本書を読み返すと違った角度からの発見があるかもしれない。それだけ豊富なパターンが紹介されている書籍だった。デザイナーも他職種も問わず、UIがユーザーにとってどんな存在となるか能動的に考える足がかりとして多くの人に読まれてほしい。
この記事が気に入ったらサポートをしてみませんか？