技術書に書いた技術で技術書の表紙を描いた #技術書典
技術書に書いた技術で技術書の表紙を描いた #技術書典
2025年5月31日より、技術書の同人誌即売会「技術書典」にて、新刊『従量課金で賢く作る!ChatGPT代替AIチャットボット』 (岩淵夕希物智 著、マトラ研究所 発行) が頒布開始されました。
この書籍に詰め込んだ技術で、書籍の表紙も描くことができたので、その際に作ったノートブックを紹介します。
表紙のプロンプトを作ってもらう (チャットボット)
まずは、表紙を描く際の注文です。
こちらのノートブック の通り、書籍で紹介しているカスタム生成AIでプロンプトを作ってもらいました。
ちなみに、このようにVSCodeで作ったノートブックをGitHubやGoogle Colabにアップロードして公開設定するだけで、誰でも閲覧可能にできます。
VSCode上では以下のような画面で進行します。
特に細かいイメージは持たずに臨んだのですが、以下の要素を含めてもらうことにしました。
- 女性的な顔立ちの中性的なキャラクター,
- 白銀の髪
- 聡明で落ち着いているが明るい
- アニメスタイル
- 未来的な背景
OpenAIのAPIを賢く使ってChatGPTと違った体験ができる技術を開発し、それを紹介する技術書を書いています。
いま、その書籍の表紙イラストを描いてもらおうと考えています。以下の要素を含むイラストで、ディテールの案をいくつか挙げてもらって、そこから選びたいと思います。
===
女性的な顔立ちの中性的なキャラクター, 白銀の髪, 聡明で落ち着いているが明るい, アニメスタイル, 未来的な背景
この回答を使ったのかよく覚えていませんが、AIの回答を参考にして、次に以下のような注文をしました。
人間が描くイラストでは出せないような、AIが描くイラストならではのディテールを盛り込んでほしいです。
以下のディテール案をいくつか挙げますので、ご参考にしてください。
1. **髪の質感**: 白銀の髪は、光の反射によって微妙に色合いが変化するように描写。特に、髪の先端が淡い青や紫のグラデーションになっている、未来的な印象を与えるようにします。
2. **目の表現**: 大きな瞳は、虹彩に複雑なパターンがあり、光の当たり方で色が変わるように描写。例えば、通常は淡い青だが、特定の角度から見ると緑や紫の輝きが見えるようにします。
3. **服装のデザイン**: 近未来的な服装は、光沢のある素材で、身体にフィットしたデザイン。服の一部には、LEDのような光るラインが走っていて、動くたびに微かに光る演出を加えます。
4. **表情のニュアンス**: 落ち着いた微笑みを浮かべつつ、目元には知的な輝きがあり、何かを考えているような表情。これにより、聡明さと明るさを両立させます。
5. **テクスチャの工夫**: キャラクターの肌は、微細な光沢感を持たせ、近未来的なテクスチャを表現。特に頬や額には、微かな光の反射があり、立体感を強調します。
すると、
- 光導波ヘア
- 虹彩インターフェース
- プログラマブル・スキンシェーダ
ようにかなり未来的なディテールを盛った回答が返ってきました。
# AIならではのハイパーディテール案
> ベースカラー:イエロー/オレンジ、近未来テイストを踏襲。
> **人間の手描きでは極めて困難 or 事実上不可能** な“AIサイン”を各部位に実装するアイデア集です。必要なものをピックアップ/組み合わせてご活用ください。
---
## 1. 光導波ヘア(Photonic Filament Hair)
- 髪の1本1本が**光ファイバー状**。
- パルス状の光が毛流れに沿って走り、**ビット列(0/1)** が断続的に流れる。
- エッジ色:根元=純銀 → 中間=レモンイエロー → 先端=淡いシアン/ライラック。
- **微速度エフェクト**:静止画でもモーションブラー風の残像を僅かに入れ、動きを想起させる。
## 2. 虹彩インターフェース(Kaleidoscope Iris HUD)
- 虹彩を**多層パララックス**で描画。
1. 最外層:蜂の巣パターンにオレンジ系LEDリング。
2. 中層:フラクタル回路が回転。
3. 最内層:シャッター状の**虹彩開閉UI**。
- **視線角で色相シフト**:青→緑→紫がグリッチ的に遷移。
- ハイライトに**QRコード級の極小ドット**を仕込み、拡大すると`/v1/chat/completions`が読めるギミック。
## 3. プログラマブル・スキンシェーダ
- 肌表面に**ナノパターン**(三角タイル+ノイズ)。
- 入射光が変わると“ゴールド→アンバー”の**メタマテリアル反射**。
- ごく薄い**回折光**ラインが頬骨沿いに現れ、AIの処理中を示唆。
## 4. コードグリフ・ウェア(Emissive Glyph Fabric)
- スーツ表面が**E-Ink+OLEDのハイブリッド布**という設定。
- 発光ラインが**呼吸に同期**して脈動。
- ランダムに**ソースコードの1行**が浮かんでは消える(例:`for (token in stream) { … }`)。
- 生地の織り目そのものが**モノスペースフォント**になっており、拡大すると読める。
## 5. ホログラフィック・オーラ(Holo-Glitch Halo)
- 背面に**円環状の光輪**だが、
- 外縁は断続的に**ピクセル欠け**。
- 内側は**距離依存で屈折率が変わる**シェーダ。
- リング周囲にランダムな**モーフィング数式**が浮遊(例:$$\nabla \cdot \mathbf{E}=\\rho/\varepsilon_0$$ が崩壊→再生成)。
## 6. 量子パーティクル・スウォーム
- キャラ周囲を漂う粒子が**Lissajous曲線**を軌跡に持つ。
- フレーム毎に**位置を確率分布で再サンプリング**した痕跡を残し、“量子的揺らぎ”を可視化。
- カラーマップ:イエロー→オレンジ→ホワイトのグラデに**ノイズ的輝度ゆらぎ**。
## 7. ハイブリッド背景「データ・ジオシティ」
- **不可視レイヤー**を2枚用意:
1. 透過50%の**六角グリッド+JSONストリーム**が恒常スクロール。
2. 奥行きマップに**アンビエント・オレンジフォグ**を焼き込み、AI独特の“やや計算臭いフォーカス”を演出。
- 遠景ビルのエッジに**サブピクセルずれ**を意図的に残し、機械生成感を強調。
## 8. インフォメーション・タトゥー
- 首筋~鎖骨に**不可視インク**のバーコードタトゥー。
- 通常表示では見えず、**UVライト想定の副照明**を当てたときだけ蛍光イエローで出現。
- バーコードは**ISBN/書籍タイトル**をEncode。
## 9. タイムラプス・ゴーストイメージ
- キャラのポーズを**数ミリ秒単位で多重露光**した残像を後方に配置。
- 残像は**半透明+RGBズレ**で「処理中フレーム」を連想させる。
- 静止画でも**GIFアニメ的レイヤー構造**を読み取れるレイアウトに。
---
### 実装上の注意メモ
1. **印刷/モニタ差**
超高輝度部分は印刷で飛ぶため、スポットUVやホログラム箔で物理的に補完すると質感が残ります。
2. **情報過多対策**
タイトル可読性を確保するため、主要テキスト周囲だけ**ディテール密度を意図的に落とすマスク**を設定。
3. **AIらしさの“過度な不気味さ”**
目のパターンや肌のノイズを入れすぎるとキャラ性を損なうため、**中心部=人間味、周縁=機械性**でコントラストを取るとバランス良。
これを元に、次のステップに進みます。
表紙の画像を作ってもらう (画像生成ボット)
こちらのノートブック の通り、カスタム画像生成AIを使って表紙の画像を作成しました。
最初に実行したプロンプトは以下です。
OpenAIのAPIを賢く使ってChatGPTと違った体験ができる技術を開発し、それを紹介する技術書を書いています。
いま、その書籍の表紙イラストを描いてもらおうと考えています。以下の表紙イラスト案に従って、イラストを描いてください。
===
# 表紙イラスト案
・女性的な顔立ちの中性的キャラクター
・白銀の髪、聡明で落ち着いているが明るい表情
・アニメスタイル
・未来的な背景
## 1. 光導波ヘア(Photonic Filament Hair)
- 髪の1本1本が**光ファイバー状**。
- パルス状の光が毛流れに沿って走り、**ビット列(0/1)** が断続的に流れる。
- エッジ色:根元=純銀 → 中間=レモンイエロー → 先端=淡いシアン/ライラック。
- **微速度エフェクト**:静止画でもモーションブラー風の残像を僅かに入れ、動きを想起させる。
## 2. 虹彩インターフェース(Kaleidoscope Iris HUD)
- 虹彩を**多層パララックス**で描画。
1. 最外層:蜂の巣パターンにオレンジ系LEDリング。
2. 中層:フラクタル回路が回転。
3. 最内層:シャッター状の**虹彩開閉UI**。
- **視線角で色相シフト**:青→緑→紫がグリッチ的に遷移。
## 3. プログラマブル・スキンシェーダ
- 肌表面に**ナノパターン**(三角タイル+ノイズ)。
- 入射光が変わると“ゴールド→アンバー”の**メタマテリアル反射**。
- ごく薄い**回折光**ラインが頬骨沿いに現れ、AIの処理中を示唆。
## 4. コードグリフ・ウェア(Emissive Glyph Fabric)
- スーツ表面が**E-Ink+OLEDのハイブリッド布**という設定。
- 発光ラインが**呼吸に同期**して脈動。
## 5. ホログラフィック・オーラ(Holo-Glitch Halo)
- 背面に**円環状の光輪**だが、
- 外縁は断続的に**ピクセル欠け**。
- 内側は**距離依存で屈折率が変わる**シェーダ。
## 6. 量子パーティクル・スウォーム
- キャラ周囲を漂う粒子が**Lissajous曲線**を軌跡に持つ。
- フレーム毎に**位置を確率分布で再サンプリング**した痕跡を残し、“量子的揺らぎ”を可視化。
- カラーマップ:イエロー→オレンジ→ホワイトのグラデに**ノイズ的輝度ゆらぎ**。
## 7. ハイブリッド背景「データ・ジオシティ」
- 奥行きマップに**アンビエント・オレンジフォグ**を焼き込み、AI独特の“やや計算臭いフォーカス”を演出。
- 遠景ビルのエッジに**サブピクセルずれ**を意図的に残し、機械生成感を強調。
## 8. タイムラプス・ゴーストイメージ
- キャラのポーズを**数ミリ秒単位で多重露光**した残像を後方に配置。
- 残像は**半透明+RGBズレ**で「処理中フレーム」を連想させる。
- 静止画でも**GIFアニメ的レイヤー構造**を読み取れるレイアウトに。
これだと眼光が鋭すぎるので、プロンプト内の「虹彩インターフェース」の設定を省いて描き直しです。
何回かリテイクして、これがかなり良かったのですが、もう少し試してみることにしました。
これとかもよさげです。
最終的に、以下のイラストを採用しました。
ちなみに、細身すぎるのもどうかなと思って、
- ややぽっちゃりめ
という注文を追加したところ、ややどころじゃなくてぽっちゃりしてしまったので不採用でした。
まとめ
このように、カスタム生成AIで実用的な使い方ができました。
ChatGPTでも同様のアプローチが可能ではありますが、カスタム生成AIならではのメリットもあるので、ぜひ試してみてください。