「ワクワクする世界観」をどうつくる？ Flowplateaux・木村浩康が挑むWix StudioでのECサイト制作（前編）

これまで、数多くのデザイン性・先進性の高いWebサイトをデザインしてきたFlowplateaux主宰の木村浩康さん。今回はWix.comの高度なWeb制作ソリューション「Wix Studio」を使って、株式会社凪のECサイトをつくることになりました。

こうしたノーコードツールは、Web制作の知識がない人でも簡単につくれることが強みとして語られがちです。しかし木村さんの場合は、ClaudeやFigmaを駆使し、細部までこだわって作り込んでいったといいます。一体どのようなWebサイトになったのでしょうか。

木村さんが登壇する6月18日開催のWix.comのイベント「トップクリエイターが明かす制作フローの変革と、その可能性」に先駆け、制作中のECサイトについて、Wix.com Japan株式会社のフロントエンドエンジニア・山下圭祐さんとともに話をうかがいました。前後編の2回にわたりお届けします。

ECサイトも一気通貫でつくれるWix Studio

–––––Wix Studioを使って株式会社凪のECサイトをつくられているそうですが、どのような経緯で依頼があったのでしょうか。

木村浩康（以下、木村）　代表の凪さんは友人で、技術者でもある彼とは、Webサイトのディテールの話から、Webだけに留まらない多角的な視野でのデザインの話までする仲です。ビジネスライクな依頼ではなく、「ECサイトをつくって販売したい商品があるから、一緒にやってもらえない？」と、普段のデザイントークの延長で、一緒にやることになりました。

–––––ECサイトで販売される商品は、どういったものですか。

木村　凪さんが企画した、招き猫型のお酒のボトルケースです。最大750mlの瓶を収納できます。前田麦さんというイラストレーターが描いたイラストを基に立体化された作品で、限定100個の受注販売となっています。すべて職人が一つひとつ手作りしています。

–––––アート作品的なボトルケースですが、どのような購入者や利用シーンを想定されていますか。

木村　伺った話で印象的だったのが「お祝いの気持ちを形として残したい」ということでした。取引先のパーティなどに出席する際、手土産にお酒を持参する方は多いです。そのため、どれが誰から贈られたものなのか分かりにくくなり、飲むと忘れてしまう、という課題がありました。しかし、招き猫のケースに入っていたら印象に残りますし、日本の招き猫の意味を知ることで場が盛り上がりますよね。お祝いの気持ちを招き猫によって実体化されることで、数年経っても招き猫を見るとその人に思いを馳せることになる。

なんでもお金で買える富裕層やセレブリティこそ、他の人と差別化したい意識が高いので、この招き猫に価値を見いだすはずだと話されていました。

–––––その招き猫のケースを販売するECサイトを制作するにあたり、Wix Studioを使うことにしたのはなぜですか？

木村　実は最初、「完璧にWebサイトに最適化したPDF」というユニークなコンセプトにしようと二人で盛り上がっていました（笑）。PDFを貼るだけでつくったWebサイトで、どこまでできるかを徹底的に考えるといったものでした。最初はおもしろいと思ったのですが、さすがにECサイトでやるのは難しい、という結論になりまして。

EC専門のプラットフォームを使うのが順当だろうと考えていたところ、Wix Studioのイベント出演のお話をいただきました。Wix StudioだったらEC機能が備わっているため、一気通貫でデザインできてよいのではないかと感じました。WebサイトにECプラットフォームを連携する形で運用すると、ECプラットフォーム側の仕様変更があった際に調整が必要になります。そうした保守の面でも、1つのサービスで完結できるのは大きなメリットです。

また、彼自身もWix Studioを使ってECサイトをつくった実績があり、とても詳しかったため、ポジティブに受け止められました。

–––––凪さんもWix Studioには好印象を持たれていたのですか。

木村　はい。他のノーコードツールは制約が多く、痒いところに手が届かない部分もありますが、Wix StudioはVelo by Wix（以下、Velo）によってJavaScriptやCSSを書けるので、制約が少ない点を凪さんも評価されていました。

ワクワクさせる世界観で、招き猫のファンをつくる

–––––ターゲットは外国の富裕層やセレブリティとのことでしたが、どのような世界観やコンセプトのWebサイトになりますか。

木村　招き猫のキャラクターも含め、“外国から見た間違った解釈の日本らしさ”をコンセプトとしています。サイバーパンク的なネオン感や、アジア的なモチーフ、スピリチュアルな雰囲気が混ざった世界観は、海外でも直感的に伝わりやすいと思いました。

–––––映画「ブレードランナー」みたいなイメージですか？

木村　はい。Webサイトでは、そういった世界観が好きな人たちをワクワクさせることを目指しました。この招き猫自体を好きになってもらう必要がありますからね。そういう意味では、ECサイトでありながら、ブランディングサイトとしての役割も大きいかもしれません。

