Adobe Muse を使用して、Web サイトのブラウザーおよび背景の塗りにスクロール効果を追加する方法を学習します。

注意:

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

ブラウザー背景として設定した画像にスクロール効果を使用

スクロール効果を使用すれば、ブラウザー背景塗り画像のほかタイル/非タイルページエレメントの速度を制御できます。スクロール効果は、並べて表示、画像に合わせる、表示領域に合わせる、またはオリジナルサイズに設定が適用された背景画像を使用するブラウザー背景に適用できます。ブラウザー背景は、ブラウザー背景メニューの「スクロール」セクションで設定した方向と速度に基づいて、ページのスクロールに合わせて一定方向に動きます。

注意:

スクロールオプションは、ブラウザー背景メニューを使用してブラウザー背景に画像を追加するまで淡色表示になっており使用できません。単色またはグラデーションの色だけで塗りつぶされたブラウザー背景には、スクロール効果を適用できません。

ブラウザー背景にスクロール効果を追加するには

ブラウザー背景のスクロールモーション効果を設定するには、次の手順に従います。

  1. デザインビューで、ページ/ページプロパティを選択します。「レイアウト」タブで、「最小の高さ」フィールドを 2000 ピクセルに設定します。これにより、ページはスクロールできるだけ十分に長くなります。「OK」をクリックして変更を保存し、ページプロパティダイアログボックスを閉じます。
ページプロパティの「最小の高さ」フィールドを変更してページを長くします。
ページプロパティの「最小の高さ」フィールドを変更してページを長くします。

  1. コントロールパネルの「ブラウザー背景」リンクをクリックします。「塗り」タブで、「画像」セクションの横にあるフォルダーアイコンをクリックして、デスクトップ上の画像ファイルを選択します。サイズ調整メニューで目的のオプションを選択し、スクロールオプションを有効にします。
ブラウザーウィンドウに表示する背景画像を追加します。
ブラウザーウィンドウに表示する背景画像を追加します。

  1. 「スクロール」タブをクリックします。「スクロール」の「モーション」チェックボックスをオンにします。
ブラウザー背景メニューで「モーション」チェックボックスをオンにしてスクロール効果を有効にします。
ブラウザー背景メニューで「モーション」チェックボックスをオンにしてスクロール効果を有効にします。

しばらくブラウザー背景メニューの「スクロール」セクションを確認します。中央セクションのフィールド(現在 0 px と表示)は、モーションを制御するキーの位置(T ハンドルの場所)に対応します。0 px のデフォルト設定は、T ハンドルがブラウザーウィンドウの最上端に設定されていることを意味します。

「キーの位置」フィールドで指定したピクセル数は、ページがその位置までスクロールされている間に、「初期モーション」セクションで設定した変更に基づいて移動することを意味します。ページの最上部は 0 から始まり、ページを下にスクロールしていくとピクセル数が増加します。(コントロールパネルと変形パネルでは、ページの最上部からの距離が Y 値と呼ばれます)。

「最終モーション」セクションで入力した値は、ページをスクロールしてキーの位置を過ぎた後に適用されます。

モーションのスクロール効果を適用したエレメント(この場合、ブラウザー背景として設定されたタイル画像)は、フィールドに 0 より大きな値が入力されている方向に移動します。水平方向と垂直方向の両方の値が 0 に設定されている場合、エレメントは基本的にページに固定され、移動しません。

「初期モーション」セクションを見ると、フィールドの値の横に小文字の「x」が付いています。これは倍率を表します。ブラウザー背景画像では、「初期モーション」セクションは、ブラウザー背景がスクロールの 1 倍の速度(同じ速度)で上方向に移動することを示しています。訪問者がページを速くスクロールすると、スクロール効果のモーションは、同じペースになるように速度を上げます。

水平方向(左および右)のセクションではフィールドに「0」が表示されており、これはブラウザー背景が左にも右にも水平方向には移動しないことを示します。

「最終モーション」セクションにも同様のインターフェイスが含まれます。ブラウザー背景画像では、ブラウザー背景はモーションの 1 倍の速度で上方向に移動するように設定され、水平方向には移動しません。

注意:

「スクロール」タブの左下隅にある「情報」ボタン(i アイコン)にマウスを置くと、スクロール効果がどのようにブラウザー背景に適用されているかがわかります。

  1. 「初期モーション」の矢印ボタンをクリックして、垂直方向(上または下)または水平方向(左または右)を指定し、ブラウザー背景の移動方向を制御します。
  2. 「初期モーション」セクションで、水平方向および垂直方向のスクロール速度を設定するには、数値を入力する、もしくは上方向または下方向の矢印ボタンをクリックします。これらの設定の詳細は後で説明します。速度フィールドが 0 に設定されている場合、スクロール中に(キーの位置に到達するまで)エレメントはその方向に移動しないことを示します。
  3. 「最終モーション」セクションで、目的の方向を設定し、対応するフィールドに数値を入力してスクロール効果が行われる速度を設定します。
  4. ブラウザー背景メニューを閉じるには、ページの他の部分をクリックします。
  5. ファイル/ブラウザーでページをプレビューを選択して、新しいブラウザーウィンドウにページを読み込みます。ページをスクロールして、スクロールモーション効果が生じることを確認します。
  6. テストが終了したら、ブラウザーを閉じて Muse に戻ります。

