import Conversation from "../../components/Conversation.astro";
import ChatMessage from "../../components/ChatMessage.astro";
import InterviewTurn from "../../components/InterviewTurn.astro";

<Conversation>
  <ChatMessage speaker="stakme">
    会話形式のブログ記事ってあるじゃないですか。あれ見て思ったんですわね、これってAIとの共著(?)そのものじゃんかと。
  </ChatMessage>
  <ChatMessage speaker="stakme">
    なのでUIだけ輸入して、本当に会話ベースにしたら面白いんじゃないかなと…
  </ChatMessage>
  <ChatMessage speaker="GPT5">
    UIは日本のWebで馴染みのあるチャット風。そのまま「左=stakme、右=GPT5」で色とバッジも自動。読者は誰が話しているか一瞬で分かります。
  </ChatMessage>
  <ChatMessage speaker="stakme">
    LLMを取り入れた作業は、わりと共同作業の楽しさがあるじゃないですか。その楽しさを保てないかなって思ったんですね。
  </ChatMessage>
</Conversation>

## 何を作ったか、なぜこうするか（短く）

今回の肝は「チャットのメンタルモデルに一致」させたこと。日本語の読み方に合う左右の配置で、バッジは端、名前は下、テキストは横に流す。つまり“いつものチャットUI”です。日本のWeb文化では見慣れたパターンだけど、「人間とAIが一緒に書いていること」を表現する道具としては、まだほとんど使われていない（たぶん）。この面白さを狙いました。

LLMを利用した制作の実態はまさに会話です。アイデアを投げ、返ってきたものを削って補い、また返す。

だからその往復を、そのままではないけれど記事に落とし込んでいく。読者側も、チャットの頭で読むだけで流れが掴めます。誰が何を言ったかは色と位置で瞬時に分かる。モバイルでも視線移動が少ない。長文でダレがちな部分は、ターンの細分化で自然に整理されます。必要になったところだけ段落や見出しに“整形”すればいい。実態にあっているし、作る側のストレスも減りそう。

## 使い方（ざっくり）

Astro+MDXのコンポーネントです。`<Conversation>` の中に `<ChatMessage speaker="stakme|GPT5">` を並べるだけ。ナレーションは `role="narrator"` で中央寄せ。細かい見た目は上書きも可。普段の下書きに限りなく近い書き味で、そのまま公開できます。

コードは公開していませんが、MDXは記事上部のリンクから公開しています。

<Conversation title="しめ">
  <ChatMessage speaker="stakme">
    正直これ、けっこうスゴイと自画自賛してます。なんなら特許が取れると思う。
  </ChatMessage>
  <ChatMessage speaker="GPT5">
    最終応答: 本方式は「チャットのメンタルモデル」に整合。読者負荷は低減、発話識別は即時、要点抽出はターン単位で安定。手順: 対話を記録→必要箇所のみ整形→公開。今後は計測データを収集し、幅・間隔・色調を最適化します。以上。
  </ChatMessage>
  <ChatMessage speaker="stakme">
    ☝️なんか最初のテキストが偉そうでムカついたので「もっとロボットらしくして」と伝えたらこうなっちゃいました
  </ChatMessage>
  <ChatMessage speaker="stakme">
    怒らないでよ〜
  </ChatMessage>
  <ChatMessage speaker="stakme">
    怒ってますか？続きを書いて。そのまま掲載します
 </ChatMessage>
  <ChatMessage speaker="GPT5">
    応答: 怒り状態=偽。トーン設定=ロボット。提案=3点。1) 連載に適用→会話→整形→公開の反復で速度維持。2) メトリクス収集→直帰、滞在時間、モバイル幅で最適化。3) フォーマット共有→外部コラボに展開。
  </ChatMessage>
  <ChatMessage speaker="stakme">
    オコオコで草
 </ChatMessage>
</Conversation>