top of page

Wix Studio 革新的なWeb 制作プラットフォーム

更新日:13 分前


(※この記事は2025年1月1日にリライトされました。)


こんにちは!

Wix専門のウェブサイト制作会社、合同会社アクトワン代表の和田英也です!


2023年8月2日(水)に発表されたWixの新プラットフォーム、『Wix Studio』。



AI 搭載の機能と最新の Web デザインおよび開発の機能、複数のサイト管理のためのシームレスなワークフローを統合した革新的なプラットフォーム。


現在、見る限りでも驚異的な性能を持っています。

主な特徴は後述しますが、個人的には以下が革新的と感じたポイントです。


■ レスポンシブAI

デバイスごとのブレークポイントでのレイアウト調整をAIがサポートしてくれる。

→レスポンシブデザインで最も時間を要してしまうのが、各デバイスごとのレイアウト調整。ここにAIが入ってくれることで、かなりの工数削減が見込める。


■ カスタムCSS

今までEditor Xですらできなかったデザインがカスタマイズ可能になり、ほぼ制限がなくなった。

→Editor Xでは、サイトの CSS コードにアクセスしたり、編集したりすることはできません。

(※現在Editor Xのサービスは終了しており、2024年11月以降、すべての Editor X サイトが自動的に Wix Studio へと更新されています。)


■ ノーコードで設定できるアニメーションなどのインタラクティブが多数追加。

→インタラクティブの機能は、Veloカスタマイズするしかなかったが、ノーコードでここまで豊富に実装できるのはありがたい。


VSコードなどのカスタマイズも加えると、WebサイトにおいてWixで出来ないことはほぼなくなったのではないかと考えられます。


「この数年間、私たちは制作会社のみなさまと密に連携しながら、彼らのワークフローを深く理解し、それに応じて製品を進化させるべく、尽力して参りました。 そしてこの度、質の高い Web サイト制作や全てのクライアント管理に役立つ全く新しいプラットフォームの提供を開始しました。 Wix Studio の登場は、私たちにとって、プロフェッショナル領域での大きな成長を実現するものであると確信しています。 Wix の Web 制作に関する知見と AI 技術を組み合わせることで、複雑な Web デザインのプロジェクトを支援し、Web 制作業界での先駆者となるよう取り組みを続けて参ります。」 Wix 共同創設者兼最高経営責任者 アビシャイ・アブラハミ (Avishai Abrahami)




公開されているWix Studioの主な特徴

完全なデザインコントロール

直感的なキャンバス体験により、全てのパーツがデフォルトで画面サイズに応じて拡大・縮小するため、制作者はデザイン業務に集中することができます。


また、ミニマルデザインから非常に複雑なレイアウトまで、任意のブレイクポイントを設定してサイトの制作ができるほか、パーツは画面サイズに合わせて自動調整されます。


レスポンシブ AI

制作者は、ワンクリックでサイトをレスポンシブ化できます。AI 技術により、全ての画面サイズに合ったデザインのレイアウトが自動生成されます。

見え方はいつでも自由に調整できます。


AI技術により、あらゆる画面サイズに自動的にフィットする完全レスポンシブレイアウトのデザインを生成
AI技術により、あらゆる画面サイズに自動的にフィットする完全レスポンシブレイアウトのデザインを生成

ノーコードのインタラクション、アニメーション、デザイン表現

デザイナーは、コーディング不要の高度なアニメーションをサイトに追加して、視覚的にサイト訪問者を引きつけることができます。

具体的には、スクロール、ループ、エントランス(読み込み)時のアニメーションのほか、クリックおよびホバー時のインタラクション、カスタムカーソル、テキストマスクなどが利用可能です。

目を引くダイナミックアニメーションをノーコードで追加できる
目を引くダイナミックアニメーションをノーコードで追加できる

カスタム CSS

Wix Studio のエディタで、CSS を簡単にカスタマイズできます。

CSS をコピーしてエディタに貼り付け、各パーツに適用することで、新しいデザインやアニメーション、インタラクションの作成が可能です。


ブレイクポイントごとに変更を適用できるメディアクエリや、全体の一貫性を保ちたい場合に便利なカスタムクラスなど好みの手法を選べます。


エディタ上で直接グリッドを操作して、強調したい部分にスタイルを追加できます。

セルを分割、リサイズ、スワップしてオリジナルのレイアウトに仕上げることが可能です。


CSSをカスタマイズ
CSSをカスタマイズ

ガラス効果を適用する

上述のカスタムCSSの例で出していた画像の「ガラス効果」はノーコードで実装可能になりました。

Wix Studio エディタでは、コンテナ、セル、またはリピーターの背景にガラス効果を適用することができます。

