Claude Codeが10倍活きる図解スキル「diagram-design」の非エンジニア的な使い方

周平さんは、Claude Codeの開発スピードと質を大きく上げるスキルとして、GitHubで人気のdiagram-designdiagram-design ── フローチャートやアーキテクチャ図などの図をAIに描かせるための、Claude Code向けの追加スキル。GitHubで公開されており、無料で使えますを取り上げます。

周平さん自身、当初は「図解のブログをやっているわけでもないし、図解スキルを入れて何になるのか」と半信半疑だったといいます。ArtifactのようにAIで図を作る機能はすでにあるからです。

それでも、周平さんは「物は試し」で実際に使ってみたところ、使ってみて初めて用途がわかったと話します。この回は、その使ってみて見えてきた使い道の話です。

diagram-designは、AIに図を描かせると全部似たような箱ばかりになってしまう問題を解決するスキルだと周平さんは説明します。

このスキルを使うと、アーキテクチャ図、つまり設計図のようなものやフロー図など、27種類の図を出せるといいます。出力はHTMLとSVGだけで完結し、ビルドが不要です。

ビルドが不要とは、いちいちデプロイのような作業をしなくても図が出せるという意味だと周平さんは補足します。

さらに、サイトを読んで色やフォントを寄せ、ブランド感まで合わせることもできるため、Figmaでの微調整地獄を避けやすいとされています。FigmaFigma ── ウェブサイトやアプリの見た目を設計するためのデザインツール。細かい位置や色の調整を手作業で繰り返すことが多く、周平さんはそれを「微調整地獄」と表現しています

想定される使い手として、周平さんは技術記事を書くエンジニアや、配線図・設計資料を作る人、自分のプロダクトを紹介したい人を挙げます。ポップな図解というより、ビジネス寄りの図が得意だといいます。

導入方法もシンプルだと周平さんは話します。XやGitHubで流れてきた情報を「後でやろう」とブックマークしたまま終わらせがちですが、このスキルはそうならずに済みます。

具体的には、XのリンクでもGitHubのリンクでもよいので、それをコピーしてClaude Codeに投げ、「これをやりたい」と伝えるだけで導入してくれるといいます。

ここから周平さんは、非エンジニアにこそ効く使い方に話を進めます。自分は設計者ではないので、技術資料として図を出す必要はなく、本来このスキルは要らないはずでした。

ところが、あることを試したら「これはむしろ非エンジニアの文系にこそ使える」と感じたといいます。

きっかけは、Claude Codeでの開発が複雑になっていく場面です。ウェブアプリでもゲームでも、開発が進むと処理内容がテキストだけで返ってきて、何をやっているのか分からなくなることがあると周平さんは言います。

Artifactで整理させることもできますが、時間がかかり、トークン消費も増えそうだという感覚から、テキストのままなんとなく進めてしまう。その結果、実は認識がずれていて開発が止まる、ということが起きるわけです。

そこで周平さんは、diagram-designを自分のClaude Codeに入れ、「フロー図で出して」「フローで図解して」と指示します。すると、スキルが発動して図を画像として出してくれるといいます。

例えばステップメールを作るとき、「ここで動画を見なかった人はこちらへ飛ばす」といった指示を口頭でどんどん出しながら、その間に別の作業もしている。すると、後から「ここで何をしていたっけ」と思い出せなくなることがあると周平さんは話します。ステップメールステップメール ── 登録者に対して、あらかじめ用意した複数のメールを決めた順番・タイミングで自動配信する仕組み。条件によって配信を分岐させることもあります

APIやMCP、Webhookでどこがどうつながっているのか、指示した本人ですら分からなくなることもあるといいます。周平さんは、これをAI時代の人間側のボトルネックだと表現します。MCPMCP ── AIと外部のツールやデータを接続するための仕組み。これを使うと、AIがサービスをまたいで情報をやり取りできるようになります

そこでフロー図として出すと、「今ここをやろうとしている」「こことここがこうつながる」といったことが視覚的に分かると周平さんは言います。運営中のウェブアプリ学習サイトでも、「今どういう開発になっているの、フロー図で出して」と頼むことで、頭の中が整理できたそうです。

内容を分かっていないわけではないものの、テキストだけよりも図で見えたほうが理解が早い。周平さんはそう振り返ります。

同じ発想は、クライアントワークをする人やフリーランス、会社員にも使えると周平さんは言います。プロジェクトの進行を共有するガントチャートのようなものを作るのは大変ですが、それに近い形で自分のTODOを出してもらえるからです。ガントチャートガントチャート ── 作業ごとの担当や期間を横棒で並べ、プロジェクト全体の進行を一目で分かるようにした工程表。プロジェクト管理でよく使われます

