Adobe Muse でのウィジェットの使用

Adobe Muse では、ウィジェットを使用して、インタラクティブなサイト機能や動的に生成されたコンテンツを追加できます。ウィジェットは事前構成された設定可能なオブジェクトです。メニュー、フォーム、スライドショーなどの一般的な Web 機能を備えています。Adobe Muse には、複雑な Web 設計を簡単にするさまざまなウィジェットが用意されています。 

Adobe Muse のウィジェットは、サイトのデザインに合わせてスタイリングできるので、他の Web ページになじませることができます。 ウィジェットライブラリには、ページにドラッグしてページのビヘイビアーを制御できる作成済みのすべてのサイト機能（ウィジェット）やページの外観を変更するためのスタイルが含まれています。

Adobe Muse には、以下の種類のウィジェットがあります。

• コンポジションウィジェット：このウィジェットを使用すると、Web ページのある領域を操作して、別の領域に表示されるコンテンツを変更できます。変更時、フェードまたはスライドアニメーションが発生します。 
• フォームウィジェット：サイトへの訪問者が連絡に使用できるフォームを追加します。使用できるフォームフィールドは、選択するフォームウィジェットによって異なります。
  
• メニューウィジェット：各メニューアイテムの状態が動的または手動で入力されるメニューバーを作成します。各ページで適切なメニューリンクが自動的に「アクティブ」ステートになり、現在のページであることを示します。
• パネルウィジェット：一度に表示されるコンテンツパネルは 1 枚のみで、表示できるパネルを切り替える直感的なナビゲーションリンクが用意されています。スライドアニメーションするアコーディオン構成と一般的なタブ表示のいずれかを選択できます。
• スライドショーウィジェット：ギャラリー内の画像をスマートなアニメーションで簡単に表示できます。シンプルな画像ベースのスライドショーに最適で、複雑な用途にはコンポジションウィジェットが適しています。
• ソーシャルウィジェット：ソーシャルウィジェットでは、簡単にカスタム HTML を設定して、それを Adobe Muse ページに埋め込むことができます。Web ウィジェット機能の多くは、サードパーティ Web サイトの HTML を埋め込んで利用することもできます。アプリケーション外部でコードを生成し、それを埋め込み HTML として Adobe Muse にペーストするのではなく、Adobe Muse 内から Web コンテンツを追加して設定すると、時間を節約できます。

Adobe Muse Web ページへのウィジェットの追加

ウィジェットライブラリからウィジェットを選択して、Adobe Muse Web ページに追加できます。ウィジェットを追加するには、以下の手順に従います。

ウィジェットの構成とカスタマイズ

Adobe Muse では、ウィジェットを Web ページに配置した後、オプションパネルから設定できます。オプションパネルはコンテキストに応じたパネルで、変更を適用してウィジェットに特有の設定を更新できます。オプションパネルには、コンテンツの外観を決定する設定が含まれています。

塗りおよび線オプションを使用すると、ウィジェットの外観を大幅に向上できます。ウィジェットにテキストが含まれる場合は、テキストパネル（ウィンドウ／テキストの順に選択するか、コントロールパネルのテキストオプション）を使用して、デザインのニーズに合わせてテキストを変更およびスタイリングします。

ウィジェットを設定するには、以下の手順に従います。 

ウィジェット内での入れ子エレメントの選択

ウィジェットライブラリからウィジェットをページにドラッグするという操作は、コンテナの入れ子のセットを配置することと基本的に同じです。このコンテナは、階層に応じて選択および編集できます。

ウィジェットを使用する際、ウィジェットとウィジェットのコンテナの選択方法を理解することが重要です。Adobe Muse は、選択範囲インジケーターを使用して現在の選択項目を表示します。Adobe Muse の左上にある選択範囲インジケーターには、現在の選択項目とステートに合わせてオブジェクトをプレビューできるドロップダウンメニューが表示されます。