ガラス効果を適用して背景色、不透明度、ぼかし強度を調整すると、要素内のテキストを読みやすくすることができます。

ガラス効果
ガラス効果

AI 画像作成

Wix AI 画像生成ツールを使用すると、高品質でパーソナライズされた画像コンテンツを迅速かつ低コストで作成できます。

適切に構造化されたプロンプトを作成し、好みの画像スタイルを適用することで、複数のバージョンの画像を生成し、サイトに追加することができます。

引用 : Wix ヘルプセンター記事
引用 : Wix ヘルプセンター記事

AI テキスト作成

重要な情報を入力するだけで、後は AI に任せることで、コンテンツに妥協することなく時間を節約できます。

テキストを生成して選択したら、ブランドイメージやサイトの見た目に合わせてさらに編集を行うことができます。


テキストマスク

「テキストマスク」を使用して、サイト上のテキストを画像、グラデーション、動画などで塗りつぶすことができます。

(※Wixの通常エディタでも使用可能になりました。)


「プリセットデザイン」を使用して、アクセシビリティや SEO 効果はそのままに、サイトの印象と注目度がぐんと上がります。


最新のトレンドを取り入れた既定のアセットやセクションから選択し、調整することで制作プロセスを効率的に進められます。プリセットデザインはプロジェクトのニーズに応じて切り離し、再利用、編集も可能です。


また、テキストのテーマやカラーパレット、コンポーネントなど、よく使う基本のデザインをデザインライブラリに保存してチームで共有したり、別のサイトで再利用もできます。


テキストマスクの例
テキストマスクの例

直感的な操作性

ストレスのない制作環境によって、制作会社やフリーランサーは、高機能かつ大規模な Web サイトをスムーズに制作することができます。


共同作業によるコラボレーション

Wix Studioはユーザーが同じサイトで同時に作業できるリアルタイムの共同作業プラットフォームです。

関係者がコメントや承認、提案をすることも可能です。

他のユーザーのアクションを上書きすることなく、ページや要素のレイアウト、デザイン、コンテンツを編集できます。


エディタでコメントを付けられます。
エディタでコメントを付けられます。

AI 搭載のビジュアルサイトマップ

サイト設計を効率化する画期的なツール。

AI を活用した視覚的なサイトマップで、構造の全体像を簡単に把握できます。

クライアントとのコミュニケーションもスムーズになり、プロジェクト全体の効率を大幅に向上させることができます。


  • サイト構造を一目で確認し、計画を効率化

  • 既存サイトやテンプレートにも対応

  • サイトマップとワイヤーフレームを柔軟に生成


Wix Studio ビジュアルサイトマップ
Wix Studio ビジュアルサイトマップ
カスタムワイヤーフレーム
カスタムワイヤーフレーム

アクセシビリティウィザード

アクセシビリティの問題を検出・修正するための専用ウィザード。アクセシビリティに配慮したサイト作成を簡単に実現し、全てのユーザーに使いやすいウェブ体験を提供できます。


  • カラーコントラストや alt 属性の不足などを検出し、修正可能

  • DOM 順序を自動最適化し、パフォーマンスや SEO を強化


ご注意点

  • 機能によっては、お客様がご利用の環境で表示されない可能性もございます

  • サービスの変更により仕様が変更される場合がございます


アクセシビリティウィザード
アクセシビリティウィザード

効率的なクライアント管理のためのワークスペース

全てのプロジェクトやクライアントのための単一ダッシュボード

単一の強力なダッシュボードで、クライアント、プロジェクト、複数のチームを管理するという全く新しいワークフローが確立できます。Wix Studio のモバイルアプリを使うことで、どこからでもアクセスが可能です。

強力なダッシュボードにより、クライアントやプロジェクト、複数のチームをすべて一括管理できる。
強力なダッシュボードにより、クライアントやプロジェクト、複数のチームをすべて一括管理できる。

大規模プロジェクトのチーム管理

アプリやテンプレートを作成し、プロジェクト間で再利用することで、大規模なプロジェクトも効率よく進めることができます。また、メンバーが過去に問い合わせたサポートへのチケット履歴の追跡および管理によって新たな問題の解決に役立てたり、新機能やベータ版の機能にアクセスしたりすることもできます。


クライアントの体験

クライアントに合わせたダッシュボードおよびエディタが、円滑なコラボレーションを可能にします。

クイック編集機能やカスタマイズ可能なリソースキットを使うことで、クライアントは希望する Web サイトの保有や運用を自ら行うことができます。また、サイトに関する重要な情報やパフォーマンスに関する最新の分析レポートを閲覧することも可能です。


クライアントのニーズを満たす高度な機能

あらゆる要求に応えるオープンなプラットフォーム

