Adobe Museでクリックするとフルスクリーン表示になるメニューを作る

今回は、クリックすると表示されるフルスクリーンメニューの作り方です。フルスクリーンメニューはMuseの標準のウィジェットの中にある、「コンポジション→プレゼンテーション」と「メニュー→垂直方向」を組み合わせることで作ることができます。

1. 準備として、メニュー用のアイコンを用意する。

Museでの作業の前に、フルスクリーンメニューで使用するアイコンを用意してください。この記事では、Illustratorで作成した≡字のアイコンとX字のアイコンの2ファイルを使用しています。

イラストレーターで作ったアイコン。左が通常、右が閉じる用。
説明しやすい様に、カラーをグレーにしました。

2. Adobe Museで複数ページを作る。

メニューが完成した際に分かりやすい様、複数ページを作成します。完成したメニューは後から増やしたページに対しても自動でリンクが追加されるので、気にしない方はホームのページのみでの作業でもかまいません。

3ページを追加して、計4ページに。

3. コンポジションのプレゼンテーションを配置

作業はマスターページで行います。Aマスターページを開き、ウィジェットライブラリからコンポジション→プレゼンテーションを選択。上の小画面に表示された画像をページ上にドラッグします。

ウィジェットライブラリのコンポジションから、プレゼンテーションを使用します。

↓

4. コンポジションオプションを設定する

ウィジェットライブラリからページ上にドラッグすると、コンポジションオプションが自動で表示されるので、下の写真を参考に、位置をライトボックス、パーツの閉じるボタンにチェックを入れてください。

コンポジションオプションの設定

5. 不要なオブジェクトを削除する

ページ上にあるプレゼンテーションのオブジェクトをクリックして、必要のないオブジェクトを削除します（画面ではページの縦を確保して見やすくなるように、左側に縦長の画像ボックスを配置しています。さらに左下に重なっていた1.2.3ボタンを下に移動させています）。

2と3のボタンを選択し、デリートボタンで削除します。さらに、中央の四角の中にある1のテキストと写真を削除します。

2と3のボタンを削除すると、対応するテキストと写真も消えます。

↓

1のボタンは使用するので、テキストと写真のみを削除。

↓

削除した状態

6. プレゼンテーションオブジェクトのカラーの編集

残したオブジェクトのカラーを編集します。内側の黒は透明にして下さい。周囲のグレーはフルスクリーンになった際の画面に広がる色になります。ここでは青緑色を指定してます。また、塗りの濃度が90%になっているので、100%にしてください（塗りが半透明の場合、メニューを開いた状態の時に、後述する1のボタンが透けてしまいます。その場合、上に重なるX字ボタンの背景を黒にするなどの工夫が必要になります）。

内側は透明、外側は任意の色にしてください

7. 動作の確認

一度動作の確認をします。画面右上にあるプレビューの文字をクリックしてください。

左下に残っている1のボタンをクリックすると画面全体に色が表示され、画面にある小さなXのボタンをクリックすると元の状態に戻ります。

8. ボタンの調整

はじめに、1のボタンの中のテキストフレームとXのボタンの中のテキストフレームを削除します。次に、2つのボタンの大きさを同じサイズにしてください。画像では縦横60pxに設定しています。

テキストを削除

↓

2つのボタンを同じサイズに

9. ボタンにアイコン画像を設定

ボタンを選択した状態でステートパネルの通常を選択し、1のボタンにイラストレーターで作った≡字のアイコン画像を、XのボタンにはX字のアイコン画像を背景として配置します。設定は下記の画面を参考にしてください。

ボタンのステート「通常」にアイコン画像を入れます。

↓

1ボタンの背景に≡字のアイコン画像を設定

↓

Xボタンの背景にもアイコン画像を設定

10. ボタンのステートを設定

ステートパネルを開いて、全てのステートの線と塗りを透明に設定します。

2つのボタンの全てのステートの線と塗りを透明に

11. 2つのボタンを右上に配置

ボタンを画面右上に配置します。2つのボタンを重ねて配置し、固定メニューで右上に固定してください。

12. 垂直メニューを配置する

ウィジェットライブラリからメニュー→垂直方向を選択し、上部に表示されたメニュー画像を四角の中央にドラッグ＆ドロップします。

ウィジェットメニューから垂直メニューを配置

13. 完成

以上の手順で完成です。垂直メニューのデザイン、ステートはお好みでどうぞ。