BookCoverMaker

シンプルで使いやすい、文庫本用ブックカバー生成ツール。
好きな柄を選んで、色をカスタマイズして、画像を挿入。
A4 で印刷して、折りたたむだけでカバーが完成します。

---

機能

Phase 1（現在のMVP）

• 柄パターン選択
  グリッド、ドット、ストライプ、幾何学模様など 10～15 種類から選択可能

• 色カスタマイズ
  カラーピッカーで RGB 値を自由に選択。リアルタイムプレビュー対応

• ユーザー画像埋め込み
  ドラッグ&ドロップで画像をアップロード。位置・スケール調整が可能

• PDF 両面出力

  • ページ 1：柄 + ユーザー画像（印刷面）
  • ページ 2：薄い柄背景 + 折り線・トンボ（ガイド面）

• プレビュー表示
  出力前にリアルタイムで仕上がりを確認

---

ファイル構成

bookcover-maker/
├── index.html              # メイン UI
├── css/
│   └── style.css           # スタイル定義
├── js/
│   ├── app.js              # メイン処理・イベントハンドラ
│   ├── patterns.js         # 柄パターンライブラリ
│   └── pdf-utils.js        # PDF 生成ユーティリティ
├── lib/
│   └── jspdf.min.js        # jsPDF ライブラリ
├── README.md               # このファイル
└── DESIGN.md               # 詳細な設計ドキュメント

---

使い方

アクセス

ブラウザで以下の URL にアクセス:

https://shotafujie.github.io/BookCoverMaker/

操作手順

1. 柄パターンを選択

ドロップダウンメニューから好きなパターンを選択します。

対応パターン:

• グリッド
• ドット
• ストライプ
• 幾何学模様
• その他

2. 色をカスタマイズ

カラーピッカーを使って色を選択。プレビューがリアルタイムで更新されます。

RGB 色選択:

• R（赤）: 0～255
• G（緑）: 0～255
• B（青）: 0～255

3. 画像を埋め込み（オプション）

ドラッグ&ドロップ領域に画像をドロップ。

対応ファイル形式:

• JPG / JPEG
• PNG
• GIF

調整:

• スライダーで位置を調整
• スケールスライダーで大きさを変更

4. プレビューを確認

画面右側でカバーの完成イメージを確認します。

5. PDF をダウンロード

「PDF をダウンロード」ボタンをクリック。
2 ページの PDF が生成されます。

---

印刷方法

準備物

• A4 普通紙（または厚紙推奨：180g/m²～）
• プリンタ
• カッター＆メタルスケール（または裁断機）

印刷手順

ステップ 1: PDF を開く

ダウンロードした PDF をプリンタドライバで開きます。

ステップ 2: 印刷設定を確認

プリンタドライバの設定:

設定項目	値
用紙サイズ	A4（210 × 297mm）
向き	縦（Portrait）
倍率	100%（等倍） ← 重要
両面印刷	あり（長辺とじ）
ページスケーリング	なし

注意: 「用紙に合わせる」「ページ全体を印刷」などの自動スケーリングは オフ にしてください。
寸法がズレると、折りたたみが合わなくなります。

ステップ 3: 両面印刷

1. ページ 1（表面）を印刷
2. 用紙を裏返して、ページ 2（裏面）を印刷

プリンタが両面印刷機能を持つ場合は、設定から自動両面印刷を選択可能です。

ステップ 4: 裁断

ページ 2（裏面）の点線を目安に裁断します。

裁断位置の詳細:

領域	幅（mm）	説明
左折り返し	40～50	左側をカバーの背の後ろに折り込む
表紙（左）	105	本の表紙を覆う部分
背幅	10～15	本の背の幅（本の厚さに応じて変更）
表紙（右）	105	本の背表紙を覆う部分
右折り返し	40～50	右側をカバーの背の後ろに折り込む

上下のトンボ:

• 上部の実線で裁断
• 下部の実線で裁断

ステップ 5: 折り込み

ページ 2 に印刷された折り線に沿って折ります。

【折る順序】

1. 縦方向の点線で折る（左右の折り返し部分）
   左 ← 背 → 右

2. 必要に応じて背の部分を軽く折って、本にフィットさせる

ステップ 6: 本に装着

完成したカバーを文庫本に装着します。

---

技術仕様

文庫本用寸法（標準）

項目	サイズ（mm）
本の幅	105
本の高さ	148
背幅（標準）	12
上下余白	各 3
左右折り返し	各 45

