Web制作のしっかりとしたスキルを身につけたい、スキルアップのきっかけが欲しい人にオススメの本

来年に備えて、Web制作のしっかりとしたスキルを身につけたいと考えているWeb制作者・クリエイターの人にオススメの本を紹介します。

Web制作のコンテンツ・デザイン・コーディングの知識やテクニックを単に学ぶだけでなく、その理由や考え方もしっかり分かります。

本のキャプチャ

本書はページ制作におけるコンテンツ設計、デザイン、コーディング、運用・改善・最適化まで、Web制作に携わる幅広い人に役立つ内容となっています。
ランディングページに絞られているためか、内容はどの章も非常に濃い一冊です。

本のキャプチャ

ランディングページ・デザインメソッド
[Amazonでみる]
[楽天でみる]

著者:
株式会社ポストスケイプ
出版社:
MdNコーポレーション
発売日:
2015/11/24

Kindle版は、お値段がお得です。

では、そんな本書の中身を紙面のキャプチャで少しだけご紹介。
内容は大別すると、コンテンツ、デザイン、コーディング、運用管理で、制作に携わるすべての人向けとなっています。
当ブログは制作寄りの人が多いと思うので、デザイン・コーディングを中心に紹介します。

誌面のキャプチャ

冒頭では、国内のさまざまな実例を参考に、プロダクトやサービスそれぞれに適したランディングページを見ていきます。ただ眺めるだけでなく、どういった目的のデザインで、どのような効果を生み出しているのか、言葉で書かれてあると理解も深まります。
※このページだけ担当者様から画像を頂きました。以下は当方が撮影したものです。

誌面のキャプチャ

1, 2章は制作の前段階。ランディングページの企画・提案に役立つ知識をはじめ、戦略設計、フロー、情報設計、キーワードやターゲットの選定など、事前に準備すべきことが豊富な実例とともに解説されています。

誌面のキャプチャ

3章からはいよいよ制作で、まずはコンテンツ。
ランディングページのような縦長コンテンツはスクロール在りきです。理解しやすい情報の配置、コンテンツの属性による並び順や数など、いろいろな検証例があり、非常に勉強になりました。

誌面のキャプチャ

上はテキストや画像などの情報要素の数によるレイアウト変更の例で、ファーストビューのレイアウトパターンを元に、情報要素の数による違いについて検証されています。

誌面のキャプチャ

4章は、デザイン。
ランディングページの目的でもあるコンバージョンに結びつくデザインのテクニックがたくさん紹介されています。

誌面のキャプチャ

デザインで特に大切なのが、ファーストビューです。ランディングページ全体のデザインに大きく影響を与える重要な役割を担っています。美しいデザインではなく、効果があるデザインとはどうすればよいのか、そのプロセスや考え方がしっかり身につけられます。

誌面のキャプチャ

考え方だけでなく、デザインのテクニックも詳しく解説されてあります。

誌面のキャプチャ

コンバージョンエリア、ナビゲーション、アンカーリンク、アコーディオン、スライダー、タブなど、ランディングページでよく使用されているUI要素のデザインテクニックです。

誌面のキャプチャ

カラー設計、写真素材の使い方、余白の使い方もランディングページのデザインだけでなく、通常のWebサイトにも役立つ知識を学ぶことができます。

誌面のキャプチャ

デザインは作りっぱなしではダメですよね。ランディングページでは特に、検証が重要です。デザインの検証をおこなうことで、理由のあるデザインを生み出すことができます。

誌面のキャプチャ

5章はコーディング、制作系のラストです。

誌面のキャプチャ

ランディングページで求められるコーディングは、単にコーディングのスキルだけでなく、コンテンツを理解するマーケティングのスキルがあった方がよいです。画像やテキストを流し込むだけでなく、考えて作業すれば、その分よりよいページが作成できます。

誌面のキャプチャ

ランディングページで魅力を表現するのに、アニメーションは強力な武器になります。最近の傾向としてはマイクロインタラクションの繊細な動きが好まれています。

誌面のキャプチャ

最後の6章は、運用・検証・管理。
ランディングページは公開して終わり!というものではありません。検証を重ね、よりよい成果をあげることができます。

誌面のキャプチャ

