📘

Frontendエンジニアが”融けるデザイン”を読んで変化した価値観

突然ですが「UXとは何?」と聞かれたらなんと答えるでしょうか。以前までの私であれば”速さ・使いやすさ”といった回答をしていた気がします。しかし今回あるきっかけで融けるデザインという本を読む機会があり、そこで得た考えを言語化したいと思いこの記事を執筆しています。

*本記事は融けるデザインを読んだ個人の解釈をまとめたものですので、本の内容を解説するものではありません。所々解釈が異なる点がありましたらご了承ください。

「融けるデザイン」とは

本書はデザインの手法というより、インターフェイスとは何か?UXとは何か?という抽象的な概念に着目した一冊です。今回私が本書を紹介する理由としては、デザイナーだけでなくエンジニアにとっても有意義な内容が書かれていて、これまでの価値観を大きく変えてくれるものだと感じたためです。

https://bnn.co.jp/products/9784861009389

どのような考えの変化があったか

先ほども述べたようにこれまでの私のUXの定義は”速さ・使いやすさ”といったものでした。しかし、本書を読んだことで、UXの捉え方が「ユーザがサービスを道具として扱うための透明性と自己帰属感の実現」という解釈に変わりました。これがどのような理解であるか説明することを本記事の目的とします。

本書を読んだ整理

まずは前提を揃えるために、「融けるデザイン」を読む中で特に重要だと感じた内容を本書の言葉を使いながら整理したいと思います。

コンピュータの本質とデザインの必要性

コンピュータの本質についてです。当然ですがコンピュータは計算機です。しかし、実際はその枠組みを超えた可能性を持っています。

ここではコンピュータを「知的能力の拡張や強化をするもの」と定義しており、コンピュータが知的能力を拡張する役割として普及した理由に、グラフィカルなインターフェイスを実現したことが挙げられています。

PCの画面を「デスクトップ」と言い、データを「ファイル」「フォルダ」といった日々の暮らしの中で使われる要素に見立てて伝わりやすくしています。これをメタファと呼び、これがわかりやすいインターフェイスの中核となっています。

そして、この何にでも見立てることができる自由度を持ったコンピュータのことを「メタメディア」と定義しています。

コンピュータは現実世界の見立てをすること(メタファ)によって人間に親しみやすく設計していました。しかし、メタファにも限界があります。たとえばTwitterやFacebookなどのサービスは実世界の何かに例えられるものではありません。このようなサービスに無理やりメタファを利用するとかえって複雑になってしまいます。

このような流れから、フラットデザインというUIの考え方が注目されはじめました。これはつまり、メタファの制限に縛られることなくメタメディアというコンピュータ自身の表現の自由度を活かしていこうとする流れです。

しかし、メタファを脱却することはつまり現実世界の見立てを超えた体験を設計する必要が生まれたと捉えることもできます。UX(デザイン)の重要性が強く問われるようになった背景は、メタファを超えて価値を感じられる体験へメタメディアを設計していこうとする流れの結果であると言えます。

インターフェイスと道具の透明性

インターフェイスとはモノと人との境界線を意味します。インターフェイスが意識されはじめたのは最近のことであり、それは第一次・第二次産業革で発明された道具と比べての情報処理が複雑で、原因に対しての結果が間接的になったからです。

たとえばハンマーを例に挙げると、私たちはハンマーそれ自体を意識することなく釘を打つなどの対象に集中することができます。この状態を道具が透明化している(道具の透明性)と定義しています。

現代のサービスにおいても目指す先は道具それ自体を意識することなく対象に集中できる状態です。

道具が透明化するということは、自分の身体と同じような状態になることを意味します。しかし透明化している道具であっても、私たちがその道具自体を対象として意識するケースがあります。それが、バグであったり障害です。

普段それ自体を意識せずに使っている道具に問題が発生すると、急にその道具自体が意識に上がり対象として捉えることになります。だからこそ、如何にして道具を事物的存在ではなく道具的な存在であり続けられるかが重要であるとわかります。

情報の身体化と自己帰属感

先ほど道具が透明化している状態が目標であると述べましたが、ではどのようにしたら道具は透明になるのかを考えていきます。

本書では「投げたボールはどこまでが身体か?」という面白い問いが挙げられていました。この問いは身体の境界線を考える上でとても参考になります。

ボールを投げるということは、ボールを手に持っている状態と手からボールが離れている状態があります。そして、ボールを手に持っている状態は身体の延長として考えることができます。

