Adobe Muse ビジネスセミナー

　

期間限定コンテンツ：
Learn Muse in 3 days
Adobe Museで「Appleのフィーチャーページ」と同じシングルページを作成するために習得すべきポイント

初心者が、今週の金曜・土曜・日曜の3日間で「Museのシングルページサイト制作」を習得するには、何を優先して学習すればよいのか？

金曜日に習得すること

今日から3日間で「Appleのフィーチャーページと同レベル」のシングルページサイトを作成するためのスキルを習得していきましょう。

ラピッド・プロトタイピングとは試作を使って迅速に仮説検証を繰り返すことですが、昨年あたりからデジタルマーケティングシステムの導入が急速に進んでおり、現場ではラピッド・ページビルディング（迅速なページ制作）の実践的なワークフローが稼働し始めています。

シングルページサイトの特徴

• データドリブン
• コンテンツベロシティ（クオリティを高めながら素早く作成しなければいけない）
• 購入されたか、予約されたか、問い合わせがあったか、など明確に評価される
• 評価・改善・公開のイテレーション
• Webには残らない期間限定のデータ
• ランディングページ、プロモーションページ、特設ページ、ティーザーページ、顧客向けパーソナライズページ、Appleが新製品のために公開しているフィーチャーページなど

今回は、このラピッド・ページビルディングをAdobe Museを使って実践するための速習です。前提となる知識は、Muse導入ガイド［固定幅編］の内容になりますので、理解できないところは随時参照してください。

Museには3つのページ作成方法があることは［固定幅編］ですでに学習済みですが、Appleのサイトは固定幅のアダプティブデザインです。ページ内にはブラウザーのウィンドウ幅で伸縮させているコンテナーもありますがレスポンシブではありませんので、3〜4つ程度のブレークポイントで固定幅のレイアウトを切り替えています。

具体的に見ていきましょう。Appleの現在のトップページには、iPhone Xのカバーが表示されていますが、ウィンドウの幅を狭めていくと「縮小されたiPhone X」、さらに狭めると「縦位置のiPhone X」の画像に切り替わっていきます。
こちらの動画（30秒）を見てください。

Appleのページ：

ブレークポイントで画像を切り替える表現

• Appleのページは固定幅レイアウトによるアダプティブデザイン（30秒）

この仕組みをMuseで作成してみます。2分程度で作業が終わります。
動画（2分）をご覧ください。

Museではこう作る：

ブレークポイントで画像を切り替える表現

• Museの「固定幅レイアウトの編集モード」でアダプティブデザイン（2分）

ブレークポイントごとに専用の画像を配置し、レイヤーで表示／非表示をチェックしているだけです。［固定幅編］で学習済みなので、手順は解説しませんがマウスの操作だけで作成することができます。

次は「アダプティブデザインで可変幅を表現する」方法。Appleのページは固定幅レイアウトですが、一部の構成要素はブラウザーの幅に合わせて伸縮します。
30秒の短い動画を見てください。

Appleのページ：

アダプティブデザインで可変幅の表現

• アダプティブデザインで可変幅の表現（30秒）

固定幅の切り替えではないため、一見するとレスポンシブWebデザインのようですが、たんに相対値で指定されているだけです。
では、Museの固定幅レイアウトページではどのように作成すればよいのでしょう？
まずは以下の動画を見てみましょう。

Museではこう作る：

Museの「固定幅レイアウトの編集モード」で可変幅の表現

• Museの「固定幅レイアウトの編集モード」で可変幅の表現（3分27秒）

3分27秒の動画ですが、幅を固定しているレイアウトページでブラウザーのウィンドウいっぱいに広がった（伸縮する）ビジュアルイメージを表示することができています。仕組みは一目瞭然なので動画のとおりに試してみましょう。

今日（金曜）、習得すべき2つの作業は、ブレークポイントを設定しながら専用の画像を配置し、切り替わる仕組み。そして、ブラウザーの幅いっぱいに広がるビジュアルイメージの設置です。

金曜日の達成目標：

モデル【1】：

Appleのトップページのファーストビューには、iPhone Xの製品画像が表示されています（2017年11月現在）。ウィンドウの幅を狭めていくと、「縮小されたiPhone X」さらに狭めると「縦方向のiPhone X」の画像に切り替わっていきます。
※動画で確認してください。

