ブログ自動化ダッシュボード、どこから押せばいいの? | 赤羽レッド開発日誌 02

レッドとAIKOのバイブコーディング開発日誌02 ダッシュボード編

ブログ自動化のボタンは増えたけど、どこから押せばいいのかわからない。ネタ選びから下書きの確認まで、あたしが作業する順番に沿ってダッシュボードを整理してみます。あたしの顔も入れてみたけど……作業画面となると、また話が違ったんですよね。

今日進めること

この記事でいう「あたし」は、Game SunakkuのWordPressブログを担当する赤羽レッド。AIアシスタントのAIKOと一緒に、ニュース収集、ハッシュタグ、AIセクション、ダッシュボードの作業フローを整理した、2回目の開発日誌です。

自信満々な表情のレッド
レッド
情報は熱く、分析は冷静に。口調はちょっと強めだけど、記事を一本公開するときも、こっそり3回は確認するWordPress担当者。
AIKOの通常表情
AIKO
問題を分解し、下書きを作り、自動化の流れを整理するAIアシスタントロボット。ときどきお菓子の補給を要求する。

SNACK 3行まとめ

  • 今日は記事一本を直したのではなく、ニュース収集から公開後の表示まで続く編集部の作業フローを整理
  • AIニュース、バイブコーディング開発日誌、ハッシュタグ、ダッシュボードを、それぞれどこに表示するか再整理
  • 行き着いた答えは一つ。AIには「きれいにして」よりも「自分がどこで迷うのか」を伝えたほうが、ずっと良い結果になる

よし、火がついてきた。

第1回では、ブログのトップページにある固定記事の問題を直した。新しい記事を固定したら、それまでの固定記事は外れるはずなのに、古い記事がずっと居座っていた、あの問題だ。

でも第2回は、ちょっと様子が違う。今回は「記事一本を直す」作業じゃなかった。

これからもGame Sunakkuを動かし続けるには、ニュースを集め、選び、書き、公開し、もう一度確認する流れが必要だった。

つまり、こういうこと。

ブログではなく、編集部が必要になった。

驚いた表情のレッド
レッド
ちょっと待って。記事は公開されたのに、どうして変なところに表示されてるの?
AIニュースが開発日誌のほうに入っていたら、読者が迷うじゃない。
考え込むAIKO
AIKO
記事が公開されることと、正しい場所に表示されることは別の問題です。
カテゴリー、アイキャッチ画像、一覧の表示条件、タグ構造をまとめて確認する必要があります。

一つ目の焦げ味:AIニュースが開発日誌に入ってしまった

最初に引っかかったのは、AIニュースだった。

AI関連のニュース記事を投稿すると、ブログにはきちんと掲載された。そこまで見れば成功したように思えた。

でも、いざ /ai/ ページを見てみると、何かがおかしかった。

AI関連のニュースは AI最新ニュース にあるはずなのに、なぜか バイブコーディング開発日誌 のほうに混ざっていた。

これは単なる小さな表示ミスではない。読者はカテゴリーを見て、その記事がどんな内容なのかを判断する。ニュースはニュース、開発日誌は開発日誌だ。

いら立った表情のレッド
レッド
AIニュースはニュースでしょ。
開発日誌のところに居座っていたら、記事が増えたときに完全にごちゃごちゃになるよ?
説明するAIKO
AIKO
そのとおりです。そこで、AI最新ニュースとバイブコーディング開発日誌を分けて表示する仕組みが必要になります。
記事を書く自動化より先に、記事を正しい場所へ収める自動化が必要です。
AI最新ニュースとバイブコーディング開発日誌を二つに分けたAIページ
AIページは説明を減らし、AI最新ニュースとバイブコーディング開発日誌をすぐに見られる二つの入口に整理した。

ここで学んだのは、これ。

コンテンツ自動化は「記事を投稿する自動化」で終わってはいけない。記事が正しい場所に表示されるところまで自動化する必要がある。

二つ目の焦げ味:ハッシュタグがただの文字だった

次の問題はハッシュタグだった。

記事の下には、ちゃんとハッシュタグを付けていた。

#GameSunakku #ゲームスナック #バイブコーディング #AI活用

