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

    2019.8.14色別: レッド系, 種類別: マルっとプラン

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

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

    PCトップ1
    PCトップ2
    PCトップ3

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

    スマホトップ1
    スマホトップ2
    スマホトップ3
    スマホトップ4

     


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    サイト名:「人材アセスメント受験者、管理職のためのインバスケット演習」販売サイト
    https://ha-consulting.co.jp/lp001/

    会社名:HAコンサルティング株式会社様

     

     

    関連記事


お問い合せ