見出し画像

ChatGPTで7割生成したが、過去最大に大変だった【IT謎解きゲームブック】の作り方

こんにちは。木村です。

技術書典16で新作として「【IT謎解きゲームブック】符号に囚われた現実」を書きました。

IT知識が必要な謎解き問題を、選択肢を選んで情報を集め、謎を解きながら、ストーリーを進めていくというゲームブックになっています。

この記事の執筆時点ではまだ紙の本+電子版セットも在庫がありますので、興味のある方はぜひご購入ください。紙が売り切れていても電子版はずっと購入可能です。

ChatGPT生成と言うと内容がつまらなそうで、この記事を公開するのは悩みました。しかし、正しく言うと、ChatGPTと一緒にストーリー・謎解きともに練りに練った後で、最終的な文章生成の7割くらいをChatGPTが行ったというだけで、考え尽くしたちゃんとおもしろい謎解きゲームブックができたので、ぜひ手にとって欲しいです。安いし(500円)。

ChatGPT「7割」生成と言いつつ、膨大な量のアイデア出し・推敲をChatGPTと共にしてきたので、作業量的には過去に書いた技術書と比べるとむしろ体感100倍大変でした。もちろん私がストーリー物も謎解きもゲームブックも全て初めての制作ということも一因だとは思います。ただ、生成AIを使うことで今までの自分では書けなかったものが書き切れた(し、書く気になれた)というのは非常に自分としては満足感がありました。完成度についても、おもしろいものができたと自負しています。

この記事では、どうやってこのゲームブックを作ったかを解説したいと思います。
(※ネタバレ防止のため、記事に出てくる内容は本作の謎解きには不採用になったアイデア・文章を取り上げています。この記事を先に読んでも本作を楽しむのに支障はありません。)

📒追記 2024/07/01📒
BOOTHでも販売開始しました。現在、紙の本を買えるのはBOOTHだけです。


作業分担

最初に生成AIとの作業分担ですが、結果としては以下のような感じになりました。

  • 【木村】監督、プロット作成、執筆、校正、謎解き問題作成、謎解き用イラスト作成、ゲームブックフローチャート作成、組版、編集、表紙デザイン

  • 【ChatGPT】ストーリー相談役、ストーリー考案、執筆、校正、謎解き問題相談役

  • 【Adobe Firefly】表紙イラスト

執筆・校正を両方がやっていますが、自分が書いて、ChatGPTに直してもらうパターンと、その逆と両方あるからですね。ストーリー・謎解き上、大事なところだけは私がだいぶ書いています。しかし、謎解きがメインであり、各エピソードの文章はさほど大事ではないので、大半は私がそのエピソードで書きたいことを渡して、ChatGPTに執筆してもらうことが多いです。ただ、生成は何度もやってもらうので、その場合の私は脚本家にダメ出ししまくる監督のような立ち位置ですかね。

今「ここはどっちの案?」とか聞かれたとしても、もはや自分とChatGPTは一体化しすぎていて答えられません。基本的に謎解きは自分で考えたつもりですが、そのアイデアの元はChatGPTが考えた案のような気もするし、そのChatGPTの案は自分が考えたアイデアが元のような気もするし…

制作の流れ

実際には迷走しまくっているのですが、振り返ると以下の流れが基本だったかなと思います。

  1. コンセプト・ボリュームを決める

  2. 謎解き問題を考える

  3. 謎解き問題を元にストーリーを考える

  4. エピソードのフローチャートを決める

  5. エピソードを一つずつ生成する

  6. エピソードをWordに貼り付ける

  7. 謎解き問題用イラストを作り、Wordに貼る

  8. 通しで読んで文章のおかしいところを修正する

  9. 通して謎解きをして問題あるところを修正する(ついでにヒントを作成)

  10. 完成

もちろん、表紙イラストを決めたことでまた戻ったり、タイトルを変えたことでまた戻ったりと、迷走を除いても一本道で行けるわけではありません。

1. コンセプト・ボリュームを決める

