Adobe Muse でのオブジェクトの使用

Adobe Muse のオブジェクトには、外部ソース内で作成された、または外部ソースから読み込まれたデザインエレメントが含まれています。Adobe Muse 内の様々なツールを使用して、画像、テキスト、画像フレームなどを Web ページに追加したり、操作することができます。

最も一般的なワークフローの 1 つは、Adobe Photoshop からのボタンの作成と読み込みです。最終的には、Adobe Muse は Photoshop 内で作成されたレイヤーとレイヤーコンポジションを認識します。Adobe Muse では、これらのレイヤーを Web サイト内のボタンのステートとして設定できます。

Web ページキャンパスに配置されたオブジェクトでは、Web サイトのデザインのニーズに合わせて変形効果を追加することができます。オブジェクトを隔離して、適切なパディングと間隔プロパティを追加して、入れ子エレメントの間隔を操作できます。

Adobe Muse プロジェクトでの画像フレームの配置

画像フレームツールをクリックすることで、Adobe Muse プロジェクトに直接画像フレームを配置できます。ツールパネルから画像フレームツールをクリックして、プロジェクトの必要な位置までドラッグします。

ページへの単一画像の配置

Muse ワークスペースは Illustrator や InDesign と同様に機能します。まず配置された画像を読み込んでから、ページ上で画像を表示する場所をクリックします。ページに直接画像ファイルを配置して追加するには、次の操作を実行します。

1. ファイル／配置を選択するか、Command-D キー（Mac）またはControl-D キー（Windows）のキーボードショートカットを使用して読み込みダイアログボックスを開きます。
2. サンプルファイルフォルダーに含まれる made-with-muse.png ファイルを参照して選択します。開くをクリックしてファイルを選択するか、読み込みダイアログボックスを閉じます。

ページの最下部の付近を一度クリックして、画像を配置します。この場合、フルサイズで画像を配置するので、一度だけクリックします。ただし、配置された画像のサイズを変更する場合は、画像をクリックしてドラッグし、指定のサイズに拡大・縮小できます。 

選択ツールを使用して、タイル張りされたフッターの長方形の垂直方向の中心に向かって画像をドラッグすると、画像を中央に整列するため、赤色のガイドと青紫色の計測ボックスが一時的に表示されるのが分かります。

これらの変更を加えると、フッターセクションがほぼ完成します。

サイトのパブリッシュまたは書き出しのときの、Muse による画像の最適化方法

また、印刷可能な画像を Adobe Muse に配置することもできます。Muse はこれらの画像を Web 指向のフォーマットに変更します。ただし、画像を Web 指向にすると、画像が圧縮され、一部の画質が犠牲になる場合があります。Web に対する準備が整っていない画像を Muse に配置すると、自動的に圧縮されます。サイトをパブリッシュまたは書き出して、自動的に得られた結果に満足できない場合は、Photoshop や Adobe Fireworks® でユーザー独自の Web 指向の画像を手動で作成し、最適化することにより、実験を重ねてください。オリジナル画像を削除し、最適化した新しい画像をページに配置し、サイトをもう一度パブリッシュまたは書き出してください。

切り抜き、拡大／縮小またはベベル、シャドウおよび光彩の追加など、Muse で他の変更を画像に加えた場合も、画像が再作成され、自動的に圧縮されます。最適化処理をさらに制御したい場合は、Photoshop や Fireworks を使用して画像に効果を追加し、画像編集プログラムでファイルを最適化し、画像を Muse に配置して圧縮のレベルをユーザー自身で設定できます。Muse では、PNG、JPG または GIF ファイルを書き出すことなく、Photoshop から Muse に直接 PSD ファイルを配置できますが、この場合も、自動圧縮アルゴリズムを使用して新しい画像ファイルが自動的に生成されます。

Web 表示用の画像の最適化

リンクされたファイルが非常に高解像度で配置されたり、その後ページ上で大幅に縮小されたりすると、書き出しエラーや書き出し処理の遅延が発生する場合があります。このようなワークフローはお勧めできません。フルサイズ（2,000 ピクセル以上）の画像を配置し、デザインに合わせて拡大、縮小するようなことを繰り返し行うと、この問題は一層明確になります。

