CREATIVE EDGE SCHOOL BOOKS
クリエイティブエッジスクールブックス

印刷会社とデザイナーのためのMuse速習講座
専門知識は不要！明日から実践できるWebページ制作！
CREATIVE EDGE SCHOOL BOOKS

design-zero.tv

CREATIVE EDGE SCHOOL BOOKS
クリエイティブエッジスクールブックス

design-zero.tv

Muse Academy
http://design-zero.tv/muse2016/

Muse Academy
http://design-zero.tv/muse2016/

Google検索で「Adobe Muse アカデミー」と入力

AGENDA［1］Museの基本を理解する［2］準備する［3］Museの3種類のページ作成方法を理解する［4］Museを使う利点について理解する

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS［1］Museの基本を理解する

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Museの特徴
Museの対象者
Museが適している仕事

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERSMuseの特徴

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

・専門の知識（HTMLやCSSなど）は必要ない
・マウスドラッグと数値入力で高度なWebページを作成できる

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

マウスドラッグと数値入力だけで高度なウェブページを作成できる

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Museの対象者

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

ウェブデザイナー

グラフィックデザイナー
DTPデザイナー
中小企業の広報担当者
アーティストDreamweaverMuseADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

InDesign
新規ドキュメント

Muse
新規サイト

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

InDesign
新規ドキュメント

InDesignを開発していたチームがMuseを設計

Muse
新規サイト

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

ブラックボックス
見せないHTMLJSCSS
触らせないADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Museが適している仕事

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Webサイトのタイプ

Single Page
WebsiteSingle Long-Page
WebsiteLightweight Website

General Website

Mega Website

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

シングルページや軽量サイトに適している

Single Page
WebsiteSingle Long-Page
WebsiteLightweight Website

General Website

Mega Website

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

階層構造型の一般的なサイトも作成できる

Single Page
WebsiteSingle Long-Page
WebsiteLightweight Website

General Website

Mega Website

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

大規模なサイト構築には適していない

Single Page
WebsiteSingle Long-PageWebsite

Lightweight Website

General Website

Mega Website

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

特にシングルページは簡単かつ迅速に作成できる

Single PageWebsite

Single Long-PageWebsite

Lightweight Website

General Website

Mega Website

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

ランディングページ
プロモーションページ
キャンペーンページ
特設ページ
顧客向け案内ページ
ティーザーページ

シングルページの需要増

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Video-2: 20160701-Sample-Page.mp4

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

表現の自由度の高さ、独創的なデザインも可能
・ビジュアルデザインを支援する機能
・動的なインフォグラフィックの組み込み・高品質なフォトグラフィの取り込み
・特殊な演出（視差効果など）にも対応

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS［2］準備をしよう！

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

体験版をダウンロードしよう！

Muse

Illustrator

Photoshop

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Adobe Stockにログインしよう！

+Illustrator

Muse

Photoshop

Stock

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS+Illustrator

Muse

Photoshop

Stock

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Adobe Sensei+Illustrator

Muse

Photoshop

Stock

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

CCライブラリMuse

Creative Cloud Libraries

Illustrator

Photoshop

AnimateADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Muse

Illustrator

Photoshop

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERSCCライブラリ
Muse

共有

同期

Creative Cloud Libraries

Illustrator

Photoshop

AnimateADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Adobe StockADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

6,000万点以上の素材

Adobe StockADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

カンプ用の画像をダウンロードする
自分のライブラリに保存しておけばMuseのパネルから挿入できる

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

CCライブラリ
Muse

共有

同期

6,000万点以上の素材

Illustrator

Photoshop

AnimateADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Adobe Stockの解説: Adobe-Stock-Demo.mp4（6分25秒）

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

ページ作成の流れを理解する

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

１．ページの大まかなデザインを考える
２．素材を準備する
３．仮組のページを作成する
４．仮サイトにページをアップして確認（パブリッシュ機能）

５．ページ作成
６．本番サイトにページをアップする

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

１．ページの大まかなデザインを考える
２．素材を準備する
３．仮組のページを作成する
４．仮サイトにページをアップして確認（パブリッシュ機能）

５．ページ作成
６．本番サイトにページをアップする

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERSADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERSADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

１．ページの大まかなデザインを考える
２．素材を準備する
３．仮組のページを作成する
４．仮サイトにページをアップして確認
５．ページ作成
６．本番サイトにページをアップする

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

共有素材／専用素材を決める

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

１．ページの大まかなデザインを考える
２．素材を準備する
３．仮組のページを作成する
４．仮サイトにページをアップして確認
５．ページ作成
６．本番サイトにページをアップする

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Video-6: 20160621-New-Muse-1.mp4

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

１．ページの大まかなデザインを考える
２．素材を準備する
３．仮組のページを作成する
４．仮サイトにページをアップして確認
５．ページ作成
６．本番サイトにページをアップする

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

2つのパブリッシュ
パブリッシュ