基本的に新しいことをしたい性質なので、過去の技術書典で、初めて触る技術でチュートリアル本を何冊か書き、CSSをテーマにしたカードゲームを作り、次に技術書典で何を書くかなあと思ったときに作りたくなったのが、IT謎解きゲームブックでした。

元々SCRAPのリアル脱出ゲームとか好きで、SCRAPの「ふたご島からの脱出」のような本版謎解きもやっていまして、前から一度謎解きは自分でも作ってみたかったのです。最初のイメージはふたご島のような本の謎解き部分をIT技術を使った問題にした本でした。

IT謎解きというと私の経験だと、よく見るだけ参加して楽しんでいたProject:;COLDのみぞーんさんの「ナゾトキCTF2」で知ったCTFというゲームみたいので、そこにSCRAP的な要素も加えたいなーと漠然とイメージしました。

ストーリーも書いたことがないので、短いストーリーのゲームブックを作ろうと思っていたところに、同僚から紹介されたのが、梧桐重吾さん。とりあえず無料の「パラグラフジャンプを超えて」や「押すな」をやったら、短いしストーリーがあってないようなものなのにめちゃくちゃおもしろい。

ということで、コンセプトとして自分の心の中で設定したのが、以下です。こんなに明確に文字にしていたわけではなく実際はふわっと思っていただけですが。

  • ボリューム・ストーリーの配分・雰囲気は梧桐重吾さんのパラグラフジャンプのようなものを目指す。

  • 謎解きの組み込み方・構成はSCRAPの謎解き本を参考にする。

  • 謎解き問題は以下の3つの要素を満たす。

    • IT知識を必要とする

    • ゲームブックの要素をうまく活かす

    • Project;:COLD・CTF・リアル脱出ゲームを融合したようなものとする

  • Project;:COLDで融解班の皆様がどんどん解いているのを見ているのも楽しいので、謎は難しくともヒントを充実させて誰でも解けるようにしたい。

実際このコンセプトは自分の中では及第点には達成できたと思っているのですが、その評価も読者の皆様にしていただけたらと思います。

2. 謎解き問題を考える

実際は先にストーリーを考えたりもしていましたが、結局謎解きゲームブックは謎解きがメインなので先に問題を決めてしまうのがいいというのが書き終わってからの結論です。今回の謎解き問題がゲームブックの特性を活かすためにエピソードのフローチャートに直結する問題にしたという理由も大きいかもしれませんが。

謎解き問題の考案は自分の知識からひねり出したり、CTFの問題を漁ったり、過去に解いてきた謎解きゲームを思い出したりしながら、がんばって考えます。

ChatGPTからアイデアをもらってもいいでしょう。以下のように聞くだけでも、いろいろとアイデアをくれます。

プログラミング技術を使った謎解きゲームを作りたいです。提供形態は紙媒体です。
謎解き問題のアイデアを下さい。

自分のちょっとしたアイデアを元にChatGPTに考えてもらってもいいです。

何かしらの絵や図を与えて、そこからテキストを得るような問題がいいかも。いい手法あります?

お互いのアイデアを対話しながら深掘ります。

プログラミング謎解きゲームブックを作ろうとしていますが、行き詰まっています。

JavaScriptのプログラムでエピソードの遷移が制御されており、読者はそのプログラムを解明するとエンディングに辿り着けるという仕掛けを考えていました。

例えば次のエピソード番号を返す以下のような関数を当てるイメージです。

/**
  * 次のエピソード番号を返す
  * @param ep 現在のエピソード番号
  * @param choice 選択肢の番号
  **/
function nextEp(ep, choice) {
  return ep * choice * 32 % 73;
}


/**
  * 次のエピソード番号を返す
  * @param ep 現在のエピソード番号
  * @param choice 選択肢の番号
  **/
function nextEp(ep, choice) {
  if (choice === 1) {  return 1; }
  if (ep === 1) {  return choice; }
  if (ep === 2) { return 4; }
  if (ep === 3) { return 4; }
  if (ep === 5) { return 5; }
}

しかし、問題があります。
前者の関数はプログラムというにはあまりにただの数式である。
後者の関数はif文だらけでプログラムと言うにはお粗末だし、何でもありすぎてこれを当てるのは困難です。

