世界を舞台に活躍するデザイン・イノベーション・ファームTakramが手がけた「NOT A HOTEL」のグローバル向けWebサイト。その大胆かつ洗練された体験デザインの裏側では、UI/UXのプロトタイピングツール「ProtoPie」が大きな役割を担っていた。世界で活躍するクリエイターをターゲットにした「NOT A HOTEL」のブランドコンセプトは、いかにして具体的なインタラクションに落とし込まれたのか。同プロジェクトでUI/UXデザインをリードしたデジタルプロダクトデザイナーの二日一宏祐氏に、Takram流のデザインプロセスと、FigmaとProtoPieを連携させた実践的なワークフロー、そしてそれによる効果について詳しく伺った。

ProtoPieとは？

UI／UXデザインにおけるインタラクションや操作体験を、コードを書かずに高い再現度で検証できるプロトタイピングツールである。FigmaやAdobe XDなどで制作したデザインデータを取り込み、タップ・スワイプといった基本操作に加え、変数・条件分岐・センサー（加速度、ジャイロ、マイク等）を用いた複雑な挙動まで設計可能。スマートフォンやタブレットなどの実機上で動作確認ができる点も特長だ。画面遷移の確認にとどまらず、「どの操作に、どの反応が返るのか」「連続した操作の中でUXが破綻しないか」といった体験そのものの検証を、実装前に行えるツールとして、プロダクトデザインやUX設計の現場で広く活用されている。

詳細はこちら

「アート作品」としての体験へ ―― NOT A HOTELのグローバルブランディング

「NOT A HOTEL」は、これまでのリゾート会員権とは一線を画す、新しい“住まい”のかたちを提案するサービスだ。Takramは、このプロジェクトを世界市場に展開するにあたり、そのグローバル向けWebサイトの制作パートナーとして選ばれた。

プロジェクトの当初から参加しているTakramのデジタルプロダクトデザイナー・二日一宏祐氏は北米で育ち、現地のスタートアップでプロダクトデザイナーとして活動してきた経歴を持つ。こうした背景が、グローバルな視点での世界観構築を求められた本プロジェクトにおいて、強力な推進力となった。

まずチームが直面したのは、英語圏のユーザーに向けてブランドをポジショニングし直すという課題だった。「海外から日本に来るだけでなく、日本で家を買うということ自体に、物理的な距離や言語、文化的な習慣のちがいなど、様々なハードルが存在します。日本は“旅行先”であって“住む場所”ではない、という認識を変えていく必要がありました」（二日一氏）。

クライアントであるNOT A HOTEL創業者・濵渦伸次氏や執行役員 CXOの井上雅意氏とのヒアリングを重ね、彼らが持つリサーチ結果やインサイトを深掘りしていく中で、ターゲット像が明確になっていく。それは「ウルトラハイネットワース（Ultra High Net Worth）」と呼ばれる、世界の0.01%に属する超富裕層だった。

「まずは、その層をターゲットとして設定し、長期的にはより多くの人々がアクセスできるものにしていく、という目標が定まりました。彼らに対し、どうすれば日本を“住まい”として選んでもらえるか。海外で物件を買うハードルを下げ、いかに安心感を提供できるかが鍵でした」（二日一氏）。

Takramでは、ブランドストラテジスト Mari Iwahara氏もチームに加わり、グローバルな視点での戦略立案が進められた。設定されたターゲットに対し、体験やメッセージングの指針として掲げられたのが、「ハイアート」「日本のカルチャー」「エクスクルーシブな体験」の3つだった。「特に『ハイアート』が重要でした。ターゲットとなる方々は、これをひとつのアート作品として、ある種のおもちゃ感覚で楽しめるような層です。創業者の言葉もヒントになりました」（二日一氏）。

理想のターゲットユーザーとして具体的に名前が挙がったのは、ファレル・ウィリアムスのような、カルチャーシーンを牽引するアーティストたち。彼らのような「豊かな資産を持ち、アートやクールなものに敏感な層」に刺さる世界観が求められた。