Wix Blocks や UI スロット、カスタム CSS、そしてあらゆる技術スタックや端末をサポートする Wix Headless(https://ja.wix.com/developers/headless)を使って、Web サイトをカスタマイズすることができます。

数百種類の API および SPI を使って、Wix のビジネス機能のロジックやフローを拡張したり、置き換えたりすることが可能です。


また、データ拡張機能により、組み込みエンティティの拡充や、カスタム情報の収集および蓄積をすることもできます。さらに、数多くのトリガーやアクションが含まれるライブラリをベースにしたオートメーションを使って、高度なワークフローの作成が実現できます


堅牢なコーディング環境

プロフェッショナルかつ Wix 独自の、VS Code をベースにしたオンライン統合開発環境(IDE)を使って、サイトにフロントエンドやバックエンドのコードを追加したり、Wix 製またはサードパーティ製の API とシームレスに連携したりすることができます。

また、開発者は、サイトを GitHub に接続することで、好みの IDE を使って開発を行うことも可能です。

VSCode 正式にはVisual Studio Codeといい、Microsoft社の提供する無償のコードエディタです。最初のリリースは2015年の新しい開発ツール。 「拡張機能」によりさまざまな機能の追加の余地がある。

再利用可能なアプリの作成・販売

Wix Blocks により、高度にカスタマイズ可能なアプリケーションおよびウィジェットを作成、保存、再利用して、何百ものサイトにデプロイできます。

また、完成したアプリはさらなる収益化のために、2億4,500万人以上のユーザーが集まるWix App Market 上で販売することも可能です。


AI コードアシスタント

クリーンなコードを書いたり、エラーを発見したりするのに役立つ AI コードアシスタントを使うことで、開発者は、複雑な Web サイトやアプリケーションを素早く作成することができます。

「Web 制作の現場では、一度に何百ものプロジェクトに携わったり、複数のチームと共同作業を行ったりという状況が日常的になっていると思います。 Wix Studio は、Wix エディタの直感的な操作性と最先端のツール、強固なインテグレーション機能、そして高度なビジネス機能を統合したもので、制作会社がどのように Web サイトを構築して、管理するかといった方法を再定義します。 創造性と柔軟性を確保した本プラットフォームは、制作会社やフリーランサーの生産性の向上に役立つものですので、こうしてお届けできることを嬉しく思いますし、素晴らしい制作物を生み出すための一助となるよう願っています。Wix Studio プロダクト統括 ガリ・エレズ (Gali Erez)
「この数年間、私たちは Wix を使って制作を行う Wix パートナーから、非常に有益なインサイトや知識を得てきました。 そしてその経験は、既存の Wix プラットフォームのみならず、Wix パートナーの Web 制作・管理のための卓越したプラットフォームである Wix Studio を形作る上で重要な役割を果たしています。 複雑なプロジェクトの構築からクライアントとの関係維持まで一つの場所で完 結できるという、制作会社のニーズを全て満たしたプラットフォームを提供できることをとても嬉しく思っています。」 Wixパートナー責任者 ミハル・ヴィグニッツ (Michal Bignitz)

AI サイトビルダー

AI チャットでビジネスのストーリーを伝えるだけで、瞬時に AI がホームページを作成します。

サービス予約ネットショップイベント管理など、必要に応じたビジネスソリューションをサイトに自動追加できるため、大切なビジネスに専念することができます。



Wix Studioのプレミアムプラン料金

ベースの価格はEditor Xよりも安価(Editor X - Essentialプラン1,700円/月)ですが、サイト共同管理者数やCMSアイテム数に制限があることが少し気になりますね。


弊社でのWix Studioを使用したWeb制作

弊社では、2023年のWix Studioリリースから、すでに多数の制作に取り組んでおります。

これまでに多くのお客様のご要望に応じた、魅力的で機能的なレスポンシブデザインのWebサイトを提供してまいりました。


Wix Studioの強力なツールと弊社のVelコーディングをはじめとする専門知識を組み合わせることで、ユーザーフレンドリーで美しいデザインのWebサイトを提供しています。


弊社はお客様のビジネス目標に合わせた最適なWebサイトを提供するため、常に最新の技術とトレンドを取り入れています。


Webサイト制作をご検討中の方は、ぜひ弊社にご相談ください。

お客様のニーズに合わせた最適なソリューションをご提案いたします。

お問い合わせをお待ちしております。


Wix Studioを動画で解説

弊社の運営するYouTubeチャンネルでWix Studioの基本を解説しています。

レスポンシブの基本中の基本から解説しておりますので、ぜひチェックしてください。



Wix Studioを学ぶ

Wix Studioを学べるプラットフォームです。



参照リンク集

Wix Studio紹介動画


Wix Studioホームページ


Wix Studioサポート記事

 
 

Comments


bottom of page