Digital Creative

Installation Guide for Muse CC 2015

Intermediate Course

Complete Version

Muse CC 2015 導入ガイド[中級編]コンプリート版

21日(火)、Museはバージョン2015.2にアップデート、新機能が搭載されました。現在、操作方法が変わってしまった一部の追加コンテンツを作り直してします。コンプリート版の追加コンテンツは最新のMuse対応になります。

更新日:2016年6月22日(水)

2016年5月17日にリリースされた「Muse CC 2015 導入ガイド[中級編]」は、6月17日に販売終了となりました。[中級編]は、新たな学習コンテンツが追加された[コンプリート版]にアップデートされ、6月22日にリリースする予定です。

現在は、先行販売中です。[中級編]のコンテンツは視聴することができます。新しい学習コンテンツはリリースまで順次公開されますので、いち早く学びたい方は先行販売をご利用ください。

更新日:2016年6月19日(日)

Muse Content

デジタルクリエイティブ・シリーズの「Muse導入ガイド」は、学習の難易度にあわせてコンテンツを分けています。

 

まず、最初に「Museアカデミー」の初心者向け講座でMuseの基本操作を学んでください。誰でも無償で受講することができます。基礎を習得した後は、「固定幅編」で固定幅のレイアウトデザイン(アダプティブデザイン)を学習します。ブレークポイントの設定方法などもここで習得しておきます。

次に「可変幅編」でレスポンシブWebデザインを学びます。難易度が高くなりますが、HTMLやCSSの知識は不要です。マウスドラッグと数値入力だけで、高度なページを作成できます。

 

最後の「中級編」では、より実践的な内容を学習します。6月21日にバージョンアップした「Muse CC 2015.2」の新機能も学ぶことができます。

尚、2016年5月17日にリリースされた最初の「中級編」はすでに販売終了し、新しいコンテンツを追加した「コンプリート版」としてアップデートしています。

固定幅編

詳細ページ

可変幅編

詳細ページ

中級編

※販売終了

コンプリート版

先行販売中

Step-01

Business Catalystにパブリッシュ、HTML形式で書き出し

作成したウェブページを公開する場合は「パブリッシュ」機能を使います。パブリッシュを実行するだけで、仮サイト(検索の対象にならず、30日間しか公開されないチェック用のサイト)を公開したり、設定したFTPサーバーにHTMLデータを転送することができます。また、HTMLデータを書き出し、FTPツールなどを使って公開することも可能です。ただし、書き出されるファイル名についての注意点があります。/10分01秒

Download

Step-01-Data.zip]2.2MB

レッスンデータ:「Step-01-MyPage」フォルダ

完成データ:「Step-01-MyPage-Finish」フォルダ

Step-02

IllustratorからペーストしたグラフィックをHTMLで確認

Illustratorで描画した画像をMuseのページにコピー&ペーストすると、自動的に「SVG」形式に変換されます。内部的には、同時に「PNG」形式にも変換しており、SVGをサポートしていない古いブラウザーではこのPNG形式の画像が表示される仕組みになっていますので、安心して使うことができます。ただし、STEP-01と同様に書き出されるファイル名についての注意点があります。/7分52秒

Download

Step-02-Data.zip]4.3MB

レッスンデータ:「Step-02-MyPage」フォルダ

完成データ:「Step-02-MyPage-Finish」フォルダ

Step-03

マスターに設定したお気に入りアイコンをHTMLで確認

Museで作成したウェブページを「HTMLデータで納品」する場合、Museから書き出したHTMLデータをそのまま渡すことになりますが、設定したはずのお気に入りアイコンがブラウザーに表示されないことがあります。STEP-01および02でも解説した書き出されたファイルの名前に日本語が含まれていることが原因です。Museが自動的に付けてしまうので、HTMLを書き出す前に修正しておく必要があります。/9分25秒

Download

Step-03-Data.zip]3.1MB

レッスンデータ:「Step-03-MyPage」フォルダ

完成データ:「Step-03-MyPage-Finish」フォルダ

Step-04

ページのタイトルをグラフィックで表現するときの注意点

Museで見出しレベルを設定する場合は「テキスト」パネルを使います。タイトルであれば「h1」、記事の見出しなら「h3」のように設定します。では、タイトルや見出しをグラフィック(画像)で表現したいときは、どうすればよいのでしょう? 画像に対して見出しレベルを設定することはできません。このまま公開してしまうと、検索エンジンやウェブのプログラムは、ページのタイトルや見出しを正しく解釈してくれません。/19分18秒

Download

Step-04-Data.zip]201KB

完成データ:「Step-04-MyPage-Finish」フォルダ

Step-05

OGPを設定してSNSで共有されたときに適切な情報を表示

FacebookやTwitterなどで、ウェブページのURLが共有された場合、フィードおよびタイムライン上にページタイトルや概要文、専用の画像が表示されますが、これはOGP(Open Graph Protocol)が設定されているからです。OGPを設定しないと、適当な画像(同じページ上の記事とは無関係の画像など)が表示されてしまうことがあります。このSTEPでは、Museで作成したページにOGPを設定する方法を学習します。/7分15秒

Download

Step-05-Data.zip]7.8MB

レッスンデータ:「Step-05-MyPage」フォルダ

Step-06

ブレークポイントの設定を含む再利用可能な「部品」をつくる

Museには、ページ上で再利用可能な「部品」を登録、管理できる「ライブラリ」パネルがあります。よく使うデザインパターンやレイアウトなどをライブラリとして登録すれば、同じ作業を何度も繰り返すことなく、効率的な作業が可能になります。また、ブレークポイント設定済みの「部品」にしておけば、レスポンシブWebデザインのページにも、ドラッグ配置するだけで簡単に組み込むことが可能になります。/16分57秒

Download

Step-06-Data.zip]52KB

完成データ:「Step-09-Finish」フォルダ

Step-07

ブレークポイントごとに画像を切り替える「部品」を書き出す

Museの「ライブラリ」パネルに登録した「部品」は、外部ファイルとして書き出すことができます(「.mulib」という拡張子のファイルになります)。例えば、チームでサイトを制作している場合、このライブラリを共有すれば、作業の効率化が実現します。ページとライブラリのブレークポイント設定を統一しなければいけませんが、レスポンシブWebデザインのサイト制作では大いに役立ちます。/20分34秒

Download

Step-07-Data.zip]3.4MB

レッスンデータ:「Step-10」フォルダ

完成データ:「Step-10-Finish」フォルダ

Step-08

作成した「部品」をシングルページにドラッグして組み込む

このSTEPでは、素材データを使って(ブレークポイント設定を含む)トップページのカバーグラフィックを作成し、ライブラリとして登録する方法を学びます。STEPの後半では、書き出したライブラリをMuseに読み込み、ウェブページにドラッグ配置するまでの全プロセスを体験しますので、実践的なやり方を身につけることができます。STEP-06、および07の学習がベースになっています(復習を兼ねた内容になっています)。/8分22秒

Download

Step-08-Data.zip]9.3MB

レッスンデータ:「Step-11」フォルダ

完成データ:「Step-11-Finish」フォルダ

コンプリート版の新しいコンテンツが追加されます。追加コンテンツは、すべて(先日バージョンアップした)最新のMuse CC 2015.2を対象としています。

Purchase

Muse CC 2015 導入ガイド[中級編]コンプリート版

先行販売:2016年6月20日/価格:1,000円(税込)

講座ビデオ、レッスンデータ、サンプルデータなどがセットになっています

企画制作・発行:Creative Edge School Books

※現在、先行販売中です。いち早く学びたい方はご利用ください

Creative Edge School Books