ではボールが手から離れた場合、どのタイミングから身体の延長では無くなるのでしょうか。

本書では、「制御できている」範囲が手の延長(身体)であると結論づけられています。つまり、身体の境界線は制御できているか否かが鍵になると言うことです。

私たちはコンピュータを操作する際ほぼ確実にカーソルを使用します。しかし、カーソルそれ自体を意識することはありません。カーソルの先にある対象を常に意識しているはずです。この点において、カーソルは透明化していると言えます。

そして、先ほどの「投げたボールはどこまでが身体か?」という問いをもとにすると、カーソルは操作した動きと連動している(制御できている)からこそ透明性を作り出すことができていると考えることができます。

そして、この制御できている状態、動きと連動している状態を自己帰属感という言葉で説明しています。

iPhoneのUIがなぜ気持ちがいいのか?という問いもこの考えで説明することができます。つまり、自己帰属感が高いインターフェイスはUXが高いということです。

UXにおいて重要なことは「とにかく自己帰属させること」です。

そして、自己帰属させる中で生まれる様々なインタラクションが自己の拡張感につながります。

Fronendエンジニアの視点でどう活かすか

これまで「融けるデザイン」を読む中で重要だと感じた点を整理しました。その上で私の専門であるFrontendの視点でどのように活かしていくかを考えます。

「なぜ速いは正義か?」を言語化できる

Webアプリケーションの領域ではよくパフォーマンスの重要性が掲げられます。時にはGoggleの指標で定量化されるスコア(Lighthouseなど)を目標にすることもしばしばあります。

https://developer.chrome.com/docs/lighthouse/overview?hl=ja

しかし、なぜ「速さ」を目指すのか、SEO以外の目的でなぜLighthouseのスコアを目標にするのかが言語化できていませんでした。もちろん速さを追求したサイトやアプリケーションはかっこいいですし、使いたくなります。

ですが、それだけでは目的が抽象的すぎてゴールのない目標に向かって走っているように思えてしまいます。では、”融けるデザイン”的に「速さ」を捉え直すとどうでしょうか。

私の解釈であれば「速さは自己帰属感を実現するための重要な要素の一つ」であると捉えます。

速いことがサイトの価値に直結するわけではなく、速いからこそユーザの動きと連動し自己帰属感が向上することで、結果的にUXが高いと感じる。このような理解に落とし込むことで、私自身は速さを追求する大きなモチベーションに変わりました。

逆に言うと、ユーザがサービスに対して自己帰属感を感じられる(透明化している)状態に達した場合、それ以上のパフォーマンスを追求する必要はないのではとも捉えられます。これは今までパフォーマンスに関してゴールの無いマラソンを走っている気分になっていた私にとっては大きな価値観の変化だと思います。

デザイナーとの会話に軸が生まれる

UXのゴールはサービスがユーザにとって透明化している状態である。」と言う一つの共通ゴールを持つことによってデザイナーとの会話に深みが生まれるのではないかと考えています。

ここではデザイナーを、設計された仕様からUI DesignをFigmaなどのツール上に表現する役割と仮定します。その場合、サービスを実装するのは開発者であり、デザイナーと開発者の間には一定の距離が生まれます。

私の経験上、Figmaに全ての情報を含めることは困難です。そのため、ある程度のインタラクションや挙動については開発者側がよしなに汲み取って実装することがあります。

その際にデザイナーとの会話が発生します。以前の私であれば、「このアニメーションの方がシンプルだとか、かっこいい」みたいな抽象的な伝え方をしていました。しかし、これからはアニメーションひとつとっても、「どちらがユーザにとって自己帰属感を感じられるか?ユーザの無意識に近いか?」といった観点で会話ができる気がします。

最後に

いかがでしたでしょうか。本記事では「融けるデザイン」を読んだ整理とそこから得られた価値観を言語化しました。

私自身これまでデザインに深く興味を持つ機会がありませんでしたが、本書をきっかけに大きく考えが変わった実感があります。何よりUXと言う抽象的な言葉を納得感を持って言語化できるようになったと言うのが一番の価値であると感じています。

全エンジニアへおすすめの一冊です。ぜひ読んでみてください。

AI Shift Tech Blog

Discussion

negibouzenegibouze

本題と関係ないコメントで恐縮ですが、「溶けるデザイン」ではなく「融けるデザイン」のようです。
細かい違いですが、書籍の名前なので正しい名前に修正した方が良いと思いコメントさせていただきました。