2016.9.2
グラフィック・DTPのスキルを活かしてWebページ作成！ デザイナーのためのMuse活用方法
このページは、Adobe MAX Japan 2016のセッションA-03「デザイナーのためのMuse活用方法」（13:45 - 14:35）用のページです。セッションで使用したスライド資料、およびサンプルデータなどをダウンロードすることができます。
※このページは後日、Museアカデミーに統合される予定です（統合するまでかなり時間がかかりますので、ダウンロードはお早めに！）
※セッションに関する追加データの情報などは、公式Twitter（@commonstyle）およびブログ（シンクゼロマガジン・ライト版）でお知らせします。
セッション終了後の追加情報（9月3日）：
急遽追加した「視差効果（スクロール効果）」と「ページを作り分ける方法」のビデオ、および最新のスライド（PDF）をアップしました。
Museセッションの復習／ブログ記事（PM17:00）
［1］Adobe Illustratorの新機能「アセット書き出し」と連携する方法
［2］Adobe XD（Experience Design）のプロトタイピングと連携する方法
概要：
Museはマウスドラッグと数値入力だけで、レスポンシブWebデザインやスクロールモーションなどの高度なページを作成できる画期的なツールです。IllustratorやInDesignを使うデザイナーのためのMuse活用方法を伝授します。
学習サイト：Museアカデミー
Adobe Museの基礎を学ぶための学習ページです。初めてMuseを触る人は「夏休みに習得しよう！ Adobe Muse CC 2015 でシングルページウェブサイトをつくる」で学んでください。2015年の講座ですが、基本操作学習の大半は変わりません。
URL: http://design-zero.tv/muse2016/
スライド資料（PDF）およびサンプルデータのダウンロード
※ZIP圧縮したファイルとPDFファイルがあります。会場では動画（スクリーンキャスト）が挿入されているスライドを使用しましたが、PDFには含まれていません。以下の動画リンクで視聴することができます。
- 更新したスライド資料（ZIP圧縮）のダウンロード［new-20160902-Muse.zip］18.3MB
更新したスライド資料（PDFファイル）のダウンロード［new-20160902-Muse.pdf］19.8MB スライド資料（ZIP圧縮）のダウンロード［20160902-Muse.zip］17.5MB
スライド資料（PDFファイル）のダウンロード［20160902-Muse.pdf］18.9MB- Museサンプルデータ（ZIP圧縮）のダウンロード［Muse-Sample.zip］54.5MB
- スライドに含まれている動画（9月3日に更新）
- 21枚目の動画（33秒）
Museで競う！イラストレーター vs デザイナー - 30枚目の動画（44秒）
Adobe MAX San DiegoのWebページ - 34枚目の動画（48秒）
スクロール効果（視差効果） - 41枚目の動画（1分34秒）
Adobe XDの軽快かつ直感的なプロトタイプ作成 - 48枚目の動画（2分9秒）
Adobe Animate CCで作成したHTML5コンテンツをMuseで配置 - 58枚目の動画（1分）
パソコンとスマートフォンのページを作り分ける方法 - 64枚目の動画（2分20秒）
ページの作り分け、固定レイアウトの切り替え、可変レイアウトの切り替え（レスポンシブWebデザイン） - 72枚目の動画（1分）
ページデザインのアイデア（Pinterestを活用） - 87枚目の動画（4分5秒）
Adobe Illustrator（アセットの書き出し）との連携作業 - 93枚目の動画（3分50秒）
作業の効率化／レイヤー・垂直移動ハンドル・変形パネル - 97枚目の動画（2分20秒）
作業の効率化／ページをショートカットキーで素早く表示
トラブルシューティング
［カテゴリー：レイアウト］
［カテゴリー：アラート表示］
［カテゴリー：不具合］
［カテゴリー：作業効率化］
- 同じ色を指定したテキストや図形などを1回の操作で同時に変更したい
4分47秒 - プランに戻らず編集したいページをショートカットで素早く表示したい
2分29秒 - マッチングページ（デスクトップ／スマートフォン）をショートカットで素早く表示したい
3分47秒 - ブレークポイントの設定を他のページやサイトにコピーしたい
5分55秒 - Illustratorの「アセット書き出し」をMuseで活用して作業を効率化したい
6分07秒
※以下の「ドラッグしたイメージを自由に編集したい」で実用的な使い方を解説していますので、続けてご覧になってください。 - Illustrator「アセット書き出し」にドラッグしたイメージを自由に編集したい
11分14秒
［カテゴリー：納品］
Q&A
［Q］Adobe Muse CC とは？
- Adobe Muse CC（ミューズ）は、Webサイトを作成するためのデスクトップアプリケーションソフトです。マウスで作図するように、直感的にWebページを作成できるのが大きな特徴です。
［Q］AdobeにはDreamweaverというWebサイト制作ソフトがあります。違いはなんですか？
- Museはマウスドラッグと数値入力だけでWebページを作成することができ、HTMLやCSSの知識は必要ありません。特別な知識なしで高度な表現のページを作成できます。一方、DreamweaverはWebデザイナーのためのプロフェッショナルツールで、HTMLとCSSの基礎知識がないと使いこなすことができません。
［Q］機能はDreamweaverより劣るのでしょうか？
- MuseはHTMLやCSSを編集できませんので、Dreamweaverよりできることは限られます。また、サイト管理機能が必要な大規模サイト構築にも適しませんが、ビジュアルデザインが中心のシングルページ制作などでは優れたパフォーマンスを発揮します。
［Q］対象としているユーザーは？
- IllustratorやInDesignなどのデザインツールを使っている紙媒体のデザイナーを対象としていますが、HTMLやCSSの知識を必要としませんので、企業の広報担当やアーティストなど、さまざまな分野で利用できます。
［Q］Museで作成したWebページは正しいHTMLになっていますか？
- Museの開発チームはWeb標準に沿って正しいHTMLを生成できるように改善を続けてきました。また、対象としているすべてのWebブラウザーで意図したとおりに表示されますので安心して使うことができます。
※ただし、Museを使う人が間違った操作をしてしまうと、おかしなHTMLになってしまう場合がありますので、基本操作はしっかり習得しましょう。
［Q］Museの習得には時間がかかりますか？
- IllustratorやInDesignなどのデザインツールを使っている人なら、1〜2日あれば基本操作を習得できるでしょう。HTMLやCSSを学ぶ必要がありませんので、Museの操作をマスターすれば、直ちに使い始めることができます。
［Q］Museが開発終了になった場合、公開したサイトはどうなるのでしょう？
- 今のところ、その可能性は極めて低いですが、万が一、Museが開発終了になっても、サーバーにアップロードされているHTMLデータをDreamweaverで引き継ぐことが可能です。また、2013年5月に開発終了したFireworksが現在でも使用できるように、しばらくは使い続けることができます。
［Q］ホームページビルダーやBiND、Jimdo、Wixとは何が違うのでしょう？
- HTMLやCSSの知識を必要としないツールはMuseだけではありませんが、Museが優れている点は「表現の自由度の高さ」です。他の類似ツールは、テンプレートがベースになっており、ある程度決められた範囲でカスタマイズしていくことになります。
Museには視覚表現の制約がほとんどありません。独創的なビジュアルデザインや大胆なフリーレイアウトも容易で、特にプロモーションページやランディングページ制作などで威力を発揮します。レスポンシブWebデザインなどの高度なページ制作をマウスドラッグで実行できるツールはMuseだけです。
［Q］モバイルで見やすいページを作成できますか？
- Museには、3種類のページ作成方法があり、サイトの規模や表現のレベルによって自由に選択することができます。いずれの作成方法でもスマートフォンやタブレットで見やすいページを作成することが可能です。
投稿日：2016年9月2日（金）