【書籍】インタラクションデザインの教科書 【UI とか UX を語る前にこれを読むべし】

この記事は RECRUIT MARKETING PARTNERS Advent Calendar 2018 の投稿記事です。

インタラクションデザインとは、製品とサービスの振る舞い、つまり製品やサービスがどのように機能するかに関係している。つまり製品やサービスがどのように「機能するか」に関係している。
(中略)
最終目標は人間同士のインタラクションの促進であることを、インタラクションデザイナーは決して忘れてはならない。
Dan Saffer著 『インタラクションデザインの教科書』 016P

僕が web 業界を志した頃の 2008年にこの本は出版されました。当時はまだ UI / UX というキーワードは(すくなくとも日本の) web 業界ではあまり浸透していなかったと思います。

この本は、インタラクションデザインという壮大なテーマについて、厳選された過去の資料と先人たちの知見を体系的にまとめあげたものです。デザイン1)ここでいうところのデザインは『設計』という意味で、『意匠』とは異なります。をテーマにした本格的な学術書(しかも300ページ足らずと超コンパクトに収まっている)がようやく日本語で読めるようになったということで、当時の有識者層の多くがこの本を手にしました。

著者は Dan Saffar というアメリカのデザイナーで、近年は『マイクロインタラクション - O'Reilly Japan』という本を出されています。

既に10年以上も前の本ですが、改めて今読んでも多くの発見と学びがある超絶優良書籍です。今回はそんな本書について簡単にご紹介します。

単行本は既に絶版されていますが、 Kindle 版は今でも入手可能です。

本の概要

即席で使えるような都合のいいノウハウは一切載っていない

この書籍は、かっこよくておしゃれなビジュアルデザインを手っ取り早く習得するためのサンプル集でもなければ、 Photoshop / Illustrator といったツールの Tips を得るためのものではありません。つまり、この書籍を読了したからといって明日からすぐにデザイナーとしてのバリューを発揮出来るわけではありません

先人達の膨大な知見を体系的にまとめた文字通りの『教科書』

まだ歴史の浅い「インタラクションデザイン」という分野を、近代 ~ 現代のさまざまな工業製品やサービスを事例にしながら先人達の膨大な知見を体系的にまとめた文字どおりの教科書です。

世界で初めて同一ウィンドウ内にテキストと画像を混在して表示できた『Mosaic』。
web ブラウザのパイオニアとも言える存在である。

プロダクトは人と人を繋ぐための媒体である

諸説ありますが、インタラクションとは「inter(相互に)」と「action(作用)」を合わせた造語で、この書籍では「対話」と訳されます。近頃「マイクロインタラクション」というワードをよく目にしますが、ここでいうところのインタラクションは「反応」という意味で使われており、先に述べた「対話」を成すための一要素となります。

つまりインタラクションデザインは、プロダクトを介して人と人がインタラクション(対話)することを手助けするための技術です。

全体を通しての感想

誤解を恐れずに言うと、この本はユーザーフレンドリーな製品やサービスを作る上で持っておきたい心構えを学ぶためのものだと感じました。

IT の世界は日進月歩であるがゆえ、いくら小手先のテクニックを苦労して習得したところですぐに陳腐化してしまうことでしょう。しかし製品やサービスが人と人を繋ぐ媒体であることは人類が文明社会を営む限り変わることはありませんし、その形も本質的なところはそうそう変わったりはしないものです。スマートフォンはここ十年そこらの間に普及したものですが、これらはかつて存在した PDA というデバイスの延長上に位置するものであり、そもそも個人が情報端末を所有するというのは1972年にアラン・ケイによって「ダイナブック」という言葉で提唱されています。

つまり何が言いたいかというと、昔も今も製品やサービスが目指すところの本質は変わっていません。そしてこれからもそうでしょう。そしてその本質の重要な部分を占めるのがインタラクションデザインであり、それこそが真に学ぶべきデザインの本質なのだと僕は考えます。

個人的に良いなと思った部分について

読者層は「いわゆるデザイナー職の人」に限定されていない

とりわけ製品やサービスのコンセプトや方向性を考える上流層に向けた内容が多いです。特にペルソナやプロトタイプについては比較的多めにページが割かれており、これらは「そもそも何をユーザに提供したいのか」「何を解決したいのか」を決める上で非常に重要なアプローチです。

インタラクションデザインは UX(ユーザーエクスペリエンス) デザインの一領域として定義されており、UX とは製品とサービスとそれを利用するユーザーによって成されるものです。

古今東西さまざまなジャンルのデザイン事例から学べる

例えば 「Chapter.8 サービスのデザイン」ではケニアのとあるスーパーマーケットの写真と共にサービスデザインの基本要素について解説されています。リアル店舗といえば、2018年1月に Amazon Go というレジの無いコンビニがシアトルにオープンしましたが、このような無人店舗についても既に本書の中で言及されています。

UI / UX という言葉に対する誤解が解消される(はず

今では UI や UX という言葉もなんら珍しいものではなくなりました。しかしその言葉を発する人がみな本当に意味を理解出来ているのかと思うと疑問です。UX と言っておきながら web アプリ内の動線について議論していたり2)それは UI です。、継続課金率などサービス提供者側の都合に関することばかり言及していたり3)それはユーザじゃなくて貴方の都合でしょう?と本来の意味を履き違えてる人を僕はたくさん目にしています。言葉の本質を理解しないまま使うとあらぬ誤解を生み、業務の進捗に悪影響を及ぼします。

本書は UI については 一章( Chapter.6 )まるまる使って解説してるものの、それでもごくわずかです。 UX についても特別深く掘り下げてはいません。しかしデザインという漠然とした概念の中でそれぞれがどのような位置関係にあるのかは掴めます。そうすればつまらない誤用をすることもなくなることでしょう。

次の一歩

『About Face 3』です。これも本書と同様に現代のインタラクションデザインを学ぶうえで絶対に外せない書籍です。残念ながら日本語訳版は既に絶版となっており、中古市場でもなかなかお目にかかれません。稀にオークションやフリマ、古本市場に出回ることがありますが、いずれも定価の2 ~ 3倍とプレミア化してます。

ちなみに原著の方は現在でも出版されていて、Amazon 等で普通に購入出来ます(Kindle 版もあり)。しかも2014年に改訂版が出ているので、英語に不自由ないという方はこちらを読まれると良いでしょう。

締め - これを読んで UI デザインという世界に入門した

元々僕は UI デザイナー兼 Flash ディベロッパーとしてこの世界に入りました。今は web フロントエンドエンジニアを生業としていますが、ここ最近はまた UI デザイナーとして活動しはじめたこともあり、ふとこの本のことを思い出しました。

コードを書いている最中も UI デザインのことを意識しているのですが、ひとえにこの書籍と Flash から学んだことがベースとして活きているからなのではと考えています。

脚注

脚注
1 ここでいうところのデザインは『設計』という意味で、『意匠』とは異なります。
2 それは UI です。
3 それはユーザじゃなくて貴方の都合でしょう?