Wix Studio エディタ:デザインアセットを保存・再利用する
読了時間:4分
今後の使用に備えて要素とセクションを保存して、デザインプロセスをより効率的にします。デザインアセットはデザインライブラリに保存し、必要に応じて、アカウント内の別のページや Wix Studio エディタサイトで再利用することができます。
この記事では、以下の項目について説明します:
デザインを保存する
デザインを右クリックし、「アセットとして保存」を選択して、要素とセクションをすばやく保存します。
デザインは「保存されたアセット」に保存できます。このライブラリは、サイトの「要素を追加」パネルでいつでも利用できます。または、アカウント内のすべての Wix Studio エディタサイトで利用可能なデザインライブラリに保存することもできます。
デザインを保存する方法:
- 該当する要素またはセクションを右クリックします。
- 「アセットとして保存」をクリックします。
- デザインの名前を入力します。
- 「追加先」ドロップダウンから該当するライブラリを選択します。
ヒント:「新規ライブラリを作成」をクリックして、その場で新しいライブラリを作成します。 - 「追加」をクリックします。
![デザインしたセクションを保存し、関連するライブラリを選択する方法を示したスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/08/08/0b3112ea-4444-46fa-a5e0-45c15126e464/7557f1f9-2ff7-4df2-8805-bb85aa33f221.png)
注意:
マスターセクションをアセットとして保存することはできません。さらに、次のいずれかの要素を含むセクションも、デザインアセットとして保存することはできません:
- Wix アプリ(例:Wix ストア、Wix ブッキングなど)
- フォーム
- ハンバーガーメニューと横型メニュー
- 入力欄
- ライトボックス
- プロギャラリー
- サードパーティ製アプリ(例:Instagram フィード)
保存したデザインを再利用する
「要素を追加」パネルから直接デザインにアクセスします。「アセット」タブには、このサイトのアセットと、アカウント内のデザインライブラリのアセットが表示されます。
保存したデザインを再利用する方法:
- エディタ左側で「要素を追加」
をクリックします。
- 「アセット」をクリックします。
- デザインライブラリまたは「保存されたアセット」タブをクリックします。
- (ライブラリのみ)使用する色とタイポグラフィスタイルを選択します:
- このライブラリ:このライブラリにすでに保存されているもの。
- サイトスタイル:このサイト用に定義したもの。これにより、デザインが現在の外観に自動的に適応されます。
- 該当する要素またはセクションをページにドラッグします。
![ライブラリごとに分割された「要素を追加」パネルの「アセット」タブの例](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/08/08/3ced6c89-9b6d-4288-8e22-3741472bf0ab/e7e995e2-f450-4f54-b6a4-f8c29e3117c5.png)
保存したデザインを管理する
「要素を追加」パネルの「アセット」タブから、保存したデザインを管理します。ライブラリ間でアセットを移動させたり、名前を変更したり、不要になったアセットを削除したりできます。
保存したデザインを管理する方法:
- エディタ左側で「要素を追加」
をクリックします。
- 「アセット」をクリックします。
- デザインライブラリまたは「保存されたアセット」タブをクリックします。
- 実行する内容を選択します:
アセット名を変更する
アセットをライブラリに追加する
デザインを削除する
![保存された各アセットに表示される管理オプションのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/08/08/e5ff0227-2a63-4ddc-81a3-3a0da0645142/668ac2f0-a1ce-4b4b-9134-09e29bd9bf61.png)