非常に大きな画像ファイルを配置すると、Muse は自動的にサイズを制限し、画像幅を 2048 にします。アセットパネルのアセット名にマウスを置くと、ツールヒントには、配置画像の元のサイズと再サンプリングされた画像サイズ（最大サイズの制限内に収まるよう縮小されたサイズ）が表示されます。

最善の方法は、ページに配置する前に、画像編集プログラムでサイト用の Web グラフィックのサイズを変更して最適化することです。非常に大きなサイズの画像を配置すると、.muse ファイルが必要以上に大きくなりすぎる場合があります。.muse ファイルは、Web 上に画像を表示する上では不要な、余計なピクセルデータを処理することが必要になります。そのために、サイトの書き出しやパブリッシュのときに、処理時間が長くなることがあります。場合によっては、.muse ファイルが非常に大きいために、書き出しやパブリッシュの処理中にすべてのファイルのサイズ変更や最適化を試みて、タイムアウトになることがあります。タイムアウトエラーが発生する可能性があります。

これを解決するには、アセット名を右クリックして「アセットサイズを最適化」を選択して、縮小された画像の表示に必要とされる不要なデータを削除することができます。

最適化された画像を、デザイン内ではより大きく表示されるよう拡大すると、100% 以上に拡大プラスアセットエラーが表示される場合があります。これを解決するには、「大きいサイズを読み込む」を選択して、拡大された画像を許容できる表示にするために必要な余分な画像データを取得することができます。

プレースホルダーシェイプの描画

プレースホルダーシェイプは、楕円形、長方形、または多角形が使用でき、画像、テキスト、またはカラーを設定できます。

Photoshop ファイルをロールオーバーボタンとして配置

「共有」ボタンに期待どおりのステートが表示されます。次のセクションでは、「共有」ボタンとサイトナビゲーションの右側にあるドリップ画像を整列させる方法を学びます。

次のパートでは、マスターページのヘッダー領域とフッター領域を定義する方法について学びます。

ブラウザーウィンドウへのオブジェクトの固定

画像を配置したり、その他の方法でアートワークをページに追加したりする場合、選択ツールと矢印キーを使用して位置を変更します。画像を移動すると、画像はそのページ内に存在するその他のエレメント（画像、テキスト、およびメディア）との位置関係に応じて移動します。他のエレメントを移動することもできますが、ページ全体は、1 つのカタログやポスターのように機能します。ページの項目は 1 つの平面上に存在します。ページが長い場合（縦方向に多数のコンテンツが存在する場合）、利用者がスクロールダウンすると、ページの上部にある画像は見えなくなります。

Web サイトを閲覧中に固定されたオブジェクトを見た経験があると思いますが、これらは 1 つの位置に常に表示される「永続的な」項目です。これらのオブジェクトは、その他のページコンテンツの上をフローティングしているように見えます。

固定ツールを使用した場合、画像を基本的にページのフローから除外することになります。他のページエレメントと相対して配置するのではなく、ブラウザーを基準とした特定の場所に設定します。固定された画像は「くっついている」ように見えます。他のスクロールするページエレメントとは無関係に、常に同じ場所に（右上隅や下部近くにホバーリング）留まります。利用者がブラウザーのサイズを変えると、固定された画像はそのブラウザーウィンドウを基準とした固定位置に常に表示されます。

固定機能は、画像をページのデザインから切り離して、コルクボードにメモをピンで留めるように、代わりにブラウザーに貼り付ける方法と考えることができます。利用者がブラウザーウィンドウのサイズを変えると、固定されたエレメントは、そのブラウザーを基準とした固定位置を維持するために移動しますが、利用者がページコンテンツを横方向または縦方向にスクロールしても、固定されたエレメントは移動しません。

次の手順に従って、固定ツールを使用します。

1. A-Master ページをデザインビューで開いている状態で、選択ツールを使用して Facebook アイコンを選択します。
2. コントロールパネルの固定インターフェイスで右上の固定位置をクリックします。この設定は右上隅の現在の位置にエレメントを「ピン留め」します。