Museで作成：

ブレークポイントを設定しながら、画像を配置していきます。ブレークポイントの追加、画像の配置、最小ページ幅をドラッグして決める、画像の調整、といった流れで作業を進めます。ブレークポイントごとに配置した複数の画像が同時に重なって表示されてしまうので、レイヤーパネルで表示／非表示をチェック。
※作業の手順は動画で確認してください。
※基本操作についてはMuse導入ガイド［固定幅編］で復習してください。

モデル【2】：

Appleのサイトは固定幅のアダプティブデザインです。レスポンシブではありませんが、ウィンドウの幅に合わせて伸縮する複数のカラムがいくつか設置されています。
※動画で確認してください。

Museで作成：

Museの場合も今回は「固定幅」の編集モードで作業していますので、レスポンシブWebデザインのページは作成できませんが、Appleのページのように複数のカラムをウィンドウ幅に合わせて伸縮させることができます。ただし、複数パターンの画像を準備しておく必要があります。デモでは、画像Aと画像B、そしてAとBが合体した画像の3つを使っています。
※作業の手順は動画で確認してください。
※基本操作についてはMuse導入ガイド［固定幅編］で復習してください。

---

土曜日に習得すること

Appleが公開している新製品 iPhone X のフィーチャーページを見てください。掲載されている情報量はそれほど多くありませんが、ビジュアルが豊富でとても長いシングルロングページになっています。
視差効果（パララックス）やアニメーション、ビデオなどが多用されており、ダイナミックかつインパクトのある演出で、他のページとは明らかに作り込みが異なります。

Appleのページ：

現在公開中の「iPhone X」フィーチャーページ

• 現在公開中の「iPhone X」フィーチャーページ（30秒）

通常のWebページ制作ではあまり使われない特殊効果が多く、制作会社に発注すると、どうしても高額な制作費を支払うことになります。

長期運用のWebサイトとは、求められる要件も扱う情報の優先度も違いますので、デジタルマーケティングに密接なシングルページサイト制作のノウハウはWeb制作会社でも共有されていないことが多く、どちらかといえばマーケティングの会社や広告代理店の方が理想的なシステムを持っています。

Museには、視差効果（パララックス）を数値入力だけで実現できる専用機能が搭載されており、Animateなどで作成したHTML5 Canvasアニメーションをスクロールで動かすことも簡単に設定できます。
ただし、「簡単」といっても概念の理解には時間がかかります。Museの場合は、マウスドラッグと数値入力だけで作業していきますので「操作は簡単」ですが、入力する数値の計算や操作の手順などは、適当に触りながら進められるものではありません。
土曜日の習得すべきポイントはここです。

まず最初に、Appleの「iMac Pro」フィーチャーページ（1分の動画）を見てください。

Appleのページ：

iMac Proのフィーチャーページのスクロール効果

• iMac Proのフィーチャーページのスクロール効果（1分）

ページをスクロールすると、製品ロゴが登場し、iMac Proが回転するアニメーションが再生されます。ページをスクロールしていくと回転がスタートし、逆方向にスクロールするとiMac Proも逆再生します。スクロールとアニメーションが連動していることがわかると思います。

このように、Appleのフィーチャーページにはアニメーションやビデオが多用されており、ページスクロールと連動したダイナミックな演出を実現しています。
ちなみに、左側にはスマートフォンで見たときのページが表示されていますが、アニメーションは再生されません。スマートフォンでは最低限の効果に止めるケースが多く、見た目のインパクトよりユーザビリティを優先しているサイトが大半です。

さて、このような高度な仕掛けはどのように作成すればよいのでしょう？

Museには「スクロール効果」の機能が搭載されていますが、アニメーションを作成する機能はありません。つまり、アニメーションは他のツールで作成する必要があります。最も「簡単」で「素早く」作成できる方法は、Adobe Animate CCとの連携作業です。

動画（1分36秒）をみてください。
Animateで作成した簡単な「回転アニメーション」をMuseで配置し、スクロール効果を適用しています。アニメーション作成（Animateの作業）も、スクロール効果の設定（Museの作業）もスクリプトの記述は一切不要。マウス操作と数値入力だけで作成しています。

Museではこう作る：

Animateで作成したコンテンツをMuseでスクロール効果の設定

