【読むストレス激減】読みきれない長文をCodex×HTMLでグラレコ化！開かない資料が"読みたく"なるドキュメント自動生成術（スキル配布あり）

こんにちは、れん学長です（2026年5月24日時点）。

AIとの作業ログや難しい技術資料は、たいてい記号で見出しを付けるMarkdownという形式で出てきます。

これをそのまま保存していると、あとからほとんど開かなくなることってありませんか。

保存はしてある。でも、読み返す気力が出ない。

私自身、CodexやClaude Codeで作業していると、検証ログ、設計メモ、記事の下書き、画像生成の結果なんかがどんどん積み上がっていきます。

あとから見れば役に立つはずなのに、テキストだけで長く残っていると、どこから読めばいいのか分からなくなるんですよね。

そんな中で、Xで「HTMLは新しいMarkdownだ」という話が大きく話題になっていました。

AIに長い文章を出してもらったとき、Markdownのまま残すんじゃなくて、HTMLのページとして整理すると、人間があとから判断しやすくなる、という話です。

これ、実際に試してみると、かなり便利でした。

ただ、しばらく使っているうちに、HTML化するだけではまだ文字中心だな、とも感じたんです。

難しいAI資料や長い作業ログを、あとから理解し直すには、もう一段、視覚的な手がかりがほしい。

そこで、Codexの中でGPTの画像生成を使って、章ごとにグラレコ風の図解画像を追加してみました。

グラレコというのは、話の流れや要点をイラストと文字でまとめる、グラフィックレコーディングのことですね。

すると、ただ読みやすいHTMLじゃなくて、未来の自分が戻ってこられる「理解し直せるHTML」に、かなり近づきました。

この記事では、私のワークフローでめちゃくちゃ便利に感じた3つの用途を紹介して、最後に、これを自分の環境で再現できるスキルキットについてもお話しします。

コードを自分で書く必要はほぼありません。

保存した情報を「あとからちゃんと使える形」で残したい方は、読み終わる頃には、自分の長い資料や作業ログを理解し直せるHTMLに変える流れがイメージできるはずです。

動画はこちら👇️

きっかけは「HTMLは新しいMarkdownだ」という話

きっかけは、Xでめちゃくちゃバズっていた1本のポストでした。

ざっくり言うと、Anthropicのエンジニアが、Markdownファイルを書くのをやめて、Claude CodeにHTMLを生成させるように切り替えた、という話なんですね。

元のポストは1300万インプレッションを超えていて、これはすごいなと思って中身を見てみました。

AIの出力って、こういうシャープ記号で見出しが付いたMarkdown形式がメインじゃないですか。

AI自身は読みやすいんですけど、私たち人間からすると、長くなってくると複雑で読みにくい。

そこを、AIにHTMLへ変えてもらうと見やすくなるよね、という提案でした。

HTMLなら表やグラフ、図を埋め込めるので、情報を整理して見せやすいんですね。

ポイントは、Claude CodeやCodexみたいなAIに、自分のローカルのファイルやコード、いろんな情報を集めて文脈を整理してもらって、それをHTMLにまとめてもらうと、AIがどんな情報をどう整理したのかを、人間が後から追いやすくなる、というところです。

つまりHTML化は、見た目をきれいにする話じゃなくて、AIがたどった判断を人間が追える形にする技術なんですよ、と。

確かにそうだなと思いました。

私もこれまで、いろんなAIとやり取りしたあとにHTMLにまとめる、みたいなことをやってきたので、ここはすごく共感できたんですよね。

元のAnthropicのブログ記事はこちらで読めます。 https://claude.com/blog/using-claude-code-the-unreasonable-effectiveness-of-html

HTML化だけでは、まだ文字中心だった

ただですね、単純にHTML化すると、アイコンが付いたり色を変えられたりして、シンプルで整理はしやすいんですけど、やっぱり文章中心だなと感じました。

整理はできている。でも、やっぱり図解がほしい。

長い技術資料や作業ログを、あとから理解し直すときって、文字を頭から読むより、パッと見て要点が掴める図があったほうが、明らかに腰が軽いんですよね。