改善するアイデアや別のプログラミング謎解きゲームブックの仕掛けを考えてください。

ちなみに以下のような一気に問題を生成するプロンプトを試したりもしましたが、結局のところ使える問題は生成されませんでした。

以下のガイドライン・テンプレートに従い、紙面上で解答可能で必ず一意の解答が存在するプログラミング謎解き問題を生成してください。問題は具体的なシナリオ、入力データ、期待される出力、手がかり、ヒントを含む必要があります。また、必要に応じて具体的なコード断片を含めてください。

# ガイドライン

- 紙面上で解答可能で必ず一意の解答が存在するプログラミング謎解き問題
- 正答するにはストーリー内に散りばめられたいくつかの独立した手がかりが必須
- 手がかりだけでは難しい人のためにストーリー外のヒントも提供する

# プログラミング謎解き問題テンプレート

## 設定

- 使用言語: JavaScript
- 難易度: 熟練プログラマーでも解答困難
- 必要な手がかりの数: 4
- 解けないときのヒントの数: 3
- 問題の種類: [具体的な問題の種類を記述、例:コード解析、アルゴリズム設計、ロジックパズル]

## ストーリー概要
[ストーリーの概要や設定をここに記述]

## 問題
[プログラミング謎解き問題の具体的なシナリオをここに記述]
[コードが必要な問題の場合は具体的なコードをここに記述]

## 入力データ
[問題で使用される具体的な入力データについての説明をここに記述]

## 期待される出力
[問題の正解として期待される具体的な出力についての説明をここに記述]

## 手がかり
[解答に必須のそれぞれ独立した手がかりの具体的な説明をここに記述]

## ヒント
[手がかりだけでは解答が難しい人のためのより直接的なヒントをここに記述]

## 解答手順
[問題の回答に至るまでの手順をここに記述]

## 解答
[解答をここに記述]
[コードの修正などの問題の場合は修正した最終的なコードもここに記載]

ただ、この生成結果からアイデアを思いついたりもするので、何も無駄にはなりません。

3. 謎解き問題を元にストーリーを考える

謎解き問題ができたら、以下のようなプロンプトでChatGPTにストーリーを考えてもらいます。

以下の流れとアイデアを元に謎解きゲームブックのストーリーを考えてください。

## 謎解きの流れ

1. <実際の謎解き問題の概要を書く>
2. <実際の謎解き問題の概要を書く>
3. <実際の謎解き問題の概要を書く>
4. <実際の謎解き問題の概要を書く>
5. <実際の謎解き問題の概要を書く>
6. <実際の謎解き問題の概要を書く>
7. XXX暗号を解読すると数字が取得でき、エンディングへ移動できる

## ストーリーのアイデア

<ストーリーのネタがあればここに書く>

## 制約条件

あまり深い設定は要りません。
設定もよくわからず急に始まる感じでよいです。
オチは読者が直接的にすぐ理解できる表現にしないでください。
結末は驚きと笑いがあるものとしてください。

例えば、以下のような出力(これはボツ案)が得られます。(ただし、謎解きのネタバレのないように一部マスクしています)

**冒頭**:
目覚めると、あなたは見知らぬ森の中にいた。手元には古びたノートが一冊。開くと、数字と謎の図が描かれている。このノートの謎を解くと、何かが変わるかもしれないと直感的に感じた。

**ストーリーの流れ**:

1. **ループの発見**: あなたは森を歩いているうちに、同じ場所を何度も通過していることに気づく。20エピソードが繰り返し展開され、ループしている現実に閉じ込められている。
2. **???の謎**: ノートの図は、???のようだが完全ではない。森の中で見つけたヒントを元に図を完成させると、特定のエピソードへ飛べる道が開かれる。
3. **特定のエピソード**: 完成した???に従って進むと、森の奥深くに隠された秘密の場所に辿り着く。
4. **???の発見**: この場所で、???を見つける。これが次なる謎解きへの鍵となる。
5. **???の入手**: 森をさまよいながら???いくと、???が形成され、???すると暗号文が現れる。
6. **???暗号の発見と解読**: 森をさまよう中で、暗号解読に必要な???を手に入れる。???を使って暗号文を解読し、重要な数字を手に入れる。
7. **エンディングへの移動**: 解読した数字によって、森からの脱出方法が明らかになる。謎を解くことで、あなたがこの森にいる理由と、これまでのループの意味が解明される。驚くべき真実が明かされ、あなたの冒険は意外な結末を迎える。

