マルっとプランHAコンサルティング株式会社の西山様の著書「人材アセスメント受験者、管理職のためのインバスケット演習」のための書籍専用ランディングページを制作いたしました。ご紹介させていただきます。パソコン表示時のトッページ全体イメージPCトップ1PCトップ2PCトップ3スマホ表示時のトッページ全体イメージスマホトップ1スマホトップ2スマホトップ3スマホトップ4今回は、縦長の1枚ものランディングページとしての制作です。サイト内のナビゲーションよりも、開いた時のメインヴィジュアルで、内容をわかりやすく伝えて、後半の本文を読んでもらうこと、が大事になってきます。書籍のタイトル、見出し文、表紙画像、などの原稿を頂いて、それぞれの要素に軽重をつけながら、レイアウトしていきます。書籍画像をアイキャッチにして、タイトルを一番大きく。ポイントとなる「本試験レベル掲載」を爆弾囲みで。残りは、サブ要素をバランス見ながら配置しています。説明文の情報量が多いので、背景色を切り替えて、メインビジュアルの下にテキストを入れていきます。今回の目標アクションは、Amazonの購入ページでの購入になるので、アマゾンで購入出来ますよ、ということがわかりやすいようなボタンを用意して、リンクします。以降の文章は、見出し+本文を基本としながらも、各項目で変化を出しながら制作しています。最初は、見出し+チェックマークのリストスタイルですね。太字+アンダーラインを入れて、強調も入れています。同じリストスタイルですが、指マークのアイコンでポイントとして表示しています。リストが続いているので、背景色を入れ違いにしたシンプルな表形式で制作しています。見出しのスタイルは、読みやすく共通のスタイルで制作。基本のリストマーク+書籍サンプルページを画像で掲載です。期待効果も同様ですが、ここはチェックマークの繰り返しです。メリットを示したところで、アマゾン購入ボタンを再度配置しています。目的については、文章としての原稿でしたので、囲みを入れて、変化をつけています。著者紹介は、写真+氏名・肩書を中心に、資格や略歴で、信頼感を補足します。このあたりもテキストの情報が多いので、太字や文字サイズ、下線を入れて、見出しの変化をつけながら、読みやすくスタイルを適用しています。スマホで表示するときは、写真が小さくなりすぎないように、写真をセンターに寄せて、レイアウトを自動で変更しています。最後に、アクションとしてのボタンを再度配置して、発行者などの情報を載せて、完了です。書籍ページの場合、書籍の製本と並行しながらホームページを用意していく場合が多いです。表紙案の配色をお聞きしながら、ある程度進めておいて、発行日前に公開できるように進める、など、お客様と協力しながらの制作進行がポイントになってきます。今回は、すばやく状況をご連絡いただきながら進められたことで、予定どおりの公開ができました。西山様、ご依頼ご協力、ありがとうございました。»ご依頼・ご相談はこちらからどうぞ。