注意：
Adobe Muse は、新しい機能が追加されなくなり、2020 年 3 月 26 日にサポートが中止される予定です。詳細な情報と支援については、Adobe Muse のサービス終了ページを参照してください。
Muse では、他のマスターページに適用されるマスターページを作成できます。階層的マスターページは、プランビューでマスターページを他のページに適用する方法と同様に機能します。以前のバージョンの Muse では、複数のマスターページを作成できましたが、一度に 1 つのマスターページと 1 セットのページ要素しか Web ページに適用できませんでした。
以前は、2 つの異なる（類似しているが、外観がユニークな）セクションを含むサイトを作成した場合、マスターページを複製し、少し変更を加えて、特定のページに適用できました。この結果、両方のマスターページには、多くの場合、同じ要素がいくつか含まれました。このため、サイトを更新するたびに、すべての要素を同期するため、両方のマスターページのコンテンツを編集する必要がありました。
Muse 4.0 以降を使用すれば、複数のマスターページで表示される共有要素を含む（前のセクションで説明されているように、背景やフッターの追加など）A-マスターページを作成してから、A-マスターページに含まれる全要素を継承する追加のマスターページを作成し、最初のセクションにユニークな要素を含めることができます。3 番目のマスターページを作成した場合は、A-マスターページに含まれる要素を使用して、2 番目のセクションにユニークな要素を含めることができます。
階層的マスターページを使用することの利点は、要素の出現を 1 つのインスタンスに制限できることです。サイトのデザインを変更する場合、各要素を一度だけ編集するだけで、サイト上のすべてのインスタンスが自動的に更新されます。
マスターページの管理と適用は、プランビューで行います。マスターページのサムネールをクリックして他のページのサムネールにドラッグすることで、マスターページを他のページに適用できるのと同様に、複数のマスターページを作成してから、あるマスターページをクリックして他のマスターページにドラッグすることができます。または、必要に応じて、プランビューでマスターまたはページのサムネールを右クリックして、表示されるコンテキストメニューで「マスター」オプションを使用してマスターを設定します。
ページまたはマスターページの名前の上にマウスを合わせると、ページまたはマスターページのマスターに適用される階層がツールヒントに表示されます。
この段階では、タイル張りのブラウザー背景とフッターのコンテンツを含む A-マスターページが作成されました。次のセクションでは、A-マスターページのコンテンツを継承する新しいマスターページを作成してから、ヘッダーを追加するので、マスターページをサイトページに適用できます。次の手順に従います。
- プランビューでサイトマップを表示しながら、A-マスターページのサムネールの上にカーソルを合わせると、両側にプラス記号のボタンが表示されます。A-マスターページの右にあるプラス記号をクリックして、全く新しいマスターページを作成します。デフォルトでは、新しいマスターページの名前は B-マスターになります。
- サムネールの下にある B-マスターテキストフィールドをダブルクリックして、名前を編集します。作成したばかりの新しいマスターページに対して Main という分かりやすい名前を入力します。
- Main マスターページのサムネールを右クリックして、表示されるコンテキストメニューからマスター／A-マスター を選択します。
A-マスターページを Main マスターページに適用すると、Main マスターページのサムネールが更新されて、同じ外観が表示されるのが分かります。Main マスターページのサムネールの下にある青色のラベルに [A-マスター] という文字が表示されます。これは、手順 3 で Main マスターページに A-マスターを適用したためです。
ここでは、Main マスターページが実際に A-マスター要素を含んでいないのが重要な相違です。単に A-マスターを複製することはできません。その代わりに、Main マスターページを A-マスターにリンクするように設定しました。これは、A-マスターに追加された新しいコンテンツが Main マスターページにも自動的に表示されることを意味します。
前述したように、フッター、メニューおよび背景が A-マスターページ上でのみ存在することが、階層的マスターの利点です。このため、後になって異なるタイル張りの背景を使用するようにクライアントから要求があった場合、A-マスターページを更新すれば、Main マスターページが自動的に更新されます。
後ほどこのチュートリアルでは、2 つの異なるサイトセクション上で、外観の異なる 2 つの異なるマスターを作成します。ただし、現時点では、A-マスターページを使用する代わりに、新しい Main マスターページを使用してプランビューに含まれるページをすべて更新できます。
- Main マスターページをクリックして、左上隅にある food ページのサムネールにドラッグします。Main マスターページのサムネールをドラッグして food ページのサムネールにドラッグすると、food ページのサムネールの下にある青色のテキストが [A-マスター] から [Main] に更新されるのが分かります。
これは、プランビューでマスターページを他のページに適用する最も一般的な方法ですが、次のようにコンテキストメニューを使用してマスターページを適用することもできます。
- events ページのサムネールを右クリックして、表示されるコンテキストメニューでマスター／Main を選択します。
- （手順 4 と 5 で説明されている）お好みの方法を使用して、Main を残りの 3 つのページ（Home、about および visit）のマスターページとして設定します。
この変更を加えると、各ページのサムネールの下にあるすべての青色テキストのラベルに [Main] と表示されます。いずれかの青色ラベルの上にカーソルを合わせると、適用されたマスターページの階層を示すツールヒントが表示されます。
この例では、階層の深さは 1 レベルのみです。つまり、Main マスターページは、A-マスターページのコンテンツを継承しています。しかし、必要に応じて、一連のマスターページを作成できることにご注意ください。例えば、ヘッダーコンテンツのみを含む ヘッダーという名前のマスターページを作成してから、ヘッダーマスターページを継承する フッターという別のマスターページを作成できます。次に、（ヘッダーも含む）フッターマスターページのコンテンツすべてを継承する マスターという別のマスターページを作成できます。サイトのデザイン、および一部の要素が変更する可能性があるという知識に応じて、複数のレベルから成る階層のレベルを構築できます。このような方法でのデザインの区分は記号の作成に似ています。これは、特定のデザイン部分を隔離してから、必要に応じて、後から簡単にその部分を見つけて、編集できるためです。
次のチュートリアル「Muse で初めての Web サイト制作 | パート 2」に進んでください。ここでは、ウィジェット（ページにドラッグできる事前に構築済みのインタラクティブなサイト機能）の使用について学びます。ウィジェットを使用すれば、コードを作成せずに、詳細な機能をすばやくページに追加できます。サイトのデザインにおいてウィジェットが表示される方法をカスタマイズするため、ウィジェットのビヘイビアーと外観を編集する方法について説明します。
これまでの手順により、Main マスターページにメニューウィジェットを追加することで、フッターを完成しました。次に、トップレベルのサイトナビゲーションを追加します。次の手順に従い、ヘッダー領域にコンテンツを追加します。
- （まだ開いていない場合は）プランビューで、Main マスターページのサムネールをダブルクリックしてページを開き、デザインビューで Main マスターページの編集を開始します。
- 長方形ツールを使用して、ブラウザー表示領域の左上隅から右上隅までの幅全体にわたる長方形を描画します。選択ツールを使用して、長方形が 100％幅に設定されたことを示す赤色の境界線が一時的に表示されるまで、長方形の上部、左側および右側のハンドルをドラッグします。
ハンドルをドラッグした後、長方形のサイズは約 1160 ピクセル（幅）x 253 ピクセル（高）になります。水平方向の X 値は -100 になります。これは、長方形の左上隅がページの左上隅から 100 ピクセル離れた位置に来ることを示します。Y 値は 0 になります（これは、長方形の左上隅がページの左上隅と垂直方向に揃うことを示します）。これらの値を正確に設定する場合、長方形を選択しながら、変形パネルまたはコントロールパネル内のフィールドを確認できます。
- 線幅を 0 に設定し、塗りメニューを使用して塗りのカラーを「なし」に設定します。画像セクションの右にあるフォルダーをクリックして、tile-header.png という名前の画像を参照して選択します。サイズ調整メニューを「横に並べて表示」に設定します。
ヘッダーは単一の長方形で構成されますが、横方向に長方形を埋めるタイル背景画像により、黒色の長方形の上にグレーの長方形が存在するような印象が生み出されます。
- ファイル／配置を選択するか、Command-D キー（Mac）またはControl-D キー（Windows）のキーボードショートカットを使用して読み込みダイアログボックスを開きます。
- サンプルファイルフォルダーに含まれる bg-ribbon.png ファイルを参照して選択します。開くをクリックしてファイルを選択するか、読み込みダイアログボックスを閉じます。
- ページの上部付近にあるヘッダー長方形の中央を一度クリックします。これにより、bg-ribbon.png ファイルの単一インスタンスが元の寸法で配置されます。
- 選択ツールを使用して、オレンジ色のリボンのグラフィックをヘッダーの上部付近で垂直方向に中央揃えにし、ページの幅全体にわたるように配置します。
Main マスターページ内のヘッダーコンテンツが完成しました。単にサイト内にある各ページの Main マスターページを使用できますが、このサイトデザインは 2 つのセクションで構成されます。Main マスターページは、最終的に home ページと visit ページに使用されます。2 番目のわずかに異なるマスターページは、food、events、about のページに使用されます。
Main マスターページを複製するには、以下の手順に従います。
- プランビューで、Main マスターページのサムネールを右クリックします。
- このとき表示されるコンテキストメニューで、「ページを複製」を選択します。
新規マスターページが Main マスターページの右に表示されます。このページのデフォルト名は「Main copy」です。Main マスターページを複製しているので、新規マスターも既に A-マスターページに基づいています。
- 先ほど作成したマスターページの下にある名前フィールドをダブルクリックして、名前を「Foreground」に変更します。
次のセクションでは、マスターページ内で要素を配置する方法について学びます。これにより、常にページ要素の下に項目を表示する代わりに、ページ要素の上に表示できるようになります。この時点で、作業内容を保存することをお勧めします。
- ファイル／サイトを保存を選択します。
マスターページの複製を作成する利点の 1 つとして、一部のコンテンツを他のページコンテンツの上に表示するように設定できることが挙げられます。これにより、配置／最前面へを選択した場合とほぼ同じ効果が得られます。food ページと events ページには、この「最前面」ビヘイビアーが望ましいです。
マスターページ要素の重なり順を設定する機能は、Muse 4.0 で利用可能な新機能です。以前のバージョンでは、ページレイアウト内の他のコンテンツの上のレイヤーに、共通のサイトエレメントを重ねて配置する場合、マスターページではなく、各ページにヘッダー要素とフッター要素を配置する必要がありました。
Muse では、デザインビューのインターフェイスを使用すると、あるページ要素を選択してから、オブジェクト／最前面へ、前面へ、最背面へまたは背面へを選択して、ある項目をページ上の別の項目の上または下に表示できます（要素またはグループを右クリックして、配置／最前面へ、前面へ、最背面へまたは背面へを選択して重なり順を設定することもできます）。
以前のバージョンの Muse でサイトをデザインする場合、ページをレンダリングしたとき、マスターページ上の要素は常にページ上のすべての要素の後ろに表示されるのがデフォルトのビヘイビアーでした。通常ならマスターページに配置する要素をすべてのサイトページにコピーしてペーストすることが唯一の回避策であるため、この背面レイヤー化は（サイトのデザインによっては）問題となる場合がありました。
Muse には、マスターページにおける要素の配置を制御する新機能が含まれています。この新機能により、マスターページ上にあるすべての要素を常にページ要素の後ろに表示する代わりに、マスターページ上にある要素を選択して、前面要素として表示するように選択できるようになりました。マスターページ上で前面要素として設定された項目は、常にすべてのページ要素の上に表示されます。
この新しいオプションは、オブジェクト／移動先／マスター背面へを選択することで利用できます。また、マスターページを編集中にデザインビューで任意の要素を右クリックして、表示されるコンテキストメニューで移動先／マスター背面へを選択できます。
このサンプルプロジェクトのデザインでは、home ページと visit ページ内のコンテンツにデフォルトの重なり順を使用することが要求されますが（ページ要素は Main マスターページ内でヘッダーの上に表示されます）、food、events、about のページには要求されません。
food ページと visit ページでは、前面マスターページを更新するので、ページをスクロールするに伴い、ヘッダーコンテンツが前面に移動し、ページコンテンツの上に表示されます。次の手順に従います。
- （まだ開いていない場合は）プランビューで、前面マスターページのサムネールをダブルクリックしてページを開き、デザインビューで前面マスターページの編集を開始します。
- 選択ツールを使用して、ヘッダーコンテンツ全体をクリックし、ドラッグして選択します。ヘッダーコンテンツは、タイル張りの背景画像を含む長方形、配置されたオレンジ色のリボングラフィック、メニューウィジェットおよび中央にあるアニメートされた GIF ロゴで構成されます。
- ヘッダーコンテンツ全体を選択した状態で、右クリックして移動先／マスター前面へ移動を選択します。選択されたオブジェクトに対して表示される通常の青色の境界線とは異なり、前面に表示するように表示された項目には、選択したときに赤色の境界線が表示されます。
これにより、前面マスターページを適用したページ上では、ヘッダーがページ要素の上に表示されます。
- ヘッダー全体を選択しながら、ページの上にピン止めすると、ページをスクロールしても、ヘッダーはページと一緒にスクロールしません。パート 7 では、ピン止めしたオブジェクトについて詳しく学びますが、ここではコントロールパネル内の上部中央にあるピン位置をクリックして、ヘッダーをピンで固定します。
- 前面マスターページをクリックして food ページ上にドラッグし、適用します。この手順を 2 回繰り返し、前面マスターページを events ページと about ページに適用します。
この変更を加えると、青色のラベルテキストに [Foreground] という文字が表示されます。これは、food、events および about ページに前面マスターページが適用されていることを示します。青色の [Foreground] ラベルの上にマウスを合わせると、前面マスターページが A-マスターページに基づいていることを示すツールヒントが表示されます。
独自のサイトプロジェクトをデザインするとき、「前面へ移動」の新機能を試して、マスターページ上にある要素を前面に表示するように設定できます。このチュートリアルシリーズの後半では、food ページと events ページのデザインを完了して、前面設定により、ヘッダーがページ上にある他のコンテンツの前面に表示されることを確認できます。
このチュートリアルの次のセクション「Muse で初めての Web サイト制作 | パート 4」では、埋め込み HTML を使用して他の Web サイトからコピーしたコードを表示する方法について説明します。ライトボックスコンポジションウィジェットを追加して、ホームページを構築する方法についても学びます。
このセクションでは、マスターページの使用方法、共通のサイトコンテンツを複数のマスターページに表示して、サイトの異なるセクションを作成しながら一貫性を確保する方法について詳細に学びます。また、一部のサイトデザインでは、複数のマスターページを作成してそれぞれのページに特定のグラフィックを配置するほうが便利な場合があるため（4 色に色分けされたサイトなど）、マスターページからエレメントを移動する方法についても学びます。また、通常はマスターページ上にあるエレメントを特定の個々のページに移動して、アイテムを互いの上部にレイヤー化して配置するなど、デザイン効果を作成する方法についても学びます。
マスターページに配置されるオブジェクトは、個々のページに配置するコンテンツの下にレイヤー化されて表示されます。例えば、ホームページのヘッダーまたはフッターに配置するオブジェクトは、マスターページのヘッダーとフッターに配置された背景の上にレイヤー化されて表示されます。この理由により、マスターページからエレメントを移動し、個々のページに配置してページ上の他のエレメントの上に表示しなければならない状況が発生することがあります。
マスターページに追加したコンテンツは、後でマスターページを開いて編集する必要があります。マスターページに関連付けられたページを開いて、ヘッダー、フッター、または他のマスターページコンテンツを編集しようとすると、ロックされていることがわかります。マスターページのコンテンツを変更する必要がある場合は、次の 2 つの方法を使用できます。
必要に応じて、既存のマスターページを複製することもできます。ほとんどのページで 1 つのマスターを使用し、特別なページでマスターの複製の類似バージョン（複製のマスターページからサイトの特別なページにコピーされた特定のエレメントを含む）を使用するようにサイトを設定できます。マスターページを複製する方法について詳しくは、次のサブセクションを参照してください。
マスターページではなく、個々のページにオブジェクトを配置したら、必要に応じてページごとにオブジェクトを編集して、最上部にオブジェクトが表示されるようにすることができます。
このサンプルプロジェクトでは、サイトで、ヘッダーのサイトナビゲーションのすぐ上に Kevin's Koffee Kart ロゴ（バナー付きの赤色の自転車）が現在表示されています。デフォルトで、ホームページ（および作成した他のすべてのページ）はコンテンツを含んでいる A-マスターページにリンクされているため、ヘッダーおよびフッターコンテンツは、すべてのページに自動的に表示されます。多くの場合、同じマスターページを使用してサイト間の一貫性を確保した Web サイトを制作したいと考えます。
ただし、このサイトには、ホームページのみに表示される独特なアニメーション化されたロゴがあります。Kevin's Koffee Kart サイトのライブサンプルをレビューすると、ページが初めて読み込まれたときにホームページ上で赤色の自転車ロゴのアニメーションが 1 回表示され、ページの左から右に自転車が動くことがわかります。クリックして他のページに移動すると、アニメーションはホームページでのみ表示され、サイトのページの他のすべてのロゴは静止していることがわかります。
以降のサブセクションでは、複製マスターページの作成方法と、ページを割り当ててプランビューで特定のマスターページを使用する方法について学びます。
-
A-マスターサムネールにカーソルを合わせます。マウスポインタを置くと、サイトマップに新規ページを追加したときと同じプラス（+）記号アイコンが表示されることがわかります。A-マスターサムネールの右側にあるプラス（+）記号をクリックします。全く新規にマスターページを一から作成する場合には、いつでもこの方法を使用できます。サムネールは空白になっており、A-マスターページに追加したコンテンツは含まれていません。新しいマスターページの名前は、デフォルトで B-マスターとなりますが、サムネールの下のフィールドをクリックすると、必要に応じて名前を変更することができます。
ここでは、全く新しい空白のマスターページを作成するのではなく、既存の A-マスターのコピーを作成します。
適用すると、プランビューのホームページサムネールの下の括弧内に MasterFlash マスターページの名前が表示されます。
「プレビュー」をクリックした場合、ホームページでの違いはわかりません。MasterFlash は A-マスターファイルの複製のコピーであるため、ホームページは以前と同様に表示され、静止したロゴが表示されます。ただし、次のサブセクションでは、MasterFlash のコンテンツを編集し、ホームページ上でのみ表示されるアニメーションを追加します。
ほとんど同じで少し異なる複製を使用するため、マスターページは Web サイトの特定のセクションを区別するうえで優れた方法であるばかりでなく、このプロジェクトで説明しているようにホームページを一意なものにします。
このチュートリアルでは、マスターページの使用について学びます。ここでは、3 つのサイトレイアウトを検討して分解し、マスターページ内で一般的なエレメントを使用して興味深い効果とサイトの一貫性を実現できる方法を探索します。
最初に、マスターページとは何でしょうか? マスターページを使用すると、ヘッダー、フッター、ロゴ、およびサイト内の複数のページへのナビゲーションなど、一般的なエレメントを適用できます。1 つのマスターページをサイトに使用したり、複数のマスターページを設定できます。これにより、独自のスタイルをサイトの別々のセクションにすばやく一貫して適用することができます。
デフォルトでは、新規サイトを作成するときに、Muse は空白のホームページと空白のマスターページを作成します。これらのページは Web サイトの起点です。空白のページを使用してサイトマップを計画し、マスターをこれらのページに後で適用できます。また、マスターから始めて、マスターを単一のページ（ホームページ）に適用し、そのデザインに基づいて新しいページを作成することにより、Web サイトを作成することもできます。
新しいサイトデザインの方法を学習する優れた方法は、種々のマスターページのレイアウトをレビューすることです。この記事では、Muse で作成した 3 つの異なるサイトレイアウトを検討し、元々どのように構築されているかを探索します。
各サンプルサイトのアセットに沿って開きたい場合は、サンプルファイルをダウンロードし、ZIP ファイルを圧縮解除し、各 .muse ファイルをダブルクリックして Muse で開いてください。
各サンプルサイトをチェックアウトする際に、サイトデザインの作成に使用されているいくつかの機能に注目してください。これらの機能は訪問者がサイトコンテンツを見つける際に訪問者の移動を容易にし、役に立ちます。
- すべてのページのサイズを定義するサイトプロパティの設定
- ガイドを使用した、マスターページのヘッダーおよびフッター領域の定義
- オブジェクトをブラウザーウィンドウに固定し、ページレイアウトの外に配置
- 背景画像の塗りをスクロールまたは固定位置に設定し、興味深い効果を作成
- 長方形を拡張してブラウザーの幅にまたがる 100% 幅で表示
- アコーディオンウィジェットとスライドショーウィジェットを追加してインタラクティブなページコンテンツを表示
- メニューウィジェットをカスタマイズおよびスタイル設定し、サイトナビゲーションを提供
- 特定のページセクションに垂直または水平にジャンプするアンカーリンクを作成
- サードパーティサイトからコード（埋め込み HTML）をペーストしてページに機能を追加
例の各サイトにアクセスして、ブラウザーウィンドウのスクロールとサイズ変更を試し、ライブで例がどのように動作するかを確認してください。次に、Muse で各.muse ファイルを開き、サイトレイアウトを標準化してより統合されたオンラインエクスペリエンスを作成するためにマスターページがどのように使用されているかを確認してください。
最初の例では、フッターグラフィックがブラウザーウィンドウの一番下に固定されています。また、フッター背景は 100% 幅に設定されているため、ページの下に横方向いっぱいに広がっています。フッター背景の後ろで長いページコンテンツがスクロールし、グラデーションの空の効果を創造しています。左側のアンカーリンクをクリックすると、対応するセクションまでページが縦にスクロールします。半透明のグラフィックエレメントと巧みなスタッキングの順序により、バルーンの飛行体験が伝わりやすくなっています。
このサイトの .muse ファイルを検討すると、次のことがわかります。
マスターページで、一連のグラデーション塗りの長方形が長いページコンテンツのバックドロップを提供しています。
- ホームページには、100% 幅に広がるように設定された水平方向のタイル背景画像を持つフッターグラフィックがあり、ブラウザーウィンドウの一番下に固定されています。2 番目のフッターグラフィック（山頂）は中心に配置され、これもブラウザーの一番下に固定され、他のタイルフッターグラフィックよりも手前に表示されるように配置されています（配置／最前面へを選択）。この方法は任意のモニターサイズに対応します。
- 左側のナビゲーションリンクは、、縦長のページに追加されたアンカータグにジャンプします。訪問者がリンクをクリックすると、ページがスクロールして対応するコンテンツが表示されます。新しいサイトセクションが表示されると、デザインの釣り合いが十分にとれており、統一されていることがわかります。
- ホームページのコンタクトセクションには、コンタクトフォームエレメントを表示する埋め込み HTML が使用され、訪問者とのコミュニケーションと次回のアドベンチャーのスケジュールが促進されます。
Kevin's Koffee Kart サイトのホームページは、ヘッダーと、固定された雲のグラフィックに Flash アニメーションを含んでいます。スクロールバーを使用してページ内を移動すると、背景画像が固定され、スクロールしないことがわかります。しかし、ページコンテンツは背景画像の上でスクロールします。スライドショーが自動的に再生され、埋め込み HTML の Twitter フィードの下で画像が切り替わります。
ヘッダーのメニューバーは、安定したサイトナビゲーションボタンを作成するためにメニュー（横）ウィジェットを使用して作成され、これらのボタンは新しいページを追加すると自動的に更新されます。この例で、メニューウィジェットはトップレベルページとサブレベルページの両方を表示するように設定されています。
メニューを操作して、ボタンをクリックすると各ページがどのように読み込まれるかを確認してください。ヘッダーとフッターはすべてのページ間で標準ですが、ページの高さはコンテンツに応じて異なります。茶色のフッターは、ブラウザーウィンドウの幅全体に広がる 100% 幅に設定された 2 つの長方形で構成され、各ページに画一性を追加しています。
Kevin's Koffee Kart サイトの作成には、次のデザイン規則が使用されています。
- このサイトは、2 つの類似するマスターページを組み込んでいます。1 つは Flash メディアなしのマスターページで、ほとんどのサイトページに適用されています。2 番目は Flash ムービーを含むマスターページでホームページのみに適用されています。両方のマスターページは、透明なデザインの境界を備えた 100% 幅のフッターを持ち、一貫性のために同じメニューウィジェットを使用しています。最初のマスターを作成した後、すべてのエレメントが完全に整列するように、エレメントをコピーして 2 番目のマスターにペーストしています。
- ページはプランビューで編成され、サイトのトップレベルセクションとサブレベルセクションを作成しています。これはメニューウィジェットのドロップダウンアイテムに反映されます。
- ブラウザー背景として使用されている背景画像マップは、タイルではなくオリジナルサイズで表示されるように設定されています。これは中央に配置され、ページコンテンツの下でスクロールしないように設定されています。
- ページの背景塗りは、背景画像マップが透けて表示されるように、やや透明な単色の白です。
- このホームページには、ブラウザーに固定された半透明の 2 つの雲の画像があります。ページを縦にスクロールすると、固定されたエレメントが動かないこと、またブラウザーウィンドウのサイズを変更しても位置が変わらないことがわかります。
- このホームページは埋め込み HTML を使用して、ライブ Twitter フィードコンテンツを表示します。
- Koffee ページは、ページの密集した領域でクリックしてさらにコンテンツを表示しようとすると、パネルが展開されたり、折りたたまれる、Accordion ウィジェットを特徴としています。
- 起点ページは、インタラクティブな写真ギャラリーを表示するサムネールスライドショーウィジェットを特徴としています。準備ページは、ページの各セクションに移動するためにアンカータグナビゲーションを使用しています。また、Kart Map ページは、アカウントに使用されている携帯電話の現在の位置に基づいて、ライブ Google Latitude マップを表示する埋め込み HTML を含んでいます。
最後の例を表示すると、ビルディンググラフィックが右上と左下隅にページコンテンツの枠を形成していることがわかります。右上隅のビルディンググラフィックは前に配置され、ページコンテンツの上に重なって表示されますが、左下のビルディングはページコンテンツの下に表示されます。
ページコンテンツは中央に配置され半透明で、角を丸めた建築エレメントから際立っています。ページコンテンツは縦にスクロールし、各ページをクリックするとページの高さが変わります。ソーシャルネットワークリンク（Twitter、Facebook、および YouTube）がページの左側にあり、相互リンクを促進し、サイト全体で一貫した非対称のデザインを表しています。
このホームページは、「Next」ボタンと「Previous」ボタンナビゲーションを使用する写真ギャラリーを特徴としています。このナビゲーションは訪問者がこれらのボタンをクリックしない場合にスライドショーをゆっくりと再生するようにも設定されています。How to Get Here ページは、Google Maps からコピーした埋め込み HTML コードで作成されたインタラクティブマップを含んでいます。
この例のソース .muse ファイルをレビューして、次のことを検討してください。
この例では、ほとんどすべての共通のページエレメントがマスターページにあります。この方法は、サイトの更新と個々のページコンテンツの変更を容易にします。
このマスターページは、ブラウザーの左下に固定された、スクロールしない背景グラフィックをフッター画像に含んでいます。また、マスターページはサイトナビゲーションを備えた、角を丸めた半透明のページデザインも含んでいます。
すべてのサイトページには、固定されたグラフィックが右上隅にあります。このグラフィックはページコンテンツの前に表示されるように配置され、ビルディング画像の角度を通じて伝えられる景観の錯覚を作り出しています。
Muse は、デザインを Web に持ち込むことができる直観的なデザインツールです。マスターページでのエレメントのクリエイティブな配置と、各ページに表示される独特なコンテンツにより、ユーザーは感動的なレイアウトを作成できます。革新的なサイトをクライアント向けに作成する際には、ユーザーの想像力が必要です。
Muse の使用に関するヒントについては、Muse ヘルプとチュートリアルページを、ライブおよび記録されているウェビナーについては、Muse イベントページを参照してください。
Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。