ChatGPTにルビ付きHTMLファイルを作ってもらって、ルビ付きPDF教材を作ってみた

この記事は、備忘録としてまとめたものなので、わかりにくい部分もあるかもしれませんが、よかったら最後までお付き合いください。

文章も、やり取りをもとに、ChatGPTがまとめてくれたものです。

作成の流れ

今回の流れは、シンプルにするとこんな感じです。

① 教師が教材の内容を考える
↓
② ChatGPTで内容を整理・教材化
↓
③ HTML形式でルビ・レイアウトを付けてもらう
↓
④ ブラウザで確認・修正
↓
⑤ PDFとして保存
↓
⑥ 配布・使用

教材に、どんな内容を盛り込むかは自分で考えました。

そのうえで、ChatGPTに英訳を付けてもらったり、教材として見やすい形に整えてもらったりしました。

HTMLを使おうと思ったきっかけ

ChatGPTに教材を作ってもらったあと、それをWordや一太郎に貼り付けて仕上げようとすると、なかなか思ったようなレイアウトになりませんでした。

文字の大きさや余白、表の幅などを調整しているうちに、細かい修正が増えていきます。

「それなら、いっそのことChatGPTにPDFまで仕上げてもらえばいいのでは」と考えました。

実際、PDFを作ってもらうこと自体はできました。

ところが、ルビ付けがうまくいきませんでした。

そのとき、「HTML形式なら、ルビを付けられるのでは？」と思いつきました。

HTMLには、漢字の上に読み方を表示するための仕組みがあります。

教材内容をChatGPTにHTML形式で作ってもらい、ブラウザで表示してみました。

すると、ルビを付けた状態で表示することができました。

HTMLを経由してPDFにする

教材の内容
↓
ChatGPT
↓
HTML
↓
ブラウザで確認
↓
PDF

HTMLの段階で、ルビだけでなく、文字の大きさや余白、枠線、ページの区切りなども指定できます。

例えば、

• A4・2ページで印刷できるようにする
• 項目ごとに枠を付ける
• ページの途中で項目が分かれないようにする
• 漢字にルビを付ける

といった条件を、ChatGPTに伝えておきます。

そのHTMLをブラウザで確認し、必要なところがあれば修正してもらいます。

最終的には、ブラウザの「印刷」からPDFとして保存します。

実際にやってみると

今回の方法を試してみて感じたのは、HTMLを一度はさむことで、ChatGPTに作ってもらったものを自分で調整しやすくなるということでした。

Wordに貼り付けてからレイアウトを直すのではなく、

「ChatGPTにHTMLを修正してもらう → ブラウザで確認する」

というやり方ができます。

例えば、

• 「ここはもう少し間を空けてください。」
• 「この部分は太字にしてください。」
• 「2ページ目から始まるようにしてください。」

といった修正を、そのままChatGPTに伝えられます。

そして、最終的に必要なときだけPDFにします。

おわりに

今回の方法は、何か特別な教材作成ソフトを使ったわけではありません。

自分で教材の内容を考え、ChatGPTに整理してもらい、HTMLという形式にしてもらう。

そして、ブラウザで確認してからPDFにする。

たまたま「PDFではルビがうまくいかなかった」というところからHTMLを試してみたのですが、教材を作るときの中間形式としてHTMLを使うのは、意外と相性がいいのかもしれないと思いました。

今後、別の教材を作るときにも、同じ方法を試してみようと思います。