Adobe Museがすげぇ
緑だ！ ユフィだ！（関係ない
仕事中、TwitterのTimeLineをボーッと眺めていたら*1、Museがどうこうというツイートがあったので、ちょっと試してみた。まぁこれがすごいのなんの。使い勝手という意味ではもう少し練れるところもある気がするけど、多分充分使い物になるレベルで、ワイヤー起こすには持って来いだし、場合によってはパブリッシュまでこれでやっちゃっていいんじゃないかと。とはいえ、PhotoshopやIllustrator、Fireworksのような画像編集能力はないので、各パーツのデザインは他のアプリに頼らなければならないけど、それでも、ワイヤーからパブリッシュまでのフローをカバーしてくれるのは強い気がする。
で、実際に使ってみて、特にすごいと感じたのが「メニュー項目とサイトツリーとの連携」と「コンテンツ量によるページ高さの自動伸縮とフッターの追随」機能だ。Museはサイトツリーをベースとして管理できるようになっており、ページデザインとして設置したメニューの内容が、そのツリーと連動してくれる。コンテンツが変わったからといって、メニューをいちいち作りなおさなくていいのだ。後者は、その他デザインツールでデザインすると、コンテンツ量に応じて手動でページ高さを変え、その上で、フッターパーツの位置を移動する必要がある。Museはこれを自動化してくれている。以下で、そのフロー図を用いて説明しよう。
起動
起動するとまず、スタートアップスクリーンが開く。右側にフォームのようなものがあるが、ただのリンクバナーなので騙されてはいけない。ここではひとまず左側にある「サイト」というメニューをクリックしよう。
すると、初期設定画面が開く。画面サイズや段組の数を設定することができる。ここにあるマージンやパディングについては、なんのための設定なのが現時点でよくわからない（というか調べてない）ので、とりあえずこのままOKを押してしまおう。
メニュー項目とサイトツリーとの連携
Museではトップ画面がサイトツリーとなっている*2。上部の広いエリアにサイトのページが、下部の狭いエリアにはデザインマスターが置かれている。マスターとは、テンプレートのようなもので、ここに設置した要素（メニューとか、ボタンとか、写真とか）は、関連付けられているすべてのページに反映される。InDesignのそれと同じだ。
まずは、メニュー項目とサイトツリーとの連携を実感してもらうために、マスターにメニューを設置しよう。メニューはすべてのページに存在する要素なので、下部にある「A-マスター」に設置する。これにより、「A-マスター」と関連付けられているページ全てにメニューが表示されるようになる。
メニュー設置
画面下部にある「A-マスター」をダブルクリックして、開こう。
すると、画面上部に「A-マスター」と書かれたタブが一つ増え、Illustratorのキャンバスのようなものが表示される*3。まぁ、キャンバスだ。ここにメニューを設置する。
自動で増減してくれるメニューは、Museがウィジェットとして提供しているパーツを利用する。画面右下にある「ウィジェットライブラリ」というウインドウから、「メニュー → 水平方向」というウィジェットを選び、キャンバスにドラッグしよう。もし、作りたいサイトが垂直方向のメニューであるなら、ウィジェットライブラリから「メニュー → 垂直方向」のウィジットを選べばいい。
その後、図のようにサイズを調整する。もし、作りたいサイトのメニューが画面いっぱいに置くべきで無いのなら、そのデザインに合わせて調整するといい。
ページ追加
一度プランモードに戻る。上部の広いエリアにある「ホーム」という要素にマウスオーバーすると、その左右および下に「＋」マークが表示されるだろう。右の「＋」をクリックすると、その次のコンテンツとしてページが右に追加され、左なら前のコンテンツとして左にページが追加される。下の「＋」なら下層コンテンツだ。今回はメニューのメニューの追加を確認したいので、「ホーム」と同レベルのページを作る必要がある。なので「ホーム」の右側の「＋」をクリックしよう。
そうすると、「ホーム」と同じ見た目の要素が追加される。標準では「名称未設定〜」となっているので、ページ名の部分をダブルクリックして「Page2」に変える。
この状態で、先ほどの「A-マスター」を開くと、あら不思議。メニューが自動的に２分割され、「ホーム」と「Page2」の２つになっている。同様の手順でページを追加したり、並び替えたりすると、その状態に合わせてこのメニューの項目数や文字などが変わってくれる。
フッターの追加
次にページの自動伸縮について確認する。「A-マスター」を開き、矩形ツールや文字ツールを使って適当にフッターを作る。この時、フッターエリア（標準で表示されているガイドの下から３本目より下の範囲）以外に矩形ツール等を用いると、それは「コンテンツ用のデータ」と認識され、フッターエリアに追随してくれない。その場合は、そのオブジェクトを選択した状態で、ツールパレットから「フッター」と書かれたチェックボックスにチェックを入れよう。
ここでプランモードに戻る。ここに並んでいる要素は、各ページデザインのサムネイルなので、各ページのデザインが一覧できる。先ほど、マスターでデザイン要素を設置したので、それらが「ホーム」や「Page2」にも置かれているのが分かるだろう。1つデザインするだけで複数のページに要素を配置できるのがマスターの強みだ。
さて、ここで「ホーム」のサムネイルをダブルクリックして開く。
開いた直後の状態では、先ほどの「A-マスター」と同じデザインになっていると思う。ここに、このページならではのコンテンツとして、「ウィジェットライブラリ → コンポジション → 特集記事」をキャンバスにドラッグし、サイズを調整した。このままではまだ、フッターの位置が「A-マスター」と同じままのはずである。当たり前だ、コンテンツの高さがそれほど高くないので、フッターの位置をずらす必要がない。そこで、この「特集記事ウィジェット」の高さを変更してみる。
「特集記事ウィジェット」の右側をクリックすると、ウィジェットの右半分だけが選択された状態になる。ウィジェットは複数のオブジェクトの集合体（グループ的な何か）なので、それに内包される部分オブジェクトを選択可能なのだ。パーツ内右のオブジェクトが選択された状態で、そのバウンディングボックス下部の四角を下の方にドラッグしてみよう。
するとどうでしょう。右のオブジェクトの高さが、フッターにかかろうとすると、それを避けるようにフッターの位置がずれてくれるはずだ。本来ならこういった無意味に高さを稼いでフッターの位置を調整するのではなく、コンテンツをパチパチ置いていくとそれに合わせて自動的に伸びてくれるものなのだが、まぁ今回は、まぁ。実際、このウィジェットをドラッグして位置を変えれば、それに合わせてフッターがよけてくれるのが分かると思う。
まとめ
説明のため、グダグダ長くなったが、要は「他のデザインツールでは人間が調整する必要のあったことを、Museは勝手にやってくれる」のである。デザインツールというよりウェブ用のレイアウトツールという位置づけだと思うが、各パーツのデザインを別途起こして、Museに読み込ませて使えば、非常に簡単にサイトの構成ができあがるのではないだろうか。
ちなみにMuseは、Adobe Creative Cloud™メンバーシップの一部として提供されているツールのため、パッケージ版を購入した人は使えない。現状のAdobeのサービス展開を見る限り、今後もAdobe Creative Cloud™メンバーシップのみに提供されるサービスというのが増えてくるだろう。そう考えると、パッケージ版を買う利点は「過去のバージョンを残しておきたい」程度しかない。会社の都合で月額払いができない？ そんな会社潰れてしまえばいい*4。
ともかく、Museは非常に便利なツールである。ただ、やはり使い慣れるまでに時間が掛かるし、実際にワークフローに組み込むには少し時間が必要かもしれない。つーかこれ、デザイナーのためのWeb制作ツールじゃなくて、ディレクター向けのWeb制作ツールじゃねーか？
