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

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

NON-PROGRAMMER'S

WEBDESIGN

HTMLやCSSなどの記述を必要としないウェブツール「Adobe Muse CC」を習得するためのチュートリアルビデオです。

今回の[実践編]は、2月にリリースした「Adobe Muse CC 完全習得[基礎編]」の続編です。「基本操作が習得されている」という前提で、カリキュラムがつくられています。今回は、最も要望が多かったランディングページ制作の効率的な進め方を学習していきます。

検索や広告、ソーシャルメディアなどから訪れる人たちは動機や目的が異なるため、流入経路にマッチした情報を提供しなければ期待した効果は得られません。見込み客や顧客に「見つけてもらう」ための経路整備は必須だと考えてよいでしょう。

 

ランディングページは、アイデアを短時間で形にでき、効果測定や内容の修正も迅速に実行できるため、見込み客をリードとして獲得するための大変重要なツールになっています。ウェブサイトに誘導するより成約率が高く、費用対効果の高いマーケティングとして多くの企業が実践しています。

 

ランディングページ作成には、流入経路ごとのプランニングが必要ですが、訴求力を高めるには、ビジュアルコミュニケーションデザイン(Visual Communication Design:視覚伝達デザイン)とコピーライティング(Copywriting)が重要な要素になります。

「アイデアを短時間で形にでき、効果測定や内容の修正も迅速に実行できる」のが利点であり、競争力につながります。視覚伝達やコピーライティングが大きな役割を担うのであれば、ビジュアルデザインのプロフェッショナルであるグラフィックデザイナーが作成することで、より確かなものになるはずです。

ウェブサイトの構築なら、同社のDreamweaverや個人向けのツールとして普及しているホームページビルダーがあります。HTMLの知識を持たない担当者が情報発信する場合は、WordPressなどのCMSを導入すればよいでしょう。

 

Museの大きな特徴は、IllustratorやInDesignなどと同じユーザーインターフェイスを搭載し、グラフィックツールのような使い方で、ウェブページを作成できる仕様になっていることです。

 

階層構造を持つウェブサイトより、ランディングページや数ページ程度のマイクロサイトの作成に適しています。短時間で、ビジュアルコミュニケーションデザインに取り組めるため、特にランディングページの作成で威力を発揮します。

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

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

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

NON-PROGRAMMER'S

WEBDESIGN

PRODUCT

Adobe Muse CCを使ってランディングページのプロトタイプを作成します!

Museの優れた操作性を活かして、ランディングページのプロトタイプ作成を学習していきます。チュートリアルビデオ(ウェブキャストの記録)は、10本あり、全体で3時間41分あります。Museの基本操作(基礎編のレベル)については解説していませんが、操作手順は省略することなく、すべて解説していますので、安心してください。

09分03秒

Adobe Muse CCを使用したランディングページ制作のポイントを解説します。デモ用のページを見ながら、レイヤーの機能やバックアップの重要性などを解説していきます。

Vol.01

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

28分30秒

ウェブページを構成する「ヘッダー」領域(ページ上部のタイトルなどを含む)、「フッター」領域(ページ下部のクレジット表記などを含む)、「コンテンツ」領域(記事など)の仮組みの作業について解説します。

Vol.02

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

32分26秒

Vol.02で作成したページにナビゲーションバーを追加します。「コンテンツ」領域には、4つのセクションを配置していますが、それぞれに「アンカーリンク」を設定していきます。

Vol.03

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

Vol.04

22分33秒

ナビゲーションバーの下にカバーグラフィックを追加します。カバーグラフィックは、長方形ツールで描いた矩形の中に背景画像として表示します。カバーグラフィックの画像ファイルは、素材データに含まれています。

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

Vol.05

15分36秒

Vol.04で作成したページに画像切り替えの仕組みを追加します。カバーグラフィックの右側に項目ごとの写真を配置し、ナビゲーションバーのボタンをクリックしたとき、写真も切り替わるように設定します。

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

Vol.06

10分08秒

Museは、IllustratorやInDesignに近いUI(ユーザーインターフェイス)を搭載しており、直感的な操作が可能になっています。「整列」パネルなどのレイアウト機能は、作業を効率化できますので、積極的に利用しましょう。

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

Vol.07

29分47秒

MuseではHTMLやCSSを編集できませんが、アクセシビリティのチェックはしておいた方がよいでしょう。このビデオでは、画像の代替テキストや見出しの設定など、Museでどのように作業するのか解説します。

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

Vol.08

25分21秒

Vol.07で作成したページを使って、ランディングページのプロトタイプを作成していきます。まず、レイヤーを追加して、ページの構造をつくります。また、画像の編集についても後半で解説します。

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

Vol.09

18分50秒

Vol.08で作成したページを使って、ランディングページのプロトタイプを作成していきます。ここでは、「フッター」領域の情報をマスターページに配置しています。

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

Vol.10

29分33秒

Vol.09で作成したページを使って、ランディングページのプロトタイプを作成していきます。ライブラリは、他のページでも活用できますので、あらかじめレイアウトパターンやパーツなどをライブラリ化しておきます。

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

チュートリアルビデオの素材データは

ここからダウンロードできます

NON-PROGRAMMER'S

WEBDESIGN

PRICEPLAN

ノンプログラマーズ・ウェブデザインは、企業・学校向けに提供しているウェブキャスト(オンライン受講料:6時間/12,500円)のアーカイブをまとめたものです。アーカイブには、ズーム処理(部分拡大)を加えていますので、小さな画面でも見やすくなっています。

※販売終了しました。

このコンテンツの一般公開については、クリエイティブエッジ・スクールをご覧ください。

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

1,620円

購入終了

さまざまな支払方法が用意されています

(税込)

3時間41分(10本)のチュートリアルビデオをダウンロードできます。

関連コンテンツ

Made with Adobe Muse

The Future of Design Digital Publishing Team

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

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