ホームページを簡単作成！時間がない人のためのAdobe Muse入門

更新日: 2019年03月13日

グラフィックデザイナーの中には、美しいホームページを作りたいけれど、ソースコードを見ることすら苦手…というひとも多いのではないでしょうか。
確かに、ホームページを作成するには、HTMLだけでなくCSSやJavaScript、そしてよりリッチでインタラクティブにするためにはプラグインやライブラリの知識も必要です。

しかし、グラフィックデザインのような印刷物をデザインする感覚でホームページを作成することができるツールがAdobeからリリースされています。

それが、Adobe Muse(ミューズ)です。
グラフィックデザイナーだけでなく、コーディングが苦手なかた、コーディングが面倒だと思っているかたにはぜひ使ってほしいソフトウェアです。

今回は、「面倒くさがりやのためのAdobe Muse入門」と題して、どんなことができるのか、どうすれば簡単に美しいホームページが作れるのかを解説していきます。

2018年6月25日追記：この記事で紹介しているAdobe Museは2018年3月26日で機能開発が終了しております。技術サポートは2020年3月26日までとなっていますので、現在利用している方はそれまでに何らかの移行処置をしましょう
参考：Adobe Muse のサービスの終了

Adobe Museとは？

Adobe Museは、コーディングの知識がなくても美しいホームページを作ることができるソフトウェアです。
写真や動画、あるいは必要な機能をウィジェットとして追加することで、見た目だけでなく機能性も十分に備えたホームページを作ることができます。

これまでも同系のソフトとしてホームページビルダーやBiNDなどがありました。
Adobe Museもこれらのソフトと似たようなインターフェイスを持っていますが、Creative Cloudのサブスクリプション(年額・月額課金)に含まれているのでメンバーは追加料金を払う必要がなく、PhotoshopやIllustratorなどの他のAdobe製品との互換性があるというメリットがあります。

ソースコードを吐き出して自分でFTPサーバーにファイルをアップロードすることも、直接サーバーに接続してアップロードすることもできます。

Adobe Museでどんなサイトが作れるの？

それでは、実際にAdobe Museを使ってどんなホームページが作れるのかを確認してみましょう。
以下、Adobe Museを使って制作したホームページを一例としてご用意しました。
ご覧頂ければ分かるのですが、背景に映像をつかったりと、最近流行しているデザイントレンドを反映したホームページを作ることもできます。

1. Go Local

http://www.golocalgroup.com

テキサスでローカルビジネスのサポートをしているGo Localのホームページです。
ページが読み込まれた後、すぐに目に飛び込んでくるのが、「Go Local」のロゴと背景動画です。
Adobe Museでは、動画をはじめとしたマルチメディアサイトを作成することもできます。

2. 株式会社ケミットジャパン

http://www.kmtjapan.com

福島に拠点を置く、通訳・翻訳会社兼ウェブ制作会社の株式会社ケミットジャパンのホームページです。
スクロールするとテキストなどの要素がふわりと登場します。
こうした各種スクロールエフェクトも、Adobe Museで簡単に実装することができます。

3. RE Shots

http://www.reshots.com.au

不動産サイト専門の写真を撮っているオーストラリアのRE Shotsのホームページです。
トップページ中盤から始まるギャラリーでは、複雑なグリッドが組み込まれていますが、こうしたレイアウトもAdobe Museなら流し込みたい写真をドラッグ＆ドロップするだけで済みます。

4. CLOUD PORT 360

http://cloudport.jp

360度死角なしのフル球体写真を撮影するフォトエージェンシーCLOUD PORT 360のホームページです。
文字が飛び出るアニメーション、シングルページで任意の場所に移動するメニューなども、Museを使って実装されています。

Adobe Muse 3つの活用ポイント

面倒くさがりのひとでも、Adobe Museを使えば数時間でクオリティの高いホームページを作成することができます。
それでは、なぜ他のホームページ作成サービスではなくAdobe Museを使うべきなのでしょうか。
ポイントは、3つあります。

1. コーディングが一切不要

前述したように、Adobe Museではコーディングは一切不要です。
InDesignに似たインターフェイスを持っているので、印刷物をデザインするような感覚でホームページを作成することができます。

2. さまざまな機能のウィジェット

Adobe Museでいうウィジェットとは、WordPressでいうプラグインのようなものです。
SNSのメタタグを自動挿入したり、写真をクリックしたらライトボックスを表示したりと、便利な機能がたくさんあります。

3. もちろんレスポンシブ対応

Adobe Museではレスポンシブ対応のホームページも簡単に作ることができます。
多くのテンプレートではすでにレスポンシブ化されているので、レスポンシブにするための特別な操作は必要ありません。

無料テンプレートの配布サイト

Adobe Museでは、ゼロから白紙でホームページを作ることもできますが、テンプレートを使ってホームページを作成したほうが、圧倒的に早く美しいホームページが出来上がります。
クオリティの高いテンプレートの中には有料のものもたくさんありますが、素晴らしいテンプレートを無料で配布しているホームページもあります。
そこで、使い勝手のよいテンプレートを無料で配布しているサイトをご紹介します。

musefree

https://musefree.com/category/themes/

musefreeでは、パララックスやシングルページなどの特徴的なテンプレートを配布しています。
テンプレートの中にはランディングページやビジネスサイトも用意されています。

MuseGain

https://www.musegain.com

MuseGainでは、Adobe MuseとWordPressを組み合わせて動的なホームページを作るためのテンプレートが無料で配布されています。
追加機能であるウィジェットも180種類以上用意されているので、かなりダイナミックなホームページを作ることができそうです。

QooQee.com

https://www.qooqee.com/adobe-muse-templates

QooQee.comでは、デザイン性の高いテンプレートが無料でダウンロードできます。
便利なウィジェットも同梱されているのでワンパッケージでホームページを作ることができますね。

MuseResources Grid Template

http://museresources.com/templates.html

どうしても白紙からデザインしていきたいという場合には、MuseResources Grid Templateを使ってレスポンシブ対応にしておきましょう。
960pxの12カラム・1200pxの15カラムから選ぶことができます。

まとめ

Adobe Museを使うことで、コーディングが面倒な場合でも数時間で簡単にホームページを作成することができます。
複雑なホームページには向いていませんが、視覚的・直感的に扱えるので、ひとまずある程度のクオリティを持ったホームページを開きたいという場合にはAdobe Museはオススメです。

また、今回はご紹介できませんでしたが、テンプレートの他に、ウィジェットもインターネット上で多く配布されています。
ぜひ便利な機能を見つけて実装してみてください。