この記事では、Adobe Muse でブラウザーおよび背景塗りオプションを適用する方法について説明します。

注意:

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

Adobe Muse のブラウザー塗りと背景画像

サイトの Web デザインを計画する際、背景塗りがデザインの重要な部分となります。Adobe Muse の背景塗りを使用すると、Web サイトの背景色や画像を追加することができます。背景画像を使用して、製品またはサービスのブランド価値を伝えることができます。同様に、背景塗りを使用してデザインの価値を高めたり、サイトのカラーテーマに合わせたりすることができます。

背景塗りを追加してブラウザーでサイトを表示すると、選択した画像やカラーがブラウザーウィンドウに背景として表示されます。デザインを統一して一貫性を持たせるには、マスターページに背景塗りを適用します。

以下の記事では、Adobe Muse で背景塗りを適用する方法について説明します。次のいずれかの操作を行います。

ブラウザーを背景色で塗りつぶす

  1. プランビューで A-マスターページのサムネールをダブルクリックすると、デザインビューでこのページが開きます。

    A-マスターページがワークスペースの最上部に沿ってタブ内で開きます。

    コントロールパネルの左上隅にある選択範囲インジケーターに注意してください。ページ要素が選択されていない場合、選択範囲インジケーターに「ページ」という文字が表示されます。ページ上のオブジェクト、例えば画像を選択すると、「画像フレーム」という文字が選択範囲インジケーターに表示されます。

    選択範囲インジケーターを使用して、制御する選択した要素を確認します。他のページ要素を選択した場合は、ページ外のグレーの領域をクリックしてページを再選択できます。

    ページを選択しながら、コントロールバーにあるメニューを使用して、塗りと線のカラーの設定を更新できます。

  2. コントロールパネルで、ブラウザー背景をクリックします。「カラー」フィールドから目的のカラーを選択します。背景塗りのカラーを選択するには、次のいずれかを実行します。

    • カラーピッカーを使用してカラーを選択します。
    • RGB 値を入力します。
    • Hex# フィールドに 16 進コードを入力します。
    • 既に保存されているスウォッチからカラーをクリックして選択します。
    背景塗りとして色を設定する
    背景塗りとして色を設定する
  3. 単色またはグラデーションの塗りカラーを適用するには、ブラウザー背景パネルで、単色またはグラデーションを選択します。ラジオボタンを使用して、単色またはグラデーションの塗りカラーのいずれかを選択します。

  4. グラデーションを適用するには、「塗りの種類」を「グラデーション」に設定します。カラースウォッチを設定して、最初と最後のカラーストップを設定します。

    グラデーションの塗りオプションを設定する
    グラデーションの塗りオプションを設定する
  5. 「方向」を「水平方向」または「垂直方向」に設定し、グラデーションの方向を設定します。

  6. コントロールパネルで、塗りをクリックします。ページの塗りカラーが「なし」に設定されていることを確認します。「塗り」メニューには、赤い対角線の入った白いスウォッチが表示されます。

    Adobe Muse で「塗り」を「なし」に設定する
    「塗り」を「なし」に設定する

背景に画像を埋め込む

背景塗りとして画像を使用することは、Web デザインでは一般的です。Adobe Muse では、繰り返し画像または単一画像を背景に埋め込むことができます。さらに、背景画像の位置およびスクロール特性を選択することも可能です。

