Adobe Muse でコンポジションウィジェットを追加する方法を説明します。コンポジションウィジェットを構成して、インタラクティブサイトを作成します。

注意:

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

Adobe Muse でコンポジションウィジェットを使用すると、Web サイトに複雑なインタラクティブ機能を追加できます。写真やレストランのサイトはもちろん、およそどのようなサイトにも、各種コンテンツの表示にコンポジションウィジェットは欠かせません。コンポジションウィジェットを使用することで、コードを一切記述することなく、ナビゲーションや閲覧でユニークなエクスペリエンスを提供できます。

Adobe Muse には、Web サイトで使用する様々なコンテンツを追加およびデザインできる各種コンポジションウィジェットが用意されています。例えば、写真サイトを作成しているなら、ライトボックス表示ウィジェットを選択して、Web サイトにフォトギャラリー機能を用意できます。このウィジェットは、ページのほかの部分を一時的に薄暗くして、訪問者の注目をアクティブな表示領域に集めます。

コンポジションウィジェット内でウィジェットを入れ子にして、面白味のある Web デザインを創作することもできます。例えば、カタログをデザインしているなら、空白コンポジションウィジェットを使用してハンバーガーのメニューを作成し、空白コンポジションウィジェットのターゲット領域の内部にスライドショーウィジェットを配置することができます。このようにデザインすると、サイトの訪問者にユニークな体験を提供できます。

ここからは、Adobe Muse に用意されている各種コンポジションウィジェットについて説明します。

各種コンポジションウィジェット

コンポジションウィジェットには、トリガーとターゲットという 2 種類のコンテナがあります。トリガー領域はサイト訪問者がクリックする箇所、ターゲット領域はそれに対応して表示される領域です。トリガー領域とターゲット領域をリンクして、サイトに複雑さとインタラクティビティを与えることができます。

Adobe Muse には以下のコンポジションウィジェットが用意されています。デザイン要件に応じて、ウィジェットを 1 つだけ使用したり、入れ子にして複数を組み合わせて使用したりできます。

空白

Adobe Muse の空白コンポジションウィジェット
Adobe Muse の空白コンポジションウィジェット

小さいサムネール付きのウィジェット。デフォルトでは、フィルターは何もありません。手動でターゲットコンテナにリンクできます。

特集記事

Adobe Muse の特集記事コンポジションウィジェット
Adobe Muse の特集記事コンポジションウィジェット

アコーディオンウィジェットと同様に動作するウィジェット。このウィジェットのコンテナ領域にはテキストや画像を追加できます。

ライトボックス表示

Adobe Muse のライトボックス表示コンポジションウィジェット
Adobe Muse のライトボックス表示コンポジションウィジェット

トリガーをクリックするとターゲット領域のコンテンツがアクティブになるウィジェット。ターゲットが表示されると、ページの他の領域が薄暗くなります。

プレゼンテーション

Adobe Muse のプレゼンテーションコンポジションウィジェット
Adobe Muse のプレゼンテーションコンポジションウィジェット

このウィジェットには、ターゲットプレゼンテーション領域に関連付けられている小さなサムネールが含まれます。デフォルトで、スライドはこのウィジェット内で水平方向にスワイプされます。

ツールヒント

Adobe Muse のツールヒントコンポジションウィジェット
Adobe Muse のツールヒントコンポジションウィジェット

このウィジェットにはツールヒントテキストが含まれます。ユーザーがトリガー領域にカーソルを合わせると、ツールヒントが即座に表示されます。

コンポジションのウィジェットの追加と設定

Adobe Muse でコンポジションウィジェットを追加して使用するには、追加するコンポジションウィジェットを選択し、そのウィジェットをデザインビューにドラッグします。コンポジションウィジェットはデフォルトでレスポンシブなので、異なるブレークポイントにわたって可変です。コンポジションウィジェットの位置やコンテンツを変更する場合は、特定のブレークポイントについて個々のウィジェット要素を変更、サイズ変更、固定します。