–––––ワクワクさせる世界観をつくるために、どのような点にこだわりましたか。

木村　スプラッシュページで表示する招き猫の写真は、一見すると生成AIっぽく見えるかもしれませんが、実際に撮影しています。アンチAIというわけではないですし、背景だけをデジタルで制作してコラージュすることもできましたが、あえて一番手間のかかる方法で汗をかいて撮ることにこだわりました。ライトや小物などの空間演出は、プロップスタイリストの遠藤歩さんにつくってもらい、撮影はフォトグラファーの yansu（@yansukim）さんに担当していただきました。

–––––最初は、どんなWebサイトにしようと話していたのでしょうか。

木村　「タッチポイントとなるWebサイトを通して商品にさらに興味を持ってもらえる、インパクトがあるサイト」というテーマがありました。

アクセスした直後に撮影したキービジュアルを見せたり、購入ボタンを千両箱にしたりといったアイデアも出ていました。結局、デザインや演出は自由にやらせてもらって、僕が何をつくるかは細かく共有しすぎず、ときどき途中経過を見てもらいながら進めていきました。

また、公開後の運用を想定して、Wix Studioの特性をいかし、トップページ以外の商品ページなどは凪さんが作れるようにして、分業できる形にすることは最初から前提にしていました。

–––––Wix Studioでは、そうした協業を実現しやすいですか。

木村　ダッシュボードがわかりやすく、協業作業も進めやすいと思います。決済完了のところまで凪さんがつくったら、そこから僕がバトンタッチしてデザインを調整していきます。今回は実践していませんが、ワイヤーフレームに文字などの必要要素を先に入れて、そのあとに僕がデザインをするという形の協業の仕方もアリなのではないかと思います。

日本語に遊び心を込めたデザインでおもてなし

–––––制作途中段階のデザインを見せていただくと、Webサイトはいくつかのセクションに分かれていて、縦スクロールする形になっています。見る人にどのような体験をさせたいと考えましたか。

木村　まだ制作前ですが、まずは実際に撮影した招き猫の写真をスプラッシュページで見せて、商品について知ってもらったあとにトップ画面を表示します。

このページでは、招き猫のタグラインである「おもてなし」が「愛想を振る」などの文言に切り替わるアニメーションをつけています。また、上から降ってくる千社札には、「容姿端麗」や「悪戦苦闘」など、さまざまな四文字熟語を入れています。日本語がわからない方がターゲット層となるので、凪さんと2人で考えて、遊び心で少し毒のある言葉を入れました。

木村　スクロールしていくと、「OMOTENASHI（おもてなしの精神）」、「HERITAGE & RE-IMAGINATION（伝統の再解釈）」、「CRAFTMANSHIP（ものづくりの精神）」といったテーマで招き猫のケースについて解説したテキストがあります。そして、英語の文章と同内容の日本語を背景に柄として敷きました。外国の方には、かっこいい文字のデザインとして楽しんでもらえればと思っています。これらの文章は、凪さんが書いてくれました。

山下圭祐　デザインのベースは、Figmaを使ってつくったのでしょうか？　また、FigmaからWix Studioに落とし込む際に、プラグインは使用されましたか?

木村　はい。最初は、FigmaでつくったデザインをFigma MCPを通してClaudeに構造化してもらい、それをプラグインFigma to Wix Studioでエクスポートしました。トップ画面を見た限りでは一見すごくよい感じにインポートできたと思ったのですが、その下のページのデザインが全部画像になっていまして。結局、Wix Studio上でFigmaのデザインを再現しました。

ただ、Wix StudioにはJavaScriptを挿入できるVelo by Wixという機能があるので、Claudeを活用しながらアニメーションをつけるのはとてもやりやすかったです。すごくおもしろくて、新しいおもちゃのように楽しみながらつくっていきました。（後編へ続く）

Wix Studioの真価に迫る、無料ウェビナーを開催！

プロフェッショナル向けのノーコードツール「Wix Studio」を展開するWix.comとオンラインメディア「Web Designing」が、Flowplateauxの木村浩康さん、tote incの谷井麻美さん・山口国博さん、ium incの小玉千陽さんをゲストに迎え、Wix Studioを使ったWebサイト制作の実践に迫るウェビナーを開催します。

本ウェビナーでは、ECサイト、音楽体験サイト、ポートフォリオサイトという3つのテーマで、実際にWix Studioを使ったサイト制作のプロセスを公開。UX設計の発想や制作フローの変化など、制作の試行錯誤を振り返りながら、プロのクリエイターが感じたWix Studioの手応えや工夫、そして制作の現場で活きるポイントを紹介します。

実制作だからこそ見えてきたリアルな知見を、ぜひご覧ください。

取材・文：平田順子、写真：秋山枝穂、企画協力：Wix.com Japan株式会社
※本記事はWix.com Japan株式会社とのタイアップ企画です。