遊び心と実験から生まれる表現──tote inc.が語るWix Studioでの音楽体験サイト制作【前編】

プロ向け制作プラットフォーム「Wix Studio」は、柔軟なレイアウト設計やCMS機能、AIを活用した制作支援などを備え、Web制作の新たな選択肢として注目を集めています。今回は、第一線で活躍するWebデザイナーの方々に、実際にWix Studioを使ったWebサイト制作へ挑戦していただきました。

本記事で登場するのは、tote inc.の谷井麻美さんと山口国博さん。アーティストの特設サイトやオフィシャルサイトを数多く手掛けるtote inc.のお二人が挑戦したテーマは、「音楽体験サイト」です。印象的なWeb表現を生み出してきたtote inc.は、Wix Studioをどのように活用したのでしょうか。

今回は6月18日開催のWix.comの無料ウェビナー「トップクリエイターが明かす制作フローの変革と、その可能性」に先駆け、お話を伺いました。前後編の2回にわたってお届けします。

より良い着地点を二人で探っていくスタイル

–––––デザインスタジオtote inc.は、アートディレクター／デザイナーの谷井麻美さんと、フロントエンドエンジニアの山口国博さんのお二人で活動されています。まずは普段の制作における役割分担や、プロジェクトの進め方について教えてください。

谷井麻美（以下、谷井）　　これまで音楽業界のWebサイトを数多く手がけてきたなかで、クライアントからは、最終イメージが定まっていない状態で自由に発想してほしいとオーダーをいただくことが多いです。伝達すべきテキスト量が多い案件は比較的少なく、見せる部分と読ませる部分を明確に差別化し、アーティストやイベントの個性をどう演出するかに提案の重きを置いています。

そのため、最初に「こういうものを作ります」と完成形をガチガチに固めることはしません。「アーティストがアルバムを出す」「イベントを開催する」といった大まかな情報をもとに方向性だけを定めた状態で、設計をスタートさせます。

山口国博（以下、山口）　　最初からゴールを一つに絞るのではなく、実装の過程で「もっと面白くできる」という技術的な発見があれば、そこから何ができるかを探りながら軌道修正していきます。今回も、技術的な制約と演出のバランスを取りながら、より良い着地点を二人で探っていくスタイルをとりました。

–––––走りながら限界までアイディアを詰め込んでいくのですね。お二人の間でのコミュニケーションはどのように取られているのでしょうか？

谷井　　実は、制作の途中で頻繁にお互いの画面を見せ合ってすり合わせるようなことはあまりしないんです。隣同士で制作はしているのですが、クリエイターとしてのモチベーションや驚いてもらいたい気持ちを大切にするために、ある程度それぞれの作業が出来上がるまでは「あえての無干渉」を保つようにしています。

山口　　お互いに作り込んだものを持ち寄って合体させ、「もっとこうできるんじゃないか」とプラスの要素を積み上げていくんです。それぞれが独立して検証したものをぶつけ合うことで、思いもしなかった表現が生まれることもあります。

Wix Studioを使って作成した派生プロジェクト

–––––今回、プロ向け制作プラットフォーム「Wix Studio」を使用してオリジナルのWebサイトを制作されていますが、どのようなコンセプトなのでしょうか？

谷井　　私たちは普段から、表現の実験の場として自主制作サイトを作っています。その一つに「PLANETOOOTE（プラネットート）」という、架空の惑星にたどり着き、音楽を楽しみながら世界を探索するというテーマのWebサイトがあります。今回はそこから派生した音楽プロジェクトとして「PLANETOOOTE PLAYLIST」を制作しています。

–––––具体的にはどのような内容になるのでしょうか？

谷井　　コンセプトは「旅」です。具体的な構成としては、一つの架空の惑星にやってきたところから始まり、6つの架空の国を見て回るというものになっています。それぞれの国には、国歌や国旗、景色、気温、時間など異なる設定に基づく世界観があります。そこに、誰もが学校の給食や運動会で聴いたことのあるような有名な行進曲として、モーツァルトやチャイコフスキーなど実在するクラシック作曲家の楽曲を国ごとに割り当てています。

