- Column
WEBサイトで「やわらかさ」を体感ーー「HAPTICS OF WONDER 12触αGEL見本帖」特設サイトの魅力を探る
「HAPTICS OF WONDER -12触αGEL見本帖-」とは
株式会社タイカとMTRLのコラボレーションによって実現した、「やわらかさ」とそれによる「気もちよさ」を活かしたデザインを実践したいデザイナーや開発者のためのツールキットです。さまざまな触感のαGELに触れてもらうことで「体験価値」や「感性価値」による新たなサービスやプロダクトの創出を支援します。
プロジェクト事例：
αGEL 触感の新しい評価基準とコミュニケーションツールをデザイン
https://mtrl.com/projects/taica/
αGELの「やわらかさ」を擬似体験できるWEBサイト
- 「HAPTICS OF WONDER -12触αGEL見本帖-」
「HAPTICS OF WONDER -12触αGEL見本帖-」は、ゲルのサンプルキットとUX評価マップの組み合わせによって、以下の三方向から立体的に感性へと訴えかけるよう設計されています。
・触覚
・視覚
・音象徴
一方、WEBでは、この見本帖のもっとも重要な要因である「触覚」を体験してもらうことができません。WEB上でαGELが持つ「やわらかさ」の特性や感性価値をいかに伝えるか。この難題に対して、あえて音は使わず、αGELの「やわらかさ」を表現するグラフィックを際立たせるように設計。見本帖の「実際に触れてαGELの触覚の多様性を感じる」という特性を疑似体験できるようなUXを実現しました。
- 左：クリエイティブ ディレクター村岡の撮影ラフスケッチ、右：スタジオで試行錯誤を重ねるカメラマン水野谷さん
今回、WEB制作にあたって「HAPTICS OF WONDER -12触αGEL見本帖-」の撮影を行いました。
WEBはブラウザという枠が情報を分断してしまうため、一枚のビジュアルでどれだけ語れるかが重要になります。そのため、読み手にやわらかさを想像させる余白をどれだけ残すかが課題でした。
今回の撮影では、「硬さの確認」を想起させる「指で押す」という直接的な表現にとどめず、αGELの変幻自在なやわらかさや独特のシズル感を表現できるよう、試行錯誤しました。
「αGELの歪み方の違いだけで柔らかさを表現する」という軸と、そのための「『絵のように』画作りされた写真」という方針定め、撮影は物の本質的な魅力を引き出してくださるフォトグラファーの水野谷維城さんに依頼。ラフスケッチを元にした事前の打ち合わせや撮影現場で議論をしていき、αGELの自由なやわらかさとマッチする不思議な空間表現をつくりあげました。目を引く力強いビジュアルが出来上がったと自負しています。クリエイティブディレクター 村岡麻子
また、「HAPTICS OF WONDER -12触αGEL見本帖-」のマップのイラストとデザインを担当していただいたBeach inc.さんには、それぞれのやわらかさを表すアイコンのムービー化を依頼しました。
イラストのもつ魅力を活かしながら、力が加わった時の歪むスピードや形状、落としたときの跳ね返り具合等をいかに表現するか。実際に、大福を上から落としてみたり、消しゴムで文字を消すのを観察したり、蛇の動きを生物学的に研究したりしながら、デザイナーと協議を重ねに重ねて制作しました。アニメーションにすることでイラストのもつ「プルプル感」や「ぺたぺた感」、「もっちり感」といった質感をより伝わる形にできたと思います。
クリエイティブディレクター 桑原季
サイト内のマップに配置されているαGELのアイコンにカーソルを当ててみてください。（スマートフォンでご覧になる際は実際に指でタップしてみてください。）アニメーションが動き出し、まるで直接やわらかさを感じているような感覚を得られるのではないでしょうか。
- 特設サイトでは、このUX評価マップにモーションがつけられている。やわらかさのアニメーションを体験したい方は、特設サイトをご覧ください
特設サイトを見ることで、さまざまな触感のイメージが湧き、「HAPTICS OF WONDER 12触αGEL見本帖」の実物にも触ってみたくなったのではないでしょうか。この特設サイトを通して、ひとの触覚・触感という感性の捉え方や表現の可能性に思いを馳せていただければ幸いです。
「HAPTICS OF WONDER 12触αGEL見本帖」の実物は、FabCafe MTRL（東京）とFabCafe Kyoto（京都）に展示してありますので、ぜひお立ち寄りください。
プロジェクト概要
クライアント：株式会社タイカ
支援内容：
・要件定義 ワークショップ実施
・コンセプト策定／Webサイトデザイン
・Webサイト構築／多言語対応
プロジェクト期間：2019年5月〜7月
体制：
プロデューサー 井田 幸希、小原 和也
クリエイティブディレクター 村岡 麻子（桑原季）
テクニカルディレクター 小野村 香里
グラフィックデザイン 株式会社Beach
Webデザイン Yusuke Okabe
コーディング Masashi Haraguni
カメラマン Tsunaki Mizunoya
監修 HAPTIC DESIGN PROJECT (南澤孝太 慶應義塾大学大学院 メディアデザイン研究科・教授）