Adobe Muse で背景塗りとして画像を使用する方法については、以下を参照してください。

  1. .muse ファイルのマスターページを開きます。

    特定のページに背景画像を追加することができます。ただし、デザイン内のすべてのページに背景画像を表示する場合は、マスターページに移動します。

  2. コントロールパネルで、「ブラウザー背景」をクリックします。「塗りの種類」が「単色」に設定されていることを確認します。

    ブラウザーウィンドウに表示する背景画像を設定します。
    ブラウザーウィンドウに表示する背景画像を設定します。

    注意:

    「塗りの種類」を「グラデーション」に設定すると、画像を背景塗りとして設定することはできません。

  3. 背景塗りとして画像を選択するには、「画像の追加」リンクをクリックします。ローカルコンピュータから目的の画像ファイルを参照して選択します。「開く」をクリックして、背景画像を設定します。

  4. 背景画像の「サイズ調整」を設定します。次のいずれかのオプションを設定できます。

    • 全体に拡大・縮小:背景画像がサイズ全体に拡大・縮小されます。指定した設定に従って、画像のサイズと位置が調整されます。
    • サイズに合わせて拡大・縮小:画像がサイズに合わせて拡大・縮小されます。
    • 元のサイズ:画像が元のサイズで背景塗りとして適用されます。
    • 並べて表示:画像が背景全体にわたって繰り返されます。並べて表示するオプションにより、サイト訪問者のモニターサイズに関係なく、ブラウザーウィンドウの大きさに合わせて繰り返し使用される、サイズがより小さな画像を作成できます。
    • 横に並べて表示:画像が水平方向に繰り返し並べて表示されます。
    • 縦に並べて表示:画像が垂直方向に繰り返し並べて表示されます。

    並べて表示された背景画像は、Web デザインで一般的に使用されます。サイトをパブリッシュするときに、並べて表示された背景塗りとして設定した元の小さな画像が、ブラウザーで一度だけ読み込まれます。並べて表示された背景画像を使用すると、ダウンロード速度やサイトのパフォーマンスに影響を与えることなく、ページの広い領域を覆うことができます。

  5. 背景画像の位置を設定するには、9 つのグリッド位置から目的の位置を選択します。例えば、中央の四角形をクリックすると、画像がブラウザーウィンドウの中央に表示されます。

    注意:

    背景塗りを削除するには、フォルダーアイコンの横にあるごみ箱アイコンをクリックします。

  6. ブラウザー背景パネルの外側にある場所をクリックすると、このパネルは閉じます。

  7. 背景画像を表示するには、Adobe Muse またはブラウザーでサイトをプレビューします。

ページ要素に対して 100%幅を適用する

訪問者のブラウザーウィンドウがどれだけ拡大縮小されても、100%幅として設定されているアイテムによってブラウザーが横方向に満たされます。ページ要素がブラウザーウィンドウの上端と下端で整列するように設定すると、単色で塗りつぶされたオブジェクトまたはタイル張りのアセットが、使用可能な空間を満たすように拡張されます。

  1. ページ要素に対して 100%幅を設定するページを開きます。必要なページエレメントを選択します。例えば、ページの最下部付近で、ページの幅いっぱいに広がり、かつ高さが約 250 ピクセルの長方形を選択します。

  2. 長方形を選択しながら、線幅を 0 に設定します。選択範囲インジケーターの左上隅に「長方形」という文字が表示されるので、長方形を選択していることがわかります。

    「線の幅」フィールドを使用して、選択された長方形の線幅を 0 に設定します。
    「線の幅」フィールドを使用して、選択された長方形の線幅を 0 に設定します。
  3. コントロールパネルで、塗りをクリックします。「塗り」メニューが「なし」に設定されていることを確認します。赤い対角線の入った白いスウォッチが表示されます。

    「塗り」メニューを使用して長方形の塗りを選択する
    「塗り」メニューを使用して長方形の塗りを選択する
  4. 塗りパネルの画像の追加リンクをクリックします。目的の画像を参照して、画像を選択し、開くをクリックします。

  5. サイズ調整ドロップダウンリストから、横に並べて表示を選択します。このオプションを指定すると、画像が左から右に X 軸を横切って並べて表示されます。

    画像の長方形を 100%幅に設定する
    画像の長方形を 100%幅に設定する
  6. 長方形の変形ハンドルをドラッグして、可視領域の下部に配置します。ページの左側、下側、および右側と交差するように幅を調整します。

    長方形が 100%幅モードに設定されたことを示す赤色の境界線が一時的に表示されます。

背景塗りの不透明度と透明度を変更する

Adobe Museでは、画像を Web サイトの背景として追加するだけでなく、塗りの不透明度を変更することもできます。ページの塗りのカラーを調整して、部分的な透明化を行うことができます。デフォルトでは、Adobe Muse はマスターページに白の塗りを使用します。ページのカラーと透明度は制御できます。

  1. コントロールパネルで、ブラウザー背景をクリックしてメニューを展開します。背景塗りとして追加する画像を選択するには、画像の追加リンクをクリックします。

  2. コントロールパネルで、塗りをクリックして「塗り」メニューを展開します。

  3. 不透明度を 80%に設定します。この設定は、透明度が 20%で、ほとんど不透明です。ページの編集を続けて、境界線を追加したり、追加のグラフィック効果を適用したりできます。

    背景塗りの不透明度を設定する
    背景塗りの不透明度を設定する

背景塗りとスクロール効果

Adobe Muse では、背景塗りとして適用される画像にスクロールモーションを追加することができます。背景画像のスクロール特性を設定する方法については、「背景画像へのスクロール効果の適用」を参照してください。

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

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