ライブラリパネルを使用したデザインエレメントの整理と再利用

Adobe Muse CC のライブラリパネルを使用して、ウィジェット、テンプレートなどのデザインエレメントを整理および再利用する方法について説明します。

Muse のライブラリペインには、共通のページエレメントの保存と管理を行う便利な方法があります。ライブラリにアイテムを追加すると、そのアイテムにすばやくアクセスして、そのコンテンツをサイトのページに追加できるようになります。ライブラリには、ロゴ、サイト画像、カラースウォッチ、ガイド、カスタマイズされたウィジェット、埋め込み HTML、段落、文字、グラフィックスタイルなど、様々なエレメントを入れることができます。この記事では、デザインプロセスを合理化するライブラリパネルの使い方の概要を説明します。

Creative Cloud Add-on では、幅広いデザインエレメントの中からサイトのデザインを豊かにするものを選択できます。ダウンロード手順については、Creative Cloud Add-ons for Adobe Muse を参照してください。

ライブラリパネルへのアクセス

ライブラリパネルには、デザインビューからアクセスできます。ウィンドウライブラリを選択するか、ドッキングされたパネルセットにある「ライブラリ」タブをクリックして、パネルをアクティブにします。

Adobe Muse でライブラリパネルを開きます。
Adobe Muse でライブラリパネルを開きます。

注意:

Adobe Muse Exchange にアクセスするリンクをクリックして、ダウンロードして将来サイトプロジェクトに使用できるライブラリアイテムを入手します。

ライブラリパネルでのフォルダーの管理

新規フォルダーの作成

ライブラリパネルの使用を開始するため、新しいフォルダーを作成します。次の手順に従います。

  1. ライブラリパネル下部のフォルダーを作成ボタン(フォルダーアイコン)をクリックします。
フォルダーを作成ボタンをクリックして、新しい空のフォルダーを作成します。
フォルダーを作成ボタンをクリックして、新しい空のフォルダーを作成します。

  1. フォルダーアイコンの横のフィールドに、分かりやすい名前を入力します。

ライブラリパネルでは、フォルダーは名前のアルファベット順に並べられているので、似たような名前を使用すると、リスト内で関連するアイテムをまとめられます。

ライブラリ内のフォルダーをダブルクリックすると、名前はいつでも変更できます。

フィールドに分かりやすいフォルダー名を入力します。
フィールドに分かりやすいフォルダー名を入力します。

フォルダーを作成すると、ライブラリにアイテムを追加できます。

注意:

先にフォルダーを作成せずにライブラリアイテムをライブラリパネルに追加することもできますが、新しいアイテムを追加してから、後でアイテムとフォルダーの両方の名前を変えるというワークフローに比べると、新しいフォルダーを作成し名前を付けてからアイテムを追加する方が早いです。どちらの方法にせよ、ライブラリパネルでは、フォルダーとアイテム両方に分かりやすい名前を付けることをお勧めします。

ライブラリに複数のアイテムを追加しようとしている場合は、アイテムを追加する前に、空のフォルダーのセットを作成して名前を付けておくことができます。

フォルダーを追加して、様々な Adobe Muse サイトエレメントを整理し、探しやすくします。
フォルダーを追加して、様々なサイトエレメントを整理し、探しやすくします。

フォルダーへのページエレメントの追加

ライブラリにエレメントを追加し、すばやくアクセスして他のページに追加できるようにするには、ページ上の任意のエレメントを選択します。複数のアイテムを選択する場合は、Shift キーを押したまま、または選択ツールをクリック&ドラッグして必要なエレメントを選択します。

エレメントをライブラリに追加するための 2 つのオプションのうちの 1 つを選択します。

オプション 1 :

  1. 選択したエレメント(複数も可)を右クリックして「ライブラリに追加」を選択し、そのライブラリアイテムを保存するフォルダーを選択します。
Adobe Muse コンテキストメニューから「ライブラリに追加」オプションを選択します。
コンテキストメニューから「ライブラリに追加」オプションを選択します。

