Adobe Muse のレスポンシブサイトにオブジェクトをレイアウトする

検索

最終更新日 : Apr 27, 2021 10:52:05 PM GMT | 次にも適用 : Adobe Muse CC (2015)

ブレークポイントの詳細については、この記事をお読みください。レスポンシブレイアウトのオブジェクトを固定してサイズ変更し、ブレークポイントでテキストをフォーマットする方法を学びます。

レスポンシブデザインでは、オブジェクトおよびテキストの 1 つのレイアウトがすべての画面サイズに合うとは限りません。画像、テキスト、ウィジェット、およびフォームは、異なるブレークポイントでは位置が変更されることがあります。フレームがページ幅からはみだしたり、オブジェクトが互いにぶつかり合ったり、テキストが不明瞭になったりすることがあります。画像、テキスト、ウィジェット、およびフォームは、異なるブレークポイントでは位置を変更する必要があります。このため、様々な画面サイズで適切に表示されるように、十分に考慮してオブジェクトをレイアウトし、テキストをフォーマットすることが重要です。

ページをデザインした後、スクラバーを使用すると、様々な画面サイズでレイアウトをプレビューできます。オブジェクトのレイアウトを特定のブラウザー幅に合わせて変更する必要があると感じた場合は、ブレークポイントを追加できます。

Adobe Muse におけるレスポンシブレイアウトでの、ブレークポイントの詳細とレイアウトの効率的なデザイン方法については、以下を参照してください。

ブレークポイントとは？

レスポンシブレイアウトのブレークポイントは、さまざまなブラウザー幅をピクセル単位で示します。ブレークポイントにより、異なるブラウザー幅でのデザインをイメージするとともに、ブラウザー幅の変化にページ上のオブジェクトがどのように反応するのかをテストできます。

ブレークポイントの追加

初期設定で、Adobe Muse の新規サイトにはデスクトップ用のブレークポイント（幅 960 ピクセル）が含まれています。この幅のレイアウトのデザインを開始できます。デザインが完了したら、スクラバーを使って様々な幅でレイアウトをプレビューできます。プレビューすることで、どこでデザインが崩れるのかを確認して記録できます。例えば、1 行のテキストが 2 つに分かれてしまい、1 列に並ぶ複数の画像が垂直に重なって表示されてしまうとします。この場合は、幅にブレークポイントを追加する必要があります。必要なブレークポイントを追加した後、オブジェクトが見栄えよく配置されるようにデザインを微調整できます。

バックエンドでは、すべてのブレークポイントに対し、対応するメディアクエリー宣言が Adobe Muse により Web ページに追加されます。メディアクエリーは、さまざまな画面サイズに対応してコンテンツを表示できる CSS3 です。ほとんどの最新のブラウザーは、これらのブレークポイントに対応したメディアクエリーを解釈できます。様々なデバイスで Web ページを表示する際、ブラウザーに応じて、最適なメディアクエリーおよび対応したデザインレイアウトが選択されて表示されます。

スクラバーをブレークポイントバー上にドラッグし、ブレークポイントを追加する位置のポイントに置きます。

ブレークポイントバーのをクリックします。ブレークポイントバーに新しいブレークポイントが追加されます。また、ブレークポイントのブラウザー幅も表示されます。

同様に、必要に応じてブレークポイントをブレークポイントバーに追加して、個別のブラウザー幅を設定します。

ブレークポイントをクリックすると、アクティブなブレークポイントに色が付きます。その他のブレークポイントはグレーアウトされます。

注意：

ブレークポイントのあるライブラリアイテムをデザインビューに配置することにより、ブレークポイントを追加することもできます。ライブラリパネルを開き、配置するオブジェクトを選択して、オブジェクトの横にあるプラス（+）記号をクリックし、そのオブジェクトをデザインビューまでドラッグします。

ブレークポイントを追加する場所

ブレークポイントは、マスターページと個々のページの両方に追加できます。個々のページにブレークポイントを追加すると、ブレークポイントの値はそのページにだけ適用されます。