A4 レイアウト合計幅:
105（表）+ 105（裏）+ 12（背）+ 45（左折り）+ 45（右折り）= 312mm

→ A4（210mm × 297mm）で複数ページ出力、または縮小して単一ページ出力

トンボ・折り線の座標

ページ 1（表面：柄）

実線トンボ位置（断ち落とし境界）:

上部トンボ（実線）
y = 0mm（ページ上端）

下部トンボ（実線）
y = 148mm

左端トンボ（実線）
x = 0mm

右端トンボ（実線）
x = 210mm

ページ 2（裏面：ガイド線）

折り線（点線、濃い灰色 RGB: 128,128,128）:

【縦方向の折り線】

左外側折り線:
x = 45mm（左折り返しの端）

左背境界:
x = 50mm（左折り返しの内側）

背左側:
x = 50mm ～ x = 62mm（背幅 12mm）

背右側:
x = 62mm

右背境界:
x = 67mm（右折り返しの開始）

右外側折り線:
x = 112mm（右折り返しの端）

横方向のガイド線:

【上下のトンボ】

上部（実線）:
y = 0mm

下部（実線）:
y = 148mm

【中央オプション】

中央上:
y = 74mm（中折り位置）

中央下:
y = 74mm

背景柄:

• 薄い背景（opacity: 0.1）で柄を全体に配置
• 視認性を損なわないよう控えめに

---

複数判型対応（Phase 2 以降）

対応予定判型

const bookTypes = {
  bunko: {
    width: 105,
    height: 148,
    name: "文庫本",
    spineWidthRange: [10, 15]
  },
  shinsho: {
    width: 106,
    height: 173,
    name: "新書",
    spineWidthRange: [8, 12]
  },
  yonroku: {
    width: 128,
    height: 188,
    name: "四六判",
    spineWidthRange: [12, 18]
  },
  b6: {
    width: 128,
    height: 182,
    name: "B6判",
    spineWidthRange: [10, 16]
  },
  a5: {
    width: 148,
    height: 210,
    name: "A5判",
    spineWidthRange: [12, 20]
  }
};

実装時の計算ロジック

A4 レイアウト幅 = bookWidth × 2 + spineWidth + foldMargin × 2
（foldMargin: 45mm）

レイアウトが A4 幅（210mm）を超える場合:
→ A3 対応または複数ページ出力で対応

---

使用上の注意点

印刷品質

1. 用紙選択

   • 厚紙（180g/m²）推奨（普通紙でも OK）
   • インクジェット対応紙なら色合いが良好

2. 色再現性

   • ディスプレイと実際の印刷色は異なる場合があります
   • 重要な場合は試し刷りを推奨

3. インク濃度

   • プリンタ設定で「高品質」を選択すると、より鮮やかに印刷されます

寸法精度

1. 等倍印刷の重要性

   • 「100%（等倍）」で印刷してください
   • 自動スケーリングは寸法ズレの原因になります

2. プリンタマージン

   • ほとんどのプリンタは上下左右 3～5mm の無印刷エリアがあります
   • トンボはこのマージンを考慮して配置されています

3. 裁断のコツ

   • カッターで一度に切るのではなく、複数回に分けて切ると正確です
   • メタルスケールを使用して直線性を確保

---

開発・カスタマイズ

ローカルで実行

# リポジトリをクローン
git clone https://github.com/shotafujie/BookCoverMaker.git
cd BookCoverMaker

# ローカルサーバで起動（Python の場合）
python3 -m http.server 8000

# ブラウザで http://localhost:8000 にアクセス

カスタムパターンの追加

js/patterns.js に新しいパターンを追加:

const patterns = {
  myPattern: {
    name: "マイパターン",
    draw: function(ctx, width, height, color) {
      // Canvas API でカスタム図形を描画
      ctx.fillStyle = color;
      // 描画ロジック...
    }
  }
};

使用ライブラリ

• jsPDF: PDF 生成
• Canvas API: 画像合成・プレビュー
• Vanilla JavaScript: フレームワーク不要

---

📄 ライセンス

MIT License

---

サポート

このリポジトリが役に立った/気に入っていただけたら，以下のいずれかの形でサポートしていただけると嬉しいです🙌

• GitHubでのStar⭐
• SNS等でのシェア・紹介
• Buy Me a Coffeeからのご支援

If you find this project useful, you can support it in any of the following ways 🙌

• Give the repository a ⭐️ on GitHub
• Share it on social media or with your friends
• Support me on Buy Me a Coffee

---

最終更新: 2025-12-08
バージョン: 1.0.0