選択したアイテム(複数も可)がそのフォルダーに追加され、ライブラリパネルにプレビューが表示されます。

  1. 所定のフィールドにエレメントのわかりやすい名前を入力します。
フォルダーに保存する新しいエレメントに対し、分かりやすい名前を入力します。
フォルダーに保存する新しいエレメントに対し、分かりやすい名前を入力します。

または、次のワークフローを使用して、選択したアイテム(複数も可)をライブラリに追加します。

オプション 2 :

  1. エレメントが選択されている状態で、ライブラリパネルの右下隅にある「選択したアイテムを追加」ボタン(ページめくりアイコン)をクリックします。
「選択したアイテムを追加」ボタンをクリックします。
「選択したアイテムを追加」ボタンをクリックします。

  1. 所定のフィールドにエレメント名を入力します。

フォルダーに 1 つでもアイテムが入っていると、フォルダー名の左にある下向き矢印をクリックして、フォルダーの内容の展開と折りたたみを切り替えられます。

大規模なプロジェクトファイルで、ライブラリパネルにあるすべてのフォルダーを展開することにより、エレメントリストを短く、探しやすく、管理しやすくすることができます。ライブラリパネルにあるすべてのフォルダーを開いたり閉じたりするには、Option キー(Windows では Alt キー)を押したまま矢印をクリックします。

フォルダーの名前の変更と整理

既に述べたとおり、フォルダーをダブルクリックすればいつでも名前を変更できます。特定のクライアントやサイトセクション用にエレメントを保存している場合は、ライブラリパネルにあるすべてのフォルダーに名前を付け、一覧されたときにそれらが隣り合うようにすると便利です。

Adobe Muse ライブラリパネルでは、フォルダー名はアルファベット順に一覧されます。
ライブラリパネルでアルファベット順に一覧されたフォルダー名。

フォルダーやライブラリアイテムには、分かりやすい名前を付けることをお勧めします。Muse がデフォルトで割り当てる untitled という名前は使用しないでください。分かりやすい名前を付けることにより、フォルダーの一覧を探して、すばやくアイテムにたどり着くことができます。この方法で、次のセクションで説明するように、特定のライブラリアイテムを探すこともできます。

ライブラリパネルでのアセットの管理

ライブラリパネルの検索

多数の様々なエレメントをライブラリパネルに追加してしまうと、どのフォルダーに使いたいアイテムがあるかを覚えておくのが大変になります。それぞれのフォルダーを常に展開しておいて、その内容を表示させることもできますが、ライブラリが大きいと、それも時間がかかります。

ライブラリパネルを検索するには、「名前でフィルター」フィールドにアイテム名のいずれか一部を入力します。

一致するアイテムがあれば、展開されたライブラリフォルダーの下のリストに表示されます。

検索フィールドに名前を入力することにより、特定のアイテムを検索します。
検索フィールドに名前を入力することにより、特定のアイテムを検索します。

検索が終了したら、X ボタンをクリックしてフィールドをクリアします。ライブラリパネル内のアイテムの全リストが改めて表示されます。

アセットの読み込み

カスタムライブラリのアセットをユーザー間で共有し、他のデザイナーとのコラボレーションや、サイトデザインの外観の標準化を簡単にすることができます。書き出した Muse ライブラリファイルは、ファイル拡張子 .mulib で保存されます。

Muse ライブラリファイルを現在のプロジェクトに読み込むには、.mulib ファイルをダブルクリックします。(まだ開いていない場合には)Muse が起動し、ライブラリファイルの内容がライブラリパネルに追加されます。

または、次の手順に従います。

  1. ライブラリパネルの左下にある Muse ライブラリを読み込むボタンをクリックします。
  2. ライブラリアイテムを読み込むダイアログボックスが表示され、デスクトップから .mulib ファイルを探して選択し、「開く」をクリックします。
「Muse ライブラリを読み込む」ボタンをクリックして、Adobe Muse で .mulib ファイルを開きます。
Muse ライブラリを読み込むボタンをクリックして .mulib ファイルを開きます。

読み込まれたフォルダーがライブラリパネルに表示され、現在のファイルで使用できるようになります。

