Adobe Muse でレスポンシブサイトを作成する方法について紹介します。空白のレイアウトまたは事前定義されたスターターテンプレートを使用してレスポンシブサイトを作成します。

注意:

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

Adobe Muse でのレスポンシブ Web サイトの作成は、次のうちいずれかの方法で開始できます。

  • スターターファイルの使用:Adobe Muse には、カスタマイズ可能ですばやく作成を開始できるレスポンシブスターターテンプレートが用意されています。数回のクリックでスターターテンプレートをカスタマイズし、レスポンシブサイトとしてパブリッシュできます。詳しくは、「レスポンシブスターターテンプレートの使用」を参照してください。
  • 空白のレイアウトの使用:Adobe Muse には、レスポンシブサイトをデザインする際に制限付きのテンプレートやグリッドを使用しない、空白のキャンバスが用意されています。1 つの Adobe Muse ファイルを使用して、ブラウザー幅ごとにさまざまなレイアウトを作成できます。Adobe Muse の新しいレスポンシブ Web サイトを作成するには、新しいレスポンシブサイトの作成を参照してください。
  • 既存の Web サイトをレスポンシブ Web サイトに変換する:Adobe Muse では、既存の Adobe Muse サイトをレスポンシブレイアウトに移行できます。既存の Adobe Muse Web サイトのレイアウトを可変幅に変更し、オブジェクトのレイアウトを微調整してさまざまなブラウザー幅に合わせます。詳しくは、「既存の Adobe Muse Web サイトをレスポンシブレイアウトに移行する」を参照してください。

Adobe Muse でレスポンシブレイアウトのページを開くと、レスポンシブツアーが表示されます。これは、ブレークポイント、オブジェクトサイズの変更、レスポンシブレイアウト向けのテキストの書式設定に関する短いスライドショーです。レスポンシブツアーを継続することも、ヘルプレスポンシブツアーをクリックして、後でこのスライドショーを表示することもできます。

Adobe Muse でレスポンシブデザインをはじめるためのビデオチュートリアルを再生するには、レスポンシブレイアウトに関するビデオチュートリアルを参照してください。

レスポンシブスターターテンプレートの使用

Adobe Muse には、個人用サイト、あるいは写真を展示するサイトなど、さまざまなタイプの Web サイト向けテンプレートが用意されています。

スターターテンプレートにアクセスするには、Adobe Muse ページのスターターデザインのセクションをご覧ください。セクションからテンプレートを選択し、ダウンロードをクリックしてスターターファイルをダウンロードします。

スターターファイルを開くと、事前定義されたテンプレートの付いたマスターページと個々のページセットが、Adobe Muse のプランビューで開きます。トップパネルからデスクトップ(幅 1160 ピクセル)、タブレット(幅 768 ピクセル)、またはスマートフォン(幅 380 ピクセル)のいずれかを選択できます。また、要件に基づいてスターターテンプレートを変更し、スクラバーを使用してページをプレビューすることもできます。

テンプレートをダウンロードしない場合は、スターターデザインのセクションでプレビューをクリックできます。サンプルのサイトがブラウザーで開きます。

新しいレスポンシブサイトの作成

レスポンシブレイアウトを使用するサイトを作成するには、新規サイトダイアログボックスで可変幅オプションを選択します。ブラウザーのサイズに応じてページ内のオブジェクトが自動的に反応して拡大・縮小されます。可変幅オプションでは制限のあるテンプレートや事前定義されたレイアウトの付かない空白のレイアウトで、レスポンシブサイトをデザインすることもできます。

  1. ファイル新規サイトをクリックします。

    newsitefluid
    レスポンシブレイアウトに可変幅を選択する

  2. 可変幅をクリックします。可変幅オプションを選択すると、ページ上のオブジェクトはブレークポイントにわたって可変になります。つまり、オブジェクトが、レスポンシブなビヘイビアーに基づいて、ブラウザー幅に反応します。

  3. 詳細設定をクリックし、サイトの幅、高さ、およびインデントを設定します。サイトをデザインするのに都合の良いブラウザー幅から始めることを選択できます。オブジェクトをレイアウトした後、ブレークポイントを追加して、ブラウザー幅を追加することができます。

    次に、解像度と言語の設定を選択します。「OK」をクリックします。

    advancedsettingsfluid
    可変サイト作成時の詳細設定

    新しいレスポンシブサイトを作成したら、ブラウザー幅に合わせて、画像、テキストなどのオブジェクトのレイアウトを続けます。

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

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