注意：
Adobe Muse は、新しい機能が追加されなくなり、2020 年 3 月 26 日にサポートが中止される予定です。詳細な情報と支援については、Adobe Muse のサービス終了ページを参照してください。
レスポンシブデザインでは、オブジェクトおよびテキストの 1 つのレイアウトがすべての画面サイズに合うとは限りません。画像、テキスト、ウィジェット、およびフォームは、異なるブレークポイントでは位置が変更されることがあります。フレームがページ幅からはみだしたり、オブジェクトが互いにぶつかり合ったり、テキストが不明瞭になったりすることがあります。画像、テキスト、ウィジェット、およびフォームは、異なるブレークポイントでは位置を変更する必要があります。このため、様々な画面サイズで適切に表示されるように、十分に考慮してオブジェクトをレイアウトし、テキストをフォーマットすることが重要です。
ページをデザインした後、スクラバーを使用すると、様々な画面サイズでレイアウトをプレビューできます。オブジェクトのレイアウトを特定のブラウザー幅に合わせて変更する必要があると感じた場合は、ブレークポイントを追加できます。
レスポンシブレイアウトのブレークポイントは、さまざまなブラウザー幅をピクセル単位で示します。ブレークポイントにより、異なるブラウザー幅でのデザインをイメージするとともに、ブラウザー幅の変化にページ上のオブジェクトがどのように反応するのかをテストできます。
初期設定で、Adobe Muse の新規サイトにはデスクトップ用のブレークポイント（幅 960 ピクセル）が含まれています。この幅のレイアウトのデザインを開始できます。デザインが完了したら、スクラバーを使って様々な幅でレイアウトをプレビューできます。プレビューすることで、どこでデザインが崩れるのかを確認して記録できます。例えば、1 行のテキストが 2 つに分かれてしまい、1 列に並ぶ複数の画像が垂直に重なって表示されてしまうとします。この場合は、幅にブレークポイントを追加する必要があります。必要なブレークポイントを追加した後、オブジェクトが見栄えよく配置されるようにデザインを微調整できます。
バックエンドでは、すべてのブレークポイントに対し、対応するメディアクエリー宣言が Adobe Muse により Web ページに追加されます。メディアクエリーは、さまざまな画面サイズに対応してコンテンツを表示できる CSS3 です。ほとんどの最新のブラウザーは、これらのブレークポイントに対応したメディアクエリーを解釈できます。様々なデバイスで Web ページを表示する際、ブラウザーに応じて、最適なメディアクエリーおよび対応したデザインレイアウトが選択されて表示されます。
をクリックします。ブレークポイントバーに新しいブレークポイントが追加されます。また、ブレークポイントのブラウザー幅も表示されます。ブレークポイントは、マスターページと個々のページの両方に追加できます。個々のページにブレークポイントを追加すると、ブレークポイントの値はそのページにだけ適用されます。
マスターページにブレークポイントを追加するとき、個々のページで必要なブレークポイントを適用することを選択できます。マスターページのブレークポイントは、個々のページ上に小さな三角形として表示されます。個々のページでこれらのブレークポイントを有効にするには、プラス記号（+）をクリックする必要があります。
このシナリオを考慮します。サイトをレイアウトする際に、スマートフォン用に特定のブレークポイントを追加することが可能です。マスターページに適切なブレークポイントを追加して、個々のページで使用できるようにすることができます。個々のページをさらにデザインする場合は、1 回クリックするだけで、これらのページのブレークポイントを取得できます。
注意：
個別のページに異なるマスターページを適用する場合は、古いマスターページのブレークポイントが新しいマスターページのブレークポイントに置き換わります。
注意：
個々のページからマスターページのブレークポイントは編集できません。
現在のブレークポイントから、次のブレークポイントまたは前のブレークポイントへシフトできます。前または次のブレークポイントに移動するには、次の操作を実行します。
- Windows ユーザー：
- 前のブレークポイント - Ctrl + Shift + 5 キーを押す
- 次のブレークポイント - Ctrl + Shift + 6 キーを押す
- 前のブレークポイント - Ctrl + Shift + 5 キーを押す
- Mac OS ユーザー：
- 前のブレークポイント - Cmnd + Shift + 5 キーを押す
- 次のブレークポイント - Cmnd + Shift + 6 キーを押す
- 前のブレークポイント - Cmnd + Shift + 5 キーを押す
次のオプションを使用して、すべてのブレークポイントでレイアウトが良好に表示されていることを確認します。
- オブジェクトの表示／非表示：オプションであるブレークポイントのオブジェクトを非表示にしながら、別のブレークポイントで表示を選択できます。詳しくは、「オブジェクトの表示または非表示」を参照してください。
- ブレークポイントごとにオブジェクトの位置を変える：1 つのオブジェクトをブレークポイントごとに異なる位置に配置できます。詳しくは、「オブジェクトの配置」を参照してください。
- レスポンシブ固定を使用する：どのオブジェクトを静止にして、どのオブジェクトを可変にするかを決定できます。静止オブジェクトがすべてのブレークポイントで同じ位置に留まるように固定できます。詳しくは、「オブジェクトの固定」を参照してください。
- オブジェクトのサイズ変更：オブジェクトをブレークポイントごとに異なるサイズにできます。また、ページの幅に基づいてオブジェクトのサイズが自動的に調整されるように設定することもできます。オブジェクトのサイズ変更について詳しくは、「オブジェクトのサイズ変更」を参照してください。
- さまざまなブレークポイントに合わせたテキストのフォーマット：ブレークポイントごとにテキストのフォーマットを変えることで、さまざまなブラウザー幅でテキストの見やすさと読みやすさを向上させることができます。詳しくは、「レスポンシブレイアウトでのテキストのフォーマット」を参照してください。
次のようなシナリオを考えてみます：従来のデスクトップ向けメニューを挿入しました。しかし、このメニューは、タブレットの画面では場所を取りすぎています。タブレットデバイスには、サンドイッチメニューやアコーディオンの方がうまく機能します。
Adobe Muse なら、レスポンシブ Web サイトをデザインしながら、このようなシナリオを扱うことも簡単です。以下の画像に示すように、デスクトップビュー用に従来のメニューを、タブレットデバイス用にサンドイッチメニューを表示することを選択できます。
ブレークポイントビューごとにオブジェクトをさまざまな場所に配置できます。例えば、モバイルビューでは画像を垂直方向に配置しながら、デスクトップビューでは画像を水平方向に配置できます。
Adobe Muse では、オブジェクトの位置が記憶され、画面サイズが変更されると、それに従って表示します。
レスポンシブレイアウトでは、複数のオブジェクトをグループとしてまとめて移動できます。垂直に並べられた 1 つのグループを移動する場合、実行する操作は、一番上のオブジェクトを選択するだけです。Adobe Muse の左側のマージンに、垂直移動ハンドルが表示されます。
ブレークポイントのあるライブラリアイテムをデザインビューに配置することにより、ブレークポイントのセットを追加できます。ライブラリパネル（ウィンドウ／ライブラリ）を開きます。ページに追加するアイテムを選択します。選択したアイテムの横にあるプラス（+）記号をクリックして、デザインビューにドラッグします。
ブレークポイントのセットがページに自動的に追加されます。ページにすでに追加済みのブレークポイントがある状態で、ブレークポイントのあるライブラリアイテムを追加すると、ページですべてのブレークポイントが有効になります。
ブレークポイントのあるライブラリアイテムを使用することにより、異なるページ、さらには異なる .muse ファイルでもブレークポイントをすばやく複製することができます。
Adobe Muse で特定のオブジェクトを静止状態にする場合は、固定を使用できます。オブジェクトは、ページまたはブラウザーのいずれかに対して固定できます。
- オブジェクトをブラウザーに対して固定する：ブラウザーのスクロールバーを使用してもオブジェクトが移動しないようにする場合は、オブジェクトをブラウザーに対して固定することができます。例えば、メニューバーが、上または下にスクロールしても移動しないようにします。オブジェクトをブラウザーに対して固定することの詳細については、このリンクを参照してください。
- オブジェクトをページに対して固定する：オブジェクトを Web ページに固定する場合は、オブジェクトをページに対して固定することができます。例えば、会社ロゴは常に Web ページの右上角に表示されるようにします。
レスポンシブデザインでオブジェクトをページに対して固定する方法を理解するには、以下を読み進めてください。
注意：
オブジェクトを固定するかどうかを決定するには、スクラバーを使って、様々なブラウザー幅でページを表示します。その結果、ページにオブジェクトを固定する場合は、次の手順を実行します。
-
以下のいずれかの方法で、オブジェクトをページに対して固定します。
- 左に固定
：オブジェクトを Web ページの左に固定する場合は、このボックスを選択します。ブラウザーの端とオブジェクトの左辺との距離が一定になります。 - 中央に固定
：オブジェクトを中央に固定する場合は、このボックスを選択します。オブジェクトの左上角とブラウザーの端との距離が一定になります。 - 右に固定
：オブジェクトを Web ページの右に固定する場合は、このボックスを選択します。ブラウザーの端とオブジェクトの右辺との距離が一定になります。
右のボックスをクリックして、オブジェクトを右に固定します。
オブジェクトをページに固定する場合、「ページに固定」位置を示す、オブジェクトからの点線が表示されます。以下の画像で、ページの右端まで伸びる点線を確認してください。これは、オブジェクトがページの右側に固定されていることを示します。
点線は「ページに固定」位置を示します。
- 左に固定
注意：
ステートボタンまたは他のウィジェットコンテナ内のアイテムが可変に設定されている場合、コンテナのサイズが変更されると、これらのアイテムの位置とサイズが変更されます。
レスポンシブデザインでは、様々なブラウザー幅でテキストを処理し、明瞭で読みやすいものにすることが重要です。あるブレークポイントビューに配置されたテキストは、別のブレークポイントビューでは突然折り返されることがあります。また、ブレークポイントを切り替えたときにも、意図しない改行が表示されることがあります。
Adobe Muse では、異なるブレークポイントでテキストをさまざまにフォーマットできます。例えば、タブレット用のフォントサイズには 20 pt を選択し、モバイルデバイス用には 15 pt を選択できます。
レスポンシブデザインでテキストをフォーマットするために、Adobe Muse では、コピーツールと選択ツールがあるパネルに、テキストフォーマットアイコンが用意されています。このアイコンには 2 つのオプションがあり、そのいずれかを選択してテキストをフォーマットできます。
「ブレークポイントを越えてテキストをフォーマット」オプションを選択して、ページ上のすべてのブレークポイントを越えてテキストをフォーマットできます。このオプションを選択すると、1 つのブレークポイントビューでのみテキストをフォーマットする必要があります。テキストは、他のブレークポイントを越えて自動的にフォーマットされます。
一方、特定のブレークポイントに対してテキストをフォーマットする必要がある場合は、「現在のブレークポイントでテキストをフォーマット」オプションを選択します。例えば、モバイル用にテキストをレイアウトするときは、テキストサイズを 24 に増やすように選択できます。
テキストのフォーマットは記憶され、様々なブラウザー幅で Web サイトが表示されたときに、そのフォーマットに従って表示されます。
-
テキストをフォーマットするには、フォーマットするテキストを選択し、次のいずれかをクリックします。
- 「ブレークポイントを越えてテキストをフォーマット」では、すべてのブレークポイントを越えてテキストをフォーマットします。
- 「現在のブレークポイントでテキストをフォーマット」では、現在のブレークポイントでのみテキストをフォーマットします。
いずれのオプションも、テキストツールや切り抜きツールを選択する左側のパネルで利用できます。
レスポンシブデザインでのテキストのフォーマット
A. ブレークポイントを越えてテキストをフォーマット B. 現在のブレークポイントでテキストをフォーマット注意：
レスポンシブレイアウトでのテキストのフォーマットオプションでは、テキストのフォーマットのみが変更されます。ブレークポイントごとに文字またはコンテンツを変更することはできません。
レスポンシブレイアウトにスクロール効果を追加できます。スクロール効果は、固定ブレークポイントでのみサポートされています。固定ブレークポイントは、レイアウトがそのページ幅で固定されていることを意味します。固定ブレークポイントを追加して、スクロール効果を適用するオブジェクトを選択します。次に、スクロール効果設定を構成します。
-
選択したオブジェクトに対するスクロール効果の適用
注意：
スクロール効果は固定ブレークポイントに対してのみ適用可能で、他の（可変）ブレークポイントには適用できません。
Adobe Muse でのスクロール効果の追加方法と使用方法については、「Adobe Muse でのスクロール効果の適用」を参照してください。
Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。