Claude Code をはじめとする AI でつくった成果物のアーカイブ。
記事・ドキュメントから Web アプリまで、実際の画面をそのまま掲載しています。
AIと一緒につくった成果物を、実際の画面のまま並べています。カードをクリックすると詳しい制作ノートへ。
SubAgents・Skills・Commands 徹底図解
Claude Code の拡張のしくみを、はじめての人でも迷わない一枚に。
SubAgents・Skills・Commands は名前が似ていて混同されがち。「誰が・いつ・どう動くか」の違いが、読んだ人の頭に残らないのが課題でした。
まず全体像を掴む「一枚の対比表」を先頭に置き、続いて各機能をカードで個別に深掘り。抽象→具体の順で情報を階段状に設計しました。
3機能に固定色（青・茶・緑）を割り当て、本文・表・カードで一貫させることで「色を見れば機能が分かる」状態に。視線が迷わない配色設計です。
学び： 図解は「絵を作ること」より「情報の順番を決めること」。全体像→詳細の設計が腹落ちの決め手でした。
1作品ずつ、AI と対話しながら「速く試して・丁寧に仕上げる」を回しています。
「誰に何を伝えるか」を言葉で定義し、AI へ意図と制約を渡します。ゴールの共有が最初の一歩。
Claude Code と対話しながら、構造・文章・デザインを一気に形に。試作と修正を高速で往復します。
実際の画面で確認し、読みやすさと正確さを整えます。目視だけに頼らず動かして確かめる。
GitHub Pages で公開し、成果物をこのアーカイブに記録。次の制作へ学びをつなげます。
AI を「道具」ではなくいっしょに作る相棒として使い、 アイデアを最短で形にすることをテーマに制作しています。 ここに並ぶのは、その過程で生まれた実際の成果物です。