Adobe Muse でグラフィックスタイルを作成および使用する方法について説明します。

注意:

Adobe Muse は、新しい機能が追加されなくなり、2020 年 3 月 26 日にサポートが中止される予定です。詳細な情報と支援については、Adobe Muse のサービス終了ページを参照してください。

Adobe Muse には、Web ページのスタイルを保存したり、再利用したりするための直感的なメカニズムが備わっています。スタイルを作成し、再利用すれば、Web サイトのすべてのページのデザインと外観の一貫性を容易に維持できます。また、スタイルを使用すれば、カラー、フォント、テキストフォーマットなどを再設定する必要がなくなり、Web サイトをすばやく更新できます。

Muse 内でスタイルを使用すると、次のことが実現できます。

  • Web サイトのすべてのページで外観の一貫性を維持
  • 既存スタイルを活用または新規スタイルを作成して、Web ページ全体でスタイルを再利用することによって生産性を向上

スタイルには、塗りのカラー、線のカラー、効果などが含まれています。スタイルは、画像、グラフィック、シェイプ、テキスト、文字など、Muse 内のすべてのタイプのオブジェクトに適用されます。Muse 内のスタイルは、さらに次のように分類されます。

  • グラフィックスタイル
  • 段落スタイル
  • 文字スタイル

グラフィックスタイルとは?

グラフィックスタイルとは、再利用可能なアピアランス属性のセットです。グラフィックスタイルを使用すると、オブジェクトのアピアランスをすばやく変更できます。例えば、オブジェクトの塗りと線のカラーの変更、透明度の変更、効果の適用を一度に行うことができます。

グラフィックスタイルの設定には、シェイプへの塗りのカラーの追加、画像へのシャドウやべベルなどの効果の追加、シェイプアウトラインへのカラーの追加などが含まれます。これらのスタイル設定は、Adobe Muse 内のグラフィックスタイルパネルを使用して保存できます。グラフィックスタイルを作成すると、Web サイト内でグラフィックスタイルの設定を再利用でき、ボタンをクリックするだけで Web サイト全体を変更できます。

グラフィックスタイルは、オブジェクト、グループおよびレイヤーに適用できます。グループやレイヤーにグラフィックスタイルを適用すると、そのグループやレイヤーのすべてのオブジェクトにグラフィックスタイルの属性が適用されます。例えば、不透明度 50%のグラフィックスタイルがあるとします。このグラフィックスタイルをレイヤーに適用すると、そのレイヤー上のすべてのオブジェクト、およびそのレイヤーに後から追加するすべてのオブジェクトが 50%の不透明度で表示されます。ただし、オブジェクトをそのレイヤーの外に移動すると、オブジェクトのアピアランスは以前の不透明度に戻ります。

グラフィックスタイルの作成

  1. Web ページでスタイルを設定したオブジェクトを選択します。
  2. ウィンドウ/グラフィックスタイルパネルを開きます。
  3. ボタンをクリックして、デフォルトの「スタイル」という名前のグラフィックスタイルを作成します。グラフィックパネルで右クリック(Mac では Command キーを押しながらクリック)して、コンテキストメニューで新規グラフィックスタイルを選択します。
  4. 新規作成されたグラフィックスタイルをダブルクリックして、グラフィックスタイルオプションダイアログを表示します
  5. スタイル名フィールドにわかりやすい名前を入力します。スタイル設定フィールドで、適用したグラフィックスタイル設定が正しいことを確認します。
グラフィックスタイル名を入力
グラフィックスタイル名を入力

グラフィックスタイルの適用

作成したグラフィックスタイルを適用するには、次の操作を行います。

  1. オブジェクトまたはグループを選択するか、レイヤーパネルでターゲットレイヤーを指定します。
  2. 1 つのスタイルをオブジェクトに適用するには、次のいずれかの操作を行います。
    • グラフィックスタイルパネルでスタイルを選択します。
    • グラフィックスタイルをドキュメントウィンドウのオブジェクト上にドラッグします。(先にオブジェクトを選択しておく必要はありません)。または、グラフィックスタイルパネルでグラフィックスタイルを選択します。
  3. オブジェクトの既存のスタイル属性をスタイルと結合したり、オブジェクトに複数のスタイルを適用したりするには、次のいずれかの操作を行います。
    • Alt キー(Windows)または Option キー(Mac OS)を押しながら、スタイルをグラフィックスタイルパネルからオブジェクトにドラッグします。
    • オブジェクトを選択して、Alt キー(Windows)または Option キー(Mac OS)を押しながら、グラフィックスタイルパネルのスタイルをクリックします。

