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