(更新170912)
58



■InDesignの設計者がつくったシンプルなIllustratorってカンジです

 おつかれさまです。@gorolibです。

 今日はAdobe museというWebオーサリングツールをご紹介します。

 参考:Adobe Muse CCの購入

 Webオーサリングツールとはいわゆる「ホームページビルダー」です。コーディングなし、GUIだけでWebページが実装できるアプリケーションの総称です。

 私は自慢じゃないですが、まともにコーディングしたことはありません(元システム屋なのですが)。元々はMacawというWebオーサリングツールをずいぶん使っていました。


 鳴り物入りのクラウドファンディングで開発されたツールだそうで、確かに使いやすくソースもきれいなのですが、いかんせんその後の更新がない。実は少々バグがあるので制作の戻りが多いのです。



■結論:Adobe Muse CCを末長く

 そこで今回Webページデザイン&制作の受注を機に、Webオーサリングツールを刷新することにしました。Adobeでなんかないの?と探したところ見つかったのがこのAdobe Muse CC(以下Muse)というわけです。私は中の人ではありませんが、こういうときCCでよかったなぁと思います。結論としてはMuseを末長く使う予定です。もう少しで納品予定ですが、それくらいよかったのです。


■Museのインストール

 インストールはCreative Cloudから。身構えるほどは重くないサイズです(所用時間は「夕飯食べてる間」くらいかな)
11


■エディトリアルとWebが似ているとは意外

 Museは「Webページ制作におけるレイアウトアプリ」と割り切ると、たいへん使い勝手がよいです。最初のデザインからどうぞ!みたいな顔をしていますが、やはりデザインカンプ制作にはIllustratorやPhotoshopなど手慣れたアプリがいいです。

 Museは「InDesignの設計者がつくったシンプルなIllustrator」ってカンジです。実際マスターページやグラフィックフレームという概念があり、配置コマンドのショートカットキーがコマンドDだったりと、やたらInDesignに似ています。
44

なるほどコーディングってレイアウト作業なのですね。エディトリアルとWebが似ているとは意外でした。


■Museはコーディング作業の代替

 一般的にWebページ制作は以下の3工程になると思います。

(1)デザインカンプ作成
(2)素材のスライス
(3)コーディング

 Museは3番コーディングの代替機能だと思ってください。1番もできそうな顔をしていますが、3番に限定したほうが多分使い勝手はよいです。DTPから引っ越しされた方はこのあたりが混乱するのですが(私もそうでした^ ^)、無理やり対応させるとすれば

(1)版下作成
(2)入稿データ作成
(3)印刷

 と対応していただければわかりやすいと思います。Museは前提としてデザインカンプが校了し、素材のスライスが完了している段階と思ってください。


■新規サイト作成(コマンドN)
45

 それでは作業をはじめて行きましょう。まずはコマンドNで新規サイトを作成します。

 ページ幅は固定幅=1200pxでつくってみましょう。一方の可変幅というのがいわゆるレスポンシブデザインです。ブラウザの幅を縮めていくと「にゅにゅにゅ」っとレイアウトが変形するタイプのコーディング方法です。
39

 ところで、私は最近レスポンシブデザイン消極派です。あのトランスフォーマーのようなギミックが果たしてどれだけ商品やサービスの販促に役立つのか甚だ疑問だからです。少しのギミックでもものすごく時間がかかります。コストパフォーマンスの問題ですね…。

 一度、可変幅でレスポンシブデザインを試してみてください。少しでも複雑なデザインにするとあっという間にゴールが見えなくなります。また「こんなはずじゃなかった」とクライアントとのコミュニケーション相違がもっとも発生する箇所でもあります。

 結論としては、デスクトップ用、スマホ用の2種類があればいい。ページ数が多ければその量が気になりますが「高々2倍」です。終わりのみえないレスポンシブデザインよりも数倍効率がいいのです。レスポンシブデザインの必要は必ずしもありません。Webページ制作の目的は企業の販促であり、ギミックの博覧会ではないのですから。


■あとはひたすら配置するだけ(ホントです)

 実はあとはデザインカンプどおりに、ひたすら配置するだけです。
24

 誤解を恐れずに言えば、スライス画像の配置かテキストフレームの配置の2種類です。デザインカンプに座標と幅・高さが入っていればホントに誰でもできる作業なのです。ちなみに変形パネルのショートカットはシフト+F8でIllustratorと同じです。


■フッターはフッターとして

 気をつけるべきはフッターです。最下端になるオブジェクトは右クリックでフッターという設定にしましょう。そうしないとWebページの下端部がうまいこと行きません。
48


■あとはメタデータの設定

 さてあとはメタデータの設定です。
 ページ>ページプロパティ>メタデータ
 にて設定します。

 詳細はここでは省略いたしますが、設定がmeta name=”Description”で、キーワードがmeta name=”keywords” となります。SEO対策ですね…。
12

■サイトの確認方法
19

 さてMuseにおけるサイトの確認方法は大きく3種類あります。
(1)ブラウザでプレビュー
(2)サイトを Business Catalyst にパブリッシュ
(3)HTML 形式で書き出し

 パブリッシュと呼ばれるようですが、何言ってるかよくわからないので(サンド冨樫風)、実機確認と考えていただければと思います(用語は当局に合わせる必要はありますけどね)

 私が実際に使った用途としては、

(1)ブラウザでプレビュー…ちょこちょこ確認したいとき
(2)サイトを Business Catalyst にパブリッシュ…スマホで確認したいとき(仮想含め、自前でサーバを立てなくてもAdobeのサーバを借りることができます)
(3)HTML 形式で書き出し…納品のとき

 なお(1)ブラウザでプレビューについては、サイトをプレビューとページをプレビューの2種があります。Webページ数が多いときは(1)のうち「ページをプレビュー」でちゃちゃっと確認でもいいですが、まとめて見ることがほとんどかと思いますので「サイトをプレビュー」でいいと思います。

 スマホデザインの実機確認には(2)が便利。ローカル端末で仮想Webサーバー立てなくてよいのが極めて便利でした。

 またindex以下のページのファイル名について(なんとか.html)。初期値ではtitleタグのファイル名になってしまいます。日本語titleですとファイル名も日本語になります。そのままでOKですが、macOSからの納品は文字化けしないように圧縮ソフトにご注意ください。このソフトはよかったです。



■今回つくってみたサイトはこちら

 はい、ホントにこれだけです。超カンタンでしょ?

 常々つくろうと思っていた自分のサイトを作ってみました。
58

 お役に立てれば幸いです!ではでは出羽の海。