▼ 概要
MuseCCをつかって、ランディングページを作ってみました。
最終的に、htmlやcssファイルに書き出されるところまでの作り方をまとめます。
▼ MuseCCとは
Adobeが提供しているWebデザインソフトです。
同じくAdobeが提供しているDreamWeaverとは異なり、html、css、javascriptなどをかかなくても、部品をドラッグ＆ドロップで設置するだけで、ブラウザで動くWebサイトを完成させることができます。
ウィジェットと呼ばれる部品の中には、アニメーションやスライドショーといった動的コンテンツに対応しているものもあります。
▼ 準備
- Mac または WindowsPC
- Adobe Muse CC 2014
- Webに設置したい素材（pngなど）
- マウス（トラックパッドよりは楽でした）
▼ ランディングページ作る
（１）デザインするまでの準備
兎にも角にも、MuseCCを起動します。起動すると、以下の画面が主張してくるはずなので、新規作成の「サイト」をクリックします。すると、サイトの大きさを決定する画面が出ると思います。今回は、何も考えず「OK」をクリックします。
サイトのマスター画面が表示されました。複数画面を持つWebサイトを作成する場合は、このマスター画面に複数の画面を作成することになりますが、今回はシングルページのランディングページを作成するので、特にこの画面は操作しません。
左上の「ホーム」をクリックします。
この画面で、ランディングページのデザインを作っていきます。左側から簡単に機能を紹介します。
左側がいわゆる編集ツール。AIやPSのようにとても種類が豊富とは言い難い数のツールしかありませんが、基本的に「描く」ためのツールではなく「配置する」ためのツールなので、必要十分な機能だと思います。描くときはAIやPSを使いましょう。
右側が部品の色や形を変えたり、既に完成された部品を取り出して配置することができるツール群です。
ウィジェットの中には、マウスオーバーすると色が変化するボタンやシンプルなフォームなど、既に部品化されたデザインが幾つか揃っているので、これを適当に配置するだけでも十分機能的なWebデザインになります。
ライブラリには、自分で作った部品デザインを保存して再利用できるようにしたり、ダウンロードしてきた部品のライブラリをストックすることができます。
ダウンロードできるライブラリは、有料のものから無料のものまで様々あり、無料のものでも非常にクオリティの高い部品がたくさんあります。
自分で部品をデザインできる人にとっては、ライブラリに自作部品を備品をストックして再利用したり外部ファイルとして書き出すこともできるので、大きな財産にもなると思います。
（２）実際にデザインする
なんとなく機能がわかったので、実際に部品を配置してデザインしてみます。
今回はウィジェットと、いくつかの無料の外部ライブラリの部品をつかいます。
使用する外部ライブラリは、「Amphi_QooQee_NavBars」です。
とりあえず、「Amphi_QooQee_NavBars」のナビゲーションをドラッグしておいてみました。
ドラッグすると中央や端に吸い付くように寄せてくれるので、設置しやすい。
テキストも設置してみましょう。
フォントはライセンスの兼ね合いもあると思いますが、小塚やヒラギノなどシステム組み込みのフォントを利用する場合は、画像として再利用できない形で出力されるので、特に気にする必要はなさそうです。
背景画像なんかも置いてみましょう。
デスクトップに保存したpngファイルをMuseCCのウィンドウにドラッグするだけで取り込めました。
イラストを配置してナビゲーションの色を変えるだけで、なんかもうそれっぽい。
この時点でブラウザだとどんな感じになるのか確認できるので、動作確認してみましょう。
ナビゲーションのボタンが、マウスオーバーで色が変わることがわかります。
この勢いで、いろいろ部品を置いていきましょう。
できました。渾身の力作です！
（３）ブラウザで動かしてみる
渾身の力作が完成したところで、実際のブラウザで動作を試してみましょう。
メニューの「ファイル」の「ブラウザーでサイトをプレビュー」をクリックします。
ちゃんと動きました！（突貫なのでクオリティは許してください）
（４）完成したWebサイトをローカルにhtml形式で出力する
めでたく完成したので、htmlやらcssやらに出力します。
メニューの「ファイル」の「html形式で書き出し」をクリックすると次の画面が出ますが、今回はパブリッシュ（adobeのサーバーにアップロードできる機能）はしないので、「index.html」とでも入力すれば、ローカル保存のみ実行してくれます。なんか警告は出ますが問題ないです。
無事書き出されました。「index.html」にメインのhtmlが書き出され、フォントや画像などは「images」、動的な処理のためのスクリプトは「script」に、cssは「css」に全て書き出されています。この状態でindex.htmlをブラウザで開いても、ちゃんと表示されるはずです。
めでたし！
▼ 応用
- 便利な外部ライブラリ集（記事作成中）
- MuseCCでBootstrapを利用する方法（記事作成中）