Adobe Muse でレスポンシブデザインをはじめる

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

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

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

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

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

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

 

 

 

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

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

 

 

 

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

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

 

 

 

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

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

 

 

 

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

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

 

 

 

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

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

 

 

 

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

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

アドビのロゴ

アカウントにログイン