検証には、3つのポイントがあります。流入は確保できているか、ページのコンテンツ自体に問題ないか、コンバージョンのハードルが高くないか。

誌面のキャプチャ

例えば、ファーストビューはどのように検証して、どのような方向で改善に取り組むのか、コンテンツの情報量やデザインのテイストなどさまざまな事例が紹介されています。

誌面のキャプチャ

最後の6章は運用・改善・最適化。
ここでもさまざまな角度から具体的な検証方法とその使い方、そして改善する課程が分かると思います。例えば、上のようにテキスト広告でどういったことを検証するために、何をどのように変えて、どこに注目するのか、といった感じです。

ランディングページ・デザインメソッドの目次

  1. ランディングページとは?
    ランディングページとは何か?
    コンバージョンとは何か?
    ランディングページとリスティング広告の関係
    ランディングページの重要性
    ランディングページでできること
    商品・サービスがランディングページに向いているか見極める
    ランディングページ制作・運用で失敗しないために
    よいランディングページの条件とは?
    よいランディングページを作るために必要な3つのポイント
    どのランディングページにも寿命がある
    ランディングページの広がる守備範囲の変化
  2. ランディングページの事前準備
    ランディングページの制作工程
    キーワードの特性を理解する
    キーワードからコンテンツを考える
    ターゲットに照準を合わせる
  3. コンテンツ
    ランディングページのコンテンツとは?
    コンテンツを用意する
    ランディングページの構成・ワイヤーフレームとは?
    構成・ワイヤーフレームの作成手順
    コンテンツを整理するために必要なレイアウトの工夫
    共感系コンテンツの設計
    評価系コンテンツの設計
    特徴系コンテンツの設計
    写真の重要性
  4. ランディングページのデザイン制作
    ランディングページデザインのステップ
    ランディングページデザインを始める前に
    Webサイトとランディングページのデザインの違い
    ランディングページのトーン&マナーを決める
    ランディングページの色彩設計
    ランディングページのフォント選定
    ファーストビューのデザイン
    コンバージョンエリアのデザイン
    ランディングページのUIデザイン
    フォームのデザイン
    写真素材の活用方法と注意点
    余白の扱いについて
    各種デザイン検証
    参考: これからのランディングページデザイン
  5. ランディングページのコーディング
    Webサイトのコーディングとランディングページのコーディング
    表示速度とコンバージョンの密接な関係
    デバイスフォントと画像フォントの使い分け
    運用改善のしやすいコードと軽量化
    画像1つで劇的に変わる見栄えと表示速度
    レスポンシブWebデザインの検討と実用性
    ブラウザ対応を意識したコーディング
    ランディングページにおけるHTMLの効率化コーディング
    デザインの魅力をJavaScriptで動的に表現する
    コンテンツスライダー
    タブメニュー
    動的デザインを使った効果的な誘目性の高め方
    パララックスの実用性
    フォームのエラーチェックによるコンバージョンの向上
    アコーディオン
    遅延表示(Lazy Load)
    ヘッダの固定
  6. ランディングページの運用改善による最適化
    広告/ランディングページの改善で向上するコンバージョン率
    改善を成果へと結びつけるためにまず行うべきこと
    ランディングページ改善の2分類
    CTAの改善
    ファーストビューのデザイン改善
    リスティング広告の改善でできること
    配信エリアの最適化
    広告側のA/Bテスト
    フォームの検証と改善施策
誌面のキャプチャ

本書のもう一つの大きな特長は、ページ中の「ヒント」や章ごとの「コラム」です。本文から少し横道にそれた情報もかなり役立ちますよね。

僕はデザイナーからコーダーになって、ディレクター、リーダーを担っていたのですが、どの時の自分にもぴったりの内容でした。すべてのジャンルで幅広いながらも深くしっかり学べ、繰り返し読みたくなる一冊です。
自身が担うパートを掘り下げるだけでなく、広げることで、より多くのことが見えるようになると思います。

本のキャプチャ

ランディングページ・デザインメソッド
[Amazonでみる]
[楽天でみる]

著者:
株式会社ポストスケイプ
出版社:
MdNコーポレーション
発売日:
2015/11/24

献本の御礼

最後に、献本いただいたMdNコーポレーションの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

sponsors

top of page

©2018 coliss