--- title: 【解説】海外で大反響のWix「Editor X （エディタ X ）」についてまとめてみた！ description: アメリカで今年の2月にWixが「Editor X」を発表し、レスポンシブデザインとシームレスな編集を可能にした、ということで大反響を呼んでいます。今回は、CSSなしでレスポンシブ対応になった「Editor X」の凄い機能やどのようなことが可能になったのかお話ししていきたいと思います。 image: https://blog.brandbuddyz.com/hubfs/%E3%80%90%E8%A7%A3%E8%AA%AC%E3%80%91%E6%B5%B7%E5%A4%96%E3%81%A6%E3%82%99%E5%A4%A7%E5%8F%8D%E9%9F%BF%E3%81%AEWix%E3%80%8CEditor%20X%20%EF%BC%88%E3%82%A8%E3%83%86%E3%82%99%E3%82%A3%E3%82%BF%20X%20%EF%BC%89%E3%80%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%81%BF%E3%81%9F%EF%BC%81.jpg --- [![BrandBuddyz](https://blog.brandbuddyz.com/hs-fs/hubfs/raw_assets/public/Brandbuddyz_August2020/images/logo.png?height=37&name=logo.png "BrandBuddyz")](https://brandbuddyz.com/) [![BrandBuddyz](https://blog.brandbuddyz.com/hs-fs/hubfs/raw_assets/public/Brandbuddyz_August2020/images/logo_mob.png?height=37&name=logo_mob.png "BrandBuddyz")](https://brandbuddyz.com/) - [Who?](https://brandbuddyz.com/about/) - [Vision](https://brandbuddyz.com/vision/) - [Message](https://brandbuddyz.com/message/) - [Services](https://brandbuddyz.com/services/) - [Company](https://brandbuddyz.com/company/) - [Works](https://brandbuddyz.com/works/) - [Blog](https://blog.brandbuddyz.com/) - [Contact](https://share.hsforms.com/1EzTTaBreQACNnJXz4Ui3Yg2ohhk?__hstc=26595618.1c7cc254733071e7a41897617782950d.1598678740527.1598678740527.1598695242933.2&__hssc=26595618.2.1598695242933&__hsfp=347524095) - [Who?](https://brandbuddyz.com/about/) - [Vision](https://brandbuddyz.com/vision/) - [Message](https://brandbuddyz.com/message/) - [Services](https://brandbuddyz.com/services/) - [Company](https://brandbuddyz.com/company/) - [Works](https://brandbuddyz.com/works/) - [Blog](https://blog.brandbuddyz.com/) - [Contact](https://share.hsforms.com/1EzTTaBreQACNnJXz4Ui3Yg2ohhk?__hstc=26595618.1c7cc254733071e7a41897617782950d.1598678740527.1598678740527.1598695242933.2&__hssc=26595618.2.1598695242933&__hsfp=347524095) 1 min read # 【解説】海外で大反響のWix「Editor X （エディタ X ）」についてまとめてみた！ ![Airi Shiroma](https://blog.brandbuddyz.com/hubfs/IMG_0992-2.jpg) By Airi Shiroma ![【解説】海外で大反響のWix「Editor X （エディタ X ）」についてまとめてみた！](https://blog.brandbuddyz.com/hubfs/%E3%80%90%E8%A7%A3%E8%AA%AC%E3%80%91%E6%B5%B7%E5%A4%96%E3%81%A6%E3%82%99%E5%A4%A7%E5%8F%8D%E9%9F%BF%E3%81%AEWix%E3%80%8CEditor%20X%20%EF%BC%88%E3%82%A8%E3%83%86%E3%82%99%E3%82%A3%E3%82%BF%20X%20%EF%BC%89%E3%80%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%81%BF%E3%81%9F%EF%BC%81.jpg) 【解説】海外で大反響のWix「Editor X （エディタ X ）」についてまとめてみた！ 10:35 アメリカで、[Wix](https://blog.brandbuddyz.com/websiteforsmalltomediumenterprises?hsLang=ja)の新しいエディタ「[Editor X （エディタ X ）](https://support.wix.com/ja/article/editor-x-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)」が今年2月にリリースされ、早速Wixユーザーの中で話題になり、大反響を呼んでいます。   とりあえず、すごい！！！という声が多い中、私もチェックしたところ、想像以上にWixがパワーアップしていてびっくりしました。笑   完全レスポンシブになって、最先端のエディタと言っても過言ではないのでしょうか！ 今日は、Wixの「Editor X 」について、またWixエディターと比べてどのように違うのか、また注目できる機能について解説していきたいと思います。   ＊2024年4月の時点で、Editor Xでのサイト作成は終了しました。完全レスポンシブ対応の2023年にWixが発表した「Wix Studio」での作成が可能です。 Editor Xのような完全レスポンシブ対応のプラットフォームですが、よりパワフル、また使いやすくなったプラットフォームです。 ぜひ、Wix studioについては、こちらの記事を参照ください。 [【もはやWixで革命!?】Wix Studioでハイクオリティーなサイト制作！事例紹介](https://blog.brandbuddyz.com/wix-studio?hsLang=ja)     ## **新エディタ「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の強力なツール機能を統合できるのは、多くの人の興奮を誘う理由の一つとも言えます。 ここで、先ほど触れたコレクションを作成することができます。   ![Wix エディタX](https://blog.brandbuddyz.com/hubfs/Google%20Drive%20Integration/%E3%80%90%E8%A7%A3%E8%AA%AC%E3%80%91%E6%B5%B7%E5%A4%96%E3%81%A7%E5%A4%A7%E5%8F%8D%E9%9F%BF%E3%81%AEWIX%E3%80%8CEditor%20X%20BETA%EF%BC%88%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%20X%20%E3%83%99%E3%82%BF%EF%BC%89%E3%80%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%81%BF%E3%81%9F%EF%BC%81-4.png)   > **Corvid**とはオリジナルのJavaScriptを追加したり、データベースを利用して動的なWebページを作成する事のできるサービスです。 [参照](https://oxynotes.com/?p=12328#:~:text=Corvid%E3%81%A8%E3%81%AF%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%81%AE,%E3%81%AE%E5%88%B6%E4%BD%9C%E6%96%B9%E6%B3%95%E3%81%A7%E3%81%97%E3%81%9F%E3%80%82)     ## **エディタを開いてみよう！**   こちらの動画で、Editor Xのエディタの様子を一覧できます。 Wixのプロが初めてEditor Xを開く様子の動画です。   まず、[Editor X](https://www.wix.com/_partials/third-party/getEditor14/success.html?on&ja)に切り替えます。 切り替えが完了したら、Wixのマイサイトで、「新しいサイトを作成」をクリックすると、このような画面が出てきて、「Wix」か「Editor X」どちらのプラットフォームを使用したいか選択ができます。   「Editor X」をクリックしてエディタを覗いてみましょう！ ![Wix エディタX](https://blog.brandbuddyz.com/hubfs/Google%20Drive%20Integration/%E3%80%90%E8%A7%A3%E8%AA%AC%E3%80%91%E6%B5%B7%E5%A4%96%E3%81%A7%E5%A4%A7%E5%8F%8D%E9%9F%BF%E3%81%AEWIX%E3%80%8CEditor%20X%20BETA%EF%BC%88%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%20X%20%E3%83%99%E3%82%BF%EF%BC%89%E3%80%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%81%BF%E3%81%9F%EF%BC%81-1.png) クリックすると、どのようなウェブサイトを作りたいのか、また使用できるテンプレートを一覧することができます。   ここで驚くのが、テンプレートのクオリティーの高さです。 Wixでこんなことができるのか！！とびっくりするぐらい通常のWixにはない、質の高いテンプレートが多いですね。 [![Image from Gyazo](https://i.gyazo.com/bda5a24b857fcb5eb4bd249de4efcfd2.gif)](https://gyazo.com/bda5a24b857fcb5eb4bd249de4efcfd2)   テンプレートを決めたら、早速エディタを開いてみましょう！   ![Wix エディタX](https://blog.brandbuddyz.com/hubfs/Google%20Drive%20Integration/%E3%80%90%E8%A7%A3%E8%AA%AC%E3%80%91%E6%B5%B7%E5%A4%96%E3%81%A7%E5%A4%A7%E5%8F%8D%E9%9F%BF%E3%81%AEWIX%E3%80%8CEditor%20X%20BETA%EF%BC%88%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%20X%20%E3%83%99%E3%82%BF%EF%BC%89%E3%80%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%81%BF%E3%81%9F%EF%BC%81-3.png)   Wixエディタと比べて、すごく綺麗で見やすくて整理されているイメージです。   ![Wix エディタX](https://blog.brandbuddyz.com/hubfs/Google%20Drive%20Integration/%E3%80%90%E8%A7%A3%E8%AA%AC%E3%80%91%E6%B5%B7%E5%A4%96%E3%81%A7%E5%A4%A7%E5%8F%8D%E9%9F%BF%E3%81%AEWIX%E3%80%8CEditor%20X%20BETA%EF%BC%88%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%20X%20%E3%83%99%E3%82%BF%EF%BC%89%E3%80%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%81%BF%E3%81%9F%EF%BC%81-2.png)     先ほど、紹介した動画でも述べてますが、Wixエディタとレイアウトは似てますが、機能が増えたためまずは時間をかけていろいろ触ってみながら、慣れていった方が良さそうですね。     ## **まとめ**   CSSを使わずに、ここまで**シームレスな編集・完全レスポンシブデザイン**が可能になったEditor Xは、想像を超えるクオリティーの高さですね。さすがWixです！   現在は、操作全て英語のみですが、英語が苦手でなければ一度触ってみてください♪   ゼロからウェブサイトを作りたい方・柔軟な編集がした方や、プログラミングのスキルがある方には、興奮を誘うとても嬉しいエディタかと思います。   また、Wixを少し触れるレベルでプログラミングのスキルがない方でも、Wix Academyが提供している操作方法の動画をみながらサイトを作成することもできるので、誰でもかっこいい質の高いサイトが作れますね。   あなたも、ぜひEditor Xを使って、どんな端末でも見やすくて、人の目を引きつけるかっこいいウェブサイトを作ってみてください♪   他にも、Editor Xの機能や事例を取り上げた記事も公開しているので、参考にしていただけたら嬉しいです！ Editor x サイト事例： [Editor Xのサイト事例紹介！テンプレートを使ってハイクオリティーなサイトを作ろう](https://blog.brandbuddyz.com/editorx-template?hsLang=ja) Editor x ヘッダー： [Editor Xのヘッダーのカスタマイズ方法を解説！（流行りの縦ヘッダーでおしゃれに！）](https://blog.brandbuddyz.com/editor-x-header-customization?hsLang=ja)   また、冒頭でも少し紹介しましたが、2024年4月の時点で、Editor Xでのサイト作成は終了しました。完全レスポンシブ対応の2023年にWixが発表した「Wix Studio」での作成が可能です。 Editor Xのような完全レスポンシブ対応のプラットフォームですが、よりパワフル、また使いやすくなったプラットフォームです。 ぜひ、Wix studioについては、こちらの記事を参照ください。 [【もはやWixで革命!?】Wix Studioでハイクオリティーなサイト制作！事例紹介](https://blog.brandbuddyz.com/wix-studio?hsLang=ja)   Wixに関する記事ありますので、ぜひご覧ください♪ [【WixアプリOwnerの使い方】スマホからホームページの編集・更新が可能！](https://blog.brandbuddyz.com/app-wixowner?hsLang=ja) [Wixデータベースの使い方！一括でページを簡単に作れる方法！](https://blog.brandbuddyz.com/wixdatabasehowtocustom?hsLang=ja) この記事が少しでも役に立てたら嬉しいです。   弊社ブランドバディーズは、Wixパートナープログラムに登録しており、パートナーの最高レベル「レジェンド」レベルのWix制作会社です。 単にウェブサイトを制作するのだけではなく、マーケティングやブランディングを生かしたウェブサイト制作を行っております。 ![Legend (1)](https://blog.brandbuddyz.com/hs-fs/hubfs/Legend%20(1).png?width=201&name=Legend%20(1).png) Wixに関しましてご相談がありましたら、お気軽にお問い合わせ下さい。 現在１時間無料でWixに関するご相談を受け付けております。   [![Wix無料相談受付](https://no-cache.hubspot.com/cta/default/4501640/77dd4177-17a2-45cd-a259-0090477affd9.png)](https://cta-redirect.hubspot.com/cta/redirect/4501640/77dd4177-17a2-45cd-a259-0090477affd9)   Tags: [ブランディング](https://blog.brandbuddyz.com/tag/ブランディング), [wix](https://blog.brandbuddyz.com/tag/wix) ## Related Articles ### 完全レスポンシブ対応な「Wix Studio」と「Editor X」の違いは？Wix Studioの魅力！ *( 1 min read )* Tags: [wix](https://blog.brandbuddyz.com/tag/wix) ### Wix Studioでスマホ対応サイト！レスポンシブ設定の基本と攻略のコツ *( 1 min read )* Tags: [wix](https://blog.brandbuddyz.com/tag/wix) ### Editor x サイト事例紹介！テンプレートを使ってハイクオリティーなサイトを作ろう！ *( 1 min read )* Tags: [wix](https://blog.brandbuddyz.com/tag/wix) ## ジャーニーマップをダウンロード！ オンラインとオフラインでメディア戦略を立てるときにご利用ください。 ![Bottom image](https://blog.brandbuddyz.com/hs-fs/hubfs/Brandbuddyz_August2020/Images/btm_img.webp?width=200&name=btm_img.webp "Bottom image") - [Who?](https://brandbuddyz.com/about/) - [Services](https://brandbuddyz.com/services/) - [Company](https://brandbuddyz.com/company/) - [Works](https://brandbuddyz.com/works/) - [Blog](https://blog.brandbuddyz.com/) - [Contact](https://share.hsforms.com/1EzTTaBreQACNnJXz4Ui3Yg2ohhk?__hstc=26595618.1c7cc254733071e7a41897617782950d.1598678740527.1598678740527.1598695242933.2&__hssc=26595618.2.1598695242933&__hsfp=347524095) Copyright ©2020 BrandBuddyz. All Rights Reserved. ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Airi Shiroma", "url" : "https://blog.brandbuddyz.com/author/airi-shiroma" }, "dateModified" : "2024-04-15T03:55:27.718Z", "datePublished" : "2020-08-20T23:16:49.000Z", "headline" : "【解説】海外で大反響のWix「Editor X （エディタ X ）」についてまとめてみた！", "image" : [ "https://blog.brandbuddyz.com/hubfs/%E3%80%90%E8%A7%A3%E8%AA%AC%E3%80%91%E6%B5%B7%E5%A4%96%E3%81%A6%E3%82%99%E5%A4%A7%E5%8F%8D%E9%9F%BF%E3%81%AEWix%E3%80%8CEditor%20X%20%EF%BC%88%E3%82%A8%E3%83%86%E3%82%99%E3%82%A3%E3%82%BF%20X%20%EF%BC%89%E3%80%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%81%BF%E3%81%9F%EF%BC%81.jpg" ], "mainEntityOfPage" : { "@id" : "https://blog.brandbuddyz.com/wixeditorxbetafeatures", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.brandbuddyz.com/hubfs/bb_logo04.png" }, "name" : "BrandBuddy合同会社" } } ```