注意:

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

Adobe Muse CC 2015.1 の機能強化/2016 年 2 月 

Web ページ上のさまざまなオブジェクトにステートトランジションを適用することにより、デザインをより面白く、アピールするものにできます。また、オブジェクトごとに、各ステートトランジションの遅延、デュレーション、タイミングのオプションを設定することもできます。

ステートでのベベルと光彩の変更は、ステートトランジションでサポートされています。

オブジェクトのさまざまなステートについて

オブジェクトのステートは、ユーザーがオブジェクトを操作したときのオブジェクトの外観を決定します。これらの操作には、オブジェクト上へのマウスの移動(ロールオーバーともいいます)やクリックなどがあります。オブジェクトを操作したときのことを、デフォルトまたは標準ステートから別のステートへのトランジションといいます。このために、Adobe Muse はこのような操作用のスムーズなトランジションを追加します。

Adobe Muse では、テキスト、ウィジェットコンテナ(あらゆるタイプのウィジェットの)、画像、ハイパーリンク、ボタンなどのあらゆるタイプのオブジェクトにステートを適用できます。ステートでは、グラフィックスタイル、段落スタイル、文字スタイルなどを考慮することができます。

Adobe Muse のオブジェクトのステートの違いについて

Adobe Muse には、スタイルを設定して、ユーザーの操作に基づいてオブジェクトの外観を変更することが可能な次のステートがあります。

  • 標準:標準ステートは、Web ページが読み込まれたときのオブジェクトのデフォルトの外観を決定します。これを使用して、オブジェクトが操作されなかったときのオブジェクトのステートを定義できます。標準ステートから別のステートへのオブジェクトのトランジション。
  • マウスダウン:マウスダウンステートは、オブジェクトがクリックされてボタンが放されなかった場合のオブジェクトの外観を決定します。
  • ロールオーバー:ロールオーバーステートにより、ユーザーがオブジェクトの上にマウスを移動したときにオブジェクトの外観が変わるようにできます。ロールオーバーステートを使用する方法は、Web ページ上の操作可能オブジェクトと操作不能オブジェクトを区別する最も簡単な方法の 1 つです。
  • アクティブ:アクティブステートは、オブジェクトがアクティブになっていて、既にクリックされている場合のオブジェクトの外観を定義します。例えば、ボタンをクリックしたり、メニューを選択した場合などです。
    オブジェクトがアクティブステートにトランジションした場合、オブジェクトが使用中であることが示されます。アクティブステートは、ハイパーリンクを含む、あらゆる種類のオブジェクトにも定義できます。

オブジェクトへのステートの割り当て

デフォルトでは、すべてのオブジェクトに 4 つのステートが割り当てられています。ただし、Adobe Muse では、ステートパネルを使用してこれらのステートを個別にカスタマイズできます。

注意:

ステートを操作する場合、選択範囲インジケーターを使用して選択範囲を確認することが重要です。これは、デフォルトでは、オブジェクトの標準ステートを編集できるようになるためですつまり、オブジェクト A のアクティブステートを編集している場合に、オブジェクト B を選択し、オブジェクト A を再度選択すると、標準ステートであるとみなされます。このため、オブジェクトのスタイルを設定する前に、毎回、ステートパネルで編集するステートを明示的に選択することは重要です。

デフォルトでは、オブジェクトに行った編集は、標準ステートとして保存されます。ただし、Muse ではステートパネルを使用して別のステートに切り替え、オブジェクトのスタイルを設定してさらにステートをカスタマイズできます。各ステートを個別に編集することで、各操作タイプのオブジェクトのビヘイビアーに集中することができます。

オブジェクトのステートをカスタマイズまたは編集するには、次の手順に従います。

  1. ステートパネルを開くには、ウィンドウステートの順にクリックします。
  2. ステートを編集するオブジェクトを選択します。
  3. 編集するステートを選択して、オブジェクトのスタイル設定を行います。
  4. ステートパネルでトランジションを選択してから、「フェード」オプションを選択します。トランジションの「遅延」、「デュレーション」、「速度」オプションを設定します。トランジションを選択した場合、オブジェクトは設定に従って 1 つのステートから別のステートにトランジションします。
オブジェクトのスタイルを設定しているときに、選択範囲インジケーターのドロップダウンを使用してステートを選択することもできます。

