395ページの資格テキストPDFをWebにしてみた

PDFの資格学習資料をWEBで見れるようにしたくつくってみました。

395ページの情報量多すぎてツラい。

内容を理解するだけでもなかなか大変なのに、前に読んだところを確認したくなるたびに、ページを行ったり来たり、PCでも読むのはつらいし、スマホはなおさら。読みやすくして、知りたいことを検索、テストだけできるようにしたなと思ったのが理由でした。

自分のポートフォリオサイトをAIと作ったのが初めての制作で、今回も、やりたいことをバイブしてつくりました。すべてをHTML化、章や節を選べるように、検索や理解度チェックにテストだけのページ、学習理解の分析を追加しました。

Claude Codeでトライ

最初の制作はClaude CodeのモデルOpus4.8を使いました。Fableでやれば、おそらく短期で精度の高い出力が期待できそうだが、単価高いし、自分のプロンプトの精度のことを考えて選びませんでした。

図解とレイアウト

図解とイラストは難易度高し。図がきれいに表示されていても、OCRで読み取り、最終的には本文をPDFの文字データから、図を元の画像から取り出すことにしました。全部を同じ方法で変換すれば済むというものでもなかったです。

図以外にもよくある「POINT」みたいなワンポイント枠に入るはずの文章が外に出ていたり、反対に前後の文章まで枠に入っていたり。小見出しが、本来とは違うものになっているところもありとハードルの高い作業でした。

検証

395ページ分をすべて自分の目で確認するのはしんどい。おかしいところを見つけて、そのうえで、同じタイプの間違いがほかにもないか、全体を調べていくことを繰り返しました。本文や図に加えて、章ごとの問題と答えがきちんと対応しているかも確認してもらっていました。あとは勉強しながら修正していくことにしました。

Codexにチェンジ

Claude Codeで進めて修正がうまくいかなくなったのでCodexをに切り替えてみました。あくまで肌感覚ですが、見た目の調整も、間違いを見つける作業も、Codexのほうが精度は良かったように思います。Claudeの使い方が良くないこともあったと反省も込めて。

それでも、自分が使う分にはそれなりの仕様になったかな。

問題集のページを追加

今回のツールでは、本文の検索や章・節の移動に加えて、各節の理解度チェックができます。答えると正解と解説が出て、解答結果から復習したい節を確認し、本文に戻れるようにしました。良き。

使い始めてみて

かかった時間は、作業時間合算でだいたい2日間くらい。PCでしか使えないと、もともとの不便が残ってしまので、レスポンシブで見れるようにしました。

ほかの資料にも使える

振り返りをすると、これまで混在している資料や、マニュアルや紙媒体の資料、紙のまま残っているものを集めて、案件ごとの「読めるWebページ」にできるたり、社内で共有できる資料なら、閲覧する人を制限したうえでURLを渡せば、それぞれが必要なときに読んだり、勉強したりできますね。担当者しか場所を知らない属人化の解消にもなります。AIに任せられる部分も、気をつける部分も、作る前より具体的に分かるようになりました。プログラミング経験がなくても、自分が使うための道具をここまで作れる。そのことを知れたのは大きかったです。今後の仕事でも使える経験になったと思うし、まずはこのツールで勉強しながら、使い勝手も確かめていきたいです。