「Awwwards」も認めるWix Studioのデザイン力とは？ーーWix本社デザイナーが語る制作の裏側

世界中の優れたWebデザインを表彰する「Awwwards」に、Wix Studioで制作されたWebサイトがノミネートされました。「Clicking into the Paradox」と題されたそのサイトには、26種類もの個性豊かなボタンが散りばめられ、クリックするたびに多彩な仕掛けが現れます。

この独創的なサイトを生み出したのは、Wix本社に所属する2人のデザイナー。彼らがどのようにアイデアを形にし、Wix Studioの可能性を引き出したのか。その制作舞台裏に迫ります。

話してくれた人

“クリックが止まらない” Web体験の舞台裏

世界中の優れたWebサイトを表彰する国際的なアワードサイト「Awwwards」。デザイン性や独創性、使いやすさなど複数の観点から審査され、世界の第一線で活躍するクリエイターや制作会社が名を連ねるギャラリーサイトとしても知られています。

そのAwwwardsに、Wix Studioで制作されたWebサイト「Clicking into the Paradox」が掲載されました。タイトルのとおり、このサイトは「クリック」という行為をテーマにしたコンセプチュアルサイトです。真っ黒な画面の中に、モチーフやデザインが異なる26種類のボタンが散りばめられ、クリックするとそれぞれ異なるギミックが現れます。デザインやアニメーション、インタラクションの工夫によって、ユーザーがつい何度もボタンを押してしまう。そんな体験を提供しています。

Wix Studioといえば、コーディングの知識がなくても直感的にWebサイトを構築できるツールとして多くの人に利用されています。一方、Awwwardsに集まるのは技巧を凝らしたハイレベルなWebサイトばかり。ノーコードツールでつくられたWebサイトがここまで評価されるのは珍しいことです。

今回は、このWebサイトを制作したWix本社のデザイナー、アヴィヴ・カッツさんとノヤ・メリッジさんにインタビュー。制作の背景やコンセプト、そしてWix Studioの可能性について伺いました。

Wix本社で活躍する2人のデザイナーの挑戦

「Clicking into the Paradox」を制作したのは、Wix本社で活躍する2人のデザイナーです。

マーケティングデザイナーのアヴィヴさんは、主にWixの動画コンテンツを制作する「モーションスタジオチーム」に所属。YouTubeチャンネルやSNS用動画など幅広いコンテンツを手掛けています。学生時代にWixの学生向けプログラム「Wix Playground Academy」でポートフォリオ制作に参加し、その後インターンを経て正社員となりました。

一方、テクニカルデザイナーのノヤさんは、Webデザイナーから受け取ったデザインを、機能的で生き生きとしたWebサイトに仕上げるスペシャリスト。Wixのマーケティング向けサイトなどを手掛けています。前職はサイバーセキュリティ教育系のスタートアップでeラーニング教材を制作しており、「グラフィックだけでなく技術的な側面やUXにも関わりたい」という思いからWixに転職しました。

「Clicking into the Paradox」を制作した経緯について、ノヤさんはこう振り返ります。

「このWebサイトは、Wix社内で行われた『WebLab』というプロジェクトから生まれました。参加者は2人1組でチームを組み、それぞれ異なるテーマでWebサイトを制作します。そこで私たちのチームに与えられたテーマが『クリック』だったのです」

このプロジェクトは、当初からAwwwardsへの応募を目的に進められていたといいます。テーマ決定から制作期間は約3カ月。テーマに沿ってどのようなWebサイトを形にするか、2人の挑戦が始まりました。当時を振り返り、アヴィヴさんはこう語ります。

「3カ月といっても、本業やほかの業務もあるため、WebLabのプロジェクトに使える時間は限られていました。しかし、とても楽しい体験になりました」

「選択のパラドックス」を逆手に取った設計

制作は、与えられたテーマ「クリック」をどのように表現するかについて探るところから始まりました。

アヴィヴさんとノヤさんは、まずクリックに関連するリサーチを行い、神経科学や心理学、ユーザー体験に関する情報を収集。主に探していたのは、これらの分野におけるクリック関連の興味深い知見です。その過程で出会ったのが心理学者のバリー・シュワルツ氏が提唱した「選択のパラドックス」という概念でした。これは「選択肢が多すぎると、人はかえって選べなくなる」というものです。

この概念について、アヴィヴさんはこう語ります。

「選択肢が多いほどユーザーが行動できなくなるというのはネガティブな概念ですが、私たちはその定説を逆手に取りました。膨大な選択肢を前に、ユーザーが次々とボタンを押したくなるようなWebサイトをつくろうと思ったのです」