レイアウトにコンポジションウィジェットを追加するには、次の操作をおこないます。

  1. Adobe Muse を開きます。スタートアップスクリーンで、「新規作成」をクリックして新しいサイトを作成するか、コンポジションウィジェットの追加先となる既存の Adobe Muse サイトを開きます。

  2. プランビューで、ウィジェットの追加先となるページをダブルクリックして開きます。

  3. ウィジェットライブラリ(ウィンドウ/ウィジェットライブラリ)を開き、「コンポジション」をクリックしてオプションを展開します。デザイン要件に基づき、コンポジションウィジェットを 1 つ選択します。

    例えば、ウィジェットライブラリでライトボックス表示を選択します。

    注意:

    ウィジェット内に生成されたデフォルトのコンテンツを削除するには、ウィジェットを右クリックし、「ウィジェットコンテンツを消去」を選択します。

    コンポジションウィジェットを Adobe Muse のウィジェットライブラリからドラッグします。
    ウィジェットライブラリからコンポジションウィジェットをドラッグします。

    ライトボックス表示ウィジェットのデフォルトバージョンには、大きなライトグレーのターゲットコンテナの上に 3 つの小さなグレーのトリガーボックスが表示されます。

    ビジターがトリガーコンテナをクリックすると、ライトボックス表示ウィジェットのターゲットコンテナが表示されます。画像、テキスト、YouTube ビデオなどのビデオをターゲットとして埋め込むことができます。

  4. コンポジションウィジェットでコンテナまたはトリガーを選択します。ウィジェット全体を選択するには、目的のウィジェットを選択します。アプリケーション左上隅の選択範囲インジケーターに、「コンポーネント」と表示されます。

    トリガーを選択するには、このウィジェット内の小さなボックスをダブルクリックして選択します。選択範囲インジケーターに「トリガー」と表示されます。小さなボックスはこのウィジェットのトリガーです。これらはユーザー操作に反応するボタンです。

    Adobe Muse ページ左上隅の選択範囲インジケーターを確認
    ページ左上隅の選択範囲インジケーターを確認

    左上隅の選択範囲インジケーターに「ページ」と表示されていれば、他の要素が選択されていないとわかります。

  5. ファイル/配置を選択して、読み込みダイアログボックスを開きます。このウィジェットに配置するファイルを参照して選択します。「開く」をクリックしてファイルを開き、読み込みダイアログボックスを閉じます。

    ページ上の任意の場所を 1 回クリックすると、画像がフルサイズで配置されます。

  6. 画像がまだ選択されている状態で、右クリックし、コンテキストメニューから「カット」を選択します。

    キーボードショートカットを使用して画像をカットすることもできます。これにより、画像がページから削除され、クリップボードにコピーされます。

  7. トリガーボタンの内部を右クリックし、「ペースト」を選択します。キーボードショートカットを使用して画像をトリガー内にペーストすることもできます。トリガーコンテナが画像の寸法まで自動的に拡張されます。

    コンテナにコンテンツをペーストするのは難しい場合があります。コンテンツは内部にペーストされたと思っていても、実際にはページにペーストされているということがありえます。

    画像がトリガーコンテナ内部にあることを確認するには、Esc キーを 1 回押し、選択範囲インジケーターを確認します。「トリガー」と表示されていれば、トリガー内部に画像があるとわかります。選択範囲インジケーターに「ページ」と表示されている場合は、トリガーコンテナの内部の画像をもう一度カットしてペーストする必要があります。

    レイヤーパネル(ウィンドウ/レイヤー)を開いて、画像のペースト先を確認することもできます。レイヤーパネルには、ページに含まれている要素の階層が表示されます。

  8. 他にサムネールを追加するには、トリガーコンテナの横にあるプラス記号(+)をクリックします。

    「+」をクリックして、ライトボックス表示にサムネールを追加する
    「+」をクリックしてサムネールを追加する
  9. デザインビューでウィジェットを配置したら、ウィジェットの構成に進むことができます。コンポジションウィジェットのオプションを構成するには、目的のウィジェットを選択し、ウィジェット右上隅の青矢印をクリックします。

    オプションメニューを使用したコンポジションウィジェットの構成
    オプションパネルを使用したコンポジションウィジェットの構成

    オプションパネルでは次の設定を構成できます。

    • 位置:ターゲット領域のページ上での配置を指定します。ターゲットを重ね合わせる場合は「重ね合わせ」を、ターゲットを異なる位置に配置する場合は「分散」を選択します。ページのほかの部分を薄暗くする場合は「ライトボックス」を選択します。
    • ターゲットを表示:ユーザーがトリガーをクリックしたときのターゲットビヘイビアーの設定を指定します。
    • ターゲットを非表示:ターゲットの非表示に関する設定を指定します。ユーザーがトリガーをクリックしない限り、ターゲット領域は非表示のままです。
    • トランジション:ユーザーがトリガーをクリックしたりトリガーにマウスを合わせたりしたときに、ターゲット領域のコンテンツがどう変化するかを指定します。新しいターゲットへフェードさせる場合は「フェード」を、ターゲットを横にスライドさせて移動する場合は「水平方向」を、ターゲットを縦にスライドさせて移動する場合は「垂直方向」を、それぞれ選択します。
    • トランジション速度:コンポジションウィジェットのトランジションの速さを指定します。即座にトランジションさせる場合は、「なし」を選択します。
    • 自動再生:このオプションは、Web サイトで使用するスライドショーを作成する場合に構成します。このオプションを選択すると、スライドは自動再生され、ユーザー操作は要りません。
    • シャッフル:このオプションは、ターゲットをランダムな順序で表示する場合に選択します。
    • 画面上にトリガーを配置:このオプションは、Web サイトでトリガーを前面に表示する場合に選択します。同じ階層がレイヤーパネルにも表示されます。
    • スワイプを有効にする:このオプションを選択すると、タッチ対応デバイスで次のターゲットへの移動にスワイプモーションを使用できます。
    • 最初はすべて隠す:このオプションは、Web サイトの最初の読み込み時にすべてのターゲットオプションを非表示にする場合に選択します。ユーザーは、ターゲットを表示するために、対応するトリガーをクリックする必要があります。
    • 自動ライトボックス:このオプションは、Web サイトの読み込み時にライトボックスが自動表示されるようにする場合に選択します。
    • パーツ:「前へ」、「次へ」、「閉じるボタン」オプションを選択して、ウィジェットにインタラクティビティを追加します。訪問者は Web サイトで前へ、次へ、閉じるの各オプションをクリックできます。
    • 編集:「編集中にライトボックスのパーツを表示」を選択すると、ウィジェットの編集中にターゲット領域がデザインビューに表示されます。「すべてをデザインモードで表示」を選択すると、デザインビューにすべてのターゲットコンテナが同時に表示されます。
    Adobe Muse でのコンポジションウィジェットの設定
    コンポジションウィジェットの設定

    注意:

    「位置」ドロップダウンリストで「分散」または「重ね合わせ」が選択されている場合、「編集中にライトボックスのパーツを表示」オプションは選択できません。

    「自動ライトボックス」オプションが選択されている場合、「最初はすべて非表示」オプションは選択できません。

  10. 不要なトリガーを削除するには、削除するトリガーをダブルクリックして選択します。Delete キー(Mac)または Backspace キー(Windows)を押すと、選択されたトリガーが削除されます。

  11. トリガーコンテナ内でスライド画像をクリックして、ライトボックス効果を呼び出します。

    左図のイメージ(トリガー)をクリックするとライトボックス表示が開く
    左図でイメージ(トリガー)をクリックするとライトボックス表示(右図)が開く

    Esc キーを押してライトボックスウィンドウを閉じ、デザインビューに戻って、Adobe Muse ページの編集を続けます。

  12. コンポジションウィジェットを構成してデザイン内に配置したら、プレビュービューでウィジェットをテストします。

