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」をクリックしてください。
Adobe Muse CCを使ってランディングページのプロトタイプを作成します!
Museの優れた操作性を活かして、ランディングページのプロトタイプ作成を学習していきます。チュートリアルビデオ(ウェブキャストの記録)は、10本あり、全体で3時間41分あります。Museの基本操作(基礎編のレベル)については解説していませんが、操作手順は省略することなく、すべて解説していますので、安心してください。
Adobe Muse CCを使用したランディングページ制作のポイントを解説します。デモ用のページを見ながら、レイヤーの機能やバックアップの重要性などを解説していきます。
ウェブページを構成する「ヘッダー」領域(ページ上部のタイトルなどを含む)、「フッター」領域(ページ下部のクレジット表記などを含む)、「コンテンツ」領域(記事など)の仮組みの作業について解説します。
Vol.02で作成したページにナビゲーションバーを追加します。「コンテンツ」領域には、4つのセクションを配置していますが、それぞれに「アンカーリンク」を設定していきます。
ナビゲーションバーの下にカバーグラフィックを追加します。カバーグラフィックは、長方形ツールで描いた矩形の中に背景画像として表示します。カバーグラフィックの画像ファイルは、素材データに含まれています。
Vol.04で作成したページに画像切り替えの仕組みを追加します。カバーグラフィックの右側に項目ごとの写真を配置し、ナビゲーションバーのボタンをクリックしたとき、写真も切り替わるように設定します。
Museは、IllustratorやInDesignに近いUI(ユーザーインターフェイス)を搭載しており、直感的な操作が可能になっています。「整列」パネルなどのレイアウト機能は、作業を効率化できますので、積極的に利用しましょう。
MuseではHTMLやCSSを編集できませんが、アクセシビリティのチェックはしておいた方がよいでしょう。このビデオでは、画像の代替テキストや見出しの設定など、Museでどのように作業するのか解説します。
Vol.07で作成したページを使って、ランディングページのプロトタイプを作成していきます。まず、レイヤーを追加して、ページの構造をつくります。また、画像の編集についても後半で解説します。
Vol.08で作成したページを使って、ランディングページのプロトタイプを作成していきます。ここでは、「フッター」領域の情報をマスターページに配置しています。
Vol.09で作成したページを使って、ランディングページのプロトタイプを作成していきます。ライブラリは、他のページでも活用できますので、あらかじめレイアウトパターンやパーツなどをライブラリ化しておきます。
ノンプログラマーズ・ウェブデザインは、企業・学校向けに提供しているウェブキャスト(オンライン受講料:6時間/12,500円)のアーカイブをまとめたものです。アーカイブには、ズーム処理(部分拡大)を加えていますので、小さな画面でも見やすくなっています。
Adobe Muse CC 実践編 ランディングページ制作
1,620円
購入終了
さまざまな支払方法が用意されています
(税込)
3時間41分(10本)のチュートリアルビデオをダウンロードできます。
関連コンテンツ
デザインの未来 デジタルパブリッシングチーム
学校法人阿佐ヶ谷学園 高度情報化研究所eface lab. / ズオンコーポレーション 164-0011 東京都中野区2-30-9 ツバセス中野坂上 333