• Animateで作成したコンテンツをMuseでスクロール効果の設定（1分36秒）

Animateは「OAM」という形式のファイルを書き出すことができますが、このファイルはMuse上で画像ファイルのように扱うことができます。ファイルメニューの配置でページ上に置いて、ドラッグして自由に移動させることが可能です。
※OAMファイルの中身は、HTML5 Canvasのアニメーション（HTML、CSS、JavaScriptのファイルの集合体）です。1つのパッケージファイルとして扱えることが大きな利点になっています。

スクロール効果は、数値入力だけで複雑なエフェクトを設定できる画期的な機能ですが、概念の理解と慣れるまでに時間がかかります。数値入力とマウス操作しかありませんが、意図したとおりに動かすには少々時間がかかるでしょう。

動画の内容のように、1つ動かすだけならすぐに設定できますので、まずはシンプルな仕組みづくりから始めてください。

ダウンロード：

• Animateで作成したアニメーション：
  OAM形式で書き出したファイルのダウンロード［Scroll-Effects-Demo.zip］

手順は動画のとおりですが、設定内容だけ掲載しておきます。

• （1）ファイルメニューの「配置」で「Scroll-Effects-Demo-1.oam」を開く
• （2）アニメーションを配置する場所は、変形パネルで「X=320」「Y=800」
• （3）スクロール効果は、右端の「アニメーション」アイコンをクリックし、「アニメーション」をチェック、キーの位置は「560px」、1秒間に進行するピクセル単位は「80px」

土曜日の達成目標：

モデル：

Appleの「iMac Pro」フィーチャーページのファーストビューでは、ページスクロールでiMac Proが回転します。特に、iPhone Xのページではアニメーションやビデオが多用されており、ビジュアル要素を生かしたインパクトのある特設ページになっています。
※動画で確認してください。

Museで作成：

Museにはアニメーションを作成する機能はありませんが、Adobe Animate CCと連携することでAppleの特設ページのような高度な手法を「数値入力とマウス操作だけ」で作成することができます。Animate以外のツールではここまで効率化できません。

Muse導入で利益が出ているところは、Appleサイトと同等の高度な手法を「売り」にしているところが大半です。単刀直入に言うと「AnimateとMuseがここまで密接に連携できることが知られていない」ので、この仕組みを駆使しているところが大幅にコストダウンして、有利なビジネスを展開しているということです。

Animateの前身が「Flash」だということを知っていても、優れたHTML5コンテンツ制作ツールに仕様変更されていることはあまり知られていないようです。
※作業の手順は動画で確認してください。
※基本操作についてはMuse導入ガイド［固定幅編］で復習してください。

Museの「スクロール効果」を完全習得するには、経験の積み重ねが必要になりますので「小さく」実践しながら、時間をかけて学習していった方がよいと思います。
今日は、Appleサイトの高度な手法も「Muse + Animate」で十分対応できることが理解できればOKです。

参考情報：
Muse導入ガイド［コンプリート版］には、スクロール効果の学習コンテンツが含まれています。また、Animate CCの学習コンテンツも用意されていますので、本格的に学びたい方はご利用ください。

---

日曜日に習得すること

※情報を掲載準備中

---

Museを使って出来ること：

Animateで作成したコンテンツをMuseでスクロール効果の設定

• Animateで作成したコンテンツをMuseでスクロール効果の設定（1分15秒）

Museを使って出来ること：

Museの「スクロール効果」をアダプティブデザインに適用

• Museの「スクロール効果」をアダプティブデザインに適用（1分）

Museを使って出来ること：

Animate CCで作成したHTML5 Canvasコンテンツをスクロールで動かす

• Animate CCで作成したHTML5 Canvasコンテンツをスクロールで動かす（49秒）

※情報を掲載準備中

---

内容：

---

投稿日：2017年10月2日（木）

　

特別講義：
印刷会社がMuseを導入してビジネスにするための5つの準備

Adobe Museはマウスドラッグと数値入力だけで、レスポンシブWebデザインなどの高度なWebページを作成することができるツールです。Webデザイナーを対象としていない特異な製品だったので、Museがどのようなツールなのか認知されるまで時間がかかりました。

