ホームページを簡単作成！時間がない人のためのAdobe Muse入門
グラフィックデザイナーの中には、美しいホームページを作りたいけれど、ソースコードを見ることすら苦手…というひとも多いのではないでしょうか。
確かに、ホームページを作成するには、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
テキサスでローカルビジネスのサポートをしているGo Localのホームページです。
ページが読み込まれた後、すぐに目に飛び込んでくるのが、「Go Local」のロゴと背景動画です。
Adobe Museでは、動画をはじめとしたマルチメディアサイトを作成することもできます。
2. 株式会社ケミットジャパン
福島に拠点を置く、通訳・翻訳会社兼ウェブ制作会社の株式会社ケミットジャパンのホームページです。
スクロールするとテキストなどの要素がふわりと登場します。
こうした各種スクロールエフェクトも、Adobe Museで簡単に実装することができます。
3. RE Shots
不動産サイト専門の写真を撮っているオーストラリアのRE Shotsのホームページです。
トップページ中盤から始まるギャラリーでは、複雑なグリッドが組み込まれていますが、こうしたレイアウトもAdobe Museなら流し込みたい写真をドラッグ＆ドロップするだけで済みます。
4. CLOUD PORT 360
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
MuseGainでは、Adobe MuseとWordPressを組み合わせて動的なホームページを作るためのテンプレートが無料で配布されています。
追加機能であるウィジェットも180種類以上用意されているので、かなりダイナミックなホームページを作ることができそうです。
MuseGrid
http://www.musegrid.com/adobe-muse-templates
MuseGridではテーマ別に使えそうなテンプレートを100種類以上用意しています。
写真を効果的に使ったテンプレートが多く、ランディングページにも活用できそうですね。
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はオススメです。
また、今回はご紹介できませんでしたが、テンプレートの他に、ウィジェットもインターネット上で多く配布されています。
ぜひ便利な機能を見つけて実装してみてください。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- JavaScript
- JavaScript（ジャバスクリプト）とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- FTP
- FTPは、「File Transfer Protocol（ファイル トランスファー プロトコル）の略語で、ホームページのデータをサーバーに転送したりダウンロードしたりする技術のことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- トップページ
- インターネットのウェブサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つウェブサイトの最上位のウェブページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト（ウェブレイアウト）」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- WordPress
- WordPressとは、CMS（コンテンツマネジメントシステム）の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ランディングページ
- ランディングページ（landing page）とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- WordPress
- WordPressとは、CMS（コンテンツマネジメントシステム）の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ランディングページ
- ランディングページ（landing page）とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- インターネット
- インターネットとは、通信プロトコル(規約、手順)TCP/IPを用いて、全世界のネットワークを相互につなぎ、世界中の無数のコンピュータが接続した巨大なコンピュータネットワークです。インターネットの起源は、米国防総省が始めた分散型コンピュータネットワークの研究プロジェクトARPAnetです。現在、インターネット上で様々なサービスが利用できます。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO（検索エンジン最適化）
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション（MA）
- リードジェネレーション（見込み顧客獲得）
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O（Online to Offline）
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
その他のカテゴリ
この記事を書いたライター