3. 手順 1 および 2 を繰り返し、Google+ および Twitter のアイコンボタンを右上の位置に固定し、ページの他の項目がスクロールしても、これらのアイコンがブラウザーウィンドウ内で移動しないようにします。
4. 「プラン」をクリックして、ページサムネールを表示します。3 つのソーシャルメディアアイコンはマスターページに追加されたため、すべてのページに表示されるようになりました。
5. プランビューで food ページをダブルクリックして、デザインビューでページを開きます。もしくは、既にページが開いている場合は、food ページタブをクリックしてアクティブにします。ファイル／ブラウザーでページをプレビューを選択して、ブラウザーでページを確認します。
6. Dessert メニュー項目をクリックし、Dessert メニューセクションまで長いページを下にジャンプします。他のページエレメントはスクロールしているのに、3 つのソーシャルメディアアイコンは固定されているため、ページの右側に沿った位置に保持されていることを確認してください。

「Muse で初めての Web サイト制作 | 第 6 章」に進んでください。第 6 章では、オブジェクトのセットが 1 つのエレメントとして機能するようにグループ化する方法について説明します。さらに、Katie's Cafe の場所を利用者に示す、埋め込み Google マップを追加して、Visit ページを完了します。サイトが完了したら、ホスティングサーバー（Business Catalyst によって稼働）にアップロードしてオンラインでパブリッシュすることがいかに簡単かを確認します。これにより、顧客や同僚と進行中の作業を共有できます。

「Muse で初めての Web サイト制作 | 第 4 章」では、アンカータグを追加して、手動の水平メニューウィジェットでメニュー項目にアンカータグをリンクする方法を学習しました。また、エレメントがスクロールしないようにページに固定する方法も学習しました。利用者がダウンロードできるように、ファイルにリンクを追加する方法を確認しました。

また、コンテンツセットをページにペーストできるように、オブジェクトのグループ化およびグループの使用について説明します。埋め込み HTML に関してさらに作業をします。今回は、Visit ページにインタラクティブな Google マップを追加します。最後に、サイトの仕上げとして、お気に入りアイコンを追加して、搭載されたホスティングサーバーに試用サイトをパブリッシュする方法を説明します。

オブジェクトのグループ化と単一ユニットしてのグループのペースト

InDesign やその他のデザインプログラムと同様に、複数のオブジェクトを 1 つのグループに結合して、1 つのユニットとして処理できます。このセクションでは、複数のエレメント（画像とテキストフレームを配置）から構成されるデザインを作成して、これらを 1 つの項目として配置やコピーが容易にできるように、グループ化する方法を説明します。次の手順に従います。

1. プランビューでホームページのサムネールをダブルクリックして、デザインビューでこのページを開きます。
2. ファイル／配置を選択します。サンプルファイルフォルダーにある panel-open-bottom.png という名前のファイルを参照して選択します。「開く」をクリックして、読み込みダイアログボックスを閉じます。次にホームページの下部近く（ライトボックスコンポジションウィジェットの下、フッターの上）を 1 回クリックし、グラフィックをフルサイズで配置します。

この PNG ファイルは低い不透明度が設定されています。このため半透明の花のデザインは、並べて表示される背景画像が透けて見えます。

3. ファイル／配置をもう一度選択します。今回は、spoon-map.png という画像を参照して選択します。「開く」をクリックして、上中央の花びらを 1 回クリックして配置します。
4. スプーン画像が選択された状態で、Option キー（Mac）または Alt キー（Windows）を押したままにして、スプーン画像を複製して、中央からすぐ右側にある花びらまでドラッグします。この操作をもう一度繰り返し、中央のスプーン画像を複製して、その複製したコピーを左側の花びらまでドラッグします。以下の画像に示すように、選択ツールを使用して 3 つのスプーンを配置します。

5. テキストツールを使用して、中央の花びらにテキストフレームを描画して、次を入力します。

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

6. テキストパネルで、次の設定を適用して、テキストの書式設定をします。
   • フォント：Droid Serif（またはその他の serif フォント）
   • フォントサイズ：14
   • フォントカラー：#222222  （パート 5 で、このカラーを katieblack に名前変更しました）
   • フォントの整列：中央
   • 行送り：120％

