AIと共同執筆してより質の高い記事を書こう

by Riya Amemiya

Slide 1

Slide 1 text

AIと共同執筆してより質の高い記事を書こう西悠太(GMOメディア)

Slide 2

Slide 2 text

自己紹介名前: 西悠太(20歳) 所属: GMOメディアフロントエンドエンジニア(自称) X: Riya31377928 https://riya-amemiya-links.oshaburikitchin.com/ Zennで記事書いてます

Slide 3

Slide 3 text

せいそくちフロントエンドクラブ GMOメディア TSKaigi(会場&チケットチーム) Twitter: Riya31377928 mixi2: riya_amemiya

Slide 4

Slide 4 text

この記事の話をします https://zenn.dev/gmomedia/articles/6ed3718b4c6bc1

Slide 5

Slide 5 text

はじめに前提としてAIで記事を書くことを推奨も否定もしません。 AI活用は個人の自由であり、それを記事執筆にも使うかは使用者の判断に委ねられると考えています。私のトークはAIを利用することでより質の高い記事を書けるかもしれないよ、こういう書き方どうですか？という紹介です。

Slide 6

Slide 6 text

本編さて、AIで記事を書くと言っても全てを書かせるわけではありません。タイトルにもありますが、AIとの共同執筆です。どのように共同執筆するのかというと、先ほど紹介した記事を書いたときの流れを紹介します。

Slide 7

Slide 7 text

共同執筆の大まかな流れ 🧑は私、 🤖はAIが担当した工程です 1. 🧑記事のテーマを決める 2. 🧑& 🤖下調べ 3. 🧑目次を作成する 4. 🤖目次を添削 5. 🧑各見出しの内容を書く 6. 🤖各見出しの内容を添削

Slide 8

Slide 8 text

共同執筆の大まかな流れ 🧑は私、 🤖はAIが担当した工程です 7. 🧑記事修正 8. 🤖記事を添削 9. 🧑サンプルコードの指示出し 10. 🤖サンプルコードを作成 11. 🧑コード検証 12. 7~11を何回か繰り返す

Slide 9

Slide 9 text

共同執筆の大まかな流れ 🧑は私、 🤖はAIが担当した工程です 13. 🧑内容確認 14. 🤖AIで内容確認 15. 🧑記事を公開する

Slide 10

Slide 10 text

関わったAI(AIツール含む) - Claude 3.7 sonnet 目次作成、添削、内容確認、サンプルコード作成 - ChatGPT: o3-mini-high 記事をより面白く豊かな表現にするために添削 - NotebookLM 大量のソースを登録して記事のファクトチェック - Cline: Claude 3.7 sonnet サンプルコードの検証コード作成

Slide 11

Slide 11 text

各項目をざっくり紹介していきます 1. 🧑記事のテーマを決める 2. 🧑& 🤖下調べここはまあ書いてある通りですね。書きたいテーマを決めてAIと一緒に下調べします。 1.Deep Researchで大まかな内容を収集 2.MDNを見て構文や仕様を学ぶ 3.面白そうな機能をメモる

Slide 12

Slide 12 text

各項目をざっくり紹介していきます 3. 🧑目次を作成する 4. 🤖目次を添削ここからずっとAIとレスバします。「こういうタイトルの記事考えてるんだよね。目次はこんな感じ」とAIに送ります AIから提案された目次をレスバしてブラッシュアップします。レベル感とかを伝えるといい感じのが出てきます

Slide 13

Slide 13 text

各項目をざっくり紹介していきます 5. 🧑各見出しの内容を書く 6. 🤖各見出しの内容を添削ひたすら書いて、それをAIに添削してもらいます。校正などもここで行いますこの段階ではとりあえず前後のつながりは一旦無視して、各章を一個の記事を書くぐらいの気持ちで書き込みます

Slide 14

Slide 14 text

各項目をざっくり紹介していきます 5. 🧑各見出しの内容を書く 6. 🤖各見出しの内容を添削ひたすら書いて、それをAIに添削してもらいます。この段階ではとりあえず前後のつながりは一旦無視して、各章を一個の記事を書くぐらいの気持ちで書き込みます。無視してもいい理由は次の工程でわかります

Slide 15

Slide 15 text

各項目をざっくり紹介していきます 7. 🧑記事修正 8. 🤖記事を添削先ほど書いた前後のつながりを無視した文章を多少人の手で繋げます。繋げたら全文をAIに渡して、読みやすさや文章の流れを意識してリライトしてもらいますこの時にたまに暴走して勝手に内容を変えたり付け加えてくるので油断禁物です

Slide 16

Slide 16 text

各項目をざっくり紹介していきます 9. 🧑サンプルコードの指示出し 10. 🤖サンプルコードを作成サンプルコードを入れてもらいます。記事によってほしいコードは違うと思いますが、今回の場合だと補足的なサンプルコードが欲しかったので、あくまでも文章を主体にしつつ、コードでしか伝わらない部分を補完したいと伝えてAIに頑張ってもらいました

Slide 17

Slide 17 text

各項目をざっくり紹介していきます 11. 🧑コード検証 12. 7~11を何回か繰り返す人との手で確認しつつ、誤りや読みにくいコードを AIに指摘して直してもらいます 7~11を何度も繰り返して各章の質を上げていきます

Slide 18

Slide 18 text

各項目をざっくり紹介していきます 13. 🧑内容確認 14. 🤖AIで内容確認 15. 🧑記事を公開する NotebookLMとClaudeを使ってひたすらファクトチェックをします。 (NotebookLMの詳しい説明は省きます) 今回はCSSだったので基本的にはMDNをソースとしてファクトチェックしてます

Slide 19

Slide 19 text

まとめ以上がAIとの共同執筆でした。あの記事は約2.2万字ですが、構想含めて1日で書き上げています。 AIとの共同執筆は、単に労力削減のためではなく、より質の高いコンテンツを生み出すための手段だと思ってます。 AIの強みを活かすことで、読者により価値ある情報を届けられることでしょう。