書籍販売キャンペーン用ランディングページの制作事例

投稿日：2019-08-14

ＨＡコンサルティング株式会社の西山様の著書「人材アセスメント受験者、管理職のためのインバスケット演習」のための書籍専用ランディングページを制作いたしました。ご紹介させていただきます。

パソコン表示時のトッページ全体イメージ

スマホ表示時のトッページ全体イメージ

 

---

今回は、縦長の１枚ものランディングページとしての制作です。サイト内のナビゲーションよりも、開いた時のメインヴィジュアルで、内容をわかりやすく伝えて、後半の本文を読んでもらうこと、が大事になってきます。

書籍のタイトル、見出し文、表紙画像、などの原稿を頂いて、それぞれの要素に軽重をつけながら、レイアウトしていきます。

書籍画像をアイキャッチにして、タイトルを一番大きく。ポイントとなる「本試験レベル掲載」を爆弾囲みで。残りは、サブ要素をバランス見ながら配置しています。

説明文の情報量が多いので、背景色を切り替えて、メインビジュアルの下にテキストを入れていきます。

今回の目標アクションは、Amazonの購入ページでの購入になるので、アマゾンで購入出来ますよ、ということがわかりやすいようなボタンを用意して、リンクします。

以降の文章は、見出し＋本文を基本としながらも、各項目で変化を出しながら制作しています。

最初は、見出し＋チェックマークのリストスタイルですね。太字＋アンダーラインを入れて、強調も入れています。

同じリストスタイルですが、指マークのアイコンでポイントとして表示しています。

書籍の目次です。リストが続いているので、背景色を入れ違いにしたシンプルな表形式で制作しています。

見出しのスタイルは、読みやすく共通のスタイルで制作。基本のリストマーク＋書籍サンプルページを画像で掲載です。

期待効果も同様ですが、ここはチェックマークの繰り返しです。メリットを示したところで、アマゾン購入ボタンを再度配置しています。

目的については、文章としての原稿でしたので、囲みを入れて、変化をつけています。

著者紹介は、写真＋氏名・肩書を中心に、資格や略歴で、信頼感を補足します。このあたりもテキストの情報が多いので、太字や文字サイズ、下線を入れて、見出しの変化をつけながら、読みやすくスタイルを適用しています。

スマホで表示するときは、写真が小さくなりすぎないように、写真をセンターに寄せて、レイアウトを自動で変更しています。

最後に、アクションとしてのボタンを再度配置して、発行者などの情報を載せて、完了です。

書籍ページの場合、書籍の製本と並行しながらホームページを用意していく場合が多いです。表紙案の配色をお聞きしながら、ある程度進めておいて、発行日前に公開できるように進める、など、お客様と協力しながらの制作進行がポイントになってきます。今回は、すばやく状況をご連絡いただきながら進められたことで、予定どおりの公開ができました。

西山様、ご依頼ご協力、ありがとうございました。
感謝申し上げます。