それ、マークダウンで書くのやめませんか？ 2026年初夏

ClaudeCodeNightの発表資料です
https://studyplus.connpass.com/event/392344/

Transcript

1. それ、マークダウンで書くのやめませんか？ 2026年初夏 ClaudeCodeNight 2026-06-12
2. 自己紹介 うちほりです。 ‧株式会社アサインでソフトウェアエ ンジニアをやっています。 ‧普段はフルスタックエンジニア‧技 術広報の2⼑流でやっています。 ‧Xをやっているのでよかったらフォ ローしてください。
3. 今夜のテーマは、ClaudeCode × マークダウン
4. そもそもマークダウンってなんのために生まれたのか？ マークダウンは、「マークアップの煩雑さを取り除いた軽量な⾔語」。 • 例えば、## と書けばh2タグと対応していて簡単 • マークアップ⾔語（HTML）を素⼿で書くのって⾯倒だし、難しい。 • そこから、マークダウンからHTMLを⽣成する技術が⽣まれてきた ◦ Qiitaもzennもマークダウンだし ◦ スライド系ならslidevとかmarpとか
5. AIが次々とマークダウンを読み書きするように！ 例えば、仕様駆動開発するぞ〜と考えると • 要件定義書‧アーキテクチャ図‧API設計書‧DB設計書... AIの利⽤範囲を開発以外にも広げる今、マークダウンは更に多⽤されるよ うに。 • 企画書 • 調査レポート • ちょっとした振り返り などなど。
6. 読むに耐えないマークダウン、大量生産していませんか？ 例えば、 • 表がちょっとずつズレていく ◦ ドキュメント間で不整合、修正が漏れる、合計値が合っていない... • ASCII図やmermaidに頼りすぎた図解 ◦ どこから読めばいいかわからないエンティティ図 現代のマークダウンは過剰な役割を背負わされている！
7. だから、今日は以下の２つの話をします マークダウンが背負わされたものを取り除いて上げよう。 1. それはテキストに書くのをやめよう 2. たまにはマークアップに帰ろう
8. 1. それはテキストに書くのをやめよう
9. マークダウンは集計ツールではない！ 表の集計とか絶対更新漏れるから、値を変えたら集計は⾃動で変わるよ うにしたい。 こういう計算をしたいとき、⼈はどうしてきましたか？
10. に類する表計算ソフト。スプレッドシート（スプシ）とか。
11. エクセルのここがすごい！ エクセルは表計算ができる！ • 合計したり平均を取ったりできる！ ◦ SUM/AVERAGE • 抽出ができる！ ◦ FILTER/X(V)LOOKUP • 集計ができる！ ◦ COUNTIF/COUNTA • しかも、参照先の値を変えると集計値も勝⼿に変わる！ エクセルは申請書や設計書を書くためのツールじゃなかった！ ※弊社のエンジニアの標準ツールがスプシなのでここからExcelじゃなく てスプシの話をします。
12. AIからスプシを呼び出す ツールは様々はあるので要件に合わせて選ぼう！ • https://gogcli.sh/ とか • https://github.com/googleworkspace/cli とか • GoogleSpreadSheet APIはあるので、要件を満たさないなら作ろう ◦ Opusなら⽚⼿間Vibe-Codingでいい感じになる • アサインではMCPを作っています ◦ 「シートの新規作成」とか細かい機能をケアしている
13. • claspというGASをローカル開発するためのツールが昔からある ◦ TypeScriptやJavaScriptとして書いて、push/pull/log閲覧などなど ◦ ⻑らくメンテされていなかったが、AIの流れで最近またメンテされるように ◦ https://github.com/google/clasp • いちいちプロジェクトを作るのも⾯倒なので、claspベースでGASを 管理するためのテンプレートを作成した ◦ https://github.com/s-uchihori/gas-template ◦ vibes全開なので変なところもあるかも もっと複雑な処理をしたいならGASもAI駆動でやろう
14. 成果物例：求人票の投入管理（スプシ・GAS） （話はずれるけど、こういうことがAI駆動でできる事例として） スプシのシート構成やスクリプト部分をAI駆動で設計‧開発して作業⼯数 を削減しています。 1. 必要なデータを取り出す 2. 記載を正規化するなど諸々の加⼯（関数‧GAS） • 「⽉収を年収表記に揃える」とか 3. SQL⽂にする（関数）
15. ObsidianのBase機能を使っています。 • Baseとは？ ◦ ベースはコアプラグインの⼀つで、ノートのデータベースのようなビューを作成 できる ◦ ![[File.base]]という形式でObsidianの他のノート同様埋め込める ◦ 算術プロパティも使える（期⽇のn⽇前とか）→メンテいらない！ ◦ フィルタリング機能などもある ◦ https://obsidian.md/ja/help/bases • AIもCLI経由でアクセスできる！ ◦ base:query ◦ base:views 手元のTODOやドキュメントの管理などに表を使わない
16. 成果物例：アサイン公式Xのポスト内容の管理もBaseで ![[posts.base]]と書 くだけで ライブビューに なる！ 個別のノートにも ⾶べる！
17. 小括 それはテキストに書くのをやめよう。 • マークダウンは集計ツールじゃないよ！ • スプシやObsidian Baseを使うとマークダウンにできないことができ るよ！ • それらのツールにアクセスする⼿段をAIに渡そう！ ◦ CLI/MCP
18. 2. たまにはマークアップに帰ろう
19. 例えば、こういうときに困る...。 • ⻑⽂ドキュメントを意味のあるまとまりでタブに分けるとかできない • ⽂字やmermaidで簡単な図は書けるけど、ちょっと表現⼒が⾜りな い 用途によってはマークダウンは軽量すぎるかもしれない
20. ならば、たまには戻ろう。マークアップの世界へ タグを書くのが⾟くてマークダウン使っていたけど、AIがいるからマーク アップも書いてもらおう。 • HTMLならスタイルシートがついてきて装飾し放題 • draw.io（≒XML）なら、結構⾃由にオブジェクトを配置できる などなど。 ※ここからは個⼈的にホットなHTML/CSSで⼀枚絵を作る話をします。
21. だって、⼿放しでAIに任せると、ちょっとslopすぎるんだもん...。 • 意図が⾒えない多⾊使い • ダークモード前提の黒背景 • 多⽤されるドロップシャドウ • 謎のグラデーション などなど。 手放しに作らせればいいわけでもない
22. 規約で縛ろう、僕たちはエンジニアだから コーディング規約やlintで品質を担保するのと同じように、デザインも仕 組みで解決しよう（≒デザインシステム）。 とはいえ、プロダクトに使うデザインシステムでもないから、そこまで きっちり⼯数書けるわけにもいかない...どうすれば...。
23. ClaudeDesign ⼈の時代の資産（スライド資料など） を突っ込むと、いい感じにスタイル シートとトンマナーや基本的なレイア ウトを出⼒してくれる https://claude.ai/design
24. 中身チラ見せ
25. しかも、ClaudeCodeに渡せる
26. 成果物例：アサイン公式Xのコンテンツ
27. ちなみに、コンテンツ作成部分は全部AI駆動でやっています • HTML/CSS/JSだから、AIがコンテンツを読み書きし放題 ◦ CSS/JSでアニメーションも作れる！（動くと、ワクワクする） ◦ ローカルにコンテキストがあるので、コンテンツ作成はClaudeDesignでやらない ⽅がいい気がする • playwrightで動画を取る（webm出⼒） ◦ ヘッドレスで起動するから⾃分の作業の邪魔にならない • ffmpegで動画を加⼯ ◦ フレーム‧秒単位でスクリーンショットにして確認 ◦ 前後の不要部分をカット ◦ Xにポストできるようにgifやmp4などで出⼒
28. ちなみにその２：Fable 5とデザインの関係 画像の解釈⼒は上がっていそう。 “ビジョン。 Claude Fable 5 は、密度の⾼い技術画像、Web アプリケー ション、詳細なスクリーンショットを⼤幅に⾼い精度で解釈し、多くの 場合、より少ない出⼒トークンでこれを実現します。また、反転した画 像、ぼやけた画像、ノイズの多い画像を処理するために bash ツールやク ロップツールを使⽤するように訓練されています。” https://platform.claude.com/docs/ja/build-with-claude/prompt-engin eering/prompting-claude-fable-5
29. Opus 4.8は⼀貫したスタイル感覚をもっている、らしい。 こだわりがなければ、ClaudeDesignまで持ち出す必要はないかも。 “Claude Opus 4.8 has strong design instincts, with a consistent default house style: warm cream/off-white backgrounds (~#F4F1EA), serif display type (Georgia, Fraunces, Playfair), italic word-accents, and a terracotta/amber accent. ” https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/prompting-claude-opus-4-8 #design-and-frontend-defaults Opus 4.5/4.6は⼿放しだとAI-Slop作るから注意、らしい。 “Claude Opus 4.5 and Claude Opus 4.6 excel at building complex, real-world web applications with strong frontend design. However, without guidance, models can default to generic patterns that create what users call the "AI slop" aesthetic.” https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/claude-prompting-best-practices#f rontend-design ちなみにその３：Opusは？
30. 小括 たまにはマークアップに帰ろう。 • マークダウンは複雑な表現をするツールではない！ • ほっとくとAI-slopになりがちなので、規約で縛ろう • 規約はClaudeDesignでいい感じに作れるようになってきているよ
31. 振り返ると、 • マークダウンは「計算/集計に使うもの」ではない！ • マークダウンは「複雑な表現をするもの」ではない！ だから、⽤途に合わせて道具を使い分け、AIに道具の使い⽅を教えよう • スプシ • Obsidian Base • マークアップ 使うべき道具を使おう。なるべくAI駆動で
32. ご清聴ありがとうございました 「うちではこういうの使っているよ」「マークダウンにこだわっているよ」、 などなど、懇親会やXで教えてください！