Adobe Muse でドキュメントウィンドウを並べて表示、パネルのドッキングとドッキング解除、パネルグループの作成を使用して、ワークスペースをカスタマイズします。

注意:

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

ワークスペースの概要

Adobe Muse のワークスペースは、パネル、ツールバー、ウィンドウなどの各種要素で構成されています。これらの要素を任意に並べたものをワークスペースと呼びます。Adobe Muse では、デザインニーズに合わせてワークスペースをカスタマイズできます。パネルのドッキングを解除して再編成したり、デザインビューウィンドウを複数開いて並べてデザインしたりできます。ウィンドウまたはレイアウトにデザインエレメントをドラッグアンドドロップできます。この機能により、デスクトップとモバイルのレイアウトに同時に取り組んでいる場合に、共通のコンテンツをレイアウト間で再使用できて便利です。

Adobe Muse の UI を HiDPI をサポートするデバイスの高解像度ディスプレイ向けに最適化できます。Adobe Muse の HiDPI アピアランスにより、パネルやツールなどの UI 要素がよりシャープでクリアに見えます。

Creative Cloud 製品間でデフォルトのワークスペースレイアウトは異なりますが、画面要素はほぼ同じように操作できます。

Adobe Muse ワークスペースのツールなどの要素は、現在選択されているビューに応じて有効になります。Adobe Muse での作業では、さまざまなビューを切り替える必要があります。Adobe Muse にはプラン、デザイン、プレビュー、パブリッシュ、管理の各ビューがあり、Web デザインのさまざまな段階で使用します。

プランビュー

Adobe Muse では、サイトを新規作成したり既存のサイトを開いたりする際にプランビューが表示されます。プランビューでは、ページの階層構造を設定して Web サイトのサイトマップを構築できます。また、Web サイトの個々のページをマスターページと関連付けられます。

Adobe Muse のプランビュー
Adobe Muse のプランビュー

A. タブ付きドキュメントウィンドウ B. 水平サイトマップ表示 C. 垂直サイトマップ表示 D. ワークスペースレイアウト E. サイトマップ F. マスターページ G. ツールパネル 
  • (A)タブ付きドキュメントウィンドウ:ドキュメントウィンドウには作業中のファイルが表示されます。ドキュメントウィンドウはタブ付きにでき、複数のウィンドウを整列してアクセスしやすくなるように、並べてデザインすることができます。
  • (B) 水平サイトマップ 表示:サイトマップを水平に表示します。これは、Adobe Muse のデフォルトのビヘイビアーです。
  • (C)垂直 サイトマップ表示:サイトマップを垂直に表示します。これは、数多くのページと子ページが存在する、複雑なサイトに対して特に効果的です。
  • (D)ワークスペースレイアウト:Adobe Muse での作業中に各種ワークスペースレイアウト(モード)を切り替えます。
  • (E)サイトマップ:Web サイトのサイトマップを作成する領域です。ページの追加や削除、Web サイトの階層設定を行います。
  • (F)マスターページ:この領域でサイトのマスターページの追加作成や既存のマスターページの更新を行います。
  • (G)ツールパネル:ツールパネルでは各種ツールを選択して使用できます。コントロールパネルには、現在選択しているツールで使用できるオプションが表示されます。

デザインビュー

デザインビューは最も重要なビューで、Adobe Muse での作業の中心となるものです。デザインビューは、コードを作成しないでリッチで複雑な Web サイトをデザインできるツール、ウィジェット、および機能を提供します。

デザインビューの Web ページカンバスでは、各種ツールやウィジェットなど Adobe Muse に用意されているデザイン機能を使用してページをデザインできます。Web ページカンバスにはガイドと定規があり、Web ページの領域を有効利用するのに役立ちます。

デフォルトでは、パネルはデザインビューの右端に並びます。ただし、Adobe Muse ではパネルのドッキングやドッキング解除ができ、使いやすいように並べ替えることができます。

ツールバーでは、背景塗り、ブラウザー背景、線、効果といったページスタイルの指定に使用するツールを選択できます。また、現在選択されているパネルに応じて追加のツールが表示されます。

アプリケーションバーには、Adobe Muse のビューを制御するためのオプションも用意されています。

Adobe Muse のデザインビュー
Adobe Muse のデザインビュー