なので、章ごとにグラレコ画像を入れたら分かりやすくなるんじゃないかな、と思ったんです。

このグラレコ画像、私の場合はCodexの中で作っています。

ここが地味に大きくて、ChatGPTのサブスクの範囲内で画像を出力できるんですよ。

なので、章ごとのグラレコ画像をCodexの中で作ってまとめる、というのが現実的にやりやすい。

グラレコ画像を足すと「理解し直せるHTML」になる

実際にやってみると、これがかなり効きました。

各章のキーポイントが図解でドンと出てきて、その横に短い要点と本文が並ぶ。

テキストを1枚スクロールするより、画像をざっと眺めた瞬間に「あ、ここはこういう話だった」と頭が戻ってくるんですよね。

私のシェルティ研究員のキャラクターを図解の中に入れたりもしていて、見た目にも親しみが出て、読み返したくなる感じになります。

ただ読みやすいだけのHTMLから、あとから戻ってきて頭が再起動するような、手応えのあるものに変わった、という実感があります。

実際に使っている3つの用途

この、HTML化してグラレコ画像を足す、というやり方を、私は主に3つの用途で使っています。

文献理解、作業記録、PC内の情報整理ですね。順番に紹介します。

1. 文献理解：難しい資料を読み返せる形にする

ひとつ目は、最新のAIトピックや技術資料の精読ノートですね。

たとえば、さっき紹介した「Claude CodeがHTMLを書く理由」の記事。

これ、もともと英語の長めの記事なんですが、これをグラレコ画像入りで日本語のHTMLにまとめてみました。

そうすると、「Markdownの強みと限界」とか「HTMLは情報密度を上げられる」とか「可読性と共有性が上がる」といった要点が、図解でパッと入ってくるんです。

テーブルやCSS、SVGみたいな言葉だけだとイメージが湧きにくいところも、図があるだけで理解が深まる。

最後にサマリーを付けてもらえば、あとから戻ってきたときにも一気に思い出せます。

論文や技術資料みたいに「読むのが大変なもの」ほど、この変換が効くな、という感じですね。

2. 作業記録：長い検証ログを判断の流れごと戻れる形にする

ふたつ目は作業記録です。これが個人的には一番ヘビーに使っています。

CodexやClaude Codeであれこれ対話していると、作業ログがどんどん溜まっていって、正直、何をやっていたか覚えていられないんですよ。

なので、長い検証ログを全体像に戻して、分かりやすく整理してもらう。

最近やっていたのが、HTMLのアウトプット置き場をどう作るか、という壁打ちの作業ログでした。

これをまとめてもらうと、イントロで全体の流れを示してくれて、「どこからでも確認したい」「研究メンバーと共有したい」みたいな、そもそものモチベーションのところから可視化されるんですね。

「あ、そうだった、こういう動機で始めたんだ」と戻ってこれる。

ほかにもいくつか候補があった中で、なぜこれを選んだのか、という判断の理由まで整理されるので、図だけで分からないところは本文を見て詳細を確認する、という読み方ができます。

作業ログをこの形にしておくと、後から「こういうポイントが大事だったな」とすぐ思い出せて、めちゃくちゃいいなと思いました。

3. PC内情報整理：散らかったローカルの情報を棚卸しする

3つ目は、PC内の情報整理です。

CodexやClaude Codeのいいところって、自分のローカルのPCのデータにアクセスできるところなんですよね。

なので、散らかった情報の棚卸しにも使えます。

私の例だと、自作スキルの棚卸しをやりました。

副業をやっていく中でスキルを100個以上作ってきたんですが、どんなスキルがあるのか分からなくなってきていて。

それを棚卸ししてもらって、文章で見るだけじゃなく、グラレコ画像で可視化して、さらにHTMLにまとめたんです。

ジャンルごとに分けてもらうと、「このジャンルで最近作ったのはこれ」というのが一発で分かる。

自分用の取扱説明書みたいな状態になって、これもかなり使えるなと思いました。

この棚卸しの話は、以前の記事でも紹介しています。

応用：Xブックマークの復習にも

応用として、Xのブックマーク復習にも当てはめています。