AIと一緒に仕事をしていると、AIが処理を止めているのか、自分の側で止まっているのか分からなくなることがあると周平さんは指摘します。そこで「今の開発状況を教えて」「僕のTODOをフロー図で出して」と頼むわけです。

周平さんは自身にADHD気質があり、思いついたことをその都度やってしまって本来の優先順位が分からなくなると打ち明けます。テキストの箇条書きで示されても頭に入りにくいといいます。

一方で、フローチャートやガントチャートのような図で示されると、「この後これをやって、これとこれが紐づくから一緒のタイミングでやればいい」と分かるといいます。自分で頭の中に絵を描かなくて済むのが利点です。

周平さんは、知能検査で言語処理は平均より高かった一方、図形の理解は低かったと話します。それでも、AIにテキストで一気に説明されるより、図解して順番を整理してもらうほうが、紙に書き出すよりも分かりやすかったといいます。

収録中、周平さんは新しい使い方を思いつきます。過去のセッション履歴から、今考えていることややろうとしていることを図解してもらえばいいのではないか、という発想です。

その場で依頼した周平さんは、これはとても良いと反応します。ObsidianのGraph Viewで脳内のつながりを表示する機能を使ってはいるものの、いまいちピンと来ていなかったといいます。ObsidianObsidian ── メモ同士をリンクでつないで管理できるノートアプリ。Graph Viewは、そのリンク関係を点と線のネットワーク図として表示する機能です

そのGraph Viewよりも、こうして図解してもらったほうが分かりやすい、と周平さんは話しました。

周平さんが伝えたかった核心は、このスキルを入れてもClaude自体の性能が上がるわけではない、という点です。

変わるのは自分の側です。止まっていること、忘れていること、理解できないことが理解できるようになり、次にやることがはっきりする。Claude Codeの性能は変わらないのに、自分のボトルネックが解消されることで10倍使えるようになるというのが周平さんの結論です。

だからこそ、あちこちに意識が飛んでしまう人ほど入れてみてほしいと周平さんは勧めます。無料で使えるスキルです。

後半、周平さんは新しく販売を始めた「ウェブアプリ開発の教科書」を紹介します。販売はBrainで、価格は4980円です。

事前登録のリンクから登録すると割引が受けられ、8月20日を過ぎると割引は一斉に終了するとのことです。1000円の差を気にしない人はそのまま買ってもよいと周平さんは話します。

教材は画面解説が中心で、AIのモーション動画も一部あるものの、ほとんどは周平さん本人が話しているため、逆に信頼感があるといいます。

周平さんは、教材のテキスト自体を全部読む必要はないと言います。テキストはAIに読み込ませ、動画で雰囲気をつかみ、手順書を使って自分で小さく作ってみるのがよいとのことです。メルマガシステムを簡単に作れるテスト環境も用意されています。

使うのはCloudflareやClaude Code、resendといったツールで、これらを組み合わせると事前登録のシステムのようなものが作れるといいます。作るのにお金がかからないのも利点だと周平さんは話します。CloudflareCloudflare ── ウェブサイトやアプリを公開・運用するためのサービスを提供する会社。個人でも無料の範囲で使い始められます

周平さんは、公式サイトを作るだけではもう弱く、ウェブアプリまで踏み出すと開発の規模が大きく変わると強調します。APIやデータベース、MCPが使えるようになると、チャットボットを作るだけでも仕事になるといいます。

プログラミングスクールなら30万〜50万円かけて半年ほどで小さなものを作る内容を、今日からすぐデプロイして使える形にできる。そのスピード感に4980円の価値があると周平さんはまとめます。

まとめ

この回は、図解スキルdiagram-designを、設計資料づくりではなく、非エンジニアが自分の開発状況やTODOを整理する道具として使うという話でした。ツールの性能ではなく、人間側の理解のボトルネックに焦点を当てた点がポイントです。

• diagram-designは、27種類の図をHTML・SVGだけで、ビルド不要で出せる無料のClaude Code向けスキル
• 導入はXやGitHubのリンクをClaude Codeに投げるだけで済む
• 複雑化した開発の「今どこ」や接続関係、TODOをフロー図にすると、視覚的に理解しやすくなる
• Claude自体の性能は変わらず、変わるのは自分の理解と段取りで、その結果として10倍使えるようになる
• 後半では、Brainで販売中の「ウェブアプリ開発の教科書」（4980円、8月20日まで割引）が紹介された