A. 選択範囲インジケーター B. ドロップダウンメニュー C. コントロールパネル D. ワークスペースレイアウト E. パネル F. 定規 G. ガイド H. ツールパネル 
  • (A)選択範囲インジケーター:Web ページカンバスでの現在の選択を表示します。
  • (B)ドロップダウンメニュー:上部に表示されるアプリケーションバーには、モード切り替えやメニューなどのアプリケーションコントロールが用意されています。
  • (C)コントロールパネル:線、塗り、効果など、Web サイトの外観のスタイルを指定および変更できるツールが用意されています。
  • (D)ワークスペースレイアウト:Adobe Muse での作業中に各種ワークスペースレイアウトを切り替えます。
  • (E)パネル:Adobe Muse の主な機能にアクセスして使用できます。
  • (F)定規:適切な位置取りのための目安を設定できます。
  • (G)ガイド:Web ページやブラウザーの最上部や最下部を示します。ガイドをうまく使用すると、Web サイトのヘッダーおよびフッター領域を定義できます。
  • (H)ツールパネル:選択、長方形、手のひらなどの各種ツールにアクセスして使用できます。

プレビューモード

プレビューモードは Web サイトのテストに使用できます。プレビューモードにおける Web サイトの見た目は、どの最新ブラウザーにおける見た目にもたいへんよく似ています。プレビューモードはドキュメントウィンドウとして開き、Adobe Muse ワークスペース内で分離または整列表示されます。Web サイトに対する変更を表示するには、プレビューの表示を更新します。

Adobe Muse のプレビューモード
Adobe Muse のプレビューモード

A. 更新 B. ワークスペースレイアウト C. Web ページプレビュー 
  • (A)ワークスペースレイアウト:Adobe Muse での作業中に各種ワークスペースレイアウト(モード)を切り替えます。
  • (B)更新:「更新」ボタンをクリックすると、Web サイトのプレビューが再読み込みされます。
  • (C)プレビュー:プレビュー領域には、Web サイトの前回アップロードされたエディションが表示されます。

パブリッシュビュー

パブリッシュビューでは、Web サイトを Business Catalyst にパブリッシュできます。パブリッシュビューを選択すると、パブリッシュダイアログボックスが表示されます。パブリッシュ設定ダイアログボックスで、以下を指定します。

  • サイト名:サイトのわかりやすい名前を指定します。Adobe Muse は、Web サイトに対してサイト名に基づくドメイン名を提案します。ただし、この提案は上書きできます。
  • パブリッシュ先:既存の Web サイトは「パブリッシュ先」ドロップダウンから選択できます。これにより、Business Catalyst 上の既存の Web サイトにパブリッシュできます。
  • URL:Web サイトの一意の URL を指定します。
  • データセンター:Adobe Muse はユーザーのコンピューターの現在の場所を検出し、サイトファイルをホストする最寄りのデータセンターを自動的に選択します。ただし、クライアントが別の国に存在する場合、クライアントの場所の最寄りのデータセンターを選択できます。
Adobe Muse Web サイトのパブリッシュ
パブリッシュビューでの Adobe Muse Web サイトのパブリッシュ

共有メニュー

Adobe Muse の共有メニューを使用すると、新しくパブリッシュされたサイトの URL を簡単に共有できます。共有メニューを使用して、ライブ Web サイトの URL または In-Browser Editing の URL を共有できます。

Web サイトをパブリッシュした後、「共有」をクリックします。ライブサイトと In-Browser Editing へのリンクを含むダイアログボックスが表示されます。

パブリッシュされたサイトの URL の共有
パブリッシュされたサイトの URL の共有

1 つの Web サイトに対して、ライブサイトに 1 つ、In-Browser Editing に 1つ、合計 2 つの URL が個別に生成されます。

共有する URL に応じて、適切な「リンクをコピー」オプションをクリックします。URL がクリップボードにコピーされます。これらの URL は電子メールまたはその他の方法で送信して、関係者と共有することができます。

管理ビュー

管理ビューでは、Business Catalyst 上の Web サイトの管理と更新ができます。Adobe Business Catalyst をホスティングサービスプロバイダーとして使用している場合は管理ビューを使用できます。管理ビューを選択すると、Adobe Muse により http://businesscatalyst.com/ にリダイレクトされます。Creative Cloud 認証情報を使用してログインし、Web サイトの編集を始めます。詳しくは、Business Catalyst のヘルプを参照してください。