山口　　それぞれの楽曲は単なるBGMではなく、その国の世界を構成する一部として響き合うように選曲しています。そのため、実装面でもその体験を損なわないよう意識しています。各国の画面中央下部には、楽曲試聴とComposer（作曲家）のボタンを並列に配置し、音楽と作曲家の両方にフォーカスした構成にしています。まずはこのプレイリスト版で各国の世界観や音楽に触れていただき、さらに探索したい方には本家のPLANETOOOTEへ遷移していただく導線を想定しています。

お互いの意向による「正義のぶつかり合い」は常にある

–––––本家のサイトから「これだけは欠かせない」というデザインの核はどのような部分でしょうか？

谷井　　PLANETOOOTEの核は、6つの国それぞれが持つ独自の世界観と、ユーザー自身がその場所へ「辿り着いた」と感じられる体験にあります。単にビジュアルを切り替えるのではなく、色、背景、モチーフ、衣装、音楽などを通して、それぞれの国の個性が自然に立ち上がってくることを大切にしています。今回のプレイリスト版でも、本家の世界観をそのまま再現するというより、音楽を入口にしながら、各国の空気やキャラクターを感じてもらえるスピンオフとして設計しました。

–––––ユーザーに「惑星を旅している」という没入感を持たせるために、UI設計や画面遷移ではどのような工夫をされていますか？

谷井　　まずは、6つの架空の国をスライドしながら巡る体験を軸にしています。画面遷移やUI配置では、サイト全体で共通して見せる部分と、国ごとに変化させる部分の切り分けを意識しました。共通するUIによって操作の分かりやすさを保ちながら、背景やモチーフは国ごとに変化させることで、場所を移動している感覚が生まれるようにしています。UIが前に出すぎると世界観への没入を妨げるため、必要な操作は分かりやすく残しつつ、画面全体の雰囲気を壊さない配置や見せ方になるよう気をつけています。

Webデザインのセオリーとしては、なるべく早くコンテンツを見せることが重要とされています。しかし、私たちはあえて世界観に入り込んでもらうためのイントロ（ローディング）の時間を設けることがあります。最初の数秒の間に、いかに世界観を把握してもらい、興味を持ってもらうかを重視しています。

山口　　イントロの途中でカクついたり止まってしまったりすると、ユーザーの没入感が損なわれてしまいます。そこで、いかに早く絵や文字を出しつつ、裏側でデータを読み込ませるかといった処理の工夫を毎回考えています。ただ、ローディングを短くしたい技術的な意向と、イントロで物語を展開させたいという演出側の意向による「正義のぶつかり合い」は常にありますね。

アイディアはちょっとした会話から。「遊び心」が創作の原動力

–––––独創的なデザインを生み出すうえで、お二人の発想の源泉はどこにあるのでしょうか？

谷井　　まず、同業他社さんのWebサイトは極力目に入れないように心がけています。人間は単純なので、見てしまうとどうしても表面的な表現が引っ張られて似てしまうからです。自分の根っこにある記憶から引き出されたようなものでないと、オリジナリティを生むのは難しいと感じています。

アイディアは、自分の中に昔から蓄積されたもの、私で言えば大学で専攻した数学や幾何学の知識などがベースになって出てくることが多いです。また、日常のちょっとした会話からアイディア同士がつながることもよくあります。例えば、以前制作した「TOOOTEGRAM（トートグラム）」という自主制作サイトは、「動物の顔を90度回転させたら文字になる」という射影的な思いつきから始まり、「これをWebサイトでグリグリ動かしたら面白いかも」と発展させて形にしたものです。

–––––クライアントワークですぐには実現しづらいような「遊び心」が、自主制作の原動力になっているのですね。

谷井　　そうですね。いくら「自由にやってほしい」と任せてもらえる案件であっても、クライアントワークである以上、プロモーションやイベントの成功といった明確な目的やマーケティング目線からの達成意識を強く持って取り組んでいます。

だからこそ、100%思い切った遊びや、失敗前提の実験はなるべく自主制作に回すようにしています。日々のふとした思いつきや「取るに足らないけれど面白そう」と感じたものを、自主制作という実験の場で形にしています。そうした試みが、結果的に私たちのクリエイティブの引き出しを広げてくれたら嬉しいと思っています。（後編へ続く）

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株式会社とのタイアップ企画です。