以下の例では、選択範囲インジケーターによってページの選択範囲（Web ページ上のオブジェクトが選択されていない場合）、メニューウィジェット（メニューウィジェットを選択した場合）、およびメニュー項目（メニューウィジェット内のコンテナ）が表示されています。

ウィジェット全体を 1 回クリックすると、選択インジケーターに「ウィジェット」と表示されます。もう一度クリックすると、ウィジェット内のコンテナを選択できます。また、選択範囲インジケーターに「コンテナ」と表示されます。繰り返しクリックすると、コンテナ内の入れ子の複数のエレメント（テキストフレームなど）を選択できます。

テキストフレームを選択すると、選択範囲インジケーターに「テキストフレーム」と表示されます。ウィジェットをクリックして入れ子エレメントの内側に向かって「ドリルダウン」するため、選択されている入れ子のエレメントを選択範囲インジケーターの単語により確認することは最適な方法です。別のコンテナ（メニューナビゲーションの個々のボタンなど）を選択して、ボタンのステートを更新します。これにより、ページが最初にロードされたとき、訪問者がボタンにマウスを合わせたとき、およびクリックしたときのボタンの外観を必要に応じて制御できます。また、訪問者が現在表示しているページに対応するボタンを視覚的に示すことで、訪問者に示す「アクティブな」状態を定義することもできます。

ウィジェットの入れ子のコンテナ内でクリックするには、編集するアイテムを数回クリックします。選択範囲インジケーターと、ステートパネルに表示されるオプションに注意して、変更したい入れ子のエレメントが選択されたことを確認します。

ウィジェットの更新を完了したら、離れて（ページ上の別の場所を）クリックしてウィジェットの選択を解除するか、Esc キーを繰り返し押してウィジェットの階層を上に移動します。

オプションパネルを使用したウィジェットの構成

ウィジェットライブラリからウィジェットをページにドラッグした後、ウィジェットを選択すると、ウィジェットの右上隅に青の矢印アイコンが表示されます。この青の矢印アイコンをクリックして、オプションメニューを開きます。

各ウィジェットでは、異なるオプションを使用できます。したがって、オプションメニューのインターフェイスで設定できるオプションは異なります。これらの設定は、ウィジェットのビヘイビアー（例えば、スライドショーが自動再生されるかどうかや、拡大画像を表示するために訪問者がサムネールをクリックする必要があるかどうかを選択するなど）およびウィジェットの表示（新しい画像が表示されるたびにアニメーションするトランジションの種類を指定するなど）を制御します。

Web サイトをデザインするときは、これらの設定を行い、クライアントと協力して特定のプロジェクトに最適な選択肢を見つける機会があります。サイトをオンラインでパブリッシュした後であっても、いつでも .muse ファイルに戻り、ウィジェットを選択し、青の矢印アイコンをクリックしてオプションメニューにアクセスし、新しい設定を行ってウィジェットを変更できます。その後、サイトをもう一度パブリッシュした後、加えた変更はライブ Web サイトに反映されます。

メニューウィジェットを使用すると、サイトのページ名を動的に表示し、これらのページへのリンクを自動的に作成することができます。これにより、プランビューのサイトマップに基づいて、ページへのサイトナビゲーションを非常に簡単に追加できます。作成されたリンクが切れていないか、心配する必要もありません。また、プランビューでページのサムネールを右クリックし、ナビゲーションにページを含むオプションの選択を解除して、特定のページがメニューウィジェットに動的に表示されないようにすることもできます。このオプションはデフォルトで有効です（有効な場合、チェックマークが表示されます）。

また、Adobe Muse がメニューアイテムを作成するのではなく、ボタンに独自の名前を付けて特定のページへのリンクを追加したい場合は、メニューウィジェットを手動で設定するように選択することもできます。オプションメニューの「メニューのタイプ」セクションで、「手動」オプションを選択できます。