BOOK STUDIO

表紙に合わせる、本のモックアップ

画像は端末内だけで処理

ドラッグで回転 · 表紙画像はここにドロップしてもOK

表紙の色と比率はそのまま。本の形だけを合わせます。

画像生成AIは使っていません · v0.6 · by つぶあん ↗

BOOK STUDIOの使い方

表紙画像を入れるだけで、比率そのままの立体の本のモックアップを作れます。

作り方(左のパネルを上から順に)

  1. 表紙を入れる:画像を選ぶかドロップ。コピーした画像の貼り付け(⌘V / Ctrl+V)もOK
  2. 本のかたちを整える:ソフト/ハードカバー、厚み、裏表紙の色・画像を調整
  3. 光と影を調整する:照明の向きと、影の長さ・ぼかし・濃さ
  4. 背景を選ぶ:いちばん右の「+」の色見本で、好きな色も選べます

できたら右上の「PNGを書き出す」から、コピーか保存で完成です。プレビューで見えている構図のまま書き出します。

背表紙をつくる(右のパネル)

  • 文字でつくる:タイトル・著者名・下の文字と、書体や飾りを選べます
  • 画像を使う:「画像の比率に厚みを合わせる」で厚みがぴったりに
  • 使わないときは見出しをクリックして閉じられます

操作のコツ

  • 間違えたら ⌘Z(Windows は Ctrl+Z)で元に戻せます。上のバーの矢印ボタンでもOK
  • ドラッグで回転(矢印キーでも)
  • スクロール・ピンチ・「− / +」で拡大・縮小
  • 下のボタンで角度を切り替え、↺ で元に戻す

よくある質問

画像はどこかに送られますか?

送られません。画像はお使いのパソコンやスマホの中だけで処理します。背表紙の書体のデータだけ、Google Fonts から読み込んでいます。

画像生成AIは使っていますか?

使っていません。入れた表紙画像を、そのまま立体の本に貼り付けて描いています。

設定は保存されますか?

厚み・光と影・背景・背表紙の書体などは、このブラウザーに記憶されます。表紙画像や背表紙の文字は保存されません。最初の状態に戻したいときは、左のパネルのいちばん下の「すべての設定をリセット」を押してください。

書き出した画像は自由に使えますか?

はい。ご自身の本の告知や、note・SNSへの投稿などにご自由にお使いください。なお、表紙画像そのものの権利は、表紙を作った方にあります。

うまく表示されないときは?

Chrome・Edge・Safari の最新版でお試しください。立体の表示には、ブラウザーの3D表示機能(WebGL)を使っています。

モックアップができました

書き出した本のモックアップ