コンセプトを具体化していく過程で、Takramは2つの方向性を軸に検討を進めた。ひとつは「エンジニアリング・エクセレンス」という、日本のものづくり精神に根差した方向性。もうひとつは「グランド・ビジョナリー」という、ビジョンやアート性を前面に押し出す方向性だ。「当時、既存の日本向けサイトには明確に言語化されたブランドイメージがなかったため、まずはそれを、機能的で親近感があるものと解釈しました。そこから、より体験的で野心的な方向へどう振るかを探ったのです」（二日一氏）。

さらに、この2つの方向性を「ホーム・アズ・ヘブン」（隠れ家のような、エレガントで洗練された世界観）と「インスパイア・リビング」（イマジネーションを刺激する、子供心をくすぐる世界観）という2つのブランドコンセプトに落とし込んだ。「創業者の濵渦さんが自身の物件を『プラモデルみたい』と表現したことが印象的でした。その言葉が『インスパイア・リビング』のコンセプト、つまりクリエイティブな子供心をくすぐる、大胆でラディカルな世界観へと繋がっていったんです」（二日一氏）。

最終的に、クライアントの共感も得てインスパイア・リビングの方向性が採択された。

このプロセスで活用されたのが、Takramが多用する“物差しを引いて方向性を定める”手法だ。「ビジュアルがメインのプロジェクトでは、フィードバックが主観的になりがちです。それを避けるため、判断基準となる“物差し”をクライアントと共有します」（二日一氏）。

具体的には、ホーム・アズ・ヘブンを左端、インスパイア・リビングを右端に置いた地図（物差し）を示し、複数のデザイン案をその上にマッピング。左寄りのミニマルで余白を活かした案から、右寄りのボールドで大胆な案までを提示し、「どのあたりが理想ですか？」と議論を重ねた。この手法により、感覚的な議論に陥ることなく、ロジックに基づいた意思決定が可能になったという。

こうして固まったデザイン原則は、「大胆でわかりやすく、印象に残るパッケージ」で「アート作品を買うかのように」、そして「クリエイターを押し出す」ことだ。

「NIGOさんをはじめ、NOT A HOTELには著名なクリエイターがパートナーとして関わっています。彼らをもっと前面に押し出すべきだと考えました」（二日一氏）。こうして、世界市場に向けたNOT A HOTELの骨格が形成されていった。

「幽霊とは戦えない」Takram流プロトタイピングの哲学

NOT A HOTELのようなビジュアルと体験が重視されるプロジェクトにおいて、Takram、そして二日一氏はプロトタイピングをどのように位置付けているのか。「僕は基本的に、どんなプロジェクトでもプロトタイプはつくった方が良いというスタンスです。クライアントも見ていて面白いし、何よりアイデアが伝わりやすい」と二日一氏は断言する。

その背景には、Takramの組織文化と、二日一氏自身の経験則がある。Takramは、特定の“Takramらしさ”を強要せず、多様性と個々のオーナーシップを重視する文化を持つ。特筆すべきは、一般的な企業にある「マネージャー」という役職が存在しない点だ。「プロジェクトディレクター（PD）という役割はありますが、上下関係を示すものではありません。PDが別のプロジェクトではいちメンバーとして動くことも日常茶飯事です。チームはフラットで、全員で競争（協創）していくスタイルですね」（二日一氏）。こうしたフラットな環境が、デザイナーの主体的な提案を後押ししている。

また、Takramには「ペンデュラム・シンキング（振り子思考）」という、プロセスレベルで共有されている思想がある。「考えてはつくる、つくっては考える。エンジニアリングとデザイン、ビジュアルとUXの間を、振り子のように常に行き来しながら進めていく」という考え方だ。

このペンデュラム・シンキングを実践する上で、プロトタイピングは欠かせない。二日一氏も、NOT A HOTELのプロジェクト序盤、ブランド戦略を練るかたわらで、すでにFigma上でスケッチを始めていたという。「リニアなプロセスではなく、可視化しながら模索していく」ためだ。

