世界の事例から広がる創作のヒント。クリエイティブスタジオ・tote inc.が体感したWix Studioのクリエイティビティ
クリエイティブスタジオ・tote inc.（以下、tote）のデザインに触れたことのある人なら、同社が手がけたWebサイトを一目で見抜けるかもしれません。デザイナーの谷井麻美さんとフロントエンドエンジニアの山口国博さん、2人で生み出すWebサイトは、それほどまでに独自性の高い表現で、たびたび話題を集めています。
そんなtoteの2人に、ノーコードツールWixのプロ向け制作ソリューション「Wix Studio」を体験してもらいました。普段はWeb制作ツールをあまり使わないというお二人ですが、Wix Studioにはどのような可能性を感じたのでしょうか。
今回は、Wix.com Japan株式会社のフロントエンドエンジニア・山下圭祐さん、デザイナー・楊令傑（ヨウ・レイケツ）さんとともに話をうかがいました。
独自性の高いWebサイトを、Wix Studioで再現
––––toteさんは、これまでノーコードツールを使ったことがありますか。
谷井麻美（以下、谷井） ありませんでした。私たちはゼロから自由につくるWebサイトが多く、これまでは制約のない環境で制作するようにしてきました。
––––お二人がつくるWebサイトは動きが多く、「Figmaでデザインして実装する」という一般的なフローでは難しい印象があります。普段はどのような手順で制作しているのでしょうか。
谷井 最初に企画を手書きでバーッと書いて詰めていき、アイデアをぶつけ合いながら、デザインと実装を同時に固めていきます。なので、後からデザインをつくることも少なくありません。
手書きの段階である程度の完成形を想定し、クライアントさんにOKをいただいてから進めるのですが、技術的な制約や「もっとよくできるのでは」という検討を重ねた結果、当初の想定とは違うものが完成することもあります。効率的なつくり方とは言えないかもしれないですね（笑）。
山口国博（以下、山口） 一直線にゴールを目指すというより、試行錯誤しながらジグザグに進んでいく感じですね。
山下圭祐（以下、山下） 私たちの知っているWeb制作の方法ではないです。クリエイティブすぎます！
谷井 クライアントさんに、私たちのつくり方を理解してもらっているからこそ実現している部分も大きいと思います。
––––今回は、toteさんが過去に制作したオリジナルワーク「TOTETOT RECORDS」を、Wix Studioで再現していただきました。普段とは制作方法が大きく変わると思いますが、使った印象はいかがでしたか。
山口 最初はあえて使い方を調べずに触ってみたのですが、直感的に操作できましたし、想像以上に制作スピードが速かったです。サンプルサイトはおおむね2日ほどで完成し、その後は調べながら細かなつくり込みを加えていきました。
––––UIや操作性についてはいかがでしたか。
山口 これまで我流で制作してきたので、Wix Studioのメニューの流れに沿って進めることで、「この順番でつくっていくと効率的なんだ！」という気づきがありましたね。
なので、特に初心者の方やチームで制作する方がWix Studioをひと通り体験すると、制作フローを把握しやすく、作業もスムーズに進められるのではないかと思います。
楊令傑（以下、楊） それは嬉しいですね。ちなみに、操作方法で悩んだ点はありましたか？
山口 ブロック（Wix Studio上では「セクション」）を構築する際に、サイズを小さくしたくてもできなくて……。調べてみると、親要素でサイズを指定しても、内部の子要素のサイズが固定されているとセクション全体がそれ以上縮まらない構造になっていることが原因でした。
実装の手順としては子要素から組み立てていくほうがスムーズなので、「親要素から設定すべき」という前提から指摘されたように感じました。こうした制作フロー自体にも、新しい発見がありましたね。
機能性の高いWix Studioへの期待
––––Wix Studioを使ってみて、「こんな機能があったらいいな」と思ったものはありますか。
山口 制作途中では、色や線の太さなど、各メニューで前回使った値が表示されるのはとても便利でした。私たちがつくるWebデザインは偏りが大きいので、これまで使った色や線の太さといった傾向をもとに、よく使う設定が優先的に表示されたり、一覧で見られたりすると、さらに使いやすくなりそうだと感じました。
山下 なるほど。「メニューをパーソナライズする」という発想はなかったので、おもしろいですね。
––––Wix Studioはコーディングも可能なローコードツールですが、実装面での自由度の高さについてはどのように感じましたか？
山口 まだ深く使いこなせてはいませんが、「かなり幅広いことができる」という話は周囲から聞いています。今回は、すでに完成しているWebサイトを再現する形だったので、アウトプットが決まった状態での制作でした。
ただ、普段の制作のように試行錯誤を重ねていく場合は、変化に対応できるつくり方が必要になるため、操作方法をより深く学ぶ必要があると感じましたね。
––––普段の制作では、AIを活用していますか？
谷井 私は言語化や文章をまとめるのに悩んだときや、海外の方とコミュニケーションするときなどにAIに相談しています。あとはツールの使い方についてもよく聞いていて、“先生”のような存在です。
楊 「AIでデザイン案を何パターンか出してもらう」といった使い方はしませんか？
谷井 そういった用途では、あまり使っていません。ただAIに多面的な視点を提示してもらい、「こんな考え方もあるんだ」と気づきを得るために、企画に関する相談をすることはあります。自分たちの考えは有限なので。
––––AIを積極的には使っていないのは、何か理由があるのでしょうか。
谷井 どれだけ足掻いても、AIのパターン数に1人の人間が勝つことはできません。それは理解したうえで、それでもなお「デザインのオリジナル性を高めるために、あえて悪足掻きをしている」という面もありますね。
––––ちなみにWix Studioには、サイトのレスポンシブ対応やワイヤーフレーム自動生成など、AIを活用した機能もありますが、それらは試しましたか？
山口 今回はレスポンシブ対応のテンプレートを選び、その他のAI機能は使いませんでしたが、AIの活用によって実装作業が効率化されることには期待しています。
谷井 レスポンシブ対応のWebサイトがすぐに生成できるのは便利ですよね。AIを活用することで、かなり制作時間が短縮できるのではないかと思います。
––––勝手なイメージですが、効率化で制作時間が短縮しても、谷井さんはその分の時間で、さらにデザインを考えてしまいそうな気がします。
谷井 そうかもしれないです（笑）。日々とても執念深いつくり方をしているので。
世界のWix Studio事例から受けるクリエイティブな刺激
––––デザイン面で、Wix Studioに興味を持ったところはありますか。
谷井 私は「Awwwards」（世界中から集まったWebデザインを審査・表彰するWebサイト）でJury（審査員）を務めているのですが、3年ほど前からノーコードで制作されたWebサイトの投稿が増え、2年ほど前に「No-code Honors」という部門もできました。その中にはWix Studioで制作されたWebサイトも増えてきており、どれも個性的で演出力が高いものばかりです。
例えば、SOTD（Sites Of The Day）を獲得した「The ADHD Experience」は、ADHDの体験を多様な視覚表現で表していて、技術面もコンセプトもとてもすごいと感じました。
また、「Wix Playground」（Wixが運営するデザイナー成長支援のためのコミュニティ）のInstagramもフォローしていますが、そこでも非常にクリエイティブな事例が数多く紹介されています。「Wix Studioでここまでできるのか」と、日々驚きながら学ばせていただいていますね。
––––先ほど、自由な制作環境にこだわってきたとお話されていましたが、Wix Studioを使うことで制約を感じる懸念はありませんか？
山口 むしろ、ある程度の制約があるからこそ、その中でどう独自性を出すかを考えるのがおもしろいと思っています。Wix Playgroundに投稿されているWebサイトも、そうした姿勢でつくられているものが多いように感じました。
谷井 今はSNSやプロギャラリーなどで、おもしろい表現をストックしています。クライアントさんからお話をいただいたときに、「そのコンセプトだったら、これがうまくハマると思います」と提案できたり、「今考えているコンセプトとぴったりだ」と感じるものと結びつけたりして、制作につなげていけるのではないかと思っています。
ただ、それらの表現をそのまま参考にするのではなく、自分たちならではのフィルターを通して、おもしろく表現したいと考えています。
––––Wix Studioを使ってゼロからWebサイトをつくるとしたら、どのような案件に向いていそうですか。
谷井 おもしろい表現や、飛び道具的なアイデアを小規模なサイトでスピーディーに出していきやすそうなので、キャンペーンやブランド表現に特化したWebサイトなどに向いているのではないかと思います。
––––toteさんは、独自の表現力を発揮したオリジナルワークも多く発表されています。そうした制作にも活用できそうですね。今後、Wix StudioでつくったWebサイトが公開されるのも楽しみです。
谷井 Wix Studioでどこまで表現の限界を突破できるか、これから色々と試していくのが楽しみです。
取材・文：平田順子、写真：秋山枝穂、企画協力：Wix.com Japan株式会社
※本記事はWix.com Japan株式会社とのタイアップです。