「ランティングページ 成果を上げる100のメソッド」の書籍紹介用ページを制作

書籍のコンセプト/テーマをシンプルに伝える

主にランディングページ改善の専門書として執筆したため、「本を読むことで得られる知識」を簡潔に伝えることを意識しました。本書のコンセプト説明から各章の内容へと繋げる形でシナリオを設計しています。実際の書面の一部を大きく配置することで、本書の具体的なコンテンツのイメージが湧くようにしています。

・書籍のイメージとリンクするメインビジュアルの策定
・フラットデザインを採用
・5つのLPOプロセスをモチーフに5角形のパーツデザインで表現
・フォントサイズにメリハリをつけ、インパクトのある見出しデザイン
・各章のイメージカラーと合わせた5つの配色設計

・高解像度ディスプレイで見ても要素が荒れて見えないコーディング
・現在のスクロール量が分かるプログレスバーを画面上部に実装
・CSSのmix-blend-modeを使用したデザイン
・スクロールに応じて要素がフェードイン
・SVGを使用