マスターページにブレークポイントを追加するとき、個々のページで必要なブレークポイントを適用することを選択できます。マスターページのブレークポイントは、個々のページ上に小さな三角形として表示されます。個々のページでこれらのブレークポイントを有効にするには、プラス記号（+）をクリックする必要があります。

このシナリオを考慮します。サイトをレイアウトする際に、スマートフォン用に特定のブレークポイントを追加することが可能です。マスターページに適切なブレークポイントを追加して、個々のページで使用できるようにすることができます。個々のページをさらにデザインする場合は、1 回クリックするだけで、これらのページのブレークポイントを取得できます。

注意：

個別のページに異なるマスターページを適用する場合は、古いマスターページのブレークポイントが新しいマスターページのブレークポイントに置き換わります。

ブレークポイントの編集

ブレークポイントバーでドラッグし、所定のブレークポイント値にスクラバーを配置します。これは、修正されたブレークポイントの場所です。

ブレークポイントの色を表示するか、編集する場合は、ブレークポイントを右クリックして、ブレークポイントプロパティを選択するか、ブレークポイントをダブルクリックします。

このウィンドウでは、ブレークポイントの色、ページの幅、高さ、およびインデントの値も変更できます。

ブレークポイントの色とインデントの値を表示および変更するためのブレークポイントプロパティ — ブレークポイントプロパティダイアログボックスを使用して、ブレークポイントの色、ブレークポイントの値を変更します。

「OK」をクリックして変更を保存します。

注意：

個々のページからマスターページのブレークポイントは編集できません。

ブレークポイントの削除

ブレークポイントを削除する場合は、以下の手順のいずれかに従います。

アクティブなブレークポイントの左側にある X をクリックします。
ブレークポイントバーを右クリックして、ブレークポイントを削除を選択します。

ブレークポイントを削除すると、対応するレイアウト変更、テキスト設定も削除されます。

ブレークポイントの削除 — ブレークポイントを削除するには、（x）記号をクリックします。

右クリックで「ブレークポイントの削除」 — ブレークポイントを右クリックして削除します。

注意：

個々のページからマスターページのブレークポイントは削除できません。

ブレークポイント間のシフト

現在のブレークポイントから、次のブレークポイントまたは前のブレークポイントへシフトできます。前または次のブレークポイントに移動するには、次の操作を実行します。

Windows ユーザー：
- 前のブレークポイント - Ctrl + Shift + 5 キーを押す
- 次のブレークポイント - Ctrl + Shift + 6 キーを押す
Mac OS ユーザー：
- 前のブレークポイント - Cmnd + Shift + 5 キーを押す
- 次のブレークポイント - Cmnd + Shift + 6 キーを押す

レスポンシブレイアウトでのオブジェクトの使用

次のオプションを使用して、すべてのブレークポイントでレイアウトが良好に表示されていることを確認します。

オブジェクトの表示／非表示：オプションであるブレークポイントのオブジェクトを非表示にしながら、別のブレークポイントで表示を選択できます。詳しくは、「オブジェクトの表示または非表示」を参照してください。
ブレークポイントごとにオブジェクトの位置を変える：1 つのオブジェクトをブレークポイントごとに異なる位置に配置できます。詳しくは、「オブジェクトの配置」を参照してください。
レスポンシブ固定を使用する：どのオブジェクトを静止にして、どのオブジェクトを可変にするかを決定できます。静止オブジェクトがすべてのブレークポイントで同じ位置に留まるように固定できます。詳しくは、「オブジェクトの固定」を参照してください。
オブジェクトのサイズ変更：オブジェクトをブレークポイントごとに異なるサイズにできます。また、ページの幅に基づいてオブジェクトのサイズが自動的に調整されるように設定することもできます。オブジェクトのサイズ変更について詳しくは、「オブジェクトのサイズ変更」を参照してください。
さまざまなブレークポイントに合わせたテキストのフォーマット：ブレークポイントごとにテキストのフォーマットを変えることで、さまざまなブラウザー幅でテキストの見やすさと読みやすさを向上させることができます。詳しくは、「レスポンシブレイアウトでのテキストのフォーマット」を参照してください。

オブジェクトの表示または非表示

