Wix Studioはここまで進化した──海外クリエイターWebサイト9選
ノーコードのWeb制作プラットフォームとして知られ、ワールドワイドに展開する「Wix Studio」。制作するハードルの低さが大きな特長の一つですが、なかでもプロフェッショナルのWebクリエイターたちを魅了しているのは、追求してつくり込むことが可能な「機能性」や「デザイン性」の高さではないでしょうか。
「Wix.com Ltd.（以下、Wix）」のデザイン部門では、Wix Studioが搭載する機能の一つにフォーカスして制作を行う実験的なプロジェクト「Web.Lab」を開催しています。選抜されたクリエイターのみが参加できる同プロジェクトでは、どのような機能を活用したWebサイトがつくられているのでしょうか。ここでは、クリエイティビティを刺激する、9つの事例を見ていきます。
目次
Wix Studioの可能性を押し上げる「Web.Lab」
「Web.Lab」は、Wixのデザイン部門が主催する実験的なプロジェクトです。選抜された経験豊富なクリエイターが参加し、専門家のサポートのもとで、Webサイトの構想からローンチまでの過程に取り組みます。
その際、CSSグリッドやホバー、ループアニメーションなど、Wix Studioが揃える多数の機能の中から一つにフォーカス。特定の機能と向き合いながらアイデアを突き詰めていくことで、Wix Studioによるデザイン表現の限界を押し広げていくのが狙いです。
今回は、同プロジェクトで制作されたものの中から9つの事例をピックアップ。どのWebサイトも、フォーカスした機能によって、軸となるメッセージや物語を補強する表現・演出がなされています。これらのアイデアは、みなさんのクリエイティビティを強く刺激するはずです。
事例①｜「リピーター機能」で、個性的なレイアウトを柔軟に構築
「Body of Water」は、Web制作者自らが撮影した水に関する写真を、エディトリアルデザイン風のスタイルで見せるポートフォリオサイト。作品は、「People I Met By The Sea（海辺で出会った人々）」「The Lighthouse（灯台）」など6つのテーマに分けられています。
本サイトでは、写真のレイアウトをテーマごとに変えていて、同一のテーマ内では「リピーター機能」を活用して効率的に写真を掲載しています。これは、同じデザイン・レイアウトの枠組みを複製し、画像などのコンテンツだけを変更できるリスト表示機能です。CMSと連携してコンテンツを動的に表示することもできます。たとえば「Closing（終了）」では、スライドショーのインタラクティブな動きを組み合わせ、アニメーションの切り替えを行っています。
リピーター機能で効率的に写真を追加できるので、更新の負担を抑えながら、テーマごとに異なる個性的なレイアウトデザインを制作できます。各テーマに合わせたレイアウトによって、演出的な写真掲載を実現しています。
事例②｜「ホバー機能」で、直感的にゲームを体験
「Date it or hate it?」は、自身のデートの好みに基づいてパートナー候補を「あり（Date it）」か「なし（Hate it）」か選び、どのようなデートが好みかを診断できるゲームコンテンツです。
スタートすると、画面中央にパートナー候補を象徴するキャラクターのシルエットが表示されます。そこにマウスカーソルを合わせると、キャラクターの姿と同時に特徴や性格がテキストで表示されます。ユーザーは、その人とのデートが「あり」ならば画面右側のハート型の南京錠を、「なし」の場合は左側の旗をクリックします。これを複数のキャラクターで繰り返していくと、最後に診断結果が表示されます。
このWebサイトでは、マウスカーソルを乗せたときの動きを制御する「ホバー機能」にフォーカスして、ユーザーの操作が設計されています。キャラクターの画像には、上にマウスカーソルを置くと動いたり表情を変えたりといったループアニメーションも設定されています。
マウスカーソルを置くか、クリックすることをトリガーとする表現は、多くのユーザーに馴染み深く、ゲームを直感的に操作できます。そうしたスムーズなUIだからこそ、ゲームの世界に集中しやすい設計を実現しています。
事例③｜「パララックス機能」で、立体感や奥行きを演出
博物館に収蔵されている儀式用の仮面を時代別にまとめた、デジタルアーカイブ「Maskatorium」。仮面の画像は実物を撮影し、3Dアーティストとのコラボレーションで制作しています。
本サイトは「パララックス機能」にフォーカスされています。パララックスとは「視差」を意味し、レイヤーで重ねた要素を違う速度で動かすことによって生まれる表現のことです。
ここでは、仮面本体や目、鼻、背景などを別々の画像ファイルで作成して重ね、レイヤーごとに動くタイミングをズラすことで、平面画像でありながら立体的で奥行きのある印象を生み出しています。
また、頭にたくさんの羽根がついた仮面は、羽根を1枚ずつ別レイヤーにすることで、風にそよいでいるような表現になっています。他にも、パララックスと3D的に回転させるインタラクションを組み合わせ、ドラッグすることで立体的に動く表現を実装している仮面もあります。
JavaScriptやCSSでパララックスを実装するのは大変ですが、Wix Studioのエディタなら機能として備わっているほか、パララックスを搭載したテンプレートも用意されているので、手軽な実装が可能です。この印象的な視覚的効果を用いて、ユーザーの視線を惹きつけたい対象に誘導することが期待できます。
事例④｜「動画ボックス機能」で、ビジュアル素材をパーツごとに制御
「Genesis Reimagined」は、旧約聖書の『創世記（英語名：Genesis）』に記された「天地創造の7日間」を、1日ごとに章立てて描いたプロジェクト。スクロールしていくと、天地創造の内容に沿ったシーンが次々と展開していきます。
これらのビジュアルには、動画をWebサイトのデザイン要素として組み込める「動画ボックス機能」が用いられています。Wix Studioでは、一般的な長方形だけでなく円形や多角形などさまざまな形にクロップ（切り抜き）できるのが特徴です。
手書きイラストによる動画一つひとつが独立したパーツになっていて、それぞれに動画ボックス機能を設定することで、スクロール時に異なる動きを与えています。多くのパーツを動画ボックスで制御するのはかなり緻密な作業となるため、制作に4カ月もかかったそうですが、個別に設定できるからこそ世界観の詳細なつくり込みを実現しています。
事例⑤｜「ホバー機能」で、マウス操作に多様な制御を
オンライン上のコンテンツをあとで見ようと保存しても、その後ほとんど見返すことがないという人間の習性に着目したプロジェクト「Save For Later」。画面上の「Click me」を押すと、過去に保存してきた投稿が現れます。
そして、その中の一つにマウスオーバーして上下左右に動かすと、他のコンテンツも引き寄せられ、列車のように長い一つの列になっていきます。これらの制御には、Wix Studioの「ホバー機能」が活用されています。
さらにスクロールすると、新たな投稿がたくさん出現します。その中で気になったコンテンツをクリックすると保存できるようになっていて、見返さないコンテンツをさらに増やしてしまうという皮肉の効いた構成になっています。
最後には、隣と半分重なった状態のコンテンツが並びます。マウスオーバーすると、選択したコンテンツは大きく表示されますが、重なっている箇所は引き続きよく見えないままです。これも、過剰に溜め込んだところで隅々まで見ることができないことを示した表現なのかもしれません。
ホバー機能は、任意の要素を選択するといったオーソドックスな使い方だけでなく、こうしてマウスで動かして他の要素とつなげたり、他の画像と重ねたものを拡大したりと、さまざまな制御が可能です。
事例⑥｜「ループアニメーション機能」で、印象的な動きを実現
こちらは、2165年の京都が舞台の、SFをテーマとしたプロジェクト。未来の農業カルチャーを中心に、街の様子を生成画像で表現しています。ここでは、「ループアニメーション機能」を取り入れることで印象づけたいところに目を止めさせ、イノベーションの本質や人類の進歩に関する概念的なメッセージを伝えることに活用しています。
たとえば、写真の上を線が動いたり、帯域表示の点線が点滅したりすることで、データ転送中のイメージを視覚的に表現し、未来感を演出しています。文字を楕円形に配置して、二重の楕円とともにゆっくり回転させるアニメーションは、文字サイズが小さくても視線を引きつけ、こちらもデータ転送を想起させます。
ティーポットや靴など、時代が変わっても残り続けるであろう、生活に欠かせないものを紹介するページでは、それらが少しずつゆらゆらと動くループアニメーションをつけることで、無重力空間のような浮遊感を表現しています。
こうしてループアニメーションの演出によって、現在あるアイテムであってもSF感が醸し出されています。
事例⑦｜「ホバー機能」で難しい話題を伝わりやすい表現に
近年では海外の方にも概念が知られつつある「わびさび」について、「ホバー機能」を活用して解説した「Wabi Sabi」。最初に登場する金継ぎされた壺にマウスカーソルを置くとパーツが離れ、一度はバラバラの破片になったことが表現されます。
「侘び茶」について解説するページでは関連する画像が複数並び、その中でマウスオンしたものの説明文が表示されます。それと同時に、ほかの画像は不透明度を下げ存在感を薄くすることで、今見ている画像に集中させます。
他にも、わびさびの概要をテキストで説明するセクションではマウスを動かした軌跡がラインになって表示されるといったように、さまざまなインタラクションにホバー機能をつけています。
特に海外の方にとっては、わびさびは少し難しいテーマかもしれません。金継ぎの特性を表現したり、見るべき画像へ視線を集中させたりすることで、わかりやすく伝えることにホバー機能が寄与しています。
事例⑧｜「テキストエフェクト機能」で危機感を伝える
制作者が「私たちは何が真実かを自分自身で認識する能力を失ってしまったのではないかと問い、「クリティカルシンキング（批判的思考）」について紹介する哲学的なプロジェクト。Webサイト全体を通して、文字に装飾や動きをつけられる「テキストエフェクト機能」が多用されています。
たとえば利用規約のような文面が流れ、私たちの生活にそうした細かな文字が溢れかえっていることを指摘するセクションでは、曲線などのラインにテキストを沿わせる「パス上のテキスト要素機能」が使われています。ここではテキストが楕円や円、上下に動き続けることで、文字が溢れかえっているさまがより強く伝わってきます。
健康と美容に関するテキストが流れるセクションでは、先ほどと同様の「パス上のテキスト要素機能」とあわせて文字が流れる「マーキーテキスト機能」を使い、背景の色が変わる地点から別のテキストが流れてくる仕掛けとなっています。「Do this, buy that, believe this（これをしなさい、あれを買いなさい）」といった虚実や「Certainty is fleeting（確実性とははかないものだ）」といった真実が流れてきて、同じ文脈の話でも真実と偽りがないまぜになっていることを表現しています。
こうしたテキストエフェクト機能での演出によって、SNSをはじめとするインターネット上に溢れる情報を鵜呑みにする危険性や違和感が認識しやすくなっています。
事例⑨｜「CSSグリッド」によるレイアウトで物語を構成する
ギリシャ神話の中でも有名な「パンドラの箱」の物語を、コミック風のイラストで表現した「Order and Chaos」。スクロールすることで物語が進んでいきます。
このWebサイトは、Wix Studioの「CSSグリッド」にフォーカスして制作。トップページは、それぞれの高さを変えた3列×2段のグリッドになっていて、場面ごとにさまざまなサイズや数のグリッドで構成されています。
スクロールしていくと、最初は整然と並んでいたグリッドが傾きランダムな並びになり、崩れていきます。秩序（order）が崩壊し混沌（chaos）としていく物語が、グリッドの並びで表現されているわけです。
最後の画面では、災いを描いた数々のグリッドをドラッグしてよけていくことで、パンドラの箱の中身が見えてきます。箱の底にある小さな光が、雑然とした要素の中から出てくることで、混沌の先に見える希望が表現されています。
グリッドデザインが、物語の秩序と混沌を演出する手段として効果的に活用された好例、と言えます。
豊富なデザイン機能で、コンテンツやメッセージを深める
ここまで紹介したように、Wix Studioにはさまざまな機能があり、それらによってクリエイティビティの高い表現をすることが可能です。単にデザインを格好よく仕上げるだけでなく、Webサイトで伝えたい物語やメッセージなどの核となる部分を補強する演出表現として、各機能が効果を発揮します。
しかも、ノーコードで実装できることで、従来ならリソース面で断念せざるをえなかった機能や表現を取り入れるハードルが大きく下がりました。こうしたWix Studioの強みを活かせると、Webクリエイターたちは、よりWebサイトに適した表現を追求しやすくなるはずです。
文・平田順子