By Airi Shiroma
2020年にWixが発表したノーコードで高度なサイトが作れる「Editor X（エディタX）」。
発表された当時は、テンプレートや事例が少なく、またエディタも英語のみだったので、手を出しにくい…と思われた方も多かったと思います。
しかし、嬉しいことに、現在では、エディタが日本語対応され、テンプレートや事例も増えてきたので、英語が苦手な方にもかなりフレンドリーになりました！
これから日本国内でもEditor Xを活用したフルレスポンシブ対応のサイトが増えていきそうで楽しみですね。
そこで、今回は、「Editor Xを使ってみたい！」、「ノーコードでどこまで行けるのか知りたい！」という方のために、海外サイトの事例やハイクオリティーなテンプレートを紹介していきたいと思います。
＊2024年4月の時点で、Editor Xでのサイト作成は終了しました。完全レスポンシブ対応の2023年にWixが発表した「Wix Studio」での作成が可能です。
Editor Xのような完全レスポンシブ対応のプラットフォームですが、よりパワフル、また使いやすくなったプラットフォームです。
ぜひ、Wix studioについては、こちらの記事を参照ください。
【もはやWixで革命!?】Wix Studioでハイクオリティーなサイト制作！事例紹介
Editor X 海外事例サイト
海外のサイトをご紹介する上で、制作者はEditor Xのどのような機能を使用しているのかも簡単にご紹介しますので、参考にされてください。
Editor Xで使用できる機能の詳細については、こちら
ここのサイトでは、ビデオボックス・スティッキー・CSSグリッド・インタラクションの機能を活用しています。
サイト自体とてもダイナミックで、文字が重なるような動作がとてもスタイリッシュでかっこいいイメージを持たせますね。
ここのサイトでは、スティッキー・Velo・ヘッダースクロールエフェクトの機能を活用しています。
背景の動作やキャラクター・ベクトアートの動きがイキイキしており、言語も簡単に変更できる便利なサイトになっています。
ここのサイトは、ネットショップを導入しており、スティッキー・インタラクションの機能を活用しています。
横に流れるテキストや商品を横スクロールで表示したりしており、シンプルで使いやすいだけでなく、サイトに訪問するユーザーが見て楽しめる作りになっています。
ここのサイトでは、プロギャラリー・CSSグリッド・インタラクションの機能を活用しています。
ここでも、横に流れるテキストを使用して、動きを出しています。TOPページから他のページへ誘導するテキストも、インタラクションを使用してホバー時に動きや色の変化を出してダイナミックかつシンプルで見やすくなってますね。
ハイクオリティなテンプレートを紹介！
先ほど取り上げた海外の事例を見ると、「Editor Xの仕組みもよくわからないのに、こんなサイトを作成するのは難しそう…」と思った方もいるかと思いますが、心配無用です！
Editor Xがでた当初は、テンプレートの数も限られていたのですが、最近からテンプレートが新たに追加されていますので、テンプレートを使って中身を変えるとかっこいいサイトが誰でも作れちゃいます。
Editor Xのテンプレートの中には、Wixエディタでも使用していたパーツを組み合わせてスタイリッシュな動きを出しているテンプレートもあります。
私が実際に気になって、中身を色々触ってみたテンプレートをご紹介していきながら、特に注目したポイントを挙げていきます。
参照元：Wix
機能：パーツ位置固定、オンライン予約、プロギャラリー、フォーム
注目ポイント：私が個人的に注目したポイントとして、「メニューバー」。
メニューボタンをクリックすると、左側からメニューがリヴィールされる仕組みになっていてスタイリッシュですよね。
実際どのような仕組みになっているか見ると、メニューボタンはシェイプと透明のボタンを使用しており、クリックするとライトボックス（メニュー）が出てくるという作りのようです。
ヘッダーの部分にライトボックスを乗せて、ピン留め（パーツ位置固定）することで、スクロールしても表示されます。
実際に、白紙からサイトを作成する際に使ってみたい技ですね！
参照元：Wix
機能：グリッド、スタック、パーツ位置固定、テキストスケール
注目ポイント：私が注目した点としては、「ボックスのスライドアップ」
ここでさらに注目できるのは、ボックスのスライドアップだけではなくて、見出しのテキストも固定されていることです。
ボックスだけがスライドアップされてもタイトルテキストが見えないとわかりにくいですが、この表示の方法だととてもユーザーにも優しいですよね。
仕組みとしては、タイトルテキストとボックスが同じセクションに設置されているようです。セクションをさらに二つに分けてスティッキー機能を使ってボックスのスライドアップを再現しています。
細かい説明をここですると長くなってしまうので、別のブログでボックスのスライドアップの方法をご紹介したいと思いますので、ぜひチェックしてみてください♪
まとめ
いくつか海外の事例とテンプレートをご紹介してきました。
Editor Xでこんなこともできちゃうんだ！！と記事を読みながら感動した方も多いと思います。
今までのWix エディタと違う面白さがありますよね。
テンプレートで様々な機能をみて、組み合わせて使ってみるといいかもしれません。
Editor Xの機能についてのブログもありますので、ぜひご覧ください！
Editor x ヘッダー：
Editor Xのヘッダーのカスタマイズ方法を解説！（流行りの縦ヘッダーでおしゃれに！）
＊2024年4月の時点で、Editor Xでのサイト作成は終了しました。完全レスポンシブ対応の2023年にWixが発表した「Wix Studio」での作成が可能です。
Editor Xのような完全レスポンシブ対応のプラットフォームですが、よりパワフル、また使いやすくなったプラットフォームです。
ぜひ、Wix studioについては、こちらの記事を参照ください。
【もはやWixで革命!?】Wix Studioでハイクオリティーなサイト制作！事例紹介
「実際に触ってみたが、よくわからない」
「ウェブサイトをでリニューアルしたい」
「スタイリッシュなサイトを作成したい」
「ブランディングからサイト公開まで全て任せたい！」
という方に注目！
弊社ブランドバディーズは、Wixパートナープログラムに登録しており、パートナーの最高レベル「レジェンド」レベルのWix制作会社です。
.png?width=201&name=Legend%20(1).png)
弊社は、情報を頂いてサイト制作をするだけではなく、ブランディングを導入したサイト制作なのが特徴的ですので、集客に力を入れたい方や認知度を高めたい方におすすめです。
現在１時間無料でWixに関するご相談を受け付けておりますので、お気軽にご相談ください。