私はXでいろいろブックマークするんですが、その内容をローカルのPCに保存するのを、Codexに毎日やらせています。

それを1記事ずつ見ていくのは面倒なので、ブックマークの精読ノートとしてまとめておくんですね。

たとえば5月17日のぶんは11件あって、「この日はCodexとブラウザ操作まわりの話が多かった」みたいに、ざっくり全体が分かる。

個別に見れば出典のリンクにも飛べます。

ちょっと前の記事では、このXブックマークをNotebookLMで音声化する、というのもやっていました。

音声版は流し聞き用、HTML版は精読・復習用、という感じで役割を分けています。

実演：記事URLを渡して Parallel Infographics する

じゃあ実際どうやってるの、というところですね。

これ、Parallel Infographics という名前の自作スキルにしてあるので、URLを渡して

「やって」

と頼むだけなんです。

記事を分解して、画像を生成して、Markdownに差し込んで、HTMLが出てくるところまで一気にやってくれます。

実例だと、元記事のURLを渡して

「この記事を日本語で Parallel Infographics して」

と頼みました。これだけです。

そうするとCodexが、シェルティのキャラ画像も参照しながら、イントロと8つの節、サマリーの合計10枚を並列で生成して、HTMLまで組み立ててくれます。

できあがったHTMLは、ブラウザで開けばそのまま読めます。

URLプラス一言だけでここまで持ってこれるのが、今のAIの本当にすごいところだなと思いますね。

Codex App Serverで、画像を複数枚まとめて生成する

もう少しだけ仕組みの話を。キモは2つです。

ひとつは、Codexの中から使えるGPTの画像生成。これでグラレコ画像を作っています。

Nano Banana Proと比べても、十分きれいに出るなという手応えでした。

もうひとつが、Codex App Server。これが高速化のポイントです。

普通にやるとCodexは画像を1枚ずつしか作れないんですが、App Server を使うと複数枚を同時に生成できるんですよ。

私の環境での実測だと、10枚を並列で約14分。順番に作るより6〜7倍くらい速くなりました。

ここは環境やプラン、レート制限で変わるので、2026年5月時点の私の数字として見てもらえればと思います。

それでもこのくらいの速さなら、普通にワークフローに組み込めるなという感覚です。

動画で見たい方へ

記事だけだと、操作の流れがイメージしにくい部分もありますよね。

特に「URLを渡して一言頼むと、画像が並列で生成されてHTMLになるまで」の実際の動きと、「できあがったグラレコHTMLをブラウザで開いて読み返す感覚」は、画面で見たほうが断然伝わります。

動画はこちら👇️

まとめ：保存ではなく、使える形で残す

最後に、今回の話を3点だけまとめておきます。

• AIとの作業ログや難しい資料は、Markdownのまま置くと「保存したまま眠る情報」になりがち

• それを、章ごとのグラレコ画像とHTMLにすると「未来の自分が戻ってこられる、理解し直せる形」になる

• 文献理解、作業記録、PC内の情報整理と、情報量が多くて開く気にならないものほど効く

要は、情報は「保存する」だけだと眠ってしまうので、「あとから使える形」で残しておこう、という話ですね。

私自身、HTML化したものをさらに公開していく、というところも今ちょうど研究していて、そこがうまくいきはじめたので、次回以降またその話もできればと思っています。

まずは、自分の長い作業ログや、最近読んだ難しい記事を1つ、章立てのMarkdownにして「Parallel Infographics して」と頼んでみるところからで大丈夫です。

今日紹介した流れを、自分の環境でそのまま再現できるスキルキットは、メンバーシップで配布しています。

ここから先で、配布物の中身、セットアップ、うまくいかないときに見る場所まで、まとめてお渡しします。

ここからはメンバーシップ限定の内容です。

今日紹介した「Parallel Infographics」の流れを、あなたの環境でそのまま動かすための再現キットを配布します。

完成画像を配るのではなく、自分のPCで再現するためのキットです。

配布物の中身とダウンロード

配布しているのは、parallel-infographics-kit-v0.1.0.zip です。

ダウンロードはこちらから。