デザインビューで作業していないときにライブラリアイテムを読み込む場合は、ファイルサイトを開くを選択し、そこで表示される開くダイアログボックスで、1 つ以上の .mulib ファイルを探して選択します。

ライブラリアイテムのデザインでの使用

グラフィック、ベクトル画像、フォーム、ヘッダー、フッター要素などの各種アセットを保存して管理できます。これらのアイテムのデザインでの使用方法は 2 つあります。

ライブラリアイテムの配置:

デザインで使用するアイテムを選択します。デザインビューにライブラリアイテムをドラッグします。

ブレークポイントのあるライブラリアイテムを配置:

ライブラリアイテムにブレークポイントが含まれている場合は、アイテムとブレークポイントをレイアウト内に配置することができます。ブレークポイントのあるライブラリアイテムを使用するには、アイテムの横にあるプラス(+)記号をクリックします。アイテムをデザインビューにドラッグ&ドロップします。

Adobe Muse でのブレークポイントに伴うライブラリアイテムの追加
ブレークポイントに伴うライブラリアイテムの追加

ライブラリアイテムのブレークポイントは、ページに追加されます。この機能を使用すると、ワンクリックでマスターページと子ページにブレークポイントのセットを追加できます。複数の Adobe Muse プロジェクトで、ブレークポイントを保持することもできます。

ページ内に既存のブレークポイントがある場合にブレークポイントがあるライブラリアイテムを追加すると、すべてのブレークポイントがページに含まれます。

他のアセットへの画像の書き出し

ライブラリパネルにコンテンツを追加したら、他のデザイナーと共有(または、複数のマシンで作業する際に自分自身のデザインプロセスを効率化)するために、自己完結型のファイルに書き出せます。

Adobe Edge Animate OAM ファイル、ビデオクリップ、その他のリンクなど、Web サイトに(埋め込まれたものでなく)リンクされたコンテンツは、ライブラリパネルからエレメントを書き出すときに作成する .mulib ファイルには含まれていないことに注意してください。

画像ファイルも含む Muse ライブラリファイルを書き出すには、次の手順に従います。

  1. デザインビューで、ライブラリに追加するエレメントまたはエレメントのセットを作成します。エレメントのこのセットには、長方形、テキストおよび画像ファイルを含めることができます。
  2. アイテムをライブラリパネルに追加する前に、アセットパネルを開き(ウィンドウアセット)、書き出す画像(複数も可)を右クリックして「リンクを埋め込む」を選択します。

注意: 書き出すライブラリアイテムに画像ファイルが含まれていなければ、手順 2 は省略できます。

  1. 必要なエレメントを選択し、ライブラリに追加します。
  2. ライブラリパネルの下部にある書き出しボタンをクリックします。
書き出すフォルダーまたはアイテムを選択し、書き出しボタンをクリックします。
書き出すフォルダーまたはアイテムを選択し、書き出しボタンをクリックします。

.mulib ファイルが作成され、デスクトップ(または、指定した場所)に保存されます。他のデザイナーやチームメンバーに対して、.mulib ファイルを電子メールやファイル転送で配布します。

受信者が .mulib ファイルを開き、ライブラリアイテムをページに追加すると、そのイメージがアセットパネルに埋め込まれたイメージとして表示されます。

カスタムスウォッチの作成

ライブラリパネルを使用して、1 つのエレメントにサイトデザインに使用したカラーすべてを入れて保存できます。また、ガイドのカスタムセットを選択し、ライブラリパネルに追加することもできます。こうした使用法は、サイトプロジェクトの外観を標準化するのに非常に便利です。