二日一氏は、プロトタイピングの重要性を「幽霊とは戦えない」という言葉で表現する。「以前、Takramの誰かが言っていた言葉ですが、本当にその通りだと思います。言葉だけでイメージできていないものをクライアントにぶつけても、相手も何について話しているのかわからない。まさに幽霊と戦っている状態です」（二日一氏）。

その“幽霊”を祓うのが、具体的な“動くプロトタイプ”だ。「ラピッド（素早い）プロトタイプを繰り返し、具体物を見せながら説明することが重要です。僕自身、プロトタイプをつくるとき、『これは壊す前提だ』と想定して進めています」（二日一氏）。

具体物を示すことで、クライアントの中にあるイメージの解像度が一気に高まる。それによって得られるフィードバックの質も向上し、結果としてプロジェクト全体のクオリティアップに繋がる。「クライアントのテンションが上がるのも、大きなプラスですね」と二日一氏は笑う。

なぜProtoPieだったのか？ 導入経緯と「NOT A HOTEL」での活用

二日一氏がペンデュラム・シンキングを高速で回すために選んだツールがProtoPieだった。彼とProtoPieの出会いは、学生時代にまで遡る。「2019年に、ニューヨークに拠点を持つR/GAの東京オフィスでインターンをしていた時、ProtoPieの創業者・Tony Kim氏がピッチにいらしたんです。その時『これはすごい』とハマってしまいました」（二日一氏）。

当時使っていた他のプロトタイピングツール（Flintoなど）と比較し、ProtoPieは群を抜いて直感的だったという。「創業者のTony Kimさんがデザイナー出身という背景もあって、デザイナーの気持ちや苦しみを深く理解したうえでProtoPieがつくられていると感じました。Figmaがデザイナーの共感を呼んだのと同じ感覚です」（二日一氏）。

使い始めると自然と学び進められ、必要なチュートリアルなどのリソースも徐々に充実していった。以来、二日一氏にとってProtoPieは信頼できる武器のひとつとなった。

NOT A HOTELプロジェクトにおいて、ProtoPieはインスパイア・リビングというコンセプトを体現するために不可欠だった。「創業者の『プラモデル』という言葉から着想を得て、子供心をくすぐるような、大胆でリッチなインタラクションを取り入れたいと考えました」（二日一氏）。

しかし、静止画や言葉だけでその複雑な動きを伝えるのは困難だ。「幽霊と戦わない」ためにも、二日一氏はProtoPieで具体的なプロトタイプを作成し、提案することにした。「最初は、クライアントを驚かせたいという自分の子供心もあり、裏でこっそりつくっていました（笑）。言葉で説明しても伝わらないかもしれない、という不安を払拭するためでもありましたね」（二日一氏）。

ProtoPieでつくられたプロトタイプは、Webサイトの体験を劇的に可視化した。ファーストビューではNOT A HOTELのロゴが大胆に表示され、「Your home in Japan. Dreamt up by iconic creators.」というミッションがアイコニックに示される。

スクロールすると、NOT A HOTELが持つ圧倒的なビジュアル（その多くが写真ではなくCGだという）が、全画面を贅沢に使って次々と展開される。「素材が非常に良かったので、これを最大限活かさない手はないと考えました」（二日一氏）。

さらに、スクロールアニメーションを活用し、「1/12の所有権」というシステムの解説や、日本各地に展開するロケーションの多様性など、複雑な情報をストーリーとして直感的に伝えていく。「デザインに投資する価値を深く理解されているクライアントだったため、こうしたリッチな表現も受け入れられ、非常にやりやすかったです」（二日一氏）。

二日一氏がProtoPieを活用するのは、WebサイトのUIデザインに限らない。「Takramの事例紹介ページ（プロジェクトページ）で、コンセプトを説明するためのシンプルなアニメーションをつくる際にもProtoPieを多用しています」（二日一氏）。