**結末の驚き**:
森から脱出すると、あなたが実はデジタル世界の一部であることが判明。この一連の謎解きは、自己認識のプログラムだったことが明らかになります。自分がプログラムであることを知った瞬間、あなたは新たな自由を手に入れる。

このストーリーは、プレイヤーに予期せぬ驚きと深い洞察をもたらすことで、ゲームの終わりに感動的な印象を残します。

実際は、この「ストーリーのアイデア」を考えるのに何度もネタを出したり、ChatGPTに相談したりします。アイデアもいろいろなアイデアで出力してもらいます。そうすると別のアイデアが生まれたりもします。制約条件も出力が悪ければ、いろいろ変えて出力し直してもらいます。

とにかく満足か妥協できるまでChatGPTと一緒に考え続けます。

4. エピソードのフローチャートを決める

フローチャートも含めてChatGPTに生成させようとしたこともありました。無理でした…

結局以下のゲームブック作成ツール?を使い、フローチャートは自力で作成しました。

以下のようにエピソードのフローチャートを作成します。今回は謎解き問題がエピソードのフローチャートと密接に関わっていたので、先にフローチャートが決まりました。ただ、2番目の謎解きはフローは何でも良かったのですが、このツールで適当に決めました。

エピソードの遷移先は遠い方がいいのと、どのエピソード番号が残っているかわからなくなってしまうので、以下のような表を作って、Twineに書いたら「済」と書いていました。

しかし、最初に50エピソードと決めていても、50は多すぎるよとなって、エピソード数を減らすと、遷移先をばらつかせるためにエピソード番号を振り直す必要が出ました。ゲームブック作成者の皆さんどうしてるのでしょう…

5. エピソードを一つずつ生成する

以下のようなプロンプトを使い、1エピソードずつ生成していきます。フォーマットはTwineに合わせてあり、これをそのままTwineに貼るとフローチャートが繋がります。

Ep.6を書いてください。

条件
- エピソード本文は約200字
- アクションは12字以内
- 一人称は「私」
- 遷移先は29
- 答えは森の中のある地点を表していたことがわかった。
- その森へ向かう。
- 次のエピソードではその場所に到着し、次の謎解きが始まる予定ですが、私は何が起こるかはわかっていません。
- 下書きをベースに今まで生成した文章に合わせて書いてください

下書き
```
<下書きがあればここに下書きを書く>
```

フォーマットは以下
```
Ep.<エピソード番号>
<エピソード本文を記述>

[[<アクション>-><エピソード番号>]]
```

下書きを自分で書く場合は、下書き欄に自分で書いて生成します。ない場合は条件に書いてるように適当に内容を箇条書きで書いて文章を生成してもらいます。どのエピソードにどの手がかりを入れるとかは私が決めて、この条件や下書きで指示していきます。

ここではChatGPTが生成したままの文章をTwineに貼り付けていきました。プロンプトを調整して再生成は何度もするが、生成後の修正はせず、最後までエピソードを埋めることを優先しました。

生成されたエピソードを一つ一つTwineに貼っていくと以下のようになります。(ネタバレのないよう一部モザイクをかけています。)

ただ、ここでももうちょっとエピソードを入れたいとか削りたいとか思います。それで一番後ろにエピソードを入れるとまた偏っちゃうので、こっちをずらし、あっちをずらしとやる必要が出てきます。つまり、大変です。

6. エピソードをWordに貼り付ける

文庫版縦書きにしたかったので、どうしようかなググり、以下のテンプレを使わせてもらいました。これをベースにゲームブックに合わせて改変しました。

そして、Twineからペタペタと1エピソードごとにコピペしていきます。