パブリッシュ

指定したサーバーにFTP

Adobeのホスティングサーバーにアップロード
30日で消滅する仮サイト※パブリッシュする度に延長される

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Museから書き出したHTMLデータをFTP

HTMLFTPツールでサーバーにFTPFTPServer

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

１．ページの大まかなデザインを考える
２．素材を準備する
３．仮組のページを作成する
４．仮サイトにページをアップして確認
５．ページ作成
６．本番サイトにページをアップする

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

１．ページの大まかなデザインを考える
２．素材を準備する
３．仮組のページを作成する
４．仮サイトにページをアップして確認
５．ページ作成
６．本番サイトにページをアップする

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

2つのパブリッシュ
パブリッシュ

指定したサーバーにFTP

パブリッシュ

Adobeのホスティングサーバーにアップロード
30日で消滅する仮サイト※パブリッシュする度に延長される

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

１．ページの大まかなデザインを考える
２．素材を準備する
３．仮組のページを作成する
４．仮サイトにページをアップして確認（パブリッシュ機能）

５．ページ作成
６．本番サイトにページをアップする

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

デザイン案が出てこない！

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

デザインのインスピレーション

Pinterestを活用する

Video-4: Pinterest.mp4

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

6,000万点以上の素材

Adobe StockADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Museが適している仕事
ランディングページ
プロモーションページ
キャンペーンページ
特設ページ
顧客向け案内ページ
ティーザーページ

シングルページの需要増

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

表現の自由度の高さ、独創的なデザインも可能
・ビジュアルデザインを支援する機能
・動的なインフォグラフィックの組み込み・高品質なフォトグラフィの取り込み
・特殊な演出（視差効果など）にも対応

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

表現の自由度の高さ、独創的なデザインも可能
・ビジュアルデザインを支援する機能
・動的なインフォグラフィックの組み込み・高品質なフォトグラフィの取り込み・特殊な演出（視差効果など）にも対応
需要増

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Adobe SparkADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Adobe Spark の「Page」紹介: Muse-PS-Stock-Demo.mp4（1分30秒）

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

CCライブラリ
Muse

共有

同期

Creative Cloud Libraries

Illustrator

Photoshop

AnimateADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

CCライブラリ
Muse

共有

同期

Creative Cloud Libraries

Illustrator

Photoshop

AnimateADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

MuseとIllustratorのCCライブラリを介した連携作業: CC-Lib-Demo.mp4（2分54秒）ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

CCライブラリ
Muse

共有

同期

Creative Cloud Libraries

Illustrator

Photoshop

AnimateADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

CCライブラリ
Muse

共有

同期

Creative Cloud Libraries

Illustrator

Photoshop

AnimateADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Muse上でStockを使う／Photoshopで編集: CC-Lib-Demo-2.mp4（2分11秒）

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

CCライブラリ
Muse

共有

同期

6,000万点以上の素材

Illustrator

Photoshop

AnimateADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

MuseとStock、Photoshopの連携作業: Muse-PS-Stock-Demo.mp4（5分33秒）

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Adobe Sensei+Illustrator

Muse

Photoshop

Stock

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS［2］Museの3種類のページ作成方法を理解する

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

パソコンとスマートフォンのページを作り分ける方法
1つのページで複数の固定レイアウトを切り替える方法
1つのページであらゆるスクリーンに適応させる方法

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

多種多様なデバイスにどう対応するか？

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

専用のページを作り分ける

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

1つのページで様々なデバイスに対応する

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

3つのページ作成方法

ページを作り分ける方法

低い

固定レイアウトを切り替える方法

ページ制作の難易度

あらゆるスクリーンに適応させる方法

高い

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

3つのページ作成方法

ページを作り分ける方法

低い

固定レイアウトを切り替える方法

ページ制作の難易度

あらゆるスクリーンに適応させる方法

高い

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERSADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

3つのページ作成方法

ページを作り分ける方法

低い

固定レイアウトを切り替える方法

ページ制作の難易度

あらゆるスクリーンに適応させる方法

高い

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

3つのページ作成方法

ページを作り分ける方法

低い

固定レイアウトを切り替える方法

ページ制作の難易度

あらゆるスクリーンに適応させる方法

高い

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Video-3: Muse-3Design.mp4

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

3つのページ作成方法

ページを作り分ける方法

低い

固定レイアウトを切り替える方法

ページ制作の難易度

あらゆるスクリーンに適応させる方法

高い

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

3つのページ作成方法

ページを作り分ける方法

低い

固定レイアウトを切り替える方法

ページ制作の難易度

あらゆるスクリーンに適応させる方法

高い

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

3つのページ作成方法

ページを作り分ける方法

固定レイアウトを切り替える方法

あらゆるスクリーンに適応させる方法

Museアカデミーで解説しています
低い

ページ制作の難易度