タブ付きドキュメントウィンドウの管理

複数の Web ページやサイトの作業を行う際、Adobe Muse は開かれているすべてのウィンドウのタブを作成します。どのページにも、ウィンドウを選択するだけでアクセスできます。

  • タブ付きドキュメントウィンドウの順序を変更するには、ウィンドウのタブをグループ内の新しい位置にドラッグします。
  • ドキュメントウィンドウをウィンドウのグループからドッキング解除(分離または非タブ化)するには、ウィンドウのタブをグループの外にドラッグするか、タブを右クリックして「ウィンドウを分離」を選択します。
  • ドキュメントウィンドウを整列して並べてデザインできるようにするには、ウィンドウ配置並べて表示を選択します。
  • ドキュメントウィンドウを別のドキュメントウィンドウグループにドッキングするには、ウィンドウをグループにドラッグします。
  • 重ねて表示または並べて表示されたドキュメントのグループを作成するには、ウィンドウを別のウィンドウの上下左右にあるドロップゾーンのいずれかにドラッグします。
  • タブ付きグループ内で選択項目を別のドキュメントに移動する場合は、選択項目を移動先のドキュメントのタブ上にドラッグしたままにしておきます。しばらくすると、ドキュメントが切り替わります。

ドキュメントウィンドウの整列

Adobe Muse では、ドキュメントウィンドウをワークスペース内で整列して並べ直すことができます。ドキュメントウィンドウを整列させると、複数のレイアウトを比べて作業したり並べてデザインしたりしやすくなります。整列したドキュメントウィンドウ間でページのコンテンツをコピーすることもできます。ドキュメントウィンドウの整列は、複数のレイアウトに対する作業でとりわけ便利です。1 つデザインしたら、レイアウト間でコンテンツをコピーするだけです。

ドキュメントウィンドウを整列するには、ウィンドウ配置並べて表示を選択します。

「タイル」オプションを使用してドキュメントウィンドウを再配置します。
Adobe Muse でのドキュメントウィンドウの整列

ドキュメントウィンドウをデフォルトビューに戻すには、ウィンドウ配置すべてをサイト別に統合を選択します。

タブ付きウィンドウに共通のコンテンツをドラッグアンドドロップ

Adobe Muse では、複数のページおよびレイアウト間に共通のコンテンツを簡単に再使用できます。Adobe Muse を使用するときに、タブ付きドキュメントウィンドウを並べて表示したり、フローティングすることが一般的です。また、Web デザインでは、Web ページおよびレイアウト間でデザインエレメントを再使用し、Web サイトのサイズの外観を保持したりします。Adobe Muse では、ロゴ、テキスト、ヘッダー、背景画像などの共通のデザインエレメントをページおよびレイアウト間でドラッグすることができます。

  1. Adobe Muse では、ページまたレイアウト間でコンテンツを都合よく移動できるようにタブ付きドキュメントウィンドウを再配置できます。詳細については、タブ付きドキュメントウィンドウの管理を参照してください。

    タブ付きウィンドウにコンテンツをドラッグアンドドロップ
    タブ付きウィンドウにコンテンツをドラッグアンドドロップ

  2. 選択範囲を別のレイアウトまたはページにドラッグアンドドロップします。

    選択範囲を別のページまたはレイアウトにドラッグします。
    選択範囲を別のページまたはレイアウトにドラッグします。

  3. 別のページに選択範囲をドロップしたら、ウィンドウ配置すべてをサイト別に統合を選択します。

    「すべてをサイト別に統合」を選択し、ページ間で共通のコンテンツを選択してドロップします。
    「すべてをサイト別に統合」を選択し、ページ間で共通のコンテンツを選択してドロップします。

パネルのドッキングとドッキング解除

ドックとは、縦方向に並べて表示される、複数のパネルまたはパネルグループの集合です。パネルは、ドックの外側や内側に移動することで、ドッキングやドッキングの解除ができます。

  • パネルをドッキングするには、そのタブをドックの上部、下部または他のパネルの間にドラッグします。

  • パネルグループをドッキングするには、そのタイトルバー(タブの上にある、何も記述されていない単一色のバー)をドックにドラッグします。

  • パネルまたはパネルグループをドックから解除するには、そのタブまたはタイトルバーをドックの外にドラッグします。そのまま他のドックにドラッグできるほか、ドッキングせずにフローティング状態にしておくこともできます。

