概要

プロモーションやキャンペーンを告知するランディングページが増えています。チラシ感覚で魅せるランディングページ（Web広告）は，Webデザイナーのみならず，紙媒体のグラフィックデザイナーやDTPオペレーターなど，幅広い業種で制作されています。ただ，ネックとなるのがHTMLなどのWeb言語の習得です。Adobe MuseはIllustratorのようにビジュアルベースでWebページを作成できるアプリです。本書では，Museを使ってランディングページの知識と概念を理解しながら，作成する方法を解説します。

こんな方におすすめ

• HTMLなどのWeb言語の知識なしで，Webページを作りたい人
• Adobe Museの基本的な操作を知りたい人
• ランディングページとはどういうものかを知りたい人

目次

PART1 ランディングページの特徴と構造にいて知る

• 01　ランディングページとWebサイトの違いは？
• 02　ランディングページが必要とされている理由
• 03　効果的なランディングページを素早く作成する
• 04　作業を進めるための準備をする
• 05　ランディングページを作成する「目的」を明確にする
• 06　ランディングページで扱う商品／サービスの特徴とニーズを書く
• 07　商品／サービスの検索キーワードを考える
• 08　ファーストビューの内容とキャッチコピーを決める
• 09　ランディングページのワイヤーフレームを描く

PART2 デスクトップとモバイルのデザインを決める

• 01　デスクトップとモバイルのページを作り分ける方法
• 02　レスポンシブWebデザインで作成する方法
• 03　デスクトップとモバイルで共有できる要素・できない要素
• 04　テキストをレイアウトする方法
• 05　タイトルをデザインする方法
• 06　効率よく作業を進めるためのテクニック
• COLUMN　テキストや図形の設定を利用する

PART3 プロトタイプを作成する

• 01　プランニングシートとワイヤーフレームを準備する
• 02　パソコン向けとスマートフォン向けのデザインを決める
• 03　Illustratorでプロトタイプの基本構造を描く
• 04　Photoshopでコンバージョンボタンを作成する
• 05　Adobe Stockでイメージ素材を集める
• 06　Museでプロトタイプを作成する
• COLUMN　画面の余白ができてしまう場合の対処方法

PART4 プロトタイプからページを作成する

• 01　プロトタイプをベースにして新規ページを作成する
• 02　ファーストビューを完成させる
• 03　ストーリーセットを完成させる
• 04　クロージングセットとフッターを完成させる
• COLUMN　ページ作成時に知っておきたい情報

PART5 独創的かつ魅力的なページにする

• 01　Museのウィジェットライブラリを活用する
• 02　ウィジェットライブラリ「メニュー」をカスタマイズする
• 03　ウィジェットライブラリの6つのカテゴリーを全て把握する
• 04　スクロール効果で動的な表現を追加する
• COLUMN　作業時間を短縮するプロトタイピングツールAdobe XD

PART6 作成したサイトを公開する

• 01　パブリッシュとページ情報の記述方法
• 02　仮サイトで公開／本番サイトをFTPする／HTMLデータを書き出す
• 03　公開したページをブラウザーで修正する方法
• 04　見つけてもらいやすいサイトにする方法

サポート

ダウンロード

本書のサンプルファイルをダウンロードできます。

ダウンロード

サンプルファイル（Lesson-Data.zip）

サンプルファイルのご利用方法は本書P.4「本書の使い方」およびP.6「サンプルファイルのダウンロード」をご覧ください。
サンプルファイルは圧縮されていますので，お使いのコンピュータにダウンロードしたあとは，フォルダを展開してからご利用ください。なお，Part-2 で使用している画像（人物写真）に関しては，解説で使用した画像とサンプルに含まれる画像と異なります。
あらかじめご了承の上，ご使用をお願いいたします。

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに，ご迷惑をおかけしたことを深くお詫び申し上げます。

P.188 手順04の「カラーコー」以降の文章

正しい解説を記したPDFファイルを用意しました。

• Muse_p188nashi.pdf