高い

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS（6）Muse Academyで「ページの作り分け」を学ぶ: Muse-Academy.mp4（1分40秒）

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS［4］Museを使う利点について理解する

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS・マウスドラッグで「レスポンシブWebデザイン」のページを作成できる
・視差効果（パパラックス）などの設定が容易
・Museにない機能は自分で組み込める（ウィジェット）・公開したページはWebブラウザーでも編集できる（Museがない人でも編集可能）
・Adobe StockやAdobe XDとの連携で作業効率がアップ

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS・マウスドラッグで「レスポンシブWebデザイン」のページを作成できる
・視差効果（パパラックス）などの設定が容易
・Museにない機能は自分で組み込める（ウィジェット）・公開したページはWebブラウザーでも編集できる（Museがない人でも編集可能）
・Adobe StockやAdobe XDとの連携で作業効率がアップ

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS・マウスドラッグで「レスポンシブWebデザイン」のページを作成できる
・視差効果（パパラックス）などの設定が容易
・Museにない機能は自分で組み込める（ウィジェット）・公開したページはWebブラウザーでも編集できる（Museがない人でも編集可能）
・Adobe StockやAdobe XDとの連携で作業効率がアップ

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Video-7: 20160720-demo.mp4

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Video-8: Sample-Site-01.mp4

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS・マウスドラッグで「レスポンシブWebデザイン」のページを作成できる
・視差効果（パパラックス）などの設定が容易
・Museにない機能は自分で組み込める（ウィジェット）・公開したページはWebブラウザーでも編集できる（Museがない人でも編集可能）
・Adobe StockやAdobe XDとの連携で作業効率がアップ

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Video-9: new-Oreilly-AI-and-Design-Demo.mp4

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Video-10: Muse-Widget-Demo.mp4

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

外部の機能をMuseに取り込む

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

アクセス解析

広告

お問い合わせフォーム

ショッピングカート

OGP
カスタム検索ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS・マウスドラッグで「レスポンシブWebデザイン」のページを作成できる
・視差効果（パパラックス）などの設定が容易
・Museにない機能は自分で組み込める（ウィジェット）・公開したページはWebブラウザーでも編集できる（Museがない人でも編集可能）
・Adobe StockやAdobe XDとの連携で作業効率がアップ

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Aさんを管理者ユーザーとして登録

Museユーザー

Museを持っていないAさん（デザイナー）（クライアント）ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Museで作成したWebページをブラウザーで簡易編集できる

Museユーザー

Museを持っていないAさん（デザイナー）（クライアント）ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

ブラウザーでテキストの編集や画像の入れ替えが可能

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS・マウスドラッグで「レスポンシブWebデザイン」のページを作成できる
・視差効果（パパラックス）などの設定が容易
・Museにない機能は自分で組み込める（ウィジェット）・公開したページはWebブラウザーでも編集できる（Museがない人でも編集可能）
・Adobe StockやAdobe XDとの連携で作業効率がアップ

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Museと連携するデザインツール

Illustrator

Photoshop

Comp

AnimateExperience Design

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Experience Design

スマホコミックのプロトタイプ作成

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

Video-11: Adobe-XD-Demo.mp4

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS・マウスドラッグで「レスポンシブWebデザイン」のページを作成できる
・視差効果（パパラックス）などの設定が容易
・Museにない機能は自分で組み込める（ウィジェット）・公開したページはWebブラウザーでも編集できる（Museがない人でも編集可能）
・Adobe StockやAdobe XDとの連携で作業効率がアップ

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS・マウスドラッグで「レスポンシブWebデザイン」のページを作成できる
・視差効果（パパラックス）などの設定が容易
・Museにない機能は自分で組み込める（ウィジェット）・公開したページはWebブラウザーでも編集できる（Museがない人でも編集可能）
・Adobe StockやAdobe XDとの連携で作業効率がアップ

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

まとめ［1］Museの基本を理解する［2］準備する［3］Museの3種類のページ作成方法を理解する［4］Museを使う利点について理解する

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

まとめ［1］Museの基本を理解する［2］準備する［3］Museの3種類のページ作成方法を理解する［4］Museを使う利点について理解する

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

まとめ［1］Museの基本を理解する［2］準備する［3］Museの3種類のページ作成方法を理解する［4］Museを使う利点について理解する

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

まとめ［1］Museの基本を理解する［2］準備する［3］Museの3種類のページ作成方法を理解する［4］Museを使う利点について理解する

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

まとめ［1］Museの基本を理解する［2］準備する［3］Museの3種類のページ作成方法を理解する［4］Museを使う利点について理解する

ADOBE MUSE CC 2017 TUTORIAL FOR BEGINNERS

体験版をダウンロードしよう！

Muse

Illustrator

Photoshop

Enjoy!
Creative Edge School Books
design-zero.tv

Muse Academy
http://design-zero.tv/muse2016/

Google検索で「Adobe Muse アカデミー」と入力

CREATIVE EDGE SCHOOL BOOKSクリエイティブエッジスクールブックス