Wix Studioはここまでできる！海外デザインスタジオ事例で見る“自由で美しい”Webデザイン
「Wix Studio」は、ノーコードツールならではの構築・更新のしやすさを備えつつ、高いデザイン性を併せ持っています。アニメーションやグリッドレイアウトなどのデザイン機能が充実しているだけでなく、コードも扱えるローコードツールのような柔軟性を備えており、緻密なデザインの作り込みが可能です。
では、実際にどのような表現が実現できるのでしょうか。ここでは、海外のデザインスタジオがWix Studioで制作した自社サイトを例に、そのデザイン力を見ていきます。
アニメーション機能を随所に活用し、ユーザーの視線を惹きつける
最初に紹介するのは、アメリカ・ニューオリンズに拠点を置くクリエイティブデザインスタジオ「Ofir Design」のWebサイトです。同社はブランディングをはじめ、紙媒体やWebサイトのデザインなどを幅広く手掛けています。
トップページは、タイポグラフィや半円、直線を効果的に組み合わせ、余白まで緻密に設計されたグラフィックデザイン的な表現が印象的です。さらに同社は、クライアント案件でもWix Studioを活用してWeb制作を行っており、その機能や特性を熟知したうえで自在に使いこなしています。
この自社サイトでは、特にアニメーション機能を多用しています。Wix Studioでは、要素が表示された際に動く「エントランスアニメーション」、ホバー（マウスオーバー）やクリック操作に反応する「インタラクションアニメーション」、さらに「スクロールアニメーション」「ループアニメーション」、そして背景にリッチな表現を加えられる「WebGLエフェクト」など、5種類のアニメーション・エフェクトを設定することができます。
ファーストビューでは、右下の「Contact」メニューがエントランスアニメーションによって下からふわりと現れます。クリーム色の背景に、このボタンだけ濃いグレーを敷いている点からも、制作依頼を検討している企業に向けて「連絡はこちらへ」と視線を誘導する狙いが感じられます。
トップページをスクロールしていくと、事業内容のテキストは画面の右側へ、キャッチコピーのテキストは左側へとそれぞれハケていきます。要素を左右に分けて退場させることで、中央へ視線が誘導され、続いて現れる制作事例のリストに自然と意識が向かう構成になっています。
制作事例の名称は、エントランスアニメーションによって1行目が右から、2行目が左からと交互に出現します。マウスオーバーすると、対応するサムネイル画像がふわりと表示される仕組みです。さらに、マウスをページの左右に置くと、画面全体がその方向へ傾くような演出も加えられています。
制作事例の一覧から気になる項目をクリックすると、各プロジェクトの解説ページへ遷移します。こちらでもスクロール操作に合わせて、プロジェクト名が左方向へハケていき、その後キービジュアルの上に解説テキストや画像が重なるように表示されます。
解説テキストの直後にはWebサイトが埋め込まれており、実際のサイトへ移動せずにスクロール操作に伴う動きを確認できます。さらにスクロールを進めると制作事例の画像が現れ、マウスオーバーするとわずかに縮小するアニメーションが加えられています。細部にまで動きが設計されており、閲覧者に心地よいリズムを感じさせます。
デザインスタジオ紹介のページでは、円が重なり合うスクロールアニメーションなど、サイト全体の随所にアニメーションが取り入れられています。
これだけ多彩なアニメーションを取り入れながらも、過剰な印象を与えず、要所でユーザーの視線を的確に誘導する設計は、まさにプロのなせる業といえます。
また、このWebサイトではCMSが活用されています。Wix Studioでは、あらかじめ用意されたテンプレートを選ぶだけでなく、ゼロから自作したデザインをテンプレート化することも可能です。おそらく、随時追加が必要となる制作事例ページにはCMSが導入されており、ゼロから構築するか、相当程度カスタマイズが加えられていると考えられます。さらにカスタムCSSも活用され、細部まで緻密にデザインが調整されています。
その結果、一般的なCMSにありがちな“ブログ的な見た目”から脱却した、洗練されたビジュアル表現が実現されています。
変化をつけたスクロールアニメーションで強い印象を与える
クレジット：Olya Black
次に紹介するのは、アメリカ・ニューヨークを本拠地とし、イギリスや南アフリカにも拠点を構えるクリエイティブエージェンシー「The Boathouse Agency」のWebサイトです。ワールドワイドに展開する同社は、グローバルブランドと協業しながらブランディングやキャンペーンの企画を手掛けています。
トップページでは「BIG MOMENTS FOR DISRUPTIVE BRAND（革新を起こすブランドのために忘れられない瞬間を）」というコピーを掲げ、ブランド戦略におけるクリエイティブ力の高さを印象づけています。スクロールするごとにアニメーションや動画が次々と現れ、ダイナミックで視覚的な訴求力の強いデザインとなっています。
このWebサイトでは、Wix Studioで設定できる5種類のアニメーションのうち、とりわけスクロールアニメーションが効果的に活用されています。ファーストビューをスクロールすると、クライアントロゴが右から横方向にスライドして現れ、その後には制作事例を紹介する動画が登場。動画の位置は固定されたまま、上に重なるテキストだけがスクロールに合わせて動きます。
さらにトップページ終盤では、「AI最適化」を訴求する黒基調のセクションが、スクロールに合わせて先端が三角形になりながら白い画面へと切り替わります。色と形のコントラストが際立ち、視覚的なインパクトを与える印象的な演出です。
これらのセクションの間には、テレビCMやデジタル施策、OOH、インフルエンサー施策など、トータルで手がけたプロジェクトを横スクロールで紹介するエリアが設けられています。クライアントロゴのスクロールアニメーションと同様に、縦方向の流れで閲覧するWebサイトの中に横の動きが加わることで、ページ全体に変化とリズムが生まれます。
Wix Studioでは、レイアウト設定で高度なCSSグリッドを適用することで、このような横スクロールの表現を実装できます。
Wix Studioでは、横型・縦型といった多様なメニュータイプが用意されています。このWebサイトではハンバーガーメニューを採用しており、展開するとPCでは画面の半分、スマートフォンでは画面全体に黒背景のメニューが表示されます。
メニュー項目は「CASE STUDIES」と「CONTACT US」の2種類とシンプルながら、カスタムメニュー機能を活用することで、マウスオーバーやクリック時に文字間が広がるアニメーションが付与されています。この演出によって、ユーザーはどのページへ遷移しようとしているのかを直感的に把握できる設計になっています。
「CASE STUDIES」のページでは、制作事例がテキストや画像で紹介されています。ここでもトップページ同様、縦スクロールの流れの中に横スクロールや動画を組み込み、動きのある構成を実現しています。
また、一部のページでは、セクションをセルに分割できる「セクショングリッド」機能が活用されています。たとえば、開発プラットフォーム「FILEMAKER」の「FARM TIME」キャンペーンを紹介するページでは、PC表示で左右2分割のレイアウトを採用し、上下で分割幅を変えることで視覚的な変化を生み出しています。インフルエンサーキャンペーンとして派手なビジュアルが少ない事例だからこそ、この変則的な分割がデザイン上のアクセントとして効果的に機能しています。
さらに、このレイアウトはレスポンシブ対応となっており、スマートフォンでは縦積みに切り替わって可読性を確保しています。
スクロールするごとに多彩な動きや演出が展開されることで、見た目の華やかさだけでなくテンポのあるリズムが生まれ、つい次々とコンテンツを読み進めたくなります。単調にならないよう、変化やメリハリを持たせた演出を考える際に、多くのヒントが得られるWebサイトです。
細部まで行き届いた調整により、美しいミニマルデザインを実現
ブラジルとポルトガルに拠点を構え、18カ国以上のブランドと協業するデザインスタジオ「by LOTIPA」のWebサイトです。全体を通して、制作事例の画像や映像を除き、白い背景に黒い文字というミニマルなデザインで統一されています。
トップページは、タイポグラフィと3Dのキューブで構成されています。大きく配置された社名と西暦の文字にマウスオーバーすると、「LOTIPA」の中のいずれか1文字がランダムに切り替わる仕組みです。たとえば「I」にマウスオーバーすると「A」になり、再度試すと「P」になるといった具合です。
なお、現時点ではWix Studio上で3Dオブジェクトを直接要素として追加することはできませんが、HTML iFrameを用いて外部コードを埋め込むことで、こうした3D表現を実装することが可能です。
制作事例が並ぶINDEXページでは、サムネイルがスクロールアニメーションによって徐々に拡大しながら表示されます。レイアウトにはセクショングリッド機能が使われており、横3分割の構成で、左のセルにプロジェクト名、中央にサムネイル、右のセルに「by LOTIPA」が担当した領域と制作年度が配置されています。
スマートフォン表示では、サムネイルを中央と右のセルにまたがって大きく見せ、担当領域と制作年度を非表示にするなど、デバイスに合わせた見せ方が工夫されています。
INDEXで制作事例のサムネイルをクリックすると、それぞれの解説ページへ遷移します。ページ上部の解説文をスクロールして通過すると、タイル状に作品のサムネイルが並び、画像が一回り大きくなるスクロールアニメーションが設定されています。全体がモノトーンで文字中心のデザインの中にありながら、制作事例ページだけは画像が敷き詰められ、メリハリのある構成になっています。
また、PC表示ではセクショングリッド機能を用いた2分割レイアウトを採用しており、それぞれのセルの高さは画像サイズに応じて変化します。Wix Studioでは、セクショングリッドの分割数を指定するだけでなく、高さや幅の異なる画像を並べる「コラージュ」レイアウトも選択可能です。これにより、自由度の高いビジュアル構成を実現できます。
さらに、このレイアウトはレスポンシブ構造となっており、スマートフォンでは縦積み表示に切り替わって可読性と操作性が保たれています。
トップページをINDEXの下までスクロールすると、「VAMOS CONVERSAR?（話しましょう）」というメッセージと「PEDIR ORÇAMENTO（見積もり依頼）」のボタンが、スクロールアニメーションによって徐々に拡大しながら表示されます。最終的には文字サイズが大きく強調され、制作依頼を検討する企業へのアピール要素として効果的に機能しています。
ボタンをクリックすると、メールアドレスや電話番号に加え、WhatsAppへのリンクも表示され、すぐにコンタクトを取れる導線設計となっています。こうしたスムーズな問い合わせ導線にも、グローバルに展開するデザインスタジオらしい配慮が感じられます。
「SOBRE NÓS（私たちについて）」のページでは、会社紹介のテキストの下に、横方向へ流れるスクロールアニメーションで数多くのクライアントロゴが表示されています。
このようなミニマルデザインを美しく仕上げるには、高いデザイン力に加え、細部まで緻密に調整できる柔軟性が求められます。by LOTIPAのWebサイトでは、カスタムCSSなどの機能を駆使し、その精度の高いミニマルデザインを実現しています。
今回紹介したサイトのように、Wix Studioはノーコードでありながら、ここまで自由度の高いデザイン表現を実現できるのが大きな魅力です。アニメーションやレイアウト設定、カスタムCSSなどを組み合わせれば、今回紹介したような洗練されたサイトも十分に再現可能です。ぜひ、これらの事例を参考に、自分なりの表現にトライしてみてください。
文：平田順子