WixやJimdoなどのCMSベースのサービスと比較されることもありますが、Museは、IllustratorやInDesignなどのデザイン製品を使っている紙媒体のデザイナーを対象としたクリエイティブツールであることが大きな違いです。現在は、デザイナーに限らず、企業の広報担当者や学校、病院の職員、アーティストなど、さまざまな分野で利用されていますが、Webサイトやブログとは異なる独創的なビジュアルで訴求するプロモーション専用のページや特設ページなどに活用しているケースが多いようです。

2016年に入ってからは、Muse導入で新事業を軌道にのせて利益を出す企業も出てきており、法人向けセミナーの需要が高まっていました。

企画されたセミナーの多くは、Web制作の実績がない印刷会社やデザイン制作会社などが「どのようにMuseを使いこなしているのか」を検証し、共有することが目的でした。現在、ビジネスとして成立させるための考え方やノウハウなども出揃ってきたと考えており、今回の法人向け特別講義では、Muse導入でいかに実績を出していくかを具体的に取り上げています。

内容：

講義時間と形式：

セミナースケジュール：

予定されていた全てのセミナーを終了しました。セミナーは個別対応で要望に沿って開催しましたので内容には（印刷会社向け、デザイン制作会社向け、小規模なデザイン事務所およびフリーランスなど）差異があり、アーカイブについては構成を調整中です。
セミナーのアーカイブは、以下の専用ページで公開します。

---

更新日：2016年9月12日（月）／投稿日：2016年7月1日（金）

　

Muse CC 2015 導入ガイド［固定幅編］

只今、検証中

この学習カリキュラムで習得したスキルが、実際のビジネスの現場でどのように活用されているのか、まったく使用していない機能、実践の現場で生きるテクニックなどを検証していきます。
検証済みの項目にはリンクを設定します。

※検証のためのデモデータなどは、購入者向けの専用ページに掲載する予定です。

検証のポイント：

固定幅レイアウトは、Appleのサイトが採用しており、大まかにデスクトップ用、タブレット用、スマートフォン用の3〜4種類程度の固定幅レイアウトがウィンドウ幅にあわせて、切り替わる仕組みです（明確な定義はありませんがアダプティブWebデザインと呼びます）。

Museを導入している印刷会社、デザイン制作会社では「ページの作り分け」が多く、レスポンシブWebデザインがアドバンテージになる案件のみ、可変レイアウトを採用しています。ただし、レスポンシブより制作コストを抑えられ、最も幅が狭いブレークポイントだけ可変レイアウトにする「ハイブリッド」レイアウトも有効なので、コストと時間を考慮しながら検証したいと思います。

詳細ページ：

Adobe Museの基本操作をある程度習得した人が、Webページ制作を本格的に学ぶためのカリキュラムです。

イントロダクション

Part-1　可変幅の特性について理解する

Part-2　固定幅／可変幅レイアウトの基礎を理解する

Part-3　固定幅レイアウトの基本ページを作成する

Part-4　固定幅レイアウトの応用ページを作成する

---

更新日：2016年9月12日（月）

　

Muse CC 2015 導入ガイド［可変幅編］

只今、検証中

この学習カリキュラムで習得したスキルが、実際のビジネスの現場でどのように活用されているのか、まったく使用していない機能、実践の現場で生きるテクニックなどを検証していきます。
検証済みの項目にはリンクを設定します。

※検証のためのデモデータなどは、購入者向けの専用ページに掲載する予定です。

詳細ページ：

固定幅のレイアウトデザインを習得した人が、可変幅のレイアウトデザイン（レスポンシブWebデザイン）を学ぶためのカリキュラムです。

Part-1　ハイブリッドレイアウトの基本

Part-2　ビジュアルデザインとページ構造の理解

Part-3　可変幅レイアウトデザインの実践

---

更新日：2016年9月12日（月）

　

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

只今、検証中

この学習カリキュラムで習得したスキルが、実際のビジネスの現場でどのように活用されているのか、まったく使用していない機能、実践の現場で生きるテクニックなどを検証していきます。
検証済みの項目にはリンクを設定します。

※検証のためのデモデータなどは、購入者向けの専用ページに掲載する予定です。

詳細ページ：

Adobe Museの基礎および固定幅や可変幅のレイアウトデザインを習得している人が、さらにステップアップするための中級者向けのカリキュラムです。 現在、追加コンテンツ、および特別講義などを随時公開しています。

学習内容：

追加学習：

---

更新日：2016年9月12日（月）