Adobe Museランディングページ制作ガイド
〜コード知識ゼロで作るWeb広告

書籍の概要

この本の概要

プロモーションやキャンペーンを告知するランディングページが増えています。チラシ感覚で魅せるランディングページ(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 見つけてもらいやすいサイトにする方法

著者プロフィール

境祐司(さかいゆうじ)

URL:http://design-zero.tv/
Twitter:@commonstyle
インストラクショナルデザイナーとして講座企画,IDマネジメント,記事執筆,講演などを中心に活動。2012年5月,電子出版専門のパブリッシャーとして電子書籍のプランニング,情報設計,デリバリデザイン等を手掛ける。2014年,デジタル専門の一人出版社「Creative Edge School Books(クリエイティブエッジスクールブックス)」を立ち上げ,主にクリエイティブ系のオンライン学習コンテンツを企画・制作・販売し始める。2016年より,AI(人工知能)本格導入のためのトライアルを開始し,AIシステムやロボティクス関連の実証実験に参加。ニューラルネットワークを使った機械翻訳と画像置換処理(写真画像のイラスト表現など)を中心に小規模なテストを実施している。
Adobe Museを学ぶためのエデュケーションサイト「Museアカデミー(http://design-zero.tv/muse2016/)」を運用中。

著書

「Webデザイン基礎トレーニング」「Webデザインの見本帳 実例で学ぶ最新のスタイルとセオリー」(監修・執筆/MdN),「Adobe Edge Animate スタートガイド ~CreativeCloud対応」(技術評論社),「HTML+CSSデザイン|基本原則,これだけ。【HTML5 & CSS3対応版】」(共著/MdN),「Amazon Kindleダイレクト出版 完全ガイド」(共著/インプレス),「HTML & CSS 逆引き大事典」「速習デザイン Webデザイン基礎 改訂3版 」(技術評論社),「InDesign CS6で作るEPUB 3 標準ガイドブック」(共著/翔泳社),「EPUB3 スタンダード・デザインガイド」(共著/マイナビ),「ウェブレイアウトの教科書 PC・スマートフォン・タブレット時代の標準デザイン 」(MdN),「電子書籍の作り方(PCポケットカルチャー)」(技術評論社),「電子書籍制作ガイドブック」(共著/インプレス)等。