特定のカラーセットを新しい .muse ファイルに読み込み、デザインプロセスを効率化するには、次の手順に従います。

  1. 保存するカラーが含まれている .muse ファイルを開きます。長方形ツールを使用して、長方形を 1 個作成し、Option/Alt キーを押しながらその長方形をドラッグして、何回か複製します。塗りメニューでスポイトツールを使用して、各長方形の塗りを、そのサイトの主なカラー値の 1 つに設定します。
  2. ライブラリパネルに新しいフォルダーを作成し、カラースウォッチを保存します。
  3. 選択ツールを使用して、長方形のセット全体を選択します。選択した長方形のグループを右クリックして「ライブラリに追加」を選択するか、ライブラリパネルの下部にある「選択したアイテムを追加」ボタンをクリックします。フィールドに分かりやすい名前を入力し、スウォッチセットにラベルを付けます。
  4. スウォッチが含まれているフォルダーを選択して、ライブラリパネル下部にある書き出しボタンをクリックし、選択したコンテンツを Muse ライブラリファイルに書き出します。.mulib ファイルは、電子メールに添付してチームメンバーに送信するか、または USB ドライブを介してファイルを渡します。
  5. .mulib ファイルの受信者が Muse を起動し、新しいサイトを作成し、ライブラリパネルを開き、読み込みボタンをクリックして、スウォッチが含まれているファイルをライブラリに読み込みます(あるいは、ファイルサイトを開くを選択して、.mulib ファイルを開くこともできます)。
  6. 次に、カラーが含まれているエレメントを、ライブラリパネルからページにドラッグすると、スウォッチがスウォッチパネルに追加されます。
  7. 受信者がスウォッチパネルを開いて(ウィンドウスウォッチ)、スウォッチパネルを右クリックし、表示されるコンテキストメニューから「すべての未使用のスウォッチを削除」を選択します。
インポートした後、新しい Adobe Muse サイトで未使用のカラースウォッチを削除します。
カラースウォッチを新しいサイトに読み込んだ後、スウォッチパネルから未使用のカラーをすべて削除するオプションを選択できます。

スウォッチパネルから未使用のスウォッチを削除した後、必要に応じて、ページからライブラリエレメントを削除します。

注意:

段落や文字のスタイルをテキストに割り当て、ライブラリパネルにテキストフレームをエレメントとして追加する場合には、同じ手法を段落や文字のスタイルの読み込みに使用できます。

カスタムサムネールの作成

ライブラリパネルのプレビューペインは、選択したコンテンツを視覚的に示すよう設計されており、ライブラリから楽にアイテムを選択してページに追加できるようにするものです。ただし、プレビューペインは基本的には四角形のファイルを表示する設定になっています。横長や縦長のエレメントやエレメントのセットをライブラリに追加すると、その結果表示されるプレビュー画像のサムネールが縮小される場合があります。

Adobe Muse でのカスタムサムネールの作成
Adobe Muse でのカスタムサムネールの作成

必要に応じて、別のサムネール画像を作成し、ライブラリアイテムのプレビューとして使用できます。次の手順に従います。

  1. Mac の Finder または Windows のエクスプローラーを使用して、コンピューター上の次のディレクトリを検索します。
  • Mac:~/Library/Preferences/Adobe/AdobeMuseLibrary/
  • Windows:%AppData%/AdobeMuseLibrary/
注意:

Mac OSX の場合、Go/Go to Folder でこのディレクトリにアクセスできます。Windows の場合、上記のパスをコピーし、URL バーに貼り付けて、フォルダーを探します。

  1. 更新しようとしている、Muse 内のライブラリフォルダーに相当するフォルダー名を探します。この例では、ライブラリフォルダー名は nav - background です。
  2. フォルダーを開き、その内容を確認します。中には、PNG ファイルが 1 つ入っています。
  3. Photoshop や Fireworks などの画像編集プログラムを使用して、その PNG ファイルを開きます。必要に応じて PNG ファイルを編集します。
  4. PNG ファイルを現在の位置に保存し、画像編集プログラムを終了します。
  5. Muse に戻り、ライブラリ内のアイテムを選択します。プレビューペインには、編集後の PNG ファイルが表示されます。
カスタム PNG は、一目ですぐにわかるサムネールを表示します。
カスタム PNG は、一目ですぐにわかるサムネールを表示します。

Adobe Muse の使用について詳しくは、Adobe Muse ヘルプとチュートリアルページを参照し、Muse Japanese フォーラムもご覧ください。

アドビのロゴ

アカウントにログイン