コンポジションウィジェットをレスポンシブレイアウトで使用している場合は、以下のセクションをお読みください。ウィジェットはすべてのブレークポイントでテストおよびプレビューしてください。

レスポンシブレイアウトでのコンポジションウィジェットの使用

コンポジションウィジェットはデフォルトで可変ないしレスポンシブです。レスポンシブレイアウトでコンポジションウィジェットを追加して使用するには、次のいずれかの操作をおこないます。

  • Adobe Muse の最新バージョンでレスポンシブサイトを新規作成している場合は、デザインビューでウィジェットライブラリパネルからコンポジションウィジェットをドラッグして配置します。
  • Adobe Muse 2017.0.3 以前のバージョンを使用している場合、コンポジションウィジェットはレスポンシブではありません。この場合は、.muse ファイルを Adobe Muse の最新バージョンで開いてください。ウィジェット内で要素を選択し、「サイズ変更」オプションで「レスポンシブな幅」または「レスポンシブな幅と硬さ」(該当するほう)を選択します。
非レスポンシブなコンポジションウィジェットをレスポンシブに変換
非レスポンシブなコンポジションウィジェットをレスポンシブに変換

注意:

ウィジェット全体を選択して「サイズ変更」プロパティを変更することはできません。レスポンシブにするには、ウィジェット内の要素を個別に、または複数選択してレスポンシブにします。