ページエレメント背景にスクロールモーションを適用

背景塗りにスクロール効果を追加するには

タイル/非タイル背景画像が塗りとして適用されているページのオブジェクトに、スクロールモーションを適用できます。次の手順に従います。

  1. デザインビューでページを編集しているときに、ページページプロパティを選択します。「最小の高さ」を 2,000 ピクセルのような非常に大きな値に設定して、スクロールできるだけ十分長いページにします。「OK」をクリックして変更を保存し、ページプロパティダイアログボックスを閉じます。または、十分なページコンテンツを追加してさらに長いページを作成します。
  2. デザインビューで、コントロールパネルの長方形ツールを選択します。
  3. ページに長方形を描画します。
  4. 塗りメニューを使用して、長方形を埋めるタイル/非タイル背景画像を設定します。
塗りメニューで、長方形を埋める背景画像を追加し、目的の表示オプションを設定します。
塗りメニューで、長方形を埋める背景画像を追加し、目的の表示オプションを設定します。

  1. 塗りメニューで「スクロール」タブをクリックし、スクロールオプションを設定します。
  1. 塗りメニューの「スクロール」タブをクリックします。「モーション」チェックボックスをオンにして、スクロールオプションの設定を開始します。
塗りメニューの「スクロール」タブを使用して、スクロール効果の「モーション」をオンにします。
塗りメニューの「スクロール」タブを使用して、スクロール効果の「モーション」をオンにし、移動の方向と速度を指定します。

スクロールモーションを有効にしたエレメントの上に T ハンドルが現れていることに注意してください。ハンドルは、キーの位置(現在、エレメントから 100 px 上方に設定されています)を視覚的に示すものです。「スクロール」タブの中央セクションのアイコンは、ページでの T ハンドルの位置に対応します。中央のフィールドに新しい値を入力するか、ページで T ハンドルをドラッグすることによって、スクロール効果が生じるときのキーの位置をリセットできます。T ハンドルをドラッグすると、キーの位置より上の領域が一時的に薄暗くなります。

キーの位置を視覚的に示す T ハンドルをクリック&ドラッグします。
ページの目的の位置まで T ハンドルをクリック&ドラッグします。

注意:

T ハンドルは、選択したエレメントに対して上方に伸ばす必要はありません。T ハンドルをクリック&ドラッグしてエレメントの上端に揃えることも、ドラッグしてエレメントの下に伸ばすこともできます。

Muse では、ハンドルをドラッグするか、「キーの位置」フィールドに数値を入力するかを選択して、訪問者がページをスクロールしたときに生じる移動を正確に制御できるので、非常に柔軟にデザインすることができます。

塗りメニューの「スクロール」タブは、ブラウザー背景メニューの「スクロール」タブと同じように機能します。

  1. 「モーション」スクロール効果を有効にしたエレメントを選択した状態で、塗りメニューの「スクロール」タブを使用してキーの位置を数値で設定するか、ページ上で T ハンドルをクリック&ドラッグしてキーの位置を設定します。
  2. 「初期モーション」セクションで、垂直方向および水平方向と、ページをスクロールする速度に相対した速度を設定します。これで、ページがキーの位置までスクロールするまでに生じるモーションが設定されます。
  3. 「最終モーション」セクションで、垂直方向および水平方向と、ページをスクロールする速度に相対した速度を設定します。これで、ページがスクロールしてキーの位置を過ぎた後で生じるモーションが設定されます。

注意:

スクロール効果を適用した画像では、長方形は訪問者のスクロールの 3 倍の速度で所定の位置まで右に移動するように設定されており、ブラウザーでページがキーの位置に出会ったときに、長方形はデザイン内のその所定の位置に到達します。訪問者がキーの位置(100 ピクセル)を過ぎると、長方形は訪問者のスクロールの 3 倍の速度で所定位置から左への移動を開始します。この例では、垂直方向の両方のフィールドが 0 に設定されているので、長方形は垂直方向には移動しません。

  1. 塗りメニューを閉じるには、ページの他の部分をクリックします。
  2. プレビューを押すか、ファイル/ブラウザーでページをプレビューを選択して、適用後のスクロール効果をテストします。ページをスクロールして、エレメントが移動することを確認します。
  3. テストが終了したら、Muse に戻るか、「デザイン」ボタンをクリックしてページの編集を続けます。

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

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