1 min read

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

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

アメリカで、WIXの新しいエディタ「Editor X (エディタ X )」が今年2月にリリースされ、早速WIXユーザーの中で話題になり、大反響を呼んでいます。

 

とりあえず、すごい!!!という声が多い中、私もチェックしたところ、想像以上にWIXがパワーアップしていてびっくりしました。笑

 

完全レスポンシブになって、最先端のエディタと言っても過言ではないのでしょうか!

今日は、WIXの「Editor X 」について、またWIXエディターと比べてどのように違うのか、また注目できる機能について解説していきたいと思います。

 

 

新エディタ「Editor X」

 

Editor Xは、私たちが普段使っているWIXエディタと桁外れに違うというのが、多くの人の注目を集めています。

 

Editor Xの注目ポイント

・完全カスタマイズ可能

・優れたレスポンシブ機能

・魅力的でハイクオリティーのデザイン

・全ての画面サイズのレイアウトを簡単にプレビューしてシームレスな編集が可能

 

ウェブサイトを作成した時、PCで綺麗に見えても、モバイルで同じ綺麗さを再現するのは中々難しいものです。

 

また、近年Googleがモバイルファーストインデックス(サイトの評価基準をモバイルにすること)に切り替えたこともあり、サイトを美しくするだけでなく、検索結果に表示されるために、レスポンシブデザインが重要になってきました。

 

そこで、今年WIXが完全にレスポンシブ対応している「Editor X」をリリースしたことで、大きな反響を呼んでいるのも納得ですよね。

 

しかも、CSSを一行も入力する必要もなく、レスポンシブデザインのウェブサイトが作成できるのです。

 

※レスポンシブとは:PC、タブレット、スマホなど、異なる画面のサイズに合わせてデザインを柔軟に調整でき、見やすく最適な表示にすることができることです。

 

完全なレスポンシブデザインでシームレスな編集ができるのは、Editor Xの大きな魅力とも言えますね。

 

こちらの動画からもわかるように、編集の自由さは、注目に値します!

 

 

 

特徴・機能

 

-BREAK POINT ブレークポイントのカスタマイズ

 

画面のサイズを、ドラッグして大きく小さくしたりして自由にリサイズすることができます。

 

すでに、3つのサイズ(PC・タブレット・スマホ)が登録されていますが、細かくサイズを変えたい場合は、「・・・」から「+Add breakpoint」をクリックして好きなサイズをカスタマイズできるので、新しいサイズの機器が登場しても問題ありません!

 

例えば、スマホ画面のボタンアイコンの大きさをタブレットでも表示したい際は、サイズを調整したいアイコンを選択し「Copy from breakpoint」をクリックしてスマホのアイコンサイズを選択すると、簡単にサイズを変更できます。

 

また、Fixed・Fluid機能を使って、幅広くカスタマイズもできます。

Fixed機能:画面サイズが変わっても画像のサイズをそのままにする機能

Fluid機能:画面サイズを変えると画像の高さはキープしたままサイズが変わる機能

 

ブレークポイントのカスタマイズの編集方法は、こちらの動画をご覧ください。

 

 

-FLEXBOX フレックスボックスレイアウト機能

 

Stack、Layouter、Repeaterの3つのレイアウトツールを使ってレスポンシブレイアウトをしていきます。

 

Stack機能:いくつかのコンテンツをStack機能で設定することで、ドラッグでリサイズした際にデザインの崩れを防ぐことができます。テキスト、アイコン、画像との間隔を崩したくない場合に使えます。

 

Layouter機能:「ストレッチ」で画像をボックス内で伸ばしたり、ボックスの移動をドラッグアンドドロップで簡単に操作ができます。また、「+」「−」でボックスの大きさの調整もできます。

例えば、PC・タブレット版でボックスを横並びで表示しているが、モバイル版で縦並びにしたい場合は、「Manage the Layout」を選択して縦並びにしたり、好きなレイアウトに変更できます。

 

