【タイアップ】ノーコードがクリエイティビティをアシストする「Wix Studio」

　かつてWebクリエイターがFlashを自由な表現の道具としたように、いま、ノーコード／ローコードWeb制作プラットフォーム「Wix Studio」が、より成熟した形で自由な表現とビジネス成果を追求するための手段となっています。クリエイティビティをアシストするWix Studio の表現力を、世界の制作事例からひもときます。

話してくれた人

＼世界のHow To丸ごと解説！ 無料ウェビナー開催／

2024年7月9日14時～開催される、Wix Studio の各種機能やアニメーションの設定方法を詳しくご紹介する無料ウェビナーです。Wixを用いたノーコードWeb制作のアイデア＆Tips 収集にご活用ください！

アニメーションが下へ下へといざなう
Mouse Parallax goes to Wonderland

2024年5月14日のAwwwards「Site of the Day」を受賞。 Wix 本社のクリエイティブチーム「Wow Team」がWix Studio で制作した、多彩なアニメーションを駆使したLP。

世界中のプロに選ばれている「Wix エディタ」と「Wix Studio」

Wixは、誰もが直感的に使えるノーコード／ローコードWeb制作プラットフォームです。個人から企業までDIY感覚で制作できる「Wix エディタ」と、プロの制作者のニーズに応える「Wix Studio」があり、用途にあわせた活用が可能です。

Wixエディタ

• 豊富なテンプレートと直感的な操作で、専門知識がなくても制作・管理できる
• SEOに強い基本構造を持ち、メタタグ管理も可能
• サイトの機能拡張やビジネスに役立つアプリを手軽に追加できる
• 4種類のアニメーションを使用できる
• 自由度の高い開発環境「Velo by Wix」も利用可能

Wix Studio

Wix エディタの機能に加え、

• プロ仕様の制作機能とチームのための管理機能を備えた制作会社向けソリューション
• 簡単な操作でレスポンシブを高度にカスタマイズ可能
• 多彩なアニメーション機能をプリセット
• CSS／JavaScriptのカスタム開発が可能
• 複数メンバーの同時編集、テンプレートやアセットの共有等でチーム作業をサポート

「Wix Studio」ならクリエイターが本来の価値にフォーカスできる

Webサイト訪問者にとって、そのページがノーコード製かスクラッチ開発かは本質的な問題ではありません。サイト制作を発注するクライアントにとっても、もっとも重要なのは本来のビジネス目的が叶うことです。では、制作者にとってはどうでしょうか。

「ノーコードはノンプロのための簡易的なツールで、制約も多い」…そんな印象をお持ちの方もいらっしゃるでしょう。しかし、Wix Studio は、制作者のために開発されたプロ仕様のノーコード／ローコードWeb制作プラットフォームです。デザイナーにとっては、FigmaやAdobe XDでデザインするようにWix Studio でつくったものがそのまま成果物になることが利点です。ちょっとした余白や行間、アニメーションの微妙な動きなど、言葉ではディレクションしにくい感覚的な部分まで自分の手で試行錯誤して完成させることが可能です。

エンジニアにとっては、より価値ある部分にリソースを集中させることが可能になります。文字修正や写真変更などは他の人でも対応可能になる分、CSSやJavaScriptなどエンジニアが本来発揮すべき技術力を、より高度なカスタム開発に活かせるのです。今回は、そんなWix Studio で制作された海外の事例とそのテクニックを紹介するウェビナーの事前レクチャーとして、本記事にていくつかの機能をご紹介します。

型破りな表現を印象強く展開するクリエイターのWebサイト
「Nasir Studio」

クリエイターNasir BaradariのWebサイト。世界に200以上のクライアントを持ち、グラフィックや映像の制作を行う。Webサイト制作は今年始めたばかりという。

「リヴィール」のダブル使いで文字の色変え演出

トップのロゴ下に現れるピカソの言葉は、スクロールに応じて黄色の文字が現れ、追いかけるようにピンクへと色が変わります。これは2色のテキストボックスを同じ位置に重ね、タイミングをずらして「リヴィール」を設定したもの。シンプルな動きもアイデア次第でリッチな表現に。

「リヴィール」の設定方法

「 リヴィール」は隠されたていたものを見せるアニメーション。動作速度やタイミングを設定できます。

コンテナを重ねてぼかす、奥行き感ある演出

　サービス紹介の部分をスクロールすると「グラフィックデザイン」「動画編集」「Webデザイン」の3枚のコンテナが順に重なり、下層にはぼかしが入ります。これは「配置」の「スティッキー」と、「アニメーション」の「ぼかし」の併用によるもの。質感と奥行き感が生まれています。

スティッキー、アニメーションエフェクトの設定方法

スクロールがセクション最下部に到達すると要素が停止する「スティッキー」。アニメーションエフェクトで「ぼかし」を設定可能。

ダウンロードしてすぐに使える「ウェブアプリ」

　問い合わせフォームは「Wix App Market」から無料で入手して追加。スマートフォンにアプリを入れる感覚で、手軽にインストールが可能です。他にもEC、ブッキング、各種SNS・CRM連携など、ビジネスに役立つさまざまなアプリやサードパーティ製サービスが提供されています。

「フルレスポンシブ」で飛躍的に効率化

　Wix Studio はデフォルトでレスポンシブに対応。要素サイズは自動で拡大縮小されますが、固定サイズにしたり、最大・最小サイズの指定などカスタマイズも簡単。さらに「レスポンシブAI」機能を使えばAIとの共同作業で大幅に効率UPが可能です。

世界のHow To丸ごと解説！ 無料ウェビナー「ノーコードでここまでできる？！ 海外事例で見る、最先端アニメーション」

デザイナーの創造性を解き放つ――Wix Studio で体験する革新的なアニメーションの世界

Wix Studio の先進的なアニメーション機能を活用し、デザイナーがいかに効率的に、魅力的なWebサイトを構築できるかを紹介します。ケーススタディとして、実際にWix Studio によって制作された海外のWebサイトを厳選しました。具体的なデモンストレーションを通じて、ノーコードで実現できる高度なアニメーションを体験しましょう。時間とコストを大幅に節約しながら、デザイナーのクリエイティビティを最大限に引き出す方法を学ぶことができます。

Wix Studio によって制作された海外のWebサイト　

• Mouse Parallax Wonderland 
• en[i]gma 
• Scopetheory 
• Nasir Studio 

※ウェビナーで参考に用いるWebサイトは、都合により変更する場合がございます。予めご了承ください。

開催日時・場所

2024年7月09日 14:00 – 15:00　オンラインイベント（Zoom開催）

Text：笠井美史乃　Photo：五味茂雄
本記事はWix.com Japan株式会社とのタイアップです。