書影・本文・ルビの役割を整理し、物語の世界を伝える書籍プロモーション

書籍の表紙や挿絵が持つ世界観を生かし、物語をまだ知らない読者にも、登場人物やシリーズの雰囲気が伝わるプロモーションページが求められました。既存の特設サイトとシリーズとしてのつながりを持たせながら、新しい作品固有の色、フォント、装飾、登場人物を追加する必要がありました。

児童書では漢字にルビが必要ですが、デザイン確認の途中でルビが増減すると、文字の高さや行間が変わり、長いページ全体のレイアウトへ影響します。また、装飾として画像化する文字と、読み上げ・検索・画面幅への対応が必要なHTMLテキストでは制作方法が異なります。原稿、ルビ、画像文字の区別を早い段階で確定し、追加巻にも展開できるルールが必要でした。

既存シリーズサイトから、ページ構成、文字のジャンプ率、余白、ホバー表現など再利用できるルールを抽出し、新しい作品へ適用しました。書影を基準に色や装飾の方向性を定め、あらすじ、登場人物、各巻紹介を読み進めるほど物語の世界へ入れる順序で構成しています。

原稿は、HTMLで表示する本文、デザインとして画像化する見出し、ルビが必要な箇所に分けて管理しました。児童書ではルビが入ることを前提に行間を確保し、後から指定が追加された場合も周囲の余白を最小限の調整で保てるようにしています。シリーズ共通のコードと部品を再利用しながら、登場人物など今回固有のセクションを追加し、次巻にも展開しやすい構成としました。

書影と挿絵の雰囲気をサイトの基準にし、背景、装飾、文字、余白を組み合わせて物語の世界を一枚の長いページへ広げました。既存シリーズのデザインルールをそのまま複製するのではなく、作品固有の色や登場人物を加えながら、シリーズとして並べたときの統一感を保っています。

児童書の読者を考え、本文は読みやすい大きさと行間を確保し、ルビが付いても上下の文字が重ならない設計にしました。一方、作品タイトルや装飾的なコピーは画像として扱い、書籍らしい表情を優先しています。スマートフォンでは背景素材や人物の位置を調整し、長いページでも次の内容へ自然に視線が進むようにしました。

既存シリーズサイトのHTML・CSSを基盤に、共通する見出し、巻紹介、ボタン、背景装飾を再利用し、新しい登場人物セクションを追加しました。本文は画面幅に応じて折り返せるHTMLテキスト、表現を固定したい箇所は画像とし、ルビには読み方を伝えるための適切なマークアップを使用しています。

画像はPNGからWebPへ変換し、背景や書影の品質を保ちながらデータ量を削減しました。長いLPでは一つの原稿変更が後続セクションの位置へ影響するため、固定座標に依存せず、内容の増減を吸収できる余白とレイアウトで実装しています。シリーズの共通コードを残しつつ、作品固有の差分を分け、次の巻や特設ページへ展開しやすい構成としました。