Gakken 近現代の歴史｜書籍紹介LPのデザインとレスポンシブ実装

学研の学習まんがシリーズ「近現代の歴史」の書籍紹介LPについて、デザインとレスポンシブ実装を担当しました。2024年10月着手。同じシリーズの他のLPと並べても違和感がないように作ることが、この案件の裏の条件でした。

プロジェクト概要

項目	内容
対象	学習まんが「近現代の歴史」書籍紹介LP
atmeの担当	LPデザイン／レスポンシブ実装
着手	2024年10月
実装	HTML / Sass / JavaScript。ヘッダー・フッターは共通ファイルに分離

課題と解決策

学習まんがの紹介LPで判断が必要になるのは、「誰に向けて作るか」です。読むのは子どもですが、買うのは親です。この2者は、同じページを別の目的で見ます。

見る人	知りたいこと
子ども	面白そうか。絵の雰囲気はどうか
親	学習にどう役立つか。監修者は誰か。全巻で何冊・いくらか

そこで、ページの構成を次の順で組みました。

セクション	役割
本書の特長	まず「何がいいのか」を提示する
監修者のことば	親の判断材料。学習書では信頼性がそのまま購入理由になる
全巻リスト	何冊あるのか、どの巻が何を扱うのかを一覧で
学研の歴史まんが	シリーズ全体への導線。他のシリーズへ回遊させる
編集部からのお知らせ	更新される情報の置き場

「監修者のことば」を上部に置けるかどうかが、学習書LPの分かれ目です。 絵の魅力だけでは、買う側の不安は消えません。

担当した制作・支援内容

• LPのデザイン
• レスポンシブ実装（スマートフォン／タブレット／PC）
• Sassによるスタイル設計
• ヘッダー・フッターを共通ファイルに分離し、シリーズの他ページと同じ部品を使える構成に
• 書影・キャラクター画像など多数の画像素材の最適配置

ヘッダー・フッターを分ける理由

シリーズもののLPは、1本で終わりません。あとから別タイトルのLPが追加されます。そのとき、共通部分が各ファイルにベタ書きされていると、全ファイルを直す羽目になります。

本案件ではヘッダー・フッターを独立したCSS・JSに分離しました。これにより、シリーズ全体でナビゲーションを変更したくなった場合も、修正箇所が1か所で済みます。「次に足すとき」を前提に作るのが、シリーズものLPの実装方針です。

この案件で当社が標準にしていること

1. 買う人と読む人が違う商材は、両方の動線を用意する — 学習書・子ども向け商材では必須
2. 信頼の材料を上に置く — 監修・実績・資格は、装飾より先
3. 共通部品は最初から分離する — 2本目のLPが作られる前提で組む
4. 画像点数が多いLPはスマートフォン基準で設計する — 書籍紹介はほぼスマホで読まれる

よくある質問

Q. デザインから実装まで一括でお願いできますか？
A. できます。本案件もデザインとレスポンシブ実装の両方を担当しています。

Q. シリーズで複数のLPを作る予定があります。
A. その場合は最初のLPの時点でお伝えください。ヘッダー・フッターやパーツを共通化した構成で作るため、2本目以降の制作費と改修費を抑えられます。

Q. 支給された書影・イラストをそのまま使えますか？
A. 使えます。画質を落とさずに配置し、表示速度とのバランスを取るのが実装側の仕事です。

同じような悩みを抱える企業の皆様へ

「書籍・商品の紹介LPを作りたい」「シリーズで複数ページを展開する予定がある」——このようなご相談を承っています。展開の予定があるなら、1本目の設計から関わらせてください。 後から足すときの費用が変わります。