最終的に、サイトには26種類の異なるボタンを用意。それぞれをクリックすると、押した瞬間に異なるエフェクトや演出が発生します。目玉が動くアニメーションや、背景が溶岩のように変化する動画など、一つひとつが異なる体験になるよう工夫しました。

「同じような見た目や動きが続くとユーザーは飽きてしまいます。そこで、ボタンごとに見た目や演出の仕組みを変え、毎回違った発見があるようにしました」とアヴィヴさん。

ノヤさんも振り返ります。

「単なるリンクではなく、特別で面白く、思わず『ワオ！』と言ってもらえるインタラクションを探し続けました」

こうして、ユーザーが思わず何十回もクリックしてしまう仕掛けが完成しました。すこしだけ、クリックによるリアクションを動画で確認してみてください。

ノーコードとコードの融合で魅せる開発手法

「Clicking into the Paradox」の開発では、Wix Studioが持つ機能とカスタマイズの自由度が存分に活かされました。

アニメーションの多くは、Wix Studioのエディタにあらかじめ用意されたプリセット効果で実装。一方で、より複雑な演出には、「Velo by Wix」と呼ばれるコーディング機能や、カスタムCSS機能を使用しています。VeloはJavaScriptベースでカスタム機能を追加できるWix Studioの拡張機能で、デフォルト機能では実現できない動きや効果を実装する際に欠かせません（Velo by Wixについてはこちらの記事を参照してみてください）。

こうしたインタラクションの実装を担当したのがノヤさんです。

「このWebサイトにはさまざまな演出が盛り込まれていますが、Wix Studioのおかげで素早く形にできました。もしWix Studioを使わずにすべてをコーディングで制作していたら、おそらく2～3倍の時間がかかったと思います。一部にCSSを記述した部分もありますが、アニメーションのほとんどはWix Studioの機能で直感的に制作でき、大幅な時間短縮になりました。さらに、すべてをコーディングで行っていた場合は、Webブラウザごとの表示調整にもかなりの時間を費やしていたはずです」

一方、ボタンのデザインはほとんどアヴィヴさんが担当しました。

「FigmaやAdobeのクリエイティブツール、AIなど、さまざまなソフトを使いました。多彩な体験になるよう心がけた結果、実際にバラエティ豊かな見た目になったと思います」

こうして、ノーコードとコードカスタマイズ、多彩なデザインを柔軟に組み合わせることで、Wix Studioの表現力を最大限に引き出したWebサイトが完成しました。

Awwwardsが評価したWix Studioの可能性

AwwwardsにはさまざまなWebサイトがノミネートされますが、その中でも2人の作品は高く評価され、特別賞（Honorable Mention）を受賞しました。このWebサイトは、Wix Studioが持つ表現力を示す好例のひとつになったといえるでしょう。

Wix Studioの可能性について、2人は次のように語ります。

「Wix Studioは、とても直感的なプラットフォームだと思います。コードを書かなくても、アニメーションやエフェクト、スクロール効果、マウスのパララックス効果、エントランスアニメーションなど、多彩な表現ができます。Figmaのような感覚で作業でき、短期間でクールなWebサイトが完成する点も魅力です」（ノヤさん）

「Wix Studioは、2つの側面があるプラットフォームだと思います。技術的な知識があまりない人でも簡単に使える一方で、複雑なことをやりたい人には高度な表現も可能です。Veloの存在によって、コードを組み合わせた多彩な表現ができます」（アヴィヴさん）

さらに、ノヤさんはWix Studioの魅力としてアプリストアの存在を挙げます。

「Wix Studioにはアプリストアがあり、多彩なビジネス機能やWeb表現をドラッグ＆ドロップだけでWebサイトに組み込めます。構築してきたデザインやコードを損なうことなく、安全に機能を実装できるのが大きな魅力です」

Wixは登場から約20年が経ちますが、その可能性を十分に知らないクリエイターもまだ多いのではないでしょうか。ノヤさんは呼びかけます。

「まずは怖がらずに試してほしいです。Wix Studio Academy（英語）という学習サイトがあり、チュートリアルや動画を見ればすぐに始められます。わからないことがあっても日本語によるサポート体制も整っているので、まずは手を動かしてみることをオススメします」

この作品が生み出されるきっかけになったWebLabプロジェクトは、現在もWix社内で継続中です。今後もWix Studioを使ったユニークなWebサイトがAwwwardsに掲載されていくことでしょう。Wix Studioを使った表現の可能性は、これからも広がっていきそうです。