これだけ覚えてほしい！
Museを使いこなすための
5つの実践手法
Creative Edge School Books
一人出版社クリエイティブエッジスクールブックス
Creative Edge School Books
一人出版社クリエイティブエッジスクールブックス
Creative Edge School Books
一人出版社クリエイティブエッジスクールブックス
Creative Edge School Books
一人出版社クリエイティブエッジスクールブックス design-zero.tv 実例で学ぶ最新のスタイルとセオリー Webデザインの見本帳 リーンとアジャイル、デザイン思考を組み合わせる 「経験知」を獲得する力・伝える力 Webcast Booksdesign-zero.tv
［1］Museを使いこなすための 5つの実践手法 ［2］Museによるページ作成方法は3つ ［3］パソコンとスマートフォンの ページを作り分ける方法 ［4］1つのページで複数の 固定レイアウトを切り替える方法 ［5］1つのページであらゆる スクリーンに適応させる方法
［1］Museを使いこなすための
5つの実践手法 ［2］Museによるページ作成方法は3つ
［1］Museを使いこなすための 5つの実践手法 ［2］Museによるページ作成方法は3つ ［3］パソコンとスマートフォンの ページを作り分ける方法 ［4］1つのページで複数の 固定レイアウトを切り替える方法 ［5］1つのページであらゆる スクリーンに適応させる方法
Museを使いこなすための
5つの実践手法
２．制作環境の構築
３．マスターとライブラリの活用
４．外部の機能をMuseに取り込む方法
５．アクセシビリティのチェック
１．納品方法の確認と
ページ制作手法の見極め
１．納品方法の確認と
HTML
CSS
HTML
CSS
JS
HTML CSS JS ブラックボックス 見せない 触らせない
Web Page
Web Page
HTMLやCSSの 知識は必要ない
FTPホストにアップロード 自社のサーバーにFTP Server FTPホストにアップロード クライアントの サーバーにFTP Server
FTPホストにアップロード クライアントがMuseで サーバーにFTP Server Museデータを納品 （配置した画像のオリジナルデータを含む）
FTPホストにアップロード クライアントがMuseで サーバーにFTP Server Museデータを納品 （配置した画像のオリジナルデータを含む）
FTPホストにアップロード クライアントがFTPツールで サーバーにFTP Server Museから書き出したHTMLデータを納品 HTML
Muse HTML Muse データ HTML データ
HTML Muse データ HTML データ HTMLデータからMuseデータに 戻すことはできせん
Muse HTML HTML データ HTMLデータをMuseで 利用することはできません
Muse HTML HTML データ Dreamweaver 書き出したHTMLデータの編集は 推奨していません HTMLを編集して活用 ※書き出されたHTMLは 人が編集することを考慮していない 非推奨
Muse HTML HTML データ Dreamweaver Museの使用を止めて 他のツールに移行する場合 Server FTP 引き継ぎ
PNG GIF JPEG SVG PSD OAM TXT
PNG JPEG GIF SVG PSD OAM TXT ラスター画像 ベクター画像 Animateデータ テキスト （Edge Animate含む）
PNG JPEG GIF SVG PSD OAM ラスター画像 ベクター画像 Animateデータ （Edge Animate含む） 配置したデータはフォルダで管理する
自動生成する
画像はMuseに含まれる
自動生成する
画像はMuseに含まれる
拡大する
自動生成する
画像はMuseに含まれる
解像度が足りない
オリジナル画像から自動生成
自動生成された画像は Museに含まれる
Muse
配置したオリジナル画像も 一緒に保管しておく
自動生成された画像は Museに含まれる
Muse
配置したオリジナル画像も 一緒に保管しておく
自動生成された画像は Museに含まれる Muse 配置したオリジナル画像も 一緒に保管しておく リンクしている
FTPホストにアップロード クライアントがMuseで サーバーにFTP Server Museデータを納品 （配置した画像のオリジナルデータを含む）
PNG JPEG
配置したオリジナルデータとセットで納品
作業中のデータ フォルダ PNG 納品データ フォルダ フォルダ JPEG PNG JPEG フォルダ フォルダ
作業中のデータ フォルダ PNG 納品データ フォルダ フォルダ JPEG PNG JPEG フォルダ フォルダ
PNG 作業中のデータ フォルダ フォルダ JPEG PNG 納品データ フォルダ フォルダ JPEG
デザイナーAさん デザイナーBさん デザイナーCさん 書き出したライブラリのファイル
アクセス解析 OGP お問い合わせ フォーム ショッピング カート 広 告 カスタム検索
ウェブサービス
埋め込み用のコードを取得
オブジェクトメニューの「HTMLを挿入」
AddThisの場合
AddThisの場合
見出しのレベルを指定しているか？
意味画像に代替テキストを
付加しているか？
音声で読み上げて意味が伝わるか？
適切なページタイトルになっているか？
ページプロパティ
※プラン画面でサムネイルを 右クリック、「ページ
見出しのレベルを指定しているか？
テキスト パネル
意味画像に代替テキストを
付加しているか？
画像プロパティ
Web Developer
２．制作環境の構築
３．マスターとライブラリの活用
４．外部の機能をMuseに取り込む方法
５．アクセシビリティのチェック
１．納品方法の確認と
ページ制作手法の見極め
Museによる
ハイブリッドレイアウト
固定幅
可変幅
固定幅 固定幅 可変幅
可変ウィンドウ フルスクリーン
あらゆるスクリーンに 適応させる方法 ページを 作り分ける方法 固定レイアウトを 切り替える方法 ページ制作の 難易度
低い
高い
あらゆるスクリーンに 適応させる方法 ページを 作り分ける方法 固定レイアウトを 切り替える方法 ページ制作の 難易度
低い
高い
レスポンシブ デザイン 2種類のページを 作成する アダプティブ デザインパソコンとスマートフォンの
ページを作り分ける方法
1つのページで
複数の固定レイアウトを
切り替える方法
1つのページで
あらゆるスクリーンに
適応させる方法
２．制作環境の構築
３．マスターとライブラリの活用
４．外部の機能をMuseに取り込む方法
５．アクセシビリティのチェック
１．納品方法の確認と
ページ制作手法の見極め
あらゆるスクリーンに 適応させる方法 ページを 作り分ける方法 固定レイアウトを 切り替える方法 ページ制作の 難易度
低い
高い
最新のMuseを完全習得して
仕事の幅を広げてください！
Creative Edge School Books
design-zero.tv
design-zero.tv
Creative Edge School Books