7. 謎解き問題用イラストを作り、Wordに貼る

謎解き用の図はCanvaで作りました。素材の個数も不明でサイズもバラバラなので、Canvaのホワイトボードで「選択した素材をダウンロード」を使うと便利でした。図を分割するのがCanvaでできず、そこだけPhotoshopを使っています。

Wordスキル不足によるものだと思いますが、図を入れでページ調整するのが大変でした。結局この後も文章増えたり減ったりするので、図の配置調整は最後の最後に行うのが良さそうです。

8. 通しで読んで文章のおかしいところを修正する

この時点ではChatGPTが生成したままなので、通しで読んでみます。そうすると単純に文章的におかしいところだけでなく、手がかりの与え方などにも問題があったりするので、そういったところを調整していきます。

自分で書き直したり、ChatGPTで生成し直したり、合わせ技だったりします。ここでもエピソードの増減が発生したりもし、エピソード番号の入れ替えが発生し得ます。実際起きました。

9. 通して謎解きをして問題あるところを修正する

謎解き問題も何かしらミスがあるものですので、最初から解き直します。本作でもそれなりにミスが見つかりました。もう直すのはコストがかかりすぎるミスもありましたが、気持ち悪いだけで謎は解くのには問題がないので、ヒントサイトで謝るに留めた問題もありました。

10. 完成

実際はこの工程を行ったり来たりしますが、これでゲームブック本文は完成です。
レイアウト調整や入稿なども苦労したのですが、そこは本筋ではないので省略します。

番外1. 表紙をAdobe Fireflyで生成する

表紙はAdobe Fireflyを使って生成しました。実際の表紙を生成した画面はスクショを残していなかったので、以下のスクショは同じプロンプトで生成し直した画面です。Fireflyはこういう絵画調の絵は得意だと思います。

しかも、以下のように右側を拡張してさらにつながる絵を生成することもできます。これはただ「鬱蒼とした森」というプロンプトで拡張しました。これで裏表紙に絵が続くいい感じの表紙を作れました。

この後のタイトル入れたりする加工はCanvaで行いました。

番外2. タイトルを決める

タイトルはChatGPTに相談しまくりましたが、納得する案を出してもらえず、結局自分で決めました。タイトルはChatGPTの案をほぼ参考にもしていないと思います。このタイトルもいいのかよくわからないのですが、自分としてはまあ内容も謎解きも示唆しており、悪くないタイトルが付けられたのではないかなと思います。

仮でつけていた初期タイトルからタイトルが変わったことで、またちょっと文章を修正したりと微調整も発生しましたね。

おわりに

謎解きが最重要で、ストーリーをあまり重要視しないコンセプトだからこそ成り立ったとは思うのですが、ChatGPTの力を借りてなんとかゲームブックを書き上げることができました。

読んでわかると思いますが、本当に大変でした。最初にも書きましたが、実際にはこんなに一本道に進みませんでしたからね。謎解きも決まらない、ストーリーも決まらない、タイトルも決まらない。決まらないと書き始めることもできない。延々と企画会議をしている感じでした。

この文庫本22ページというボリュームでありながら、この大変さだったので、長編ゲームブック・謎解きゲーム・ゲームシナリオを作っている人は一体どうやっているのかと尊敬を通り越して、驚愕していました。私の能力不足をChatGPTで補っているが故の大変さだとは思うのですがね…

最終的には、コンセプトの達成度・内容・おもしろさ・謎解きの歯ごたえともに自分としては満足行くものはできたので、満足しています。ただ、正直、客観的評価が全然わかりませんでしたが、完成後、真正面から解いてくれた友人からはかなりの高評価をもらいましたので、ちゃんとおもしろいものになったのかとほっとした気分にはなっています。

友人のお世辞でなければ(そういうタイプじゃないのでたぶん大丈夫)、おもしろい本になったと思うので、500円で買ってくれた方にも十分楽しんでいただけるのではないかなと思っています。22ページですが、2時間くらい楽しんでいただけると思います。
遊びましたらぜひ感想をどこかに残してもらえたらうれしいです。


この記事が気に入ったらサポートをしてみませんか?