注意:

ドック内のすべての領域がパネルで占有されないようにするには、ドックの下端を上にドラッグして、ワークスペースの端と重ならないようします。

パネルの移動

パネルを移動すると、移動可能な位置に青色でハイライトされたドロップゾーンが表示されます。例えば、ドックの内部でパネルを上下に移動して他のパネルの上または下に表示される細い青色のドロップゾーンまでドラッグすることで、ドック内部でのパネル位置を変更できます。ドロップゾーンではない位置にドラッグすると、パネルはワークスペースの中でフローティング状態になります。

注意:

ドロップゾーンを有効にするのは、パネルの位置ではなく、マウスの位置です。ドロップゾーンが表示されない場合は、ドロップゾーンが表示されるはずの場所にマウスをドラッグしてみてください。

  • パネルを移動するには、そのタブをドラッグします。

  • パネルグループを移動するには、タイトルバーをドラッグします。

注意:

移動中のパネルがドッキングされないようにするには、移動中に Ctrl キー(Windows)または Command キー(Mac OS)を押します。操作を途中でキャンセルするには、Esc キーを押します。

パネルの追加と削除

ドックにあるパネルをすべて削除すると、そのドックはなくなります。ドロップゾーンが表示されるまでパネルをワークスペースの右端に移動すると、ドックを作成できます。

  • パネルを削除するには、パネルのタブを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)して「閉じる」を選択するか、ウィンドウメニューでパネルの選択を解除します。

  • パネルを追加するには、ウィンドウメニューでそのパネルを選択し、目的の場所にドッキングします。

パネルグループの操作

  • パネルをグループに移動するには、グループ内のハイライトされたドロップゾーンにそのパネルのタブをドラッグします。

  • グループの中でパネルを並べ替えるには、パネルのタブをグループ内の別の場所までドラッグします。
  • パネルをグループから解除してフローティング状態にするには、そのパネルのタブをグループの外側にドラッグします。
  • グループを移動するには、タイトルバー(タブの上にある部分)をドラッグします。
  • パネルグループを閉じるには、パネルグループのタイトルバーを右クリックし、「タブグループを閉じる」を選択します。

フローティングパネルのスタック

ドック外部のドロップゾーン以外の場所にパネルをドラッグすると、そのパネルはフローティング状態になります。フローティングパネルはワークスペース内のどこにでも配置できます。フローティング状態のパネルまたはパネルグループをスタックすると、最前面のタイトルバーを使用してドラッグすることで、全体を 1 つの単位として移動できるようになります。

  • フローティングパネルをスタックするには、そのタブを他のパネルの下端にあるドロップゾーンまでドラッグします。

  • スタック順を変更するには、パネルのタブを前面方向または背面方向にドラッグします。

注意:

このとき、タブを置く位置は、タイトルバーにある幅の広いドロップゾーンではなく、パネルとパネルの間にある幅の狭いドロップゾーンです。

  • パネルまたはパネルグループをスタックから解除してフローティング状態にするには、そのタブまたはタブ領域(タブの横にある空の領域)あるいはタイトルバーをスタックの外にドラッグします。

パネルのサイズ変更

  • パネル、パネルグループ、パネルのスタックを最小化または最大化するには、タブをダブルクリックするか、タブ領域(タブの横にある空の領域)をダブルクリックします。

  • パネルのサイズを変更するには、パネルのいずれかの側をドラッグします。Photoshop のカラーパネルのように、ドラッグしてもサイズ変更できないパネルもあります。

パネルのアイコン化と展開