7. 次に、最後の 2 行のみ（曜日で開始）を選択し、フォントカラーを赤色（#A6342A）に設定します。
8. 選択ツールを使用して、テキストフレームを選択します。Option キー（Mac）または Alt キー（Windows）を押したままにして、テキストフレームを複製して、スプーン画像の上、すぐ右側にある花びらまでドラッグします。この操作をさらに 1 回繰り返し、中央のテキストフレームを複製して、その複製したコピーを左側の花びらまでドラッグします。以下の画像に示すように、選択ツールを使用して 3 つのテキストフレームが 3 つのスプーンの上に整列するように配置します。

9. テキストツールに切り替えます。左側の住所のテキストを選択して、次のように変更します。

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

10. テキストツールを使用して、右側の住所のテキストを選択して、次のように変更します。

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

これでデザインが完了しましたので、エレメントを選択してグループ化します。

11. 選択ツールを使用してクリックして、花のデザイン全体を囲むようにドラッグします。この際、配置した花の画像、3 つのスプーン画像、および 3 つのテキストフレームが選択されていることを確認します。右クリックして表示されるメニューから「グループ」を選択します。あるいは、オブジェクト／グループを選択することもできます。

オブジェクトセットをグループ化すると、コントロールパネルの左上隅にある選択範囲インジケーターに「グループ」という言葉が表示されます。

12. 選択したグループをコピーします。「プラン」をクリックして、プランビューに戻ります。Visit ページサムネールをダブルクリックしてデザインビューでこれを開きます。編集／同じ位置にペーストをクリックして、同じ位置にエレメントグループ全体を配置します。

この短い例からもわかるように、デザインを完成して、ページで位置を変更したり、異なるページにコピーおよびペーストしたりするなど、デザインを 1 つのエレメントとして作業する場合に、グループは非常に便利です。

グループ化の他に、完成したデザインでは、ロック機能も役に立つ場合があります。グループまたは選択したエレメントセットを右クリックして、表示されるコンテキストメニューから「ロック」を選択してロックします（または、オブジェクト／ロックを選択することもできます）。ロックされた項目は選択できないため、ページの完成したエレメントを間違って移動したり、削除したりする心配がありません。後でロックされたエレメントの更新が必要になった場合は、オブジェクト／ページ上のすべてのロックを解除を選択します。

Visit ページの下部に花のデザインをペーストすると、ページコンテンツは部分的に完成します。次のセクションでは、引き続き Visit ページの編集をして、インタラクティブなマップインターフェイスを追加して、顧客が最も近いカフェを見つけることができるようにします。

リッチメディアコンテンツの埋め込みによるアニメーションの追加

スペースパネルの使用

スペースパネルでは、CSS パディングと間隔プロパティを使用できます。パディングは、エレメントのコンテンツ（境界線の内側）の周りの領域を消去します。パディングは、エレメントの背景色に影響されます。

上、右、下、左のパディングは、個別のプロパティを使用して、個別に変更できます。すべてのパディングを均一に編集する方法を選択して、すべてのパディングのプロパティを同様にすることもできます。

1. Adobe Muse で、ウィンドウ／スペース を選択してスペースパネルを表示します。

2. 左、右、上、下のパディングのプロパティを指定します。別の値を入力する場合は、ボタンを未選択にします。

3. 横方向の間隔と縦方向の間隔のプロパティを指定を選択することもできます。

変形パネルを使用したオブジェクトの拡大および回転

Adobe Muse では、オブジェクトに 2D 変形を適用できます。X 軸および Y 軸上でオブジェクトを位置づけ、拡大、および回転できます。

変形パネルの 100% 幅トグルにより、オブジェクトを 100% 幅に設定できます。拡大可能なオブジェクトをブラウザーの幅にまたがるように表示し、コンピューターの画面に合わせるように設定することもできます。

選択したオブジェクトに変形を適用する場合は、以下の手順に従います。

1. Adobe Muse で、ウィンドウ／変形を選択します。

2. 選択したオブジェクトで、以下のいずれかの変形を適用します。
   • 配置：X および Y の値を入力して、Web ページの目的の位置にオブジェクトを配置します。
   • スケール：オブジェクトの幅と高さを入力します。 ボタンをクリックして、均一の幅と高さを持ったオブジェクトを選択することもできます。
   • 回転（）：オブジェクトの回転の角度を入力します。
   • 100％幅（）：オブジェクトを 100％幅に設定し、ブラウザーの幅にまたがるように表示することができます。