BOOK STUDIO

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

画像は端末内だけで処理

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

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

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

BOOK STUDIOの使い方

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

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

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

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

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

文字でつくるタイトル・著者名・下の文字と、書体や飾りを選べます
画像を使う「画像の比率に厚みを合わせる」で厚みがぴったりに

使わないときは、パネルの見出しをクリックして閉じられます

操作のコツ

⌘Z
元に戻す(Windows は Ctrl+Z)。上のバーの矢印ボタンでもOK
⌘V
コピーした表紙画像を貼り付け(Windows は Ctrl+V)
ドラッグ
本を回転(矢印キーでも)
スクロール
拡大・縮小(ピンチや「− / +」でも)
↺ ボタン
最初の角度に戻す。下のボタンで角度の切り替えも

よくある質問

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

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

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

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

設定は保存されますか?

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

使うときのルールはありますか?
  • ご自身の表紙か、作者の許可を得た表紙で使ってください
  • ほかの人の表紙を、許可なくモックアップにしないでください
  • AIで生成した表紙画像には使わないでください
  • 書き出した画像は、商用利用可です(SNSや販売ページなど)

このツールの利用によって起きたトラブルや損害について、制作者は責任を負いかねます(制作者の故意または重大な過失による場合を除きます)。

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

Chrome・Edge・Safari の最新版でお試しください。立体の表示には、ブラウザーの3D表示機能(WebGL)を使っています。それでも直らないときは、このツールを紹介しているnote記事のコメント欄で教えてください。

BOOK STUDIOの利用ルール

使い始める前に、次のことをご確認ください。

  • ご自身の表紙か、作者の許可を得た表紙で使ってください
  • ほかの人の表紙を、許可なくモックアップにしないでください
  • AIで生成した表紙画像には使わないでください
  • 書き出した画像は、商用利用可です(SNSや販売ページなど)

このツールの利用によって起きたトラブルや損害について、制作者は責任を負いかねます(制作者の故意または重大な過失による場合を除きます)。

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

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