コンポジションウィジェットの追加と構成で説明されている手順に従ってウィジェットを構成します。ウィジェットを構成およびスタイリングすると、ウィジェットをブラウザーでプレビューしたり、スクラバーやサイズ変更を使用したりできます。ウィジェットが画面サイズに合わせて自動でサイズ変更されることを確認できます。

Adobe Muse のレスポンシブなコンポジションウィジェット
Adobe Muse のレスポンシブなコンポジションウィジェット

注意:

コンポジションウィジェットをレスポンシブレイアウトに追加する場合は、デザインのレイアウトを最大のブレークポイントから始めることをお勧めします。最大のブレークポイントでウィジェットの位置や構成を決めたら、必要に応じてブレークポイントを追加していきます。

レスポンシブレイアウト向けのサイトデザインについて詳しくは、Adobe Muse のレスポンシブサイトにオブジェクトをレイアウトするを参照してください。

コンポジションウィジェットとほかのウィジェットとの組み合わせ

コンポジションウィジェットの何よりユニークな特長の 1 つは、コンポジションウィジェット内での入れ子をサポートしていることです。つまり、コンポジションウィジェット内にフォーム、スライドショー、メニュー項目などのウィジェットを追加できます。

料理サイトでなら、特集記事ウィジェットのターゲットコンテナ内に、スライドショーウィジェットを追加することができます。これにより、サイト訪問者がメニューラベル(特集記事ウィジェット)をクリックすると、ギャラリーを含むターゲット領域がスライドショーとして表示されます。

ほかにも、ターゲットとして連絡先を追加し、「連絡先」ラベルをクリックしたユーザーがすぐさまコンタクトフォームに誘導されるようにできます。

入れ子を使用すると、ほかにも様々な組み合わせやデザインの可能性が広がります。ただし、レスポンシブレイアウトでウィジェットの入れ子をデザインする場合には、以下の事項に留意してください。

  • 非レスポンシブコンテナ内で入れ子になっているレスポンシブ要素では、固定を使用できません。
  • 非レスポンシブコンテナ内に配置されたオブジェクトは、レスポンシブになりません。

注意:

コンポジションウィジェットでウィジェットを入れ子にする場合は、入れ子の深さを 3 レベルまでに留めることをお勧めします。

以下のセクションでは、コンポジションウィジェットを使用してサブメニューを作成する方法を説明します。サイトナビゲーション用に非表示サブメニューを作成する場合は、このサンプルシナリオをお読みください。

コンポジションウィジェットを使用したサブメニューの作成

コンポジションウィジェットを構成することで、サブメニューを使用するサイトナビゲーションを構築できます。ビジターがアクティブ領域にカーソルを合わせるとサブメニューが表示され、サブメニューを開くトリガーとなったアクティブ領域の外にビジターがカーソルを合わせると同じサブメニューが非表示になるような、メニュー項目を作成できます。また、ビジターがサブメニュー内のいずれのリンクもクリックしないでサブメニュー自体からカーソルを外した場合に、サブメニューが非表示になるようなウィジェットも構成できます。このようなタイプのインタラクティブなサブメニューを作成できると、様々なサブセクションを持つサイト向けのナビゲーションバーの構築に便利です。

「ターゲットを表示」と「ターゲットを非表示」のメニューは、Web サイトの共通のメニュービヘイビアーを複製する場合に便利です。ビジターは任意にリンクをクリックすることもできますし、ウィンドウ領域の外にカーソルを動かしてウィンドウを非表示にすることもできます。このオプションを有効にすると、閉じるボタンをクリックしてサブメニューを非表示にする必要はありません。

この機能を利用できるのは、次のコンポジションウィジェットを使用している場合です。

  • 空白
  • 特集記事
  • ツールヒント

オプションパネルには、ターゲットコンテナを表示するための設定が 2 つあります。

  • クリック時:ユーザーがボタンをクリックすると、ターゲットが表示されます。
  • ロールオーバー時:ユーザーがトリガーをロールオーバーすると、ターゲットが表示されます。

コンポジションウィジェットでターゲットコンテナを非表示にすることもできます。ターゲットコンテナを非表示にするオプションには、以下の 4 つがあります。

  • なし
  • クリック時
  • ロールアウト時
  • トリガーとターゲットのロールアウト時

