注意:

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

レスポンシブデザインは、Adobe Muse の 2016 年 2 月リリース以降でサポートされます。Web サイトを 2016 年 2 月リリース以前のバージョンで作成した場合は、サイトをレスポンシブデザインに変換できます。

レスポンシブレイアウトへ移行すべき理由

代替レイアウトを使用している既存の Adobe Muse プロジェクトがある場合は、プロジェクトをレスポンシブレイアウトに移行できます。ただし、代替レイアウトでの作業を続行したい場合は、そうすることもできます。 

レスポンシブサイトは通常、多くのコーディングや複雑なテンプレートが必要となることを意味します。Adobe Muse は初めて、コーディング、グリッド、およびテンプレートを必要としないレスポンシブサイトを作成する機能を提供します。さらに、1 つのファイルを使用して、どのデバイスでも最適なレイアウトで表示される、完全にレスポンシブなサイトを作成することができます。個別のレイアウトは、今や完全に過去のものとなりました。

テキストや画像の更新にも、Adobe Muse のレスポンシブデザインが非常に便利です。同じ変更を行うために、各レイアウトの更新に何時間も費やす必要はありません。また、ブラウザーを使用してサイトのコンテンツを編集できるアプリケーション、In-Browser Editing もレスポンシブレイアウトをサポートしています。

Adobe Muse では、サイトをデザインするための柔軟性も強化されています。特定のブレークポイントの特定のオブジェクトを表示/非表示にする選択が可能です。例えば、モバイルデバイスを使ってサイトを表示する場合、タッチ操作が可能なメニューオプションの表示を選択できます。また、オブジェクトをある場所に固定したり、特定のブレークポイントにオブジェクトの位置を移動することもできます。

以下で、既存の Adobe Muse サイトをレスポンシブレイアウトに移行する方法について説明します。サイトをレスポンシブデザインに移行して、未来の進化に対応した Web サイトにしましょう。

代替レイアウトをレスポンシブレイアウトに移行する方法

Web サイトをレスポンシブに移行する前に、Adobe Muse でレスポンシブレイアウト Web デザインの概要を確認しておきます。

サイトのレスポンシブレイアウトへの移行は次の手順で開始します。

  1. 既存の Web サイトを開きます。

  2. Web サイトの各ページを開き、ページページプロパティをクリックします。

    ページプロパティをクリックする
  3. レイアウト」タブで、固定幅可変幅に変更します。また、最小、最大のページ幅、インデントおよびパディングをこのウィンドウで設定することもできます。

    OK」をクリックします。

    固定幅を可変幅に変更する
    ページプロパティウィンドウで固定幅を可変幅に変更します。

  4. 追加する新しいページも可変かどうかを確認するには、ファイルサイトプロパティをクリックします。このウィンドウで固定幅可変幅に変更します。

  5. レイアウトの最大ページ幅、最小幅、最小高さを選択します。

  6. OK」をクリックします。

  7. マスターページと個々のページに移動して、可変幅でページを開きます。

    レスポンシブデザインを有効に使うには、スクロール効果を無効にします。特定のページにスクロール効果を残す場合は、そのページを固定幅のまま継続します。

    可変幅でページを開くと、ページ内のオブジェクトはデフォルトで固定幅の設定になります。また、オブジェクトは左側に固定されます。

  8. ブラウザー幅に比例してオブジェクトがサイズ変更されるように、オブジェクトを可変にします。可変にする必要がある各オブジェクトを右クリックして、レスポンシブオプションを選択します。

    オブジェクトを可変にする場合は、固定を解除します。固定を解除するには、オブジェクトを右クリックして、ページに固定/可変を選択します。

  9. スクラバーを使用し、様々なブラウザー幅でページレイアウトを表示します。

    一部のウィジェットは可変ではありません。これらのウィジェットによってデザインが崩れる場合は、これらのページ幅でブレークポイントの追加を行います。この場合、そのブレークポイントのウィジェットをサイズ変更したり、非表示にすることができます。

    初期設定では、以前のバージョンで作成した Web サイトを操作するときには、ブレークポイントバーは表示されません。ブレークポイントを表示するには、表示/ブレークポイントを表示をクリックします。

    表示メニューを使用したブレークポイントの表示
    表示/ブレークポイントを表示をクリックします。

    注意:

    レイアウトをレスポンシブデザインで計画する場合、まず最大ページ幅でページをレイアウトします。次にスクラバーを使って、様々なブラウザー幅でページを表示します。デザインが崩れる場合は、その幅でブレークポイントを追加します。それから、ブレークポイントでレイアウトを調整します。

    一般的に、ユーザーデバイスの画面サイズではなく、サイトのレイアウトに基づいてブレークポイントを追加してください。

  10. あらゆるブラウザー幅で良好なレイアウトが表示されるように、オブジェクトのサイズと位置を調整し、テキストをフォーマットします。レスポンシブレイアウトでオブジェクトをレイアウトする方法について詳しくは、「Adobe Muse のレスポンシブサイトにオブジェクトをレイアウトする」を参照してください。

    注意:

    オブジェクトをレイアウトするときは、オブジェクト間の距離およびオブジェクトとブラウザーの端との距離を確認します。ブレークポイント間で発生するデザインの問題を解決するために、場合によってはオブジェクトの配置を調整したり、ブレークポイントをさらに追加したりする必要があります。

  11. すべてのブレークポイントで、テキストの整列と読みやすさを確認します。テキストボックスを再整列するか、特定のページ幅に合わせてテキストをフォーマットしたい場合は、「レスポンシブレイアウトでのテキストのフォーマット」を参照してください。

  12. スクラバーを特定のブレークポイントにドラッグして変更をプレビューするか、Web ブラウザーで変更をプレビューします。

  13. 他のデバイス用に作成した Web サイトの代替レイアウトを削除します。レスポンシブ Web デザインでは、1 つのキャンバスであらゆるデバイスのサイトを移行および保持できます。

これでレスポンシブ Web サイトはパブリッシュの準備ができました。

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

リーガルノーティス   |   プライバシーポリシー