更新日：2020年2月10日
Wixユーザーの悲願をかなえる発表が本日NYのWix Exclusive Eventで発表されました。それは「Editor X」！レスポンシブに完全対応した新エディタです。Thank you Avishai CEO!!
「Editor X」は、画像から動画背景にいたるまで完璧にデザインされたセクションにより、レスポンシブレイアウトのあらゆる動作を数多くのコンポーネントで実現する「デザインシステム」です。
「Editor X」特設ページにアクセスする
アドレスバーに「editorx.com」と入力しアクセスすると、https://www.wix.com/editorx /にリダイレクトされて特設ページが表示されます。
フレキシブルなグリッドと自由なブレークポイントの制御により、息をのむようなフルードデザインのサイトを実現
「CSSを使わずに、CSSを構築する」と表現しているように、今までのWixエディタと同じく、CSSを記述しなくてもCSSで実装したようなフルードデザインのサイトを作成することができます。
ブレークポイントの設定
レスポンシブデザインでは、ブラウザの画面幅のサイズにより表示するレイアウトを制御し、その切り替えとなる画面幅のサイズを「ブレークポイント」といいます。
320-750px、751-1000px、1000px以上、とあらかじめ3通りのブレイクポイントが設定されていますが、さらに細かく設定したい場合は「＋Add Breakpoint」で設定が行えます。
フルードデザインの設定
docking、stacking、scalingで、あらゆるデバイスにおけるコンテンツの表示のさせ方を設定します。
自由なCSSグリッドレイアウト
ブレークポイントにおけるすべての要素の位置と動作を設定することで、CSSを記述することなく、レスポンシブデザインによるグリッドレイアウトを実装することができます。
フレックスボックスによるレイアウト
Stack、Layouter、Repeaterの3つのレイアウトツールを使うことで、あらゆるデバイスのビューポートでコンテンツをシームレスに調整できます。
「Editor X」のテンプレート
デザインコレクション、Eコマース、ポートフォリオ、イベント、ショーケース、オンラインマガジン、ブランディング、プロダクトローンチの8種類のテンプレートが用意されていて、以下のURLで見ることができます。これ以外にも白紙テンプレートや、より厳選されたデザインのテンプレートが追加される予定です。
https://www.wix.com/editorx/templates
Editor Xの特徴
Wixはサイトを作成するだけでなく、ビジネスソリューションとしての機能や、高度なSEO設定を迅速に行える機能ももっています。これらをうまく活用すれば、自社のWebマーケティングに大きく効果を出せることは間違いないでしょう。
ただ、現状のWixエディタが「Editor X」へ移行となるのかどうかは未確認です。
Wix ADIのように、通常のエディタとは別のツールである可能性もあります。
そうなると、できることとできないことを把握して使い分けることが必要です。
［追記］
「Editor X」は従来のWixエディタとは別のツールになります。
ですので、従来のエディタからの移行もありません。
大事なことは、目的とスキルにあったツールを使い、十分に活用することです。
Wixの新エディタ「Editor X」の特徴を以下に挙げておきますので、検討の際の参考にしてください。
ベータ版でさっそく使いたい人はリクエストができます。
https://www.wix.com/editorx/betarequest
また、チュートリアルを見たい人はこちらのプレイリストをご覧ください。
https://www.youtube.com/watch?v=1khQPRQVCbM&list=PL0y_aclKYoYg8L9xRbIoD0qhr7GfqEP2y
デザイン＆レイアウト
フレキシブルなキャンバス
キャンバスの両側にあるサイズ変更ハンドルを使用して、任意のビューポート幅でサイトを表示および設計します。
Stack
Stackを使用して、画面サイズが変化したときに要素間の関係を制御します。これにより、アイテムがFlexbox内に即座に配置され、重複が防止されます。
Layouter
このスマートレイアウトツールは、複数のコンテナで構成されており、Flexboxの技術に基づいています。 Layouter内のコンテンツは、画面のサイズが変更されると自動的に幅や配置が調整されます。
Repeaterによる繰り返しのレイアウト
データベースにより、すべて同じスタイルのコンテンツを無制限に表示します。 Editor XのRepeaterはFlexboxの技術に基づいているため、レイアウトはすべての画面に自動的に調整されます。
CSSグリッド
2次元のフレームワークで設計して、信じられないほど反応の良い体験を作成します。任意のブレークポイントでグリッドの構造を編集できます。
Fixed、Fluidのスケール
画面のサイズに応じた各要素の動作を設定できます。画面サイズが変わっても各要素のサイズを固定にするか、もしくは流動的に変化させるか。画像とテキストをビューポートに比例して拡大縮小するように設定できます。
ドッキング
Editor Xはスマートドッキング機能を提供します。親コンテナの最も近い端に要素を自動的にアタッチします。ドッキングを手動で調整して、すべてのビューポートで正確なレイアウトを作成できます。
単位の設定
ピクセル、パーセンテージ、またはビューポートの高さまたは幅に応じて要素のサイズを変更します。グリッドの編集に関しては、fr、calcなどを使用して列と行のサイズを変更できます。
カスタムブレークポイント
Editor Xには、最も一般的な画面サイズに応じて、モバイル・タブレット・デスクトップの3つのブレークポイントが設定されています。また、独自のカスタムブレークポイントを追加することもできます。
ブレークポイントごとのスタイル
要素のスタイルと位置を変更し、すべてのブレークポイントで表示または非表示にするものを選択して、サイトのデザインがすべてのデバイスに合わせて調整されるようにします。
ブレークポイントにコピー
Editor Xでは、スタイルの変更は自動的に大きなブレークポイントから小さなブレークポイントにカスケードダウンされますが、選択したブレークポイントからスタイルをコピーすることもできます。
ビューポートの高さ
サイトのセクションを100％ビューポートの高さに設定します。これにより、訪問者がどのデバイスを使用していても、サイトのどの部分を表示するかを正確に制御できます。
Focal Point 焦点
すべてのビューポートにおいて、常に表示したままにしたい画像またはビデオ上の正確なポイントを設定します。
マスターズ
セクションデザインを保存して、任意のサイトページで再利用します。
画面にピン留め 任意の要素を画面に固定し、訪問者がサイトを閲覧するときに常に見えるようにします。
アンカー
アンカーは、ページ内にリンクをはる際に役立つ位置マーカーです。Editor Xでは、任意の要素をアンカーにすることができます。
オーバーフロー
コンテナ内でのコンテンツの表示方法を選択します。一部を非表示にするか、オーバーフローで内部スクロールにするかを設定できます。
アニメーション ページ上の要素をアニメーション化し、動作、方向、持続時間、遅延をカスタマイズします。
フォトスタジオ Editor X内で画像を編集できます。背景を削除および置換、シャープネス、トリミング、フィルターなどの調整および追加が可能です。
スクロール効果 パララックス、リヴィール、ズームイン、フェードインなどの3次元なスクロール効果を追加できます。
カスタムメニュー
必要に応じて、すべてのサイトページに複数のユニークなメニューを作成します。
ビデオコレクション
ビデオの背景、VideoBox、および透明なビデオを使用して、すべてのサイトに動きをもたらします。
フォントのアップロード 必要なフォントをライブラリにアップロードし、Wixサイトで使うことができます。
ベクターグラフィック
何千ものベクターイラスト、図形、アイコンや、独自のカスタムSVGファイルをアップロードして使うことができます。
ギャラリー
カスタマイズ可能なギャラリーを使用して、最高品質の画像とビデオを見せることができます。
デザインシステム サイトのカラーパレットとあわせて美しくデザインされた多数のセクションにより、組み込みのレスポンシブ動作を実装することができます。
Corvid
動的ページ 1つのページレイアウトを設計し、無制限にページを作成できます。それぞれに独自のコンテンツ、URL、およびSEOが設定できます。
HTTP関数 サーバーレス関数を作成して、サイトの機能をAPIとして公開します。
Webモジュール クライアントとサーバーの相互作用を自動化して、HTTPプロトコルとURLではなく、ロジックに集中できるようにします。
要素APIs
ページの背景やボタンからリピーターやスライドショーまで、APIを使用してページ要素の動作を制御します。
データベース コンテンツをデータベースとして収集して保存します。
ユーザー入力とカスタムフォーム データベースに書き込むためのカスタムフォームを作成します。
組み込みのIDE 構文の強調表示、コード補完などを備えた組み込みのIDEを使用して、コーディングの生産性を高めます。
サイトモニタリング サードパーティのロギングシステムと統合して、アプリケーションのログとエラーを表示および追跡します。
外部データ収集 データベースまたはサービスを仮想コレクションとして追加し、アプリケーションでデータを使用します。
Local Development 既に使用している開発者ツールと連携して動作するようにローカル環境をセットアップします。
Node.jsサーバー
専用Node.jsサーバーを使用して、バックエンドコードを安全に実行し、タスクをスケジュールします。
Npmパッケージ 世界最大のソフトウェアレジストリのパッケージを使用して、複雑な機能をサイトに追加します。
リリースマネージャー リリース候補を作成して、アプリケーションの新しいバージョンをテストし、制御された割合のユーザーに徐々に展開します。
ルーター ルーターを使用して、任意のソースのコンテンツを含む動的ページにデータを表示します。
データベースAPI サイトのフロントエンドまたはバックエンドコードでWix Data APIを使用して、データを管理および整理します。
データのインポートとエクスポート データベースに情報を送信する書き込み可能な要素を含むカスタムフォームを作成します。
カスタムインタラクション 訪問者が特定のアクションを実行したときにイベントをトリガーすることにより、ユニークなユーザーインタラクションを作成します。
ビジネスソリューション
オンラインストア
複数の支払いソリューション、クイックチェックアウト、競争力のある配送料金、カスタム税グループを使用して、完全にブランド化された堅牢なオンラインストアを構築します。
オンライン予約 クライアントが予約や支払いを受け入れ、クラスを提供し、サイトでスタッフのカレンダーを管理できるように、オンラインスケジューリングシステムをセットアップします。
フィットネスソリューション あらゆるフィットネスビジネス向けの完全なソリューションを作成します。クライアントがクラスの時間割を表示し、ビデオをストリーミングおよび販売し、メンバーシップとパッケージを提供できるようにします。
イベント サイトで複数のイベントを作成して表示し、チケットを販売し、RSVPを収集し、美しい招待状を送信し、サイト所有者がゲストリストを管理できるようにします。
ブログ ブログを任意のサイトに追加して、クライアントがSEOを強化してオンラインコミュニティを構築できるようにします。 Wixブログでは、リッチテキスト要素、複数のライターなどを提供しています。
会員サイト
メンバーエリアを任意のサイトに追加して、顧客が自分のアカウントにサインインして管理できるようにします。
見積もりと請求書
ブランドの価格設定オファーと請求書を作成して送信します。レートを交渉し、支払いを追跡し、支払いが期限切れになったときに自動通知を送信します。
支払い設定
オンライン取引を簡単で安全にするための、信頼できる支払いソリューション（Stripe、Square、GMOなど）を選択できます。
チャット ライブチャットを任意のサイトに追加して、クライアントが即座に顧客と連絡を取り、取引を迅速に締結できるようにします。
自動メール トリガー設定により自動メールを送信するなどの自動応答で、見込み客を収集し、クライアントワークフローを管理できます。
ワークフロー プロジェクトとセールスファネルを一目で整理します。チームとシームレスに連携し、ワークロードを常に把握します。
タスクとリマインダー タスクの割当や期日を管理できます。
セキュリティ＆ホスティング
ドメイン
ドメインをWixで直接検索、購入、登録し、信頼性の高いクラウドサーバーで安全なホスティングを利用できます。
エンタープライズグレードのセキュリティ すべてのWixサイトは、最高の国際セキュリティ標準に準拠しています。自動更新により、常に安全に保たれます。
SSL認証 サイト訪問者はWixサイトにおいて、HTTPSを介して安全に情報を送信できます。また、すべてのチェックアウトはPCIに準拠しています。
マーケティング＆ SEO
マーケティングの統合 Google Analytics、Facebook Pixel、HotJarなどの強力なマーケティングツールに接続して、サイトのパフォーマンスを測定します。
メールマーケティング プロフェッショナルなメールマーケティングキャンペーンを作成して共有し、顧客エンゲージメントを高め、クライアントのサイトへのトラフィックを増やします。
ビデオメーカー サイトのダッシュボードからプロのプロモーションビデオを作成して、ビジネスの宣伝、セールの発表、またはマイルストーンを祝います。
ソーシャル投稿 カスタマイズ可能な投稿テンプレートを使用して、トレンドの注目を集めるソーシャル投稿を作成し、ソーシャルメディア上のクライアントサイトを宣伝します。
分析 訪問、注文、コンバージョン率、収益を追跡して、訪問者がクライアントサイトとどのように対話するかを確認します。
クーポン
任意の製品またはサービスのカスタム割引クーポンで顧客維持率を高めます。
ソーシャル共有 Facebook、LinkedIn、Instagramなどでサイトページを共有するときに表示するテキストと画像をカスタマイズします。
301リダイレクト URLを変更した際に、古いURLから新しいURLへ永続的にリダイレクト転送させます。
正規URL 正規タグを定義して、どのURLがサイトページのマスターバージョンであるかを検索エンジンに伝え、重複コンテンツの問題を回避します。
カスタムメタタグ 検索エンジンのメタタグを最適化します。クローラがサイトページを希望どおりに処理するように、SERPで訪問者に表示する方法を制御します。
SEOパターン
SEOに効果的なタグとURLを作成します。ページタイプを一度編集すると、カスタムパターンがサイトページ全体で即座に更新されます。
Robot.txt Wixはすべてのサイトに対してrobots.txtファイルを生成し、検索エンジンが重要なサイトのコンテンツとファイルをクロールできるようにします。
XMLサイトマップ Wixはサイトマップを作成および維持し、すべてを最新の状態に保ちます。検索エンジンはこれを使用して、すべてのサイトページを見つけてクロールします。
構造化データ
検索結果にサイトの情報をさらに表示します。スキーママークアップを追加して、リッチコンテンツとして表示できるコンテンツを検索エンジンに伝えます。
30秒でGoogleにインデックス
クリック1つでサイトをGoogleに接続し、クライアントのビジネスが30秒以内にGoogleにリストされるようにします。
パーソナルSEOプラン すべてのWixサイトには、クライアントサイトがGoogleで確実にランク付けされるようにするための、カスタマイズされたSEOプランが付属しています。