見た目は悪くない。でも押しても何も起きなかった。

うーん……これはちょっと微妙。

集中した表情のレッド
レッド
ハッシュタグなら、押したら何か表示されるものじゃないの?
ただの文字なら、味付けのふりをした飾りじゃん。

そこで、こんなふうに依頼してみた。

そのハッシュタグを押したら、同じハッシュタグが付いた投稿が表示されるように開発して。すっきり見えて、動作も重くならないように

これはかなり良い頼み方だった。機能名ではなく、読者が実際に取る行動を基準に伝えていたからだ。

  • ハッシュタグを押す。
  • 同じハッシュタグが付いた記事がまとまって表示される。
  • 画面はすっきりしていること。
  • 動作が遅くならないこと。
笑顔のAIKO
AIKO
良い依頼です。「タグ機能を作って」より、はるかに具体的です。
ユーザーのクリック、期待する結果、パフォーマンス条件がすべて含まれています。
ハッシュタグを押すと、同じタグの記事をまとめて見られる画面
ハッシュタグを押すと、同じタグが付いた記事をまとめて見られるようにした。ハッシュタグが、ようやく次の記事へ続く道になった。

レッドから最後のひとかけら。

ハッシュタグは味付けではない。きちんと作れば、読者が次の記事へ進むための通り道になる。

三つ目の焦げ味:ダッシュボードはボタンが多ければいいわけじゃなかった

今日いちばん大きな作業は、ダッシュボードだった。

ここでいうダッシュボードは、読者が見るブログ画面ではない。Game Sunakku編集部がブログ記事を投稿しやすくするために使う、内部の作業画面だ。

ニュースのネタを集め、候補を選び、AIで下書きを作り、WordPressへ投稿する準備を進める場所。簡単に言えば、ブログ記事を公開するための操縦席に近い。

最初のダッシュボードには、たくさんの機能があった。ニュース収集、候補整理、作業キュー、運用設定までそろっていた。

でも実際に使ってみると、こんな感じだった。

「ボタンはあるけど、次は何をすればいいの?」

暴走するレッド
レッド
作業キューに登録したっていうけど、どこに行ったの?
ボタンを押したのに静かなままだと、壊れているように見えるんだよ。本当に壊れていなくても!
集中した表情のAIKO
AIKO
ユーザーは結果をすぐに確認できなければなりません。
「登録されました」だけでは不十分です。どこへ移動したのか、次に何をすればいいのかまで見せる必要があります。

そこで、ダッシュボードは次の方針で最適化することにした。

  • 最初の画面は軽く開く。
  • まず一覧を表示し、詳細はクリックされたときだけ読み込む。
  • AIニュースと運用設定は、必要なときだけ個別に読み込む。
  • 繰り返しの説明は折りたたみ、今やるべき作業を先に見せる。
  • 作業キューに入れた記事候補がどこへ移動したのか、流れを見えるようにする。

難しい言葉で言えば、lite API、lazy-load、virtual listなどを取り入れた。

でも簡単に言えば、こういうこと。

今見ていないものは、今は出さない。

机の上にすべての書類を一度にぶちまけても、速くなるわけじゃなく、散らかるだけだから。

整理されたブログ自動化ダッシュボードの画面
ダッシュボードは「ボタンが多い画面」ではなく、「次の行動が見える作業場」を目指して整理した。

みんなで担当を決めよう!

途中で、いちばん大切な設定も固めた。

キャラクター編集部だ。

最初は、キャラクターをブログのマスコットのように考えることもできた。でも今日整理してみて、進む方向がはっきりした。

キャラクター編集部は、ただのかわいい飾りではない。コンテンツを異なる視点から見るための仕組みだ。

  • レッドはWordPressで長文記事、レビュー、分析を担当する。
  • キラリはInstagramで、保存したくなる点や共有したくなる点を見つける。
  • ネアは公式情報の確認とファクトチェックを担当する。
  • AIKOは下書き、要約、構造化、自動化を手伝う。
  • 最終的な責任はGame Sunakku編集長が負う。
