技術書に書いた技術で技術書の表紙を描いた #技術書典

投稿日:
技術書典
ChatGPT
OpenAI API
Jupyter
AI

技術書に書いた技術で技術書の表紙を描いた #技術書典

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アニメ的レイヤー構造**を読み取れるレイアウトに。

生成画像の例1

これだと眼光が鋭すぎるので、プロンプト内の「虹彩インターフェース」の設定を省いて描き直しです。

生成画像の例2 (前採用画像)

何回かリテイクして、これがかなり良かったのですが、もう少し試してみることにしました。

生成画像の例3

これとかもよさげです。

最終的に、以下のイラストを採用しました。

生成画像の例4 (採用画像)

ちなみに、細身すぎるのもどうかなと思って、

  • ややぽっちゃりめ

という注文を追加したところ、ややどころじゃなくてぽっちゃりしてしまったので不採用でした。

生成画像の例5 (ぽっちゃりすぎ)

まとめ

このように、カスタム生成AIで実用的な使い方ができました。

ChatGPTでも同様のアプローチが可能ではありますが、カスタム生成AIならではのメリットもあるので、ぜひ試してみてください。

著者紹介

岩淵夕希物智 butchi_y

言語を作る博士(工学)

ART, Research, Techの人

スポンサーリンク
スポンサーリンク