次のようなシナリオを考えてみます：従来のデスクトップ向けメニューを挿入しました。しかし、このメニューは、タブレットの画面では場所を取りすぎています。タブレットデバイスには、サンドイッチメニューやアコーディオンの方がうまく機能します。

Adobe Muse なら、レスポンシブ Web サイトをデザインしながら、このようなシナリオを扱うことも簡単です。以下の画像に示すように、デスクトップビュー用に従来のメニューを、タブレットデバイス用にサンドイッチメニューを表示することを選択できます。

レスポンシブレイアウトでオブジェクトを表示または非表示にする — デスクトップビューで従来のメニューを表示し、サンドイッチメニューを非表示にします。

Adobe Muse プロジェクトでオブジェクトを表示または非表示にするには、次の操作を実行します。

一部のブレークポイントで非表示にするオブジェクトを含めて、必要なオブジェクトをすべて挿入します。

スクラバーをドラッグし、特定のブレークポイントビューに移動します。

非表示にするオブジェクトを右クリックし、「ブレークポイントで隠す」をクリックします。

そのオブジェクトは現在のブレークポイントビューでは非表示になりますが、別のブレークポイントでは表示されます。代わりにオブジェクトを他のすべてのブレークポイントで非表示にする場合は、「他のブレークポイントで隠す」をクリックします。後から、レイヤーパネルを使用して特定のブレークポイントのオブジェクトを表示できます。

ここで、そのブレークポイントビューで表示されているオブジェクトをレイアウトします。

以前に非表示にしたオブジェクトを表示したいブレークポイントビューに移動します。移動は、スクラバーをドラッグすれば可能です。

レイヤーパネルをクリックして、非表示を解除するオブジェクトのレイヤーを探します。オブジェクトレイヤーを探すために、別のレイヤーをドリルダウンしなければならないことがあります。

レイヤーパネルでオブジェクトを表示または非表示にする — レイヤーパネルを使用してオブジェクトを表示または非表示にする

オブジェクトレイヤーに対応する最初の列をクリックします。オブジェクトが現在のブレークポイントビューで表示されるようになったことを示す小さい黒のドットが表示されます。

クリックしてオブジェクトを表示または非表示にする — 最初の列をクリックしてオブジェクトを表示または非表示にします。

すべてのブレークポイントでオブジェクトの非表示を解除するには、オブジェクトを右クリックして他のブレークポイントで表示をクリックします。

オブジェクトの配置

ブレークポイントビューごとにオブジェクトをさまざまな場所に配置できます。例えば、モバイルビューでは画像を垂直方向に配置しながら、デスクトップビューでは画像を水平方向に配置できます。

Adobe Muse では、オブジェクトの位置が記憶され、画面サイズが変更されると、それに従って表示します。

デスクトップビュー用にオブジェクトをレイアウト — デスクトップビュー用にオブジェクトを水平方向にレイアウトします。

モバイルビュー用にオブジェクトをレイアウト — モバイルデバイス用にオブジェクトを垂直方向にレイアウトします。

ブレークポイントにまたがってオブジェクトを移動するには、次の手順に従います。

オブジェクトを配置するブレークポイントを選択します。

オブジェクトをドラッグし、所定の場所に配置します。

注意：

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

複数のオブジェクトのグループとしての移動

レスポンシブレイアウトでは、複数のオブジェクトをグループとしてまとめて移動できます。垂直に並べられた 1 つのグループを移動する場合、実行する操作は、一番上のオブジェクトを選択するだけです。Adobe Muse の左側のマージンに、垂直移動ハンドルが表示されます。

Adobe Muse の垂直移動ハンドル — 垂直に並べられたオブジェクトグループを移動します。

ハンドルをクリックして、上または下に移動すると、選択したオブジェクトとその下のすべてのオブジェクトが 1 つのグループとして移動します。

ブレークポイントのあるオブジェクトの配置

ブレークポイントのあるライブラリアイテムをデザインビューに配置することにより、ブレークポイントのセットを追加できます。ライブラリパネル（ウィンドウ／ライブラリ）を開きます。ページに追加するアイテムを選択します。選択したアイテムの横にあるプラス（+）記号をクリックして、デザインビューにドラッグします。