本来であればAfter Effectsなどで作成するようなモーショングラフィックスも、ProtoPieの方が早く、簡単につくれる場合があるという。「僕はAfter Effectsのリテラシーがずいぶん前から止まっているので（笑）。ProtoPieはUIに限らず、こうしたアニメーションも素早くつくれる自由度の高さが良いですね」（二日一氏）。

プロセス変革と効果 ―― “つくって考える”サイクルの高速化

ProtoPieの導入は、NOT A HOTELプロジェクトのプロセスに具体的にどのような変革をもたらしたのだろうか。二日一氏のワークフローは、FigmaとProtoPieの強みを活かしたものだ。まずFigmaでUIデザインを作成し、それをProtoPieのFigmaプラグインを使ってインポートする。「FigmaからProtoPieにコピペできる。これは非常に大きいです」と二日一氏は強調する。

クライアントからのフィードバックやデザインの変更はFigmaで行う。「Figmaで更新作業をすると、ProtoPieにも更新した要素だけが反映されます。ゼロからつくり直す必要がないので、修正サイクルを高速で回せます」（二日一氏）。

このシームレスな連携が、Takramのペンデュラム・シンキングを支えている。「プロトタイピングによって『つくると考える』の往復が実現できます。このツールがなければ、往復の手間は非常に重苦しくなってしまっていたはずです」（二日一氏）。

また、二日一氏はProtoPieを使う大きな理由として「単純に、つくるのが楽しいから」と話す。「自分の頭の中にあるものが、実際に動くものになっていくプロセスがすごく楽しいんです。この楽しさが、試行錯誤の回数を増やすモチベーションにも繋がっています」（二日一氏）。

他のツールでは制限が多かったり、学習ハードルが高かったりして実現できなかったリッチな表現が、ProtoPieでは直感的に、かつスピーディに試せる。特にタイムライン機能は、After Effectsのような感覚でアニメーションを制御でき、表現の幅を広げてくれるという。

「タイムラインやトリガー、コンディション（条件分岐）といった機能を深く理解していくと、かなり工夫したリッチなものがつくれます」（二日一氏）。

この試行錯誤の回数こそが、最終的なアウトプットのクオリティを左右する。もしProtoPieがなければ、時間的な制約から、ここまで大胆なインタラクションの提案には至らなかったかもしれない。

ProtoPie導入の最大の効果は、コミュニケーションの劇的な改善にある。NOT A HOTELのプロジェクトでは、NOT A HOTELの内製エンジニアが実装を担当したが、言葉や静止画だけでは、意図した動きやタイミングのズレが生じがちだ。しかし、ProtoPieでつくった“動く実物”を見せることで、そのズレは限りなくゼロに近づく。「『これと同じになるようにつくってください』と、プロトタイプを見せるだけです。イメージしているものをそのまま伝えられるので、エンジニアとの連携が非常にスムーズになりました」（二日一氏）。

具体的には、ProtoPieのクラウド機能（ハンドアウト機能）を使って共有リンクを発行。エンジニアはブラウザ上でインタラクションのタイムラインや詳細なスペックを確認しながら実装を進めたという。

一方で二日一氏は、日常的に複数のデザインツールを使いこなすからこその課題や要望も口にする。「Figmaでは可能な、背景ぼかしのような視覚的なスタイリングが、ProtoPieにインポートすると正確に反映されず、調整が必要です。こうした細かいデザイナーならではの不満点はあります」（二日一氏）。

また、昨今のトレンドを踏まえ、「Cursor（AIコードエディタ）のように、プロトタイプから実装コード（フロントエンド）を生成してくれるような機能があると、さらに嬉しいですね」と期待を寄せた。

二日一氏が実践する高速な“つくっては壊す”サイクルは、クライアントの想像力を刺激し、開発の精度を高める。理想のUI/UXを実装する上で、ProtoPieのようなツールが果たす役割は今後ますます大きくなっていくだろう。