Wix Studio エディタ:ビジュアルサイトマップを編集する
読了時間:6分
このビジュアルサイトマップは、すべてのページやセクションなど、クライアントのサイトの概要を表示します。サイト全体の構造をよりよく把握し、より迅速に整理することができます。
![ページやセクションを移動させるための「ビジュアルサイトマップ」パネルのドラッグアンドドロップ機能を示した GIF。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/11/18/6f3aa36b-80d2-4aa9-8b17-496cf7f703d2/0a78313e-2c91-4fa3-a41c-381424a5b03c.gif)
この記事では、以下の項目について説明します:
ページとセクションを追加する
クライアントのサイトマップで作業する際にページとセクションを追加して、簡単に移動させることができます。
新しいページまたはセクションを追加する方法:
- エディタ左側で「ビジュアルサイトマップ」
をクリックします。
- 追加するアイテムを選択します:
- ページ:
- 「+新規ページを追加」をクリックします。
- 該当するページタイプ(「白紙ページ」または「動的ページ」)を選択します。
- (オプション)新しいページをサイトマップ上の該当する場所にドラッグします。
- セクション:
- 該当するページの横にある「その他のアクション」アイコン
をクリックします。
- セクションタイプ(一般セクション、白紙セクション、またはマスターセクション)を選択します。
- (オプション)新しいセクションをサイトマップ上の該当する場所にドラッグします。
- 該当するページの横にある「その他のアクション」アイコン
- ページ:
- (オプション)キャンバス上でページまたはセクションのデザインを開始します:
- 新しいページまたはセクションの横にある「その他のアクション」アイコン
をクリックします。
- 「キャンバスで編集」を選択します。
- 新しいページまたはセクションの横にある「その他のアクション」アイコン
ヒント:
AI を使用してこのサイトを生成している場合、関連するコンテンツを含むページとセクションを作成してもらうことができます。
- ページ:新しいページを追加する際に「生成する」を選択します。表示するコンテンツを説明します。
- セクション:新しいセクションを追加する際は、「ワイヤーフレーム・コンテンツを生成」トグルを有効にします。
![ページとセクションを追加するオプションが表示されたビジュアルサイトマップのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/12/18/24c08a24-072c-49dd-9e4c-c302d72190da/fd030ed0-2f51-4124-8fee-ee1d874cae61.jpg)
既存のセクションにマウスオーバーし、「セクションを追加」アイコン
をクリックすることもできます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/11/18/844549f9-c409-4803-8e1c-680a45c3f38b/78a8fa87-69d8-4c31-9752-a0f20af44876.png)
![プラスアイコンにマウスオーバーして、ヘッダーの下に新しいセクションを追加しているビジュアルサイトマップ上のページのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/12/18/af16eeb2-d1c8-4369-b09f-54c06b8aeafa/05ef133f-795f-457f-8033-b197ac4ea78d.jpg)
ページとセクションを移動させる
ビジュアルサイトマップを使用すると、ページやセクションを簡単に並べ替えることができ、サイト構造の定義に関連する柔軟性とチームワークを強化することができます。ドラッグアンドドロップを使用して、サイトマップ内でページやセクションを自由に移動させたり、左または右(ページ)/ 上または下(セクション)に 1つ移動させたりします。
ページまたはセクションを移動させる方法:
- エディタ左側で「ビジュアルサイトマップ」
をクリックします。
- ページまたはセクションを移動させる方法を選択します:
- ドラッグアンドドロップ:ページとセクションを必要な場所にドラッグアンドドロップします。必要に応じてページ間でセクションを移動させることができます。
- 1つずつ移動:
- ページまたはセクションの横にある「その他のアクション」アイコン
をクリックします。
- 「右に移動」/「左に移動」/「上に移動」/「下に移動」を選択します。
- ページまたはセクションの横にある「その他のアクション」アイコン
![ページ横のアイコンをクリックし、開いたメニューで移動オプションがハイライトされているビジュアルサイトマップのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/12/18/83aa4313-e118-4241-bcec-cd0d21926d1b/a6f0d740-44c2-4895-a111-8570b8bbb90f.jpg)
ページのステータスを設定する
各ページには、進捗状況を示すステータスを設定できます。これは、サイトで共同作業しているチームに特に便利で、全員と情報を共有するのに役立ちます。
ページのステータスを設定する方法:
- エディタ左側で「ビジュアルサイトマップ」
をクリックします。
- 該当するページ横の「ステータスを設定」をクリックします。
- ページを「進行中」や「完了」などとしてマークします。
![トップページのステータスを選択している「ビジュアルサイトマップ」パネルのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/12/18/50bb6a87-1b88-461b-ae1b-18ea2e867388/398def6d-abff-4d11-a741-09e448a5a9d2.jpg)
サイトマップをエクスポートする
サイトマップをクライアントと共有します。これは、デザインプロセスに進む前に構造を承認するための優れた方法です。
サイトマップをエクスポートする方法:
- エディタ左側で「ビジュアルサイトマップ」
をクリックします。
- 上部にある「その他のアクション」アイコン
をクリックします。
- 「サイトマップをエクスポート」を選択します。
ヒント:これにより、サイトマップを含む JPEG ファイルがダウンロードされます。
![「その他のアクション」アイコンをクリックしてサイトマップをエクスポートしている、ビジュアルサイトマップパネルのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/12/18/0bca9a90-7c49-49d3-8458-9026501e7d12/e1456cd1-a411-497c-bcb4-8105b662c986.jpg)
よくある質問
詳細については、以下の質問をクリックしてください。
エクスポートされたサイトマップはどのように表示されますか?
ページを並べ替えるとサイトメニューに影響しますか?
セクションを移動させると、キャンバス上でのセクションの順序も変更されますか?