ライブラリアイテムを使用したブレークポイントの追加 — プラス（+）記号をクリックして、ブレークポイントのあるオブジェクトを配置

ブレークポイントのセットがページに自動的に追加されます。ページにすでに追加済みのブレークポイントがある状態で、ブレークポイントのあるライブラリアイテムを追加すると、ページですべてのブレークポイントが有効になります。

ブレークポイントのあるライブラリアイテムを使用することにより、異なるページ、さらには異なる .muse ファイルでもブレークポイントをすばやく複製することができます。

オブジェクトの固定

Adobe Muse で特定のオブジェクトを静止状態にする場合は、固定を使用できます。オブジェクトは、ページまたはブラウザーのいずれかに対して固定できます。

オブジェクトをブラウザーに対して固定する：ブラウザーのスクロールバーを使用してもオブジェクトが移動しないようにする場合は、オブジェクトをブラウザーに対して固定することができます。例えば、メニューバーが、上または下にスクロールしても移動しないようにします。オブジェクトをブラウザーに対して固定することの詳細については、このリンクを参照してください。
オブジェクトをページに対して固定する：オブジェクトを Web ページに固定する場合は、オブジェクトをページに対して固定することができます。例えば、会社ロゴは常に Web ページの右上角に表示されるようにします。

レスポンシブデザインでオブジェクトをページに対して固定する方法を理解するには、以下を読み進めてください。

注意：

オブジェクトを固定するかどうかを決定するには、スクラバーを使って、様々なブラウザー幅でページを表示します。その結果、ページにオブジェクトを固定する場合は、次の手順を実行します。

固定するオブジェクトを選択します。

上部の「固定」オプションでボックスのいずれかを選び、オブジェクトをページに対して固定します。

レスポンシブデザインで「ページに固定」オプションを使用します。 — 「固定」メニューを使用してレスポンシブレイアウトでオブジェクトを固定します。

以下のいずれかの方法で、オブジェクトをページに対して固定します。

左に固定：オブジェクトを Web ページの左に固定する場合は、このボックスを選択します。ブラウザーの端とオブジェクトの左辺との距離が一定になります。
中央に固定：オブジェクトを中央に固定する場合は、このボックスを選択します。オブジェクトの左上角とブラウザーの端との距離が一定になります。
右に固定：オブジェクトを Web ページの右に固定する場合は、このボックスを選択します。ブラウザーの端とオブジェクトの右辺との距離が一定になります。

例えば、すべてのブレークポイントにわたってページの右隅に表示される必要がある「今すぐ事前注文」のようなボタンがある場合は、以下の画像に示すように、そのボタンを選択して右に固定する必要があります。

オブジェクトをページに固定する場合、「ページに固定」位置を示す、オブジェクトからの点線が表示されます。以下の画像で、ページの右端まで伸びる点線を確認してください。これは、オブジェクトがページの右側に固定されていることを示します。

スクラバーを使用し、さまざまなページ幅でレイアウトを表示します。ページのサイズを変更すると、固定がページレイアウトに影響を与えることを確認します。

オブジェクトのサイズ変更

オブジェクトのサイズを変更するブレークポイントビューに移動します。

オブジェクトを右クリックし、サイズ変更／<サイズ変更のオプション> を選択します。

注意：

サイズ変更のオプションは、オブジェクトによって異なります。例えば、レスポンシブレイアウトでは幅と高さで画像サイズを変更でき、テキストボックスは幅のサイズのみ変更できます。

可変でないオブジェクトには、サイズ変更オプションはありません。

現在のブレークポイントのオブジェクトをドラッグしてサイズを変更します。

例えば、最初の画像で、画像が 768 ピクセルのブレークポイントの幅をはみ出ています。2 番目の画像で示すように、画像をドラッグしてサイズを変更し、ページ幅に合わせることができます。

異なるブレークポイント用にオブジェクトのサイズを変更する。 — 異なるブレークポイント用にオブジェクトをドラッグしてサイズを変更する。

