EBOOK STRATEGY

Adobe Muse CC 実践編 ランディングページ制作

NON-PROGRAMMER'S

WEBDESIGN

ノンプログラマーズ・ウェブデザイン

学習ビデオのファイル名について

Vol.01

ランディングページを作成するときのポイント

ファイル名:LP_opening.mp4

 

Vol.02

ヘッダーとフッター、コンテンツの3つの領域を作成する

ファイル名:LP_01.mp4

 

Vol.03

ナビゲーションと自動スクロールの仕組みを作成する

ファイル名:LP_02.mp4

 

Vol.04

フッターの固定とカバーグラフィックの配置

ファイル名:LP_03.mp4

 

Vol.05

ページのスクロールで画像が切り替わる仕組みを作成する

ファイル名:LP_04.mp4

Vol.06

作業の効率化/整列パネルの使い方

ファイル名:LP_05.mp4

 

Vol.07

アクセシビリティについて/基本ページにタイトル画像を配置する

ファイル名:LP_06.mp4

 

Vol.08

ページのレイヤー構造の作成/見出しを配置する

ファイル名:LP_07.mp4

 

Vol.09

マスターページにフッター領域のコンテンツを作成する

ファイル名:LP_08.mp4

 

Vol.10

ライブラリを活用した作業の効率化

ファイル名:LP_09.mp4

ストアでダウンロードされたビデオのファイル名が、商品番号とズレています。

以下のようになっております。

チュートリアルビデオで使用している素材データのダウンロードリンクと参照リストを掲載しています。

すべての素材データ[Muse2_Vol03_10.zip/31.8MB

まず最初に以下の2つのビデオを視聴してください。

Adobe Muse CC で作成するランディングページについて[13分26秒]

ランディングページの特性について解説します。

※高画質ビデオになっています。低画質の場合は再生バーの「HD」をクリックしてください。

Adobe Muse CC によるランディングページ制作のプランニングワーク[18分24秒]

ミーティングをしながら、その場で実際に動くプロトタイプを作ることができます。

※高画質ビデオになっています。低画質の場合は再生バーの「HD」をクリックしてください。

作業を進めるときのポイント 1

Vol.01 ランディングページを作成するときのポイント[09分03秒]

素材データはありません。

ランディングページの基本的な構造を作成する

Vol.02 ヘッダーとフッター、コンテンツの3つの領域を作成する[28分30秒]

素材データはありません。

Vol.03 ナビゲーションと自動スクロールの仕組みを作成する[32分26秒]

素材データはありません。

 

完成ファイル[Vol03.zip]:

[Vol03] > [完成ファイル]> [LP_Test]> LP.muse

Vol.04 フッターの固定とカバーグラフィックの配置[22分33秒]

素材データ[Vol04.zip/21.3MB]:

 

[プロトタイプで使用する画像]フォルダ

・cover_graphic.jpg

・cover_graphic.psd(※使用しません)

・[Slideshow_Images]フォルダ

 sec01.jpg

 sec02.jpg

 sec03.jpg

 sec04.jpg

 [PSD]フォルダ(※使用しません)

 

前回のデータ:

[LP_Test]> LP.muse

Vol.05 ページのスクロールで画像が切り替わる仕組みを作成する[15分36秒]

素材データはありません。

 

完成ファイル[Vol05.zip/488KB]:

[Vol05] > [完成ファイル]> [LP_Test]> LP02.muse

[Vol05] > [完成ファイル]> [LP_Test]> LP.muse

[Vol05] > [完成ファイル]> [LP_Test]> [Images]

 cover_graphic.jpg

 sec01.jpg

 sec02.jpg

 sec03.jpg

 sec04.jpg

作業を進めるときのポイント 2

Vol.06 作業の効率化/整列パネルの使い方[10分08秒]

Vol.05 と同じデータを使用

 

完成ファイル[Vol06.zip/488KB]:

[Vol06] > [完成ファイル]> [LP_Test]> LP02.muse

[Vol06] > [完成ファイル]> [LP_Test]> LP.muse

[Vol06] > [完成ファイル]> [LP_Test]> [Images]

 cover_graphic.jpg

 sec01.jpg

 sec02.jpg

 sec03.jpg

 sec04.jpg

ランディングページのプロトタイプを作成する

Vol.07 アクセシビリティについて/基本ページにタイトル画像を配置する[29分47秒]

準備:

Web Developerを使用します。

Web Developer

 

Firefox アドオン

Web Developer 1.2.5

素材データ[Vol07.zip/377KB]:

 

代替テキスト.txt

メタデータ.txt

 

「Title_Images」フォルダ

 Title.png

 Subtitle.png

 

「完成ファイル」フォルダ

 LP06.muse

 

「Museでスタイルの切り替え」フォルダ

 Media_Queries.muse

 head要素に挿入したHTML.txt

Vol.08 ページのレイヤー構造の作成/見出しを配置する[25分21秒]

素材データ[Vol08.zip/1.3MB]:

 

LP06.muse

 

[Page_Images]フォルダ

 icon-144x144.png

 kindle_lp_cover_3264.jpg

 

[Title_Images]フォルダ

 ※使用しないが、使用した画像を一緒に管理するため

 

[完成ファイル]フォルダ

 LP07.muse

Vol.09 マスターページにフッター領域のコンテンツを作成する[18分50秒]

素材データ[Vol09.zip/3.1MB]:

 

LP07.muse

フッター領域のテキスト.txt

 

[Page_Images]フォルダ

 footer_cover.png

 icon-144x144.png(使用済)

 kindle_lp_cover_3264.jpg(使用済)

 

[Title_Images]フォルダ

 ※使用しないが、使用した画像を一緒に管理するため

 

[完成ファイル]フォルダ

 LP08.muse

Vol.10 ライブラリを活用した作業の効率化[29分33秒]

素材データ[Vol10.zip/4.8MB]:

 

LP08.muse

セクション01の見出しの代替.txt

 

[Page_Images]フォルダ

 Section04_cover.png

 SubCover.png

 Tag-line.png

 footer_cover.png(使用済)

 icon-144x144.png(使用済)

 kindle_lp_cover_3264.jpg(使用済)

 

[Title_Images]フォルダ

 ※使用しないが、使用した画像を一緒に管理するため

 

[Muse-Library]フォルダ

 Kindle_LP.mulib

 

[sec02_Photo01_04]フォルダ

 sec02_Photo01.png

 sec02_Photo02.png

 sec02_Photo03.png

 sec02_Photo04.png

 

[完成ファイル]フォルダ

 LP09.muse

Made with Adobe Muse

更新日:2014年5月30日

The Future of Design Digital Publishing Team

デザインの未来 デジタルパブリッシングチーム

学校法人阿佐ヶ谷学園 高度情報化研究所eface lab. / ズオンコーポレーション 164-0011 東京都中野区2-30-9 ツバセス中野坂上 333