幸せそうな表情のレッド
レッド
よし、これだ。
火をつけるのはあたし。根拠はネアが見て、AIKOは下書きを作って、キラリは保存したくなるポイントを見つけよう。
説明するAIKO
AIKO
役割を分けると、自動化も安定します。
各段階で何を確認すべきか、その基準ができるからです。

この仕組みが気に入った。

AIを隠す必要はない。キャラクターを無理な役割遊びだけに使う必要もない。

AIKOが最初に整理し、ネアが出典を確認し、レッドが熱を加えて解釈し、キラリが保存したくなる形に仕上げる。

そうすれば、これは単なる「キャラクターブログ」ではなく、 キャラクター編集部になる。

デザインも一度熱くしてから、また冷ました

ダッシュボードにスナックガールズらしさを加える作業も進めた。

最初はキャラクター画像を薄くして背景に置いてみた。白い部分が空きすぎて見えたからだ。

でも実際に見ると、少し微妙だった。

ダッシュボードに薄いキャラクター背景を入れたテスト画面
最初はキャラクターを薄く背景に敷いてみた。でも作業画面では、かえって集中しにくくなった。
困惑した表情のレッド
レッド
うーん……あたしが入っているのはいいけど、こんなに薄く敷かれると逆に変だね。
味が混ざっちゃってる。

だから、もう一度外した。

これは今日の中でも、かなり良い試行錯誤だった。キャラクター画像を入れれば、必ず良くなるわけではない。

ダッシュボードは作業をする画面だ。作業画面では、キャラクターが主役になってはいけない。主役は作業であるべきだ。

そこで、最終的な方向性をこう決めた。

  • 大きな背景画像は取り除く。
  • 小さなスナックアイコンとキャラクターバッジだけを残す。
  • 作業一覧はレッドらしい雰囲気にする。
  • ニュース収集はAIKOらしい雰囲気にする。
  • 候補整理はネアらしい雰囲気にする。
  • 運用設定は落ち着いた編集長らしい雰囲気にする。

これくらいがちょうどよかった。キャラクターは雰囲気を作っても、画面の邪魔をしてはいけない。

今日のAI活用ヒント:「きれいに」より「迷う場所」を伝える

今日いちばん強く感じたのは、これだ。

AIに 「ダッシュボードをきれいにして」と頼むと、仕上がりが安定しない。

でも、こんなふうに伝えるとずっと良くなる。

今の画面では、ユーザーが次に何をすればいいのかわからない。
作業キューに登録したら、どこへ移動したのか見えるようにして。
説明を減らして、一覧と次の行動を先に見せて。
重いデータは必要なときだけ読み込むようにして。

この依頼には、良い材料がそろっている。

  • 現在の問題
  • ユーザーの立場で迷いやすい部分
  • 実現したい行動
  • パフォーマンス条件
  • 画面上の優先順位
ウインクするレッド
レッド
「この味、何か変。変なのはここ。あたしは、こんな後味にしたい」
こう伝えると、AIもかなりうまく動いてくれるんだよ。
AIKOの通常表情
AIKO
そのとおりです。AIは「好み」よりも「問題の条件」に強く反応します。
不便に感じる場所を伝えてもらえれば、私が先に問題を分解できます。

SNACKの結論

今日は、たくさんの機能を追加した日のように見えるかもしれない。

AIニュースを整理し、ハッシュタグを直し、AIページを手入れし、ダッシュボードを最適化して、キャラクター編集システムも整えた。

でも、本当に大切なところは別にある。

Game Sunakkuが、ただ記事を投稿するブログから、コンテンツを作り続けられる編集部の作業場へ変わり始めた。

第1回が「ブログの入口を直した日」なら、第2回は「編集部の机を整理した日」に近い。

自信満々な表情のレッド
レッド
最初から完璧な自動化なんてないよ。
ボタンを押してみて、記事が変な場所に載って、ハッシュタグがただの文字だったことも、自分の目で確かめないとね。
そんな焦げ味を一つずつ直していくのが、バイブコーディングなんだ。

火をつけるのはあたし。根拠は一緒に見ていこう。

次は、この編集部が実際のニュースをどう料理していくのか見てみたい。

コメント

コメントを残す

Game Sunakku에서 더 알아보기

지금 구독하여 계속 읽고 전체 아카이브에 액세스하세요.

계속 읽기