この変更をブラウザーでプレビューします。ブラウザー幅がブレークポイント値になるまでブラウザーのサイズを変更します。ブラウザー幅がブレークポイント値に達したときに、オブジェクトサイズが変更されることを確認します。

注意：

ステートボタンまたは他のウィジェットコンテナ内のアイテムが可変に設定されている場合、コンテナのサイズが変更されると、これらのアイテムの位置とサイズが変更されます。

オブジェクトのサイズおよび位置のコピー

異なるブレークポイントにわたってオブジェクトのサイズと位置をコピーしたい場合は、次の手順に従います。

コピーするオブジェクトを右クリックします。

次のいずれかの操作を行います。

サイズと位置のコピー先／<特定のブレークポイント値> を選択し、特定のブレークポイントに対して現在のオブジェクトのサイズと位置を適用します。
サイズと位置のコピー先／すべてのブレークポイントを選択し、すべてのブレークポイントにわたって現在のオブジェクトのサイズと位置を適用します。

レスポンシブレイアウトでのテキストのフォーマット

レスポンシブデザインでは、様々なブラウザー幅でテキストを処理し、明瞭で読みやすいものにすることが重要です。あるブレークポイントビューに配置されたテキストは、別のブレークポイントビューでは突然折り返されることがあります。また、ブレークポイントを切り替えたときにも、意図しない改行が表示されることがあります。

Adobe Muse では、異なるブレークポイントでテキストをさまざまにフォーマットできます。例えば、タブレット用のフォントサイズには 20 pt を選択し、モバイルデバイス用には 15 pt を選択できます。

レスポンシブデザインでテキストをフォーマットするために、Adobe Muse では、コピーツールと選択ツールがあるパネルに、テキストフォーマットアイコンが用意されています。このアイコンには 2 つのオプションがあり、そのいずれかを選択してテキストをフォーマットできます。

「ブレークポイントを越えてテキストをフォーマット」オプションを選択して、ページ上のすべてのブレークポイントを越えてテキストをフォーマットできます。このオプションを選択すると、1 つのブレークポイントビューでのみテキストをフォーマットする必要があります。テキストは、他のブレークポイントを越えて自動的にフォーマットされます。

一方、特定のブレークポイントに対してテキストをフォーマットする必要がある場合は、「現在のブレークポイントでテキストをフォーマット」オプションを選択します。例えば、モバイル用にテキストをレイアウトするときは、テキストサイズを 24 に増やすように選択できます。

テキストのフォーマットは記憶され、様々なブラウザー幅で Web サイトが表示されたときに、そのフォーマットに従って表示されます。

レスポンシブレイアウトでのテキストのフォーマット

所定のブレークポイントビューに移動します。

テキストボックスを選択し、ドラッグしてサイズを変更します。テキストは、テキストボックスのサイズ変更に合わせて再フローされます。

注意：

テキストボックスのサイズ変更に合わせてテキストがフローされる際の幅方向の範囲は、テキストボックスの適切な境界によって決まります。

テキストをフォーマットするには、フォーマットするテキストを選択し、次のいずれかをクリックします。

「ブレークポイントを越えてテキストをフォーマット」では、すべてのブレークポイントを越えてテキストをフォーマットします。
「現在のブレークポイントでテキストをフォーマット」では、現在のブレークポイントでのみテキストをフォーマットします。

いずれのオプションも、テキストツールや切り抜きツールを選択する左側のパネルで利用できます。

A. ブレークポイントを越えてテキストをフォーマット B. 現在のブレークポイントでテキストをフォーマット

注意：

レスポンシブレイアウトでのテキストのフォーマットオプションでは、テキストのフォーマットのみが変更されます。ブレークポイントごとに文字またはコンテンツを変更することはできません。

ブレークポイントをまたいだテキストフォーマットのコピー

異なるブレークポイントまたはブラウザー幅を越えてテキストのサイズおよび位置をコピーする場合は、次の手順に従います。

コピーしたいテキストを選択します。

次のいずれかの操作を行います。

テキストフォーマットのコピー先／<特定のブレークポイント値> を右クリックして選択し、特定のブレークポイントの現在のテキスト属性を適用します。
テキストフォーマットのコピー先／すべてのブレークポイントを右クリックして選択し、他のすべてのブレークポイントを越えて現在のテキスト属性を適用します。

