Wix Studio エディタ:ガイドツアー

読了時間:5分
Wix Studio エディタへようこそ。制作会社やフリーランサー向けの、高度で直感的なプラットフォームで優れたサイトを作成しましょう!
この記事では、Wix Studio エディタの概要、操作内容、作業の効率化など、エディタのあらゆる部分について説明します。
この記事では、以下の項目について説明します:

キャンバス

キャンバスとは、エディタの中央にあるデザイン中のページを指します。
作業したいデフォルトのキャンバスサイズを設定し、サイドハンドルをドラッグして、サイズが変更された際のページの表示を確認できます。
キャンバスの場所がマークされた Wix Studio エディタの全画面スクリーンショット
要素をクリックすると選択され、オプションのツールバーが開きます。表示されるオプションは特定の要素によって異なり、ニーズに合わせてカスタマイズするのに役立ちます。
キャンバス上の要素をクリックすると開くツールバーを示したスクリーンショット
要素のラベルにマウスオーバーして、親要素のいずれかを選択することもできます。
要素のラベルにマウスオーバーすると開くパンくずリストと、親要素を示した GIF

トップバー

トップバーには、サイトとキャンバスの表示を制御するための便利なツールが多数含まれています。
Wix Studio のロゴにマウスオーバーすると、サイトアクションを含むメニューが開き、オプションやアカウントの他の部分へのショートカットが表示されます。
Wix Studio のロゴにマウスオーバーした際に開くメニューのスクリーンショット
ページドロップダウンを使用して、サイトページ間をすばやく移動します。リストはページの種類(例:ショップページ、会員ページなど)ごとに整理されているので、必要なページをすばやく見つけることができます。
Wix Studio エディタ上部にあるページドロップダウンのスクリーンショット
トップバーの中央には、ブレイクポイントとキャンバスサイズに関するすべての項目が表示されます。ブレイクポイントアイコンをクリックして、さまざまな画面サイズでページを表示および調整します。
表示される画面サイズは、キャンバスの現在のサイズです。また、現在使用しているブレイクポイントのデフォルトの編集サイズでもあります。各ブレイクポイントには独自のデフォルトサイズがあり、使いやすいサイズに設定できます。
画面サイズにマウスオーバーするとパネルが開き、デフォルトのサイズを設定できるスクリーンショット
右側には、現在このサイトで作業している他のユーザーが表示されます。また、サイト通知を確認したり、アクションを元に戻したりやり直したり、プレビューして公開したりすることもできます。
トップバーの右側のスクリーンショット

左側のパネル

Wix Studio エディタの左側には、サイトを構築する際に使用するメインパネルがあります:
  • 要素を追加:デザイン要素やネットショップのようなビジネスアプリなど、サイトに追加する何百もの要素が用意されています。タブを使用して、異なるカテゴリー間を移動します。
  • レイヤー:ページのレイヤーと要素を上から下の階層構造で表示します。親要素(例: セクション、コンテナ)を使用して、内部のすべての要素を表示したり、順序を変更したり、非表示にしたりすることができます。
  • ページ:新しいページの追加、各ページの設定の編集、不要になったページの削除を行います。
  • マスターセクション:このパネルには、複数のページに表示するように設定したすべてのマスターセクションが表示されます。名前の変更、複製、削除のほか、マスターセクションが表示されないページに追加することができます。
  • サイトスタイル:サイトで使用する色などを確認・調整します。ここで設定したタイポグラフィスタイル、色、ページトランジションはサイト全体に適用されます。
  • App Market:Wix App Market にある何百ものアプリからニーズに合ったものを見つけます。
  • コンテンツマネージャー:サイトのコンテンツ、コレクション、動的ページを管理します。
左側のパネルの内容が一目でわかる GIF

要素設定パネル

要素設定パネルは、すべての要素の「コントロールセンター」です。
キャンバス上の要素を選択すると、このパネルからサイズ、配置、デザインを設定できます。要素にアニメーションを適用したり、アンカーを追加して直接リンクすることもできます。
要素設定パネルのさまざまなセクションとタブを示した GIF

その他のパネル

最後に、Wix Studio エディタの左下にはいくつかのパネルがあります。
  • サイトチェッカー   :このツールを使用してサイト全体で修正すべき問題点を見つけ、訪問者に理想的な体験を提供します。
  • Velo 開発モード  :開発モードをオンにして、このサイトに独自のコードを追加します。
  • コメント  :このサイトで作業しているチームメイトと、Wix Studio エディタで直接コミュニケーションを取ることができます。すべてのページに個別のコメントボードがあるので、特定のフィードバックを残して質問をすることができます。
  • ヘルプ  :リソースを参照したり、Wix Studio エディタに関するフィードバックを共有したり、カスタマーケアに問い合わせたりします。

お役に立ちましたか?