HTMLやCSSなどの記述を必要としないウェブツール「Adobe Muse CC」を完全習得するためのチュートリアルビデオです。
Adobe Muse CC(ミューズ)は、InDesign(インデザイン)やIllustrator(イラストレーター)などのDTPソフトやグラフィックソフトを使っているデザイナーのためのウェブツールで、HTMLやCSSを記述せずに、ページを作成できます。スマートフォンやタブレット向けのページもデザインできますので、モバイル対応も万全です。また、ウィジェットと呼ばれるウェブページの部品が多数用意されていますので、メニューやボタンだけではなく、スライドショーやGoogleマップ、YouTubeビデオ、ソーシャルメディアのボタンなども簡単に設置することができます。
Adobe Muse CCは、階層構造を持つ情報量の多いウェブサイトを構築するツールではありません。ウェブデザイナーが使うAdobe Dreamweaverとは明確に住み分けされています。Museは、数ページ程度の「マイクロサイト」や1ページだけのOne Page Website(ワンページウェブサイト/シングルページウェブサイト)の作成に適しています。
特に、インパクトのあるビジュアルで訪問者を惹き付け、短い時間で意図した情報を伝えなくてはいけない「ランディングページ」のデザインには最適なツールです。なぜ、Museにパララックススクロールなどの(通常のサイトではあまり使われない)機能が搭載されているのか理解できたでしょうか。
世界中のランディングページを集めて紹介しているLand-bookやOne Page Maniaなどをご覧ください。どのようなページなのかイメージできると思います。
One Page Mania
A Gallery of One Page Websites
Land-book
best landing pages gallery
Museのマルチデバイス対応は、1つのHTMLファイルで多種多様なデバイスのスクリーンに適応させる「レスポンシブ・ウェブデザイン」ではありません。デスクトップやスマートフォン向けのページを作成し、自動的に振り分ける仕組みになっています。Appleが一部のページに採用している方法と同じです。
ここでも、ウェブデザイナーが使うAdobe Dreamweaverとは異なるアプローチで開発されていることがわかると思います。インパクトのあるビジュアル要素で構成されたランディングページをレスポンシブ・ウェブデザインで作成するのは非常に難易度が高く、デスクトップとスマートフォンそれぞれのページを作成したほうが現実的です。
Apple - Thirty Years of Mac
ビジュアルデザインが極めて重要とされるOne Page Website(ワンページウェブサイト)の制作ツールだからこそ、生成されるHTMLの品質やアクセシビリティなどはMuseチームが保証し、IllustratorやInDesignのインターフェイスを採用した特別な環境が用意されたわけです。Museは、グラフィックデザイナーのための「デザインツール」の一つと捉えてよいでしょう。
Adobe TVでMuse関連の動画を見ると、InDesignユーザーグループで知られているジェームズ・フリッツ氏が登場するなど、あきらかにウェブデザイナーをターゲットにした製品ではないことが理解できると思います。
原稿(テキスト)も図版(画像)も、HTML5インタラクティブコンテンツ(Edge AnimateのOSM)もファイルメニューの[配置]でレイアウト!
配置
アセット管理機能を使えば、ページに配置した画像をPhotoshopで修正、Museで更新できる(修正が反映される)! 配置した画像を別の画像と入れ替えることも可能!
アセット管理
レイヤー
レイヤー機能とオブジェクトの「グループ化」を活用して、効率的なページデザイン! 複雑なレイアウトでもレイヤー構造で視覚化できる!
段落スタイルで、見出しレベルの指定は必須。Museが、文書構造を解釈してくれないから。
段落スタイル
グラフィックスタイル
装飾アイテムはすべてグラフィックスタイルに登録して、積極的に再利用していこう!
Adobe Muse CCの基本操作を習得しよう!
2月からスタートする「実践編」では、本格的なランディングページを作成しますが、この「基礎編」ではMuseの基礎を完全習得しておきます。チュートリアルビデオ(ウェブキャストの記録)は、23本に分かれており、6時間17分ほどになります。空き時間を利用してゆっくり学習してもよいですし、週末を使って一気に習得することも可能です。
Adobe Muse CCがどのようなツールなのか大まかなイメージがつかめるように解説します。また、初心者向けの情報として、Museのヘルプページやフォーラムなどを紹介しています。
Adobe Muse には、テンプレートやライブラリなども提供されています。このチュートリアルでは、Museのサイトや外部のストアで提供されているテンプレートやライブラリを紹介し、どのように活用するのか解説します。
Adobe Muse用のテンプレートには、デスクトップ(パソコン)用のみ、スマートフォンやタブレットのデザインも含まれているものなど、いくつかの種類があります。テンプレートの選び方について解説します。
Adobe Museは、プラン(サイト構造)、デザイン(ページ作成)、プレビュー(作成したページの確認)、パブリッシュ(公開)、管理(アクセス解析など)の5つの機能を使って作業を進めます。Vol.04では、プランから管理までの大まかな流れについて解説します。
Adobe Museは、HTMLやCSSなどのファイルを意識することなく、サイトを公開することが可能ですが、サイトを構成するHTMLやCSS、JavaScriptなどを書き出すこともできます。Vol.05では、HTMLの書き出しについて解説します。また、MuseのSEO(検索エンジン最適化)対応についてもお話します。
Adobe Muse でHTMLやCSSのコーディングは必要ありませんが、見出しのレベル(タイトルや中見出し、記事の小見出しなど)については、段落スタイルを使って指定しなければいけません。Vol.06では、見出しの指定について詳しく解説します。とても重要な学習になります。
このチュートリアルは無料で視聴できます。
ウェブサイトにはすべてのページに設置されるナビゲーションメニューがあります。Adobe Museは、サイトの構造を決めるだけで、自動的にナビゲーションメニューの基本形を作成してくれます。Vol.07では、ナビゲーションメニューの設置方法について解説します。
Adobe Museにはライブラリ機能が搭載されているため、ボタンやアイコンなどを共有したり、自作のアイテムをライブラリとして書き出すことも可能です。Vol.08では、Font Awesome(フォントオーサム)というライブラリを使って、アイコンフォントを活用する方法を解説します。
Adobe Museのユーザーは、Adobe社のホスティングサービス「Bussiness Catalyst(ビジネスカタリスト)」を利用できます。仮サイトは無制限(更新がなければ30日で消滅)、本番サイトは5つまで無料で立ち上げることができます。Vol.09では、仮サイトの公開について解説します。
Adobe Museの初期設定では、ページタイトルと同じ名前をHTMLファイルに適用しますので、設定を変更する必要があります(HTMLのファイル名が日本語になってしまう可能性があります)。Vol.10では、ファイル名の指定など、ページプロパティについて解説します。
Adobe Museには、ロールオーバー(カーソルが重なったときの状態)やマウスダウン(クリックしたときの状態)などのデザインを含むステートボタンが用意されていますが、Vol.11ではオリジナルのボタンを作成します。また、ライブラリとして書き出す方法も解説します。
Adobe Museは、InDesignやIllustratorなどに近いUI(ユーザーインターフェイス)になっていますので、文章もテキストフレームを調整しながら直感的にレイアウトしていきます。Vol.12では、段組みレイアウトの表現についても学習していきます。
Adobe Museは、Adobe Illustratorと同様の操作で画像を配置したり、レイアウトすることができます。Vol.13では、画像の配置、拡大縮小、テキストの回り込みなど、基本的な操作方法について解説します。
Vol.14は、Vol.13「画像の配置と回り込みの設定」の続きです。Vol.13では、画像の配置、レイアウト、回り込みについて学習しましたが、今回は配置した画像にキャプションを追加します。
Vol.15は、Vol.14「キャプションの配置とレイアウト」の続きです。Vol.14では、画像にキャプションを追加しましたが、今回は画像とキャプションをまとめてライブラリとして登録します。
ウェブページには、背景色だけではなく、背景画像を配置することも可能です。Vol.16では、背景画像の設定方法(ページ全体の背景、コンテンツ領域の背景、描いた長方形の背景など)を詳しく解説します。
Adobe Museには、作業を効率化するためのアセット管理機能が搭載されています。この機能を使用することで、配置した画像を入れ替えたり、元画像(オリジナル画像)をPhotoshopなどで編集し、Muse上の画像を更新することができます。Vol.17では、アセット管理について詳細に解説します。
Vol.17「アセット管理の機能を理解する(1)」の続きです。前回同様、用意されている素材画像を使いながら、アセット管理機能の使い方を学習していきます。
Vol.17「アセット管理の機能を理解する(1)」、Vol.18「アセット管理の機能を理解する(2)」の続きです。アセット管理機能の利点については学習しましたが、注意しなければいけないこともあります。Vol.19では、Photoshopなどの他のソフトと連携するときの注意点について解説します。
Adobe Museには、PhotoshopやIllustratorなど、グラフィックソフトではお馴染みのレイヤー機能が搭載されています。使い方も同じで、ページデザイン作業を効率化します。Vol.20では、レイヤー機能を活用した作業方法について解説します。また、レイヤー構造を持つPSD(Photoshop)ファイルの扱いについても取り上げています。
Adobe Museは、スマートフォンやタブレット向けのページデザインも作成できますが、画面が小さくなると、デスクトップ用のナビゲーションメニューをそのまま配置できなくなります。Vol.21では、スマートフォンで使いやすいメニューの作成方法について解説します。この学習は、Vol.22に続きます。
Vol.21「スマートフォン向けのナビゲーションメニューを作成する(1)」の続きです。スマートフォンで使いやすいナビゲーションメニューを作成していきます。Adobe Muse CC 完全習得[基礎編]の中で最も難易度の高い作業になっていますので、時間をかけて説明しています。ゆっくり進めてください。
Adobe Museには、ウィジェットライブラリが標準搭載されており、複数のスライドショーがすでに用意されています。Vol.23では、フルスクリーンタイプのスライドショーを(デスクトップとスマートフォンのページに)設置します。Vol.22「スマートフォン向けのナビゲーションメニューを作成する(2)」で作成したページに設置しますので、準備しておいてください。
チュートリアルビデオの素材データは
ここからダウンロードできます
ノンプログラマーズ・ウェブデザインは、企業・学校向けに提供しているウェブキャスト(オンライン受講料:6時間/12,500円)のアーカイブをまとめたものです。アーカイブには、ズーム処理(部分拡大)を加えていますので、かなり見やすくなっています。参考:昨年のウェブキャスト
ノンプログラマーズ・ウェブデザイン
(税込)
6時間17分(23本)のチュートリアルビデオをダウンロードできます。
販売終了
ノンプログラマーズ・ウェブデザイン・シリーズは、基礎編、実践編、ビジネス編で構成されています。基礎編で、Adobe Muse CCの基本操作を習得しましたので、実践編では本格的な「ランディングページ」を作成していきます。3月には、ランディングページの設計およびLPO(ランディングページ最適化)について学習する「ビジネス編」も予定しています(アーカイブのリリースは5月を予定)。
ノンプログラマーズ・ウェブデザイン(ウェブキャスト)の最新情報については、現在公開中のウェブマガジン「EBOOK STRATEGY MAGAZINE」の連載記事をご覧ください。
また、ノンコーディングでウェブアプリやハイブリッドアプリを作成する「グラフィックデザイナーのためのウェブアプリ制作」も同時連載していますので、ご興味のある方は是非ご覧になってください。
デザインの未来 デジタルパブリッシングチーム
学校法人阿佐ヶ谷学園 高度情報化研究所eface lab. / ズオンコーポレーション 164-0011 東京都中野区2-30-9 ツバセス中野坂上 333