この記事では、Adobe Muse でレスポンシブデザインをはじめる方法について説明します。任意のデバイス用のレスポンシブサイトを作成する方法について学習します。

注意:

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

レスポンシブサイトを作成する際、特定のデバイス、OS、または製品ブランドに基づいてブレークポイントを追加することがあまり役に立たない場合があります。これらの要因に基づくブレークポイントの定義は、手間がかかることが分かっています。その代わりに、Web サイトのレイアウトとコンテンツによって、ブレークポイントを追加する方法と場所を決めるべきです。

以下で、Adobe Muse を使用してレスポンシブサイトを作成する場合の推奨デザインアプローチについて説明します。

1

サイトを作成します。新規サイトダイアログボックスから可変幅を選択します。

空白スペースや他のデザイン上の問題を回避するには、ページの寸法を設定します。「詳細設定」をクリックして、サイトの最小、最大のページ幅、および最小高さを設定します。


新規サイトダイアログボックスで、可変幅を選択します。
新規サイトダイアログボックスで、可変幅を選択します。

 

 

 

2

マスターページまたは個々のページを開きます。初期設定のブレークポイントが 960 ピクセルになっていることに注意してください。


初期設定のブレークポイントが 960 ピクセルになっていることに注意してください。
初期設定のブレークポイントが 960 ピクセルになっていることに注意してください。

 

 

 

3

このブレークポイントで、テキスト、画像、スライドショー、ウィジェットなどのページエレメントのレイアウトを開始します。


Web ページをレイアウトします。
Web ページをレイアウトします。

 

 

 

4

スクラバーを使用して、さまざまなブラウザー幅をシミュレートします。異なるブラウザー幅でサイトがどのように表示されるかを確認してください。


スクラバーを使用して、異なるブラウザー幅で Web サイトがどのように表示されるかを確認します。
スクラバーを使用して、異なるブラウザー幅で Web サイトがどのように表示されるかを確認します。

 

 

 

5

デザインが崩れる場合は、ブレークポイントを追加します。例えば、前の画像で、スクラバーをドラッグしたときに、テキストボックスが幅をはみ出ています。デザインが崩れる場合は、その幅でブレークポイントを追加します。


デザインが崩れる場合は、ブレークポイントを追加します。
デザインが崩れる場合は、ブレークポイントを追加します。

 

 

 

6

サイトのレイアウトが適切に表示されるように、新しいブレークポイントでレイアウトを調整します。


ブレークポイントでのレイアウトの調整
ブレークポイントでのレイアウトの調整

 

 

 

7

最小幅になるまでサイトのプレビューを続けます。ブレークポイントを追加し、必要に応じてレイアウトを微調整します。


このデザインアプローチにより、どんなデバイスからでも、サイトが任意のブラウザー幅で良好に表示されます。デザインが、特定のデバイスサイズ、または画面サイズに依存しません。

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

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