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

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

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

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

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

• ランディングページ・デザインメソッド（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テスト

   フォームの検証と改善施策

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

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

献本の御礼

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

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

• お問い合わせ｜コリス