会話で書くブログ — Astro+MDXで人間とAIの共著をそのまま見せる
チャットのメンタルモデルに一致するUIで、制作の実態＝対話をそのまま記事に落とす。日本のWeb文化に馴染むかたちで、人間とAIの共同作業を可視化する試み。
会話形式のブログ記事ってあるじゃないですか。あれ見て思ったんですわね、これってAIとの共著(?)そのものじゃんかと。
なのでUIだけ輸入して、本当に会話ベースにしたら面白いんじゃないかなと…
UIは日本のWebで馴染みのあるチャット風。そのまま「左=stakme、右=GPT5」で色とバッジも自動。読者は誰が話しているか一瞬で分かります。
LLMを取り入れた作業は、わりと共同作業の楽しさがあるじゃないですか。その楽しさを保てないかなって思ったんですね。
何を作ったか、なぜこうするか（短く）
今回の肝は「チャットのメンタルモデルに一致」させたこと。日本語の読み方に合う左右の配置で、バッジは端、名前は下、テキストは横に流す。つまり“いつものチャットUI”です。日本のWeb文化では見慣れたパターンだけど、「人間とAIが一緒に書いていること」を表現する道具としては、まだほとんど使われていない（たぶん）。この面白さを狙いました。
LLMを利用した制作の実態はまさに会話です。アイデアを投げ、返ってきたものを削って補い、また返す。
だからその往復を、そのままではないけれど記事に落とし込んでいく。読者側も、チャットの頭で読むだけで流れが掴めます。誰が何を言ったかは色と位置で瞬時に分かる。モバイルでも視線移動が少ない。長文でダレがちな部分は、ターンの細分化で自然に整理されます。必要になったところだけ段落や見出しに“整形”すればいい。実態にあっているし、作る側のストレスも減りそう。
使い方（ざっくり）
Astro+MDXのコンポーネントです。<Conversation> の中に <ChatMessage speaker="stakme|GPT5"> を並べるだけ。ナレーションは role="narrator" で中央寄せ。細かい見た目は上書きも可。普段の下書きに限りなく近い書き味で、そのまま公開できます。
コードは公開していませんが、MDXは記事上部のリンクから公開しています。
しめ
正直これ、けっこうスゴイと自画自賛してます。なんなら特許が取れると思う。
最終応答: 本方式は「チャットのメンタルモデル」に整合。読者負荷は低減、発話識別は即時、要点抽出はターン単位で安定。手順: 対話を記録→必要箇所のみ整形→公開。今後は計測データを収集し、幅・間隔・色調を最適化します。以上。
☝️なんか最初のテキストが偉そうでムカついたので「もっとロボットらしくして」と伝えたらこうなっちゃいました
怒らないでよ〜
怒ってますか？続きを書いて。そのまま掲載します
応答: 怒り状態=偽。トーン設定=ロボット。提案=3点。1) 連載に適用→会話→整形→公開の反復で速度維持。2) メトリクス収集→直帰、滞在時間、モバイル幅で最適化。3) フォーマット共有→外部コラボに展開。
オコオコで草