グラフィックスタイルのコピー

グラフィックスタイルをコピーし、ある要素から別の要素へと、再利用可能な属性を適用できます。ソース要素からスタイル属性をコピーし、複数のターゲット要素にわたって属性をワンクリックでペーストできます。さらに、必要な属性のみを選択してペーストすることもできます。

  1. グラフィックスタイルをコピーするページを開きます。右クリックし、「属性をコピー」をクリックします。

  2. スタイルのペースト先となるターゲット要素を選択します。Adobe Muse の同じページ内の要素も、別のページ内にある要素も選択できます。

    また、プロジェクト間でグラフィックスタイルをコピー&ペーストすることもできます。

  3. ターゲット要素を右クリックし、次のいずれかのオプションを選択します。

    属性をペースト:ソース要素からターゲット要素にすべての属性をペーストする際に使用します。

    属性を選択してペースト:選択したグラフィックスタイル属性をソース要素からターゲット要素にペーストする際に使用します。この場合、選択したスタイル属性のみが、ターゲットの要素にコピーされます。例えば、線の属性を除外し、塗りや効果の属性のみを選択してコピー&ペーストできます。

    グラフィックスタイルを選択してターゲット要素にペースト
    グラフィックスタイルを選択してターゲット要素にペースト

グラフィックスタイルのリンク解除

グラフィックスタイルからグラフィックオブジェクトのリンクを解除して関連付けを解除するには、次の操作を行います。

  1. グラフィックスタイルのリンクを解除するオブジェクトを選択します。
  2. ウィンドウグラフィックスタイルを選択します。
  3. グラフィックスタイルパネルで、 ボタンをクリックします。

注意:

グラフィックスタイルのリンクを解除すると、目的のグラフィックスタイルからオブジェクトの関連付けが削除されるだけで、塗り、ストローク、効果などのスタイリングの属性は削除されません。

スタイルの再定義

グラフィックスタイルを再定義して、スタイル設定を即座に更新できます。デザインの一般的な習慣として、スタイリング属性を変更してスタイルのオーバーライドを作成します。Adobe Muse では、このようなオーバーライドは、+ 記号で示されます。

Adobe Muse を使用すると、スタイルのオーバーライドを保存または消去できます。スタイルを再定義して、オーバーライドを保存できます。

次のいずれかの操作を行います。

  1. ウィンドウグラフィックスタイルを選択します。
  2. 再定義するグラフィックスタイルをクリックし、 ボタンをクリックします。

スタイルのオーバーライドの消去

デザインの一般的な習慣として、スタイリング属性を変更して、+ 記号で示されるスタイルのオーバーライドを作成します。Adobe Muse を使用すれば、スタイルのオーバーライドを消去して、グラフィックスタイルの意図しない変更を取り消せます。

スタイルのオーバーライドを消去するには、次の操作を行います。

  1. ウィンドウグラフィックスタイルを選択します。
  2. スタイルのオーバーライドを消去するグラフィックスタイルを選択します。
  3. ボタンをクリックします。

すべてのスタイリングの消去

「すべてのスタイリングを消去」オプションを使用すると、グラフィックオブジェクトに適用されているすべてのスタイリング属性を即座に削除し、塗りなし、ストロークなし、効果なしにリセットできます。

すべてのスタイリングを削除にするには、次の操作を行います。

  1. スタイリングを消去するグラフィックオブジェクトを選択します。
  2. 右クリックして、コンテキストメニューから「すべてのスタイリングを消去」を選択します。

使用中のスタイルへ移動

サイト全体のスタイルの使用を追跡して管理できます。新しい「使用中のスタイルへ移動」オプションを使用すると、グラフィックスタイルが使用されている Web サイトのすべてのページのリストを表示できます。

  1. ウィンドウグラフィックスタイルを選択します。
  2. スタイルを右クリックして、「使用中のスタイルへ移動」を選択します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー