book-cover-designer

name	book-cover-designer
description	Zenn の本のカバー画像（cover.png・500×700）をミニマルなデザインで生成・差し替えする。SVG を組み立てて PNG に変換し、M PLUS Rounded 1c Light のタイトルに柔らかいグロー、淡いグラデーション背景（テーマ選択可）、装丁向けの文節改行を適用する。本の表紙を作る・付ける・作り直すとき、カバー画像が無い本に表紙を用意するときに使う。
allowed-tools	Bash Read

ブックカバーデザイナー

Zenn の本（books/<slug>/）のカバー画像 cover.png（500×700）を生成する。SVG を組み立て、@resvg/resvg-js で PNG にラスタライズする。

デザイン方針（ミニマル・装丁向け）

• サイズは 500×700px（Zenn 推奨の表紙サイズ）。
• フォントは M PLUS Rounded 1c Light（weight 300）。ファイル指定でロードし、システムフォントに依存しない。
• 背景は淡いパステルのグラデーション（下記テーマから選ぶ）。文字が映えるよう適度に色を立てる。
• タイトルは左寄せ・大きめ。白い柔らかなグロー（ハロー）を重ねて背景から浮かせる。
• 改行は文節・助詞の境目で折る（装丁らしい改行）。禁則処理を行う。| で改行位置を手動指定できる。
• サブタイトルは 1 行に収まるよう自動で縮小する。著者は右下に置く。

テーマ（背景グラデーションの例）

次のテーマは出発点の 例 である。実際に作るときは、本のトピックや雰囲気に合う配色を AskUserQuestion（質問ツール）でユーザに確認する。既存テーマから選ぶか、希望に応じて scripts/generate.mjs の THEMES に新しい配色を追加する。

theme	配色・形状
lavender	ラベンダー→ピンクの放射
aurora	スカイブルー＋ミントの放射（寒色・爽やか）
sunset	ピーチ→ローズ→ラベンダーの暖色対角
cornerglow	ティール↔インディゴの対角コーナーグロー
peach	クリーム＋ピーチの暖色
monoblue	単色ブルーの上下グラデ

手順

1. タイトル・サブタイトル・著者を決める。タイトルは本タイトルの主部（— より前）、サブタイトルは副題を使うとよい。

2. 改行位置を | で指定する。文節・助詞の切れ目で 2〜3 行に分けると装丁が整う。

   • 例: mise による|開発環境の|一元管理ガイド
   • 例: Android アプリ|Google Play|公開ガイド（英字の製品名は行をまたがせない）

3. 配色を決める。AskUserQuestion（質問ツール）で、本の内容や雰囲気に合う配色をユーザに確認する。上記テーマは例なので、そのまま使ってよいか、別の色やトーンが良いかを尋ねる。回答に応じて既存テーマを選ぶか、THEMES に新しい配色を追加する。

4. 依存を用意する（初回のみ）。M PLUS Rounded 1c Light は初回実行時に自動ダウンロードする。

   cd ${CLAUDE_SKILL_DIR}/scripts && npm install
   

5. 生成する。

   node ${CLAUDE_SKILL_DIR}/scripts/generate.mjs \
     --title "mise による|開発環境の|一元管理ガイド" \
     --subtitle "複数言語・ツールから env・タスク・CI まで" \
     --author "seijikohara" \
     --theme aurora \
     --out books/mise-dev-environment-guide/cover.png
   

   • --out は本のディレクトリ直下（config.yaml と同じ階層）の cover.png にする。Zenn はそのファイル名・配置を表紙として認識する。
   • --keep-svg を付けると、同じ場所に編集用の .svg も書き出す。

6. 確認する。cover.png が 500×700 であること、タイトルが枠内に収まり、グローが見え、改行が自然かを Read で画像を開いて目視する。

調整

• グローの強さ・色は scripts/generate.mjs の GLOW（titleStd・titleRepeat・color）で変える。
• グラデーションの配色・形状は同ファイルの THEMES で編集する。base と各 layers（放射 radial / 線形 linear）の色を変えるか、新しいテーマを追加する。
• 文字色は各テーマの ink で変える。

注意

• 背景が白に近すぎると白いグローが埋もれる。グローを効かせるには、テーマの色を適度に濃くする。
• 長いタイトルは | で手動改行すると、貪欲な折り返しより装丁が整う。
• 出力先を本ディレクトリ直下にしないと、Zenn が表紙として認識しない。
• 実装の詳細（テキスト計測・DP による折り返し・禁則処理・SVG 構築）は scripts/generate.mjs を参照する。