Repeater機能:この機能は、主に商品ページなどの多くのコンテンツを統一したスタイルで表示したい時に活用できます。まず、コレクションを作成し全てのフィールド枠を埋めます。コレクションが完了したら、リピーターの各コンポーネントを関連フィールドに繋げます。画像→画像フィールド、タイトル→製品フィールド、ボタン→製品ページフィールドのように設定します。

3つの機能を使った上で、画面サイズをカスタマイズすることで、より綺麗に見やすくレスポンシブされます。

 

この3つの機能を用いての編集方法は、こちらをご覧ください。

 

 

-CSS GRID CSSグリッドレイアウト

 

グリッド機能を使って、綺麗にレイアウト編集ができます。また、画面サイズによって好きなようにカスタマイズしたりグリッドの形を変えたり自由にできます。

また、グリッド内にいくつかの画像を追加したい場合、新しいエレメントを追加した上で、グリッドを追加し画像を載せると、とても編集がしやすく、綺麗にレイアウトを整えることができます。

 

グリッド機能を用いての編集方法は、こちらをご覧ください。

 

 

-CONTENT MANAGER コンテンツマネージャー

 

ここでCorvid(コルビッド)を統合できます。

完全なレスポンシブデザインのEditor Xに加えてCorvidの強力なツール機能を統合できるのは、多くの人の興奮を誘う理由の一つとも言えます。

ここで、先ほど触れたコレクションを作成することができます。

 

 

CorvidとはオリジナルのJavaScriptを追加したり、データベースを利用して動的なWebページを作成する事のできるサービスです。

参照:OXY NOTES

 

 

エディタを開いてみよう!

 

こちらの動画で、Editor Xのエディタの様子を一覧できます。

WIXのプロが初めてEditor Xを開く様子の動画です。

 

まず、ここをクリックして、Editor Xに切り替えます。

切り替えが完了したら、WIXのマイサイトで、「新しいサイトを作成」をクリックすると、このような画面が出てきて、「WIX」か「Editor X」どちらのプラットフォームを使用したいか選択ができます。

 

「Editor X」をクリックしてエディタを覗いてみましょう!

クリックすると、どのようなウェブサイトを作りたいのか、また使用できるテンプレートを一覧することができます。

 

ここで驚くのが、テンプレートのクオリティーの高さです。

WIXでこんなことができるのか!!とびっくりするぐらい通常のWIXにはない、質の高いテンプレートが多いですね。

 

テンプレートを決めたら、早速エディタを開いてみましょう!

 

 

WIXエディタと比べて、すごく綺麗で見やすくて整理されているイメージです。

 

 

 

先ほど、紹介した動画でも述べてますが、WIXエディタとレイアウトは似てますが、機能が増えたためまずは時間をかけていろいろ触ってみながら、慣れていった方が良さそうですね。

 

 

まとめ

 

CSSを使わずに、ここまでシームレスな編集・完全レスポンシブデザインが可能になったEditor Xは、想像を超えるクオリティーの高さですね。さすがWIXです!

 

現在は、操作全て英語のみですが、英語が苦手でなければ一度触ってみてください♪

 

ゼロからウェブサイトを作りたい方・柔軟な編集がした方や、プログラミングのスキルがある方には、興奮を誘うとても嬉しいエディタかと思います。

 

また、WIXを少し触れるレベルでプログラミングのスキルがない方でも、WIX Academyが提供している操作方法の動画をみながらサイトを作成することもできるので、誰でもかっこいい質の高いサイトが作れますね。

 

あなたも、ぜひEditor Xを使って、どんな端末でも見やすくて、人の目を引きつけるかっこいいウェブサイトを作ってみてください♪

 

この記事が少しでも役に立てたら嬉しいです。

 

Related Articles

ホームページ制作ツール(wixとペライチの比較)  

( 1 min read )

Tags: ブランディング, マーケティング

インバウンドマーケティングとは?基礎知識まとめ(HubSpotアカデミー解説)

( 1 min read )

Tags: ブランディング, マーケティング

Wixウェブサイト制作事例(14店)!レストラン編

( 1 min read )

Tags: ブランディング

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

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