1 min read

Editor Xのサイト事例紹介!テンプレートを使ってハイクオリティーなサイトを作ろう!

Airi Shiroma By Airi Shiroma
Editor Xのサイト事例紹介!テンプレートを使ってハイクオリティーなサイトを作ろう!

2020年にWixが発表したノーコードで高度なサイトが作れる「Editor X(エディタX)」。

発表された当時は、テンプレートや事例が少なく、またエディタも英語のみだったので、手を出しにくい…と思われた方も多かったと思います。

 

しかし、嬉しいことに、現在では、エディタが日本語対応され、テンプレートや事例も増えてきたので、英語が苦手な方にもかなりフレンドリーになりました!

これから日本国内でもEditor Xを活用したフルレスポンシブ対応のサイトが増えていきそうで楽しみですね。

 

そこで、今回は、「Editor Xを使ってみたい!」、「ノーコードでどこまで行けるのか知りたい!」という方のために、海外サイトの事例やハイクオリティーなテンプレートを紹介していきたいと思います。

 

Editor X 海外事例サイト



海外のサイトをご紹介する上で、制作者はEditor Xのどのような機能を使用しているのかも簡単にご紹介しますので、参考にされてください。

Editor Xで使用できる機能の詳細については、こちら

 

Petitmoulin Studio

Image from Gyazo

参照元:Petitmoulin Studio

ここのサイトでは、ビデオボックス・スティッキー・CSSグリッド・インタラクションの機能を活用しています。

サイト自体とてもダイナミックで、文字が重なるような動作がとてもスタイリッシュでかっこいいイメージを持たせますね。



Weglot for Editor X

Image from Gyazo

参照元:Weglot for Editor X

ここのサイトでは、スティッキー・Velo・ヘッダースクロールエフェクトの機能を活用しています。

背景の動作やキャラクター・ベクトアートの動きがイキイキしており、言語も簡単に変更できる便利なサイトになっています。



Kore Beau

Image from Gyazo

参照元:Kore Beau

ここのサイトでは、プロギャラリー・スティッキー・CSSグリッドの機能を活用しています。

ポートフォリオサイトなので、文字は少なめで画像を前面に出すスタイルになっていますが、サイトをよりスタイリッシュに見せるためにスティッキー機能などを利用して、より魅力的なサイトにしていますね。



Be Yourself Cannabis

Image from Gyazo

参照元:Be Yourself Cannabis

ここのサイトは、ネットショップを導入しており、スティッキー・インタラクションの機能を活用しています。

横に流れるテキストや商品を横スクロールで表示したりしており、シンプルで使いやすいだけでなく、サイトに訪問するユーザーが見て楽しめる作りになっています。



Quixotic Design Co.

Image from Gyazo

参照元:Quixotic Design Co.

ここのサイトでは、プロギャラリー・CSSグリッド・インタラクションの機能を活用しています。

ここでも、横に流れるテキストを使用して、動きを出しています。TOPページから他のページへ誘導するテキストも、インタラクションを使用してホバー時に動きや色の変化を出してダイナミックかつシンプルで見やすくなってますね。



ハイクオリティなテンプレートを紹介!



先ほど取り上げた海外の事例を見ると、「Editor Xの仕組みもよくわからないのに、こんなサイトを作成するのは難しそう…」と思った方もいるかと思いますが、心配無用です!

 

Editor Xがでた当初は、テンプレートの数も限られていたのですが、最近からテンプレートが新たに追加されていますので、テンプレートを使って中身を変えるとかっこいいサイトが誰でも作れちゃいます。

 

Editor Xのテンプレートの中には、Wixエディタでも使用していたパーツを組み合わせてスタイリッシュな動きを出しているテンプレートもあります。

 

私が実際に気になって、中身を色々触ってみたテンプレートをご紹介していきながら、特に注目したポイントを挙げていきます。



スパ・ビューティー向けテンプレート

Image from Gyazo

参照元:Wix

機能:パーツ位置固定、オンライン予約、プロギャラリー、フォーム

注目ポイント:私が個人的に注目したポイントとして、「メニューバー」。

 

Image from Gyazo

 

 

メニューボタンをクリックすると、左側からメニューがリヴィールされる仕組みになっていてスタイリッシュですよね。

 

実際どのような仕組みになっているか見ると、メニューボタンはシェイプと透明のボタンを使用しており、クリックするとライトボックス(メニュー)が出てくるという作りのようです。

ヘッダーの部分にライトボックスを乗せて、ピン留め(パーツ位置固定)することで、スクロールしても表示されます。

 

実際に、白紙からサイトを作成する際に使ってみたい技ですね!



企業向けテンプレート

Image from Gyazo

参照元:Wix

機能:グリッド、スタック、パーツ位置固定、テキストスケール

注目ポイント:私が注目した点としては、「ボックスのスライドアップ」

Image from Gyazo

 

ここでさらに注目できるのは、ボックスのスライドアップだけではなくて、見出しのテキストも固定されていることです。

ボックスだけがスライドアップされてもタイトルテキストが見えないとわかりにくいですが、この表示の方法だととてもユーザーにも優しいですよね。

 

仕組みとしては、タイトルテキストとボックスが同じセクションに設置されているようです。セクションをさらに二つに分けてスティッキー機能を使ってボックスのスライドアップを再現しています。

 

細かい説明をここですると長くなってしまうので、別のブログでボックスのスライドアップの方法をご紹介したいと思いますので、ぜひチェックしてみてください♪



まとめ

 

いくつか海外の事例とテンプレートをご紹介してきました。

Editor Xでこんなこともできちゃうんだ!!と記事を読みながら感動した方も多いと思います。

今までのWix エディタと違う面白さがありますよね。

テンプレートで様々な機能をみて、組み合わせて使ってみるといいかもしれません。

 

Editor Xの機能についてのブログもありますので、ぜひご覧ください!

Editor Xのヘッダーのカスタマイズ方法を解説!(流行りの縦ヘッダーでおしゃれに!)

 

「実際に触ってみたが、よくわからない」

「ウェブサイトをEditor Xでリニューアルしたい」

「スタイリッシュなサイトを作成したい」

「ブランディングからサイト公開まで全て任せたい!」

という方に注目!

 

弊社BrandBuddyzは、Wix公式パートナーの最高ランク、Legend(レジェンド)として認定されており、マーケティングやブランディングを活かした集客できるウェブサイト・オンラインショップ制作やサイト作成サポート・代理作業を承っております。

Legend (1)

弊社は、情報を頂いてサイト制作をするだけではなく、ブランディングを導入したサイト制作なのが特徴的ですので、集客に力を入れたい方や認知度を高めたい方におすすめです。

 

現在1時間無料でWixに関するご相談を受け付けておりますので、お気軽にご相談ください。


Wix無料相談受付



Related Articles

【解説】海外で大反響のWix「Editor X (エディタ X )」についてまとめてみた!

( 1 min read )

Tags: ブランディング, wix

2億人を突破のWix!イケてるWixサイト事例10選!

( 1 min read )

Tags: ブランディング, マーケティング, テレワーク, wix

2億人を突破のWix!イケてるWIxサイト事例10選!

( 1 min read )

ジャーニーマップをダウンロード!

オンラインとオフラインでメディア戦略を立てるときにご利用ください。