スクラバーを使用して、各ブレークポイントでレイアウトをプレビューします。必要に応じてブレークポイントを追加し、様々なブラウザー幅のレイアウトを最適化します。

レスポンシブレイアウトでのスクロール効果の適用

レスポンシブレイアウトにスクロール効果を追加できます。スクロール効果は、固定ブレークポイントでのみサポートされています。固定ブレークポイントは、レイアウトがそのページ幅で固定されていることを意味します。固定ブレークポイントを追加して、スクロール効果を適用するオブジェクトを選択します。次に、スクロール効果設定を構成します。

スクロール効果を追加する Adobe Muse ページを開きます。例えば、ヘッダーにナビゲーション用スクロール効果と背景画像を追加するとします。

レスポンシブレイアウトを開くと、ページにブレークポイントがあります。これらのブレークポイントは可変で、双方向の矢印アイコンで示されます。

スクロール効果パネルが表示されている場合、このオプションは無効になっています。

可変ブレークポイントに対して無効なスクロール効果 — 可変ブレークポイントに対してスクロール効果は無効

スクロール効果を有効にするには、固定ブレークポイントを追加する必要があります。固定ブレークポイントを追加するには、ブレークポイントバーをクリックして、「ブレークポイントを追加」をクリックします。

ドロップダウンから「固定幅」を選択して、「OK」をクリックします。

ページの固定ブレークポイントは、四角形で示されます。1225 ピクセル以上のブラウザー幅でページを表示すると、ページの表示は 1225 ピクセルで固定されます。このブレークポイントでは、レイアウトは可変になりません。

スクロール効果を適用するオブジェクトを選択して、スクロール効果の設定を構成します。

注意：

スクロール効果は固定ブレークポイントに対してのみ適用可能で、他の（可変）ブレークポイントには適用できません。

Adobe Muse でのスクロール効果の追加方法と使用方法については、「Adobe Muse でのスクロール効果の適用」を参照してください。

FAQ

サイトのデザイン対象となる特定のデバイスがある場合は、適切なブレークポイントを追加することができます。ただし、ユーザーは任意のデバイスからサイトを表示するため、画面サイズは一定していません。したがって、デザインが崩れる場所のみにブレークポイントを追加することをお勧めします。これにより、サイトはどのデバイスでも最適なレイアウトで表示されるようになります。

マスターページのブレークポイントは、個々のページでは白い三角形として表示されます。個々のページでこれらのブレークポイントを有効にするには、ブレークポイントバーで白い三角形をクリックしてから、プラス（+）記号をクリックします。

マスターページから特定のページにブレークポイントを簡単に流用するもう 1 つの方法は、マスターページ要素をコピーしてからブレークポイントを適用するページに切り替え、編集／ブレークポイント付きで貼り付けを選択し、次に貼り付けたアイテムをカンバスから削除します。アイテムは削除されますが、マスターページからのブレークポイントは保持されます。

テキストボックスが「可変」でない場合、拡大／縮小しないため、重なり合う場合があります。テキストボックスを可変にするには、それぞれのテキストボックスを右クリックして、サイズ変更／レスポンシブ幅を選択します。

余計なスペースまたは空白が表示されることには、スティッキーフッターまたは非表示のオブジェクトなどのいくつかの理由があります。この問題の解決方法の詳細については、この記事を参照してください。

プレビューにグレーの領域が表示される場合は、ページの外側に配置されている外部オブジェクトまたは非表示のオブジェクトがあるかどうかを確認します。すべてのオブジェクトを選択するには、表示／フレーム枠を表示をクリックします。ズームアウトして、すべてのオブジェクトの配置を表示することもできます。外部オブジェクトまたは非表示のオブジェクトがあるかどうかを確認して、該当するオブジェクトをレイアウト内に配置し、この問題を解決します。

現状、Adobe Muse のすべてのウィジェットがレスポンシブであるわけではありません。各ウィジェットのレスポンシブビヘイビアーについては、この表を参照してください。

アカウントにログイン

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