注意:

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

レスポンシブ Web デザインは、デスクトップモニターからモバイル画面に至るまで、様々なデバイスで表示できる Web サイトを作成するときのアプローチです。Adobe Muse では、任意の画面サイズでコーディングなしでレスポンシブ Web サイトを作成できます。レスポンシブレイアウトは、Web サイトによる一貫したブラウジングエクスペリエンスをユーザーに提供します。

Adobe Muse の以前のバージョンでは、代替レイアウトを使用してサイトを作成していました。レスポンシブレイアウトを導入すると、すべてのデバイスに対して 1 つの .muse ファイルを保持するだけで済みます。

モバイル専用およびモバイルフレンドリーのサイトがますます普及するなかで、レスポンシブレイアウトを使用すると、コスト、時間、および労力が節約できます。さらに、特定のブレークポイントに対するページデザインを柔軟に変更することもできます。今後はモバイルサイトが一般的になるでしょう。レスポンシブでモバイルフレンドリーのサイトは、検索ランクが上がり、モバイル検索やデスクトップ検索での SEO ランキングも上昇します。

テクノロジーやデバイスが発展するにつれて、レスポンシブレイアウトが一般的なものになる可能性があります。Adobe Muse でレスポンシブサイトを作成およびデザインする方法、または代替レイアウトからレスポンシブレイアウトに移行する方法について説明します。

ブレークポイントについて

レスポンシブレイアウトのブレークポイントでは、異なるブラウザー幅に対して異なるレイアウトを定義できます。ブレークポイントはブラウザー幅をピクセルで表し、最小値、最大値、または最小 - 最大値で表される画面サイズを示します。各ブレークポイントでのデザインのビューが、対応するブラウザー幅でユーザーにどう見えるかを示します。ブレークポイントにより、異なるブラウザー幅でのデザインをイメージするとともに、ブラウザー幅の変化にページ上のオブジェクトがどのように反応するのかをテストできます。

定規のすぐ下にあるブレークポイントバーには、ページ上のすべてのブレークポイントが表示されます。

ブレークポイントバー
A. ブレークポイントバー B. アクティブなブレークポイント C. スクラバー 

関連付けられているブラウザー幅とページサイズ値は、マウスをブレークポイントバーに移動すると表示できます。

ブレークポイントをクリックすると、アクティブなブレークポイントがカラーでハイライトされます。残りのブレークポイントはグレーアウトされます。ブレークポイントのカラーは、ブレークポイントプロパティ(ブレークポイント/ブレークポイントプロパティを右クリック)で表示および変更できます。

ブレークポイントプロパティ

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

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