このセクションでは、ロールオーバー時のビヘイビアー(ターゲットコンテナを表示)と、トリガーコンテナとターゲットコンテナ両方のロールアウト時のビヘイビアー(ターゲットコンテナを非表示)の使い方を見ていきます。

次の手順に従って、コンポジションウィジェットの「ロールアウト時に隠す」設定を有効にして、ビジターの操作に基づいてサブメニューのリンクを非表示にしたり表示したりするメニューバーを作成する方法を学びます。

  1. デザインビューで、ウィジェットライブラリからライトボックスコンポジションウィジェットをドラッグしてページに追加します。

  2. トリガーコンテナを選択します。選択ツールを使用して、3 つのトリガーコンテナすべてを一番上の、大きなターゲットコンテナの上に移動し、間隔を均等にします。

    トリガーコンテナの位置の変更
    トリガーコンテナの位置を変え、大きなスライド画像の上に置きます。

  3. 選択ツールを使用して、トリガーコンテナそれぞれのサイドハンドルをドラッグします。幅を拡張して、上部に 3 つの「タブ」からなるセットを作成し、タブ付きパネルウィジェットと同じようにします。

    選択ツールを使用したハンドルのドラッグ
    バウンディングボックスをドラッグして、3 つのトリガーボタンの幅を拡張します。

  4. 3 つのトリガー領域それぞれに、必要なコンテンツを追加します。トリガーコンテンツには、テキスト、リンク、画像、長方形、埋め込み HTML などを入れることができます。例えば、テキストツールを使用して各トリガーにテキスト(リンク 1、リンク 2、リンク 3)を追加します。

    次に、第 2 のターゲットコンテンツ領域内にリンクを作成します。

  5. トリガーコンテナをクリックし、対応するさらに大きなターゲットコンテナを選択します。第 2 のターゲットコンテンツ領域にリンクを追加します。コントロールパネルの右側にある「ハイパーリンク」ラベルの横にあるドロップダウンリストをクリックします。リンク先となる Web アドレスへのリンクを追加します。

  6. ファイル/ブラウザーでページをプレビューを選択して、コンポジションウィジェットがどう表示されるかをテストします。
    「リンク 1」、「リンク 2」、「リンク 3」とラベルの付いたトリガーコンテナをクリックして、ウィジェットを操作します。

    デフォルトでは、ターゲットコンテナは常に表示され、非表示にはなりません。3 つのトリガーボタンをクリックすることで、対応するターゲットコンテナをそれぞれ表示できますが、3 つのターゲットコンテナのうち 1 つは常に表示されています。

  7. 「ロールアウト時に隠す」設定を構成するには、コンポジションウィジェットを選択します。青矢印をクリックしてオプションパネルにアクセスし、ウィジェットの設定オプションを編集します。

    次の設定が有効になっていることを確認します。

    • 位置:重ね合わせ(デフォルト)
    • ターゲットを表示:ロールオーバー時
    • ターゲットを非表示:トリガーとターゲットのロールアウト時
    • トランジション:フェード(デフォルト)
    • トランジション速度:0.5 秒(デフォルト)
    • 自動再生:無効(デフォルト)
    • シャッフル:無効(デフォルト)
    • 最初はすべて隠す:有効
    コンポジションオプションパネル
    オプションパネルで設定を更新して、ウィジェットの動作方法を制御します。

    非表示と表示の機能を制御する鍵となる設定は、ターゲットを表示メニュー、ターゲットを非表示メニュー、および「最初はすべて隠す」オプションを有効にすることです。

  8. ブラウザーでファイル/ページをプレビューをもう一度選択して、ウィジェットへの最新の変更をテストします。

    これで、コンポジションウィジェットが最初に読み込まれたときに、デフォルトですべてのターゲット領域が非表示になります。

    ウィジェットをもう一度操作します。トリガー領域の上にカーソルを置くと、対応するターゲット領域が表示されます。カーソルがウィジェット領域内にあれば、ターゲット領域内のコンテンツを操作できます(中央のターゲットコンテナ内の Web サイトへのリンクをクリックするなど)。

    ただし、トリガー領域やターゲット領域からカーソルが出ると、別のトリガー領域に再びカーソルを置くまでターゲット領域は非表示になります。

    この機能により、ビジターのマウスの動きに反応してかなり複雑な操作が行えるサイトナビゲーションを設定できます。

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

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