ウィジェットとウィジェットコンテナへのステートの割り当て

  1. ブラウザーを閉じて Adobe Muse に戻ります。

  2. ウィジェットを 1 回クリックして、メニュー全体を選択します。food ボタンをもう一度クリックして、food メニュー項目を選択します。誤って 3 回クリックすると、選択範囲インジケーターには「ラベル」という文字が表示されます。Esc キーを 1 回押すと、階層の 1 つ上に移動するので、「メニュー項目」という文字が表示されます。

    オプションパネルで「一緒に編集」オプションが有効になっているので、この food メニュー項目の外観に変更を加えると、水平メニューウィジェット内にある残りのすべてのボタンにも変更が適用されます。これにより、編集にかかる時間を短縮できます。各ボタンに対して異なるスタイルを適用することが要求されるデザインでない限り、「編集をすべてに適用」オプションのデフォルト設定を有効にします。

    選択範囲インジケーターをメニュー項目に設定
  3. ステートタブを選択するか、ウィンドウステートを選択して、ステートパネルを開きます。

    このパネルを使用すると、訪問者のカーソルのアクティビティに応じて、様々な方法でボタンのグラフィックを表示するよう編集できるようになります。各ステートの外観を定義する複数のグレーのボックスが表示されることがわかります。

    サイトをプレビューすると、通常ステートとは、初めてページを読み込んだとき、訪問者のカーソルがメニューをインタラクティブに操作していない場合のメニューの表示方法を指すことがわかります。訪問者がボタンの上にカーソルを合わせると、ロールオーバーステートに適用したスタイルが表示されます。訪問者がボタンを押し下げると、マウスダウンステートに適用されたスタイルが表示されます。最後に、訪問者がサイト上の現在のページに留まっている場合(例えば、訪問者が About メニュー項目をクリックして、About ページをまだ表示している場合)、アクティブステートに適用したスタイルがボタンに表示されます。この最後のステートはオプションですが、訪問者が現在表示しているページを一瞥できるので、状況によっては便利です。

    ボタンのステート
  4. ステートパネルで、リスト内にある各項目(標準、ロールオーバー、マウスダウン、およびアクティブステート)をクリックします。パネル内で各ステートをクリックすると、ページ上でメニューウィジェットが更新され、ステートのデフォルトの外観が表示されることがわかります。

  5. もう一度通常ステートをクリックします。home メニュー項目を選択しながら、塗りのカラーチップを使用して、全く異なるカラー(赤など)を選択します。異なる塗りのカラーを設定すると、「編集をすべてに適用」オプションが有効になっているので、すべてのメニュー項目で通常ステートが更新されます。

    ボタンステートのオプション
    「編集をすべてに適用」オプションが有効になっている場合、あるボタンステートに対して塗りのカラーを更新すると、他のボタンステートも自動的に更新されます。

  6. トランジションを選択してから、「フェード」オプションを選択します。オブジェクトで、設定に従って 1 つのステートから別のステートにフェードインまたはフェードアウトのトランジションが行われます。

    1 つのステートから別のステートにトランジションするオプションを選択した場合、次のオプションを設定できます。

    遅延:1 つのステートから別のステートへの遅延時間を秒単位で設定します。

    デュレーション:トランジションのデュレーションを設定します。

    速度:このオプションでは、トランジションをリニアにしたり、次のステートへのトランジションをイーズしたりできます。また、「イーズイン」、「イーズアウト」、「イーズイン/アウト」オプションも選択できます。オブジェクトは、設定に従ってイーズインまたはイーズアウトにトランジションします。

  7. ファイル/ブラウザーでサイトをプレビューをもう一度選択して、メニューを初めて読み込むと、ボタンの通常ステートがカスタマイズされたことがわかります。現在のページを説明するボタンを除くと、すべてのボタンが赤に変わります。各ボタンの上にマウスを合わせると、デフォルトのグレーのロールオーバーカラーが表示され、ロールオーバー効果が創出されます。

  8. 例えば、ステートパネル内で各ステートを選択して(またはコントロールパネル内で、選択範囲インジケーターの横にあるステートメニューを使用して各ステートを選択して)、塗りのカラーを「なし」に設定します(赤い斜線の縞になった白いチップ)。この設定によって、背景のメニュー項目ボタンがビューから効果的に削除されるので、メニューボタンが透明になり、背景のデザインが透けて見えるようになります。

このドキュメントを作成している時点では、水平メニューウィジェットの外側のコンテナはデフォルトで透明です。ただし、必要に応じて、塗りのカラーピッカーを使用して、メニュー項目ボタンのコンテナと同様に塗りのカラーを設定できます。後ほど自分のサイトを作成するとき、ウィジェット全体の塗りのカラーを設定してから、ボタンのコンテナに対して異なる塗りのカラー設定を試すことができます。また、ボタンをデザインするための背景画像の追加を試すこともできます。

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

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