22
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

「ドパ資料」の作り方

22
Last updated at Posted at 2026-10-21

この記事を開いたあなたは「ドパガキ」もしくは「ドパおじ」いや「ドパおば」かもしれませんね。 いずれにしてもドーパミンがドバドバ出る資料を求めてここにたどり着いたものと推測します。そんなあなたのためにこの記事ではドパ資料の作り方を書いていきます。

👀 対象読者

  • 技術記事を書いているけど、いまいち読まれない人
  • 生成AIで図を作っているけど、なんか見覚えのある図になってしまう人
  • ドパ⚪︎⚪︎な人

🤯 これがドパ資料です

さっそくですが、お待ちかねのドパ資料の原液がこちらです。

rag-pachinko-short.gif

Naive RAG と GraphRAG の違いを、パチンコのリーチ演出みたいな
ドーパミン全開のアニメーション図解にしてください。
内容は薄くてOK、インパクト最優先。SVGでフレームを作ってGIFに変換。

構成:
1. 「ドパ注意」警告 → VS
2. ROUND 1:Naive RAG(HIT演出 → 弱点でガーン)
3. リーチ!! → 激アツ GraphRAG 降臨
4. ROUND 2:GraphRAG(HOPでつながって答え確定、紙吹雪)
5. 比較して WIN 判定 → 結論

どうでしょうドバドバ出ましたか?

とはいえ記事の図が全部この調子だと目が疲れてブラウザを閉じたくなりますよね。ドパ資料は薄めて使うものです。

この記事で本当に伝えたいのは図を入れて記事をちょっとリッチにすると読んでもらえる!ということです。ここからはちょうどいい濃さの資料の作り方を紹介していきます。

😇 ちゃんと書いてもスロップに見える問題

最近生成AIが量産した記事いわゆる「スロップ記事」が大量に流れてきます。 その結果なにが起きているかというと人間が何時間もかけて手で丁寧に書いた記事まで「あ、これAIのやつね」とスルーされるようになりました。

文章だけの記事だともう見分けがつかないんです:disappointed_relieved:書いた本人ですら読み返すとAIっぽく見えてくることがあります(トホホ...)

私が何のために記事を書いているかというと「自分のアウトプット整理」という建前もありますが本音は「承認欲求」です。「いいね」が欲しいただそれだけ。どんなに良い記事でも見てもらえなければ「いいね」はもらえません。

そこで私がとっている対策が図をどんどん差し込むことです。

💡 きっかけはこの投稿でした

私は以前Mermaidかdraw.ioで図を作っていました。Mermaidは楽だけど見た目がMermaidになるしdraw.ioは箱の位置調整で時間が溶けます。AIでここまでリッチな図が作れるのかと衝撃を受けてSVGを試してみたらこれがちょうどよかったんですね。SVGは中身がただのテキストなので生成AIが直接書けますし、見た目も配置も頼めばそのとおりに描いてくれます。

😑 そのSVGも、もう見飽きられている

...と喜んでいたのですがこの手法もすっかり広まりました。 「SVGで構成図にして」とだけ頼むとだいたいこういう図が出てきます。

dopa-fig04-baseline.png

AWS Lambda とは何かを説明するSVGの図を作って

一見よくまとまっています。ただ、こういう図はもう見すぎてしまって読み手の目が慣れています。新鮮味がないのでこの図ですら「スロップ」と言われることが増えてきました。

これじゃぁドーパミン、出ませんよね?

🎚️ ドパ度を調整する

そこで同じ題材(Lambda)のまま、プロンプトだけ変えていろいろなテイストで描いてみました。

赤ペン先生

dopa-fig06-redpen.png

AWS Lambda の説明図をSVGで。方眼ノートに鉛筆で描いた図に、先生が赤ペンで丸やコメントを入れたような見た目にして

製図

dopa-fig07-drawing.png

AWS Lambda の説明図をSVGで。機械の設計図のような製図風にして。寸法線や部品番号を入れて

雑誌(エディトリアル)

dopa-fig08-editorial.png

AWS Lambda の説明図をSVGで。雑誌の見開き記事のようなレイアウトにして。大きい見出しと余白を大胆に使って

マンガ

dopa-fig09-comic.png

AWS Lambda の説明図をSVGで。マンガのコマ割りと吹き出しで、イベントが来てLambdaが動く流れを見せて

スイススタイル

dopa-fig10-swiss.png

AWS Lambda の説明図をSVGで。スイススタイルのグラフィックデザインにして。グリッドと太いサンセリフ、色は2色まで

取扱説明書

dopa-fig11-manual.png

AWS Lambda の説明図をSVGで。家電の取扱説明書みたいにして。番号付きの手順と注意マークを入れて

ファミコン

dopa-fig12-famicom.png

AWS Lambda の説明図をSVGで。ファミコンのRPGの画面みたいなドット絵にして。サービスはキャラクターやアイテムとして描いて

動物園

dopa-fig13-zoo.png

AWS Lambda の説明図をSVGで。動物園の案内マップみたいにして。サービスを動物の檻に見立てて

🎞️ 発展編、GIFで流れを見せる

どうでしょう?ドパッってきましたか?...わかります...もっと動きが欲しいですよね?そんなあなたにGIF化を紹介します。技術記事なら処理の流れを矢印の上でトラフィックが動いていく見せ方がおすすめです。リクエストがどこから来てどこへ流れるのか。やり方はさっき描いてもらったSVGをもう一度渡してこう頼むだけです。

このSVGの図に、矢印の上をリクエスト(トラフィック)が流れていくアニメーションを付けて。
主役はトラフィックだけど、ほかも少し動かしていい。
たとえばトラフィックが届いた箱がふわっと光る、アイコンが小さく跳ねる、くらいの反応をつけて。
ただし文字は読めるように止めておいて。
GIFにするので全部の動きを6秒で1周するようにそろえて、最後から最初へ継ぎ目なくループさせて。

シンプル

dopa-fig14-baseline-traffic.gif

赤ペン先生

dopa-fig14-redpen-traffic.gif

製図

dopa-fig14-drawing-traffic.gif

🍜 おわりに

大事なのは「人間が作った"感"」です。テキスト一辺倒の記事ではなくちょっとだけ目新しい図や動き、それに加えて人間臭さやちょっとした面白さ、そういった人間味が伝わればAIで作ろうが手書きだろうが読み手はそこまで気にしないのではないでしょうか?

今回紹介した内容も時が経てばスロップと呼ばれるようになるかもしれません。みんなが真似して見慣れて大量で回ればもうスロップです。そのときはまた別の味を探しに行きます。最後にドパ資料は用法・用量を守って正しくお使いください。

それでは快適なドパライフを!

22
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?