雑然としたワークスペースにならないように、パネルをアイコン化できます(あらかじめ用意されたワークスペースには、パネルが最初からアイコン化されているものもあります)。

  • 列にあるすべてのパネルをアイコン化または展開するには、ドックの上端にある二重矢印をクリックします。
  • 単独のパネルを展開するには、そのアイコンをクリックします。
  • パネルアイコンのサイズを変更し、ラベルがないアイコンのみの表示にするには、テキストが表示されなくなるまでドックの幅を調整します。アイコンのテキストを再表示するには、ドックの幅を広くします。
  • 展開したパネルを閉じるには、パネルのタブ、パネルのアイコンまたはパネルのタイトルバーにある二重矢印をクリックします。
  • アイコンのドックにフローティングパネルまたはパネルグループを追加するには、そのパネルのタブまたはパネルグループのタイトルバーあるいはタブ領域をドックにドラッグします(アイコンで表示されているドックに追加したパネルは、自動的にアイコン化されます)。

  • パネルアイコンまたはパネルアイコンのグループを移動するには、アイコンをドラッグします。パネルアイコンは、ドック内では上下にドラッグできます。他のドックへとドラッグして移動すると、ドラッグ先のドックのパネルスタイルで表示されるようになります。また、ドラッグしてドックの外に出すと、アイコンのままフローティング状態になります。

暗色のユーザーインターフェイス

Adobe Muse では、ワークスペースにカラーテーマを設定できます。Adobe Muse で使用可能な 4 つのカラーテーマのどれでも選択して使用できます。

暗色のユーザーインターフェイステーマを選択すると、UI と Web ページカンバスとのコントラストが強まり、意識をデザインに集中しやすくなります。

カラーテーマを選択するには、以下の手順に従います。

  1. Adobe Muse で、編集環境設定を選択します。
  2. 環境設定ダイアログで、カラーテーマを選択します。
Adobe Muse ワークスペースのカラーテーマを選択。
Adobe Muse ワークスペースのカラーテーマを選択。

  1. 「OK」をクリックします。

検索と置換

Adobe Muse では、ページまたはサイト全体内のテキストを検索および置換できます。

Adobe Muse でのテキストの検索と置換
Adobe Muse でのテキストの検索と置換

A. 検索 B. 置換 C. 置換 / 検索 D. すべて置換 E. 単語として検索 F. 後方 G. 大文字と小文字を区別 H. 検索 I. テキストを置換 J. テキストを検索 

テキストの検索

  1. Adobe Muse で、編集検索と置換を選択します。
  2. 検索と置換ダイアログで以下を指定します。
    • 検索:ページまたはサイト内で検索するテキストを入力します。
    • 置換:検索テキストボックスに入力したテキストと置換するテキストを入力します。
    • 検索:ページ内を検索するかまたはサイト全体を検索するかを選択します。
    • 大文字と小文字を区別:大文字と小文字を区別オプションを選択すると、Adobe Muse は検索テキストボックスに入力した単語または語句と大文字と小文字が一致する文字列のみを検索します。
    • 完全に一致:完全に一致オプションを選択すると、Adobe Muse は検索テキストボックスに入力した単語または語句に完全に一致する文字列のみを検索します。
    • 後方:後方オプションを選択すると、Adobe Muse は逆方向に検索します。
  3. 「検索」をクリックします。

テキストの検索と置換

  1. Adobe Muse で、編集検索と置換を選択します。
  2. 検索と置換ダイアログで以下を指定します。
    • 検索:ページまたはサイト内で検索するテキストを入力します。
    • 置換:検索テキストボックスに入力したテキストと置換するテキストを入力します。
    • 検索:ページ内を検索するかまたはサイト全体を検索するかを選択します。
    • 大文字と小文字を区別:大文字と小文字を区別オプションを選択すると、Adobe Muse は検索テキストボックスに入力した単語または語句と大文字と小文字が一致する文字列のみを検索します。
    • 完全に一致:完全に一致オプションを選択すると、Adobe Muse は検索テキストボックスに入力した単語または語句に完全に一致する文字列のみを検索します。
    • 後方:後方オプションを選択すると、Adobe Muse は逆方向に検索します。
  3. 「置換」をクリックします。「置換/検索」をクリックして検索結果のテキストを直ちに置換し、検索を続行します「すべてを置換」をクリックしてページまたはサイト全体内の検索結果のすべてのテキストを置換します。

警告パネル

Adobe Muse での作業中、エラーになる可能性のあるタスクや予期される結果を生まないタスクに対して、警告が生成されます。これらは警告パネルに一覧表示されます。Web サイトのデザイン中は、警告パネルを開いておくことをお勧めします。

警告パネルを表示するには、ウィンドウ警告を選択します。

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

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