Stop Struggling with AI Slide Design: Use Japan's Digital Agency System

@tetumemo
日本語2026年9月20日
165K
118
14
1
359

TL;DR

The author details a workflow for generating professional slides using AI by adhering to the Japanese Digital Agency's design system (DADS) and employing a custom browser tool for precise visual corrections, eliminating common AI design inconsistencies.

白状すると、わたしは昔から「デザインのセンス」という言葉が大嫌いだった。

あれは2016年、ビジネススクールに通っていた頃のことだ。 授業の最終課題で、わたしは丸一日、計8時間近くをかけてスライドを作っていた。膨大な市場データを集め、事例を綺麗に整理し、1から10まで完璧に網羅した自信満々の資料だった。

だが、講師の言葉が頭をよぎった。 「それは情報を整理しただけで、分析麻痺症候群に陥っていないか? で、何がストーリーラインなんだ?」

頭を殴られたような衝撃だった。18枚のスライドは、データを綺麗に並べただけの「抜け落ちた紙芝居」でしかなかったのだ。 深夜0時、わたしは胃をキリキリさせながら、8時間かけた資料の「3分の2」をゴミ箱へ叩き込んだ。

残されたわずかな時間で、「イシュー(問い)に答えるために必要なこと」だけを残し、1枚に1つのメッセージだけを極限まで研ぎ澄ませた。 翌日の発表。削ぎ落としたスライドは、これまでにない称賛と具体的なフィードバックをもたらしてくれた。

完璧を目指して情報を詰め込むのをやめ、基準を持って「捨てる」こと。 このときの爽快な体験が、わたしの骨の髄に刻まれた原点だった。

テツメモ|AI図解×検証|Newsletter - inline image

……それなのに、だ。

時は流れて2026年。AIが進化し、誰もが「プロンプト一発でスライド完成!」と叫ぶ時代になった。 わたしは再び、あの2016年と同じ悪夢の中にいた。

「文章をコピーする」 「AIの画面に貼り付ける」 「『いい感じのスライドにして』と頼む」 「AIが気を利かせて虹色グラデーションのサイバー空間を出してくる」 「文字サイズが8種類くらい混ざって情報が氾濫している」 「『そうじゃない、3枚目の右上のあの四角の中の数字を…』と必死に長文で修正依頼を書く」 「直ったと思ったら別の箇所のレイアウトが吹き飛ぶ」

……なんで人間が、最新のAIを相手にまた「分析麻痺とデザインの泥沼」を再現しているのか。 完全におかしい。我ながらどうかしている。

AIに自由なセンスでスライドを作らせると、人間は深夜にまた頭を抱えることになる。 わたしたちが仕事で欲しいのは、AIの気まぐれなアート作品じゃない。「1枚で主張が伝わり、明日通る企画書」なのだ。

この不毛な格闘を完全に終わらせるためにわたしが導入したのが、デジタル庁のデザインシステム(DADS)と、画像を囲むだけの「赤枠レビュー盤」だった。

「センス」をAIに求めるのをやめ、国の「設計図(DESIGN.md)」を渡す

テツメモ|AI図解×検証|Newsletter - inline image

AIに「いい感じに作って」と頼むのは、建築士に「いい感じの家を建てて」と丸投げするようなものだ。 ある日はログハウスが建ち、次の日は超高層ビルが建つ。AIを責めるのは筋違いで、設計図を渡していない人間が悪い。

わたしは仕事現場でも、AI(GeminiやClaude)にUIのモックを作らせる時は、事前に必ず「DESIGN.md」というデザイン原則のルールブックを渡すようにしている。これを1枚挟むだけで、出来上がってくる画面のブレは最小限に抑えられる。

スライドもまったく同じだった。 そこで目をつけたのが、デジタル庁が公開している「デジタル庁デザインシステム(DADS)」だ。

テツメモ|AI図解×検証|Newsletter - inline image

「国のデザインシステムなんて、お堅くて地味なんじゃないの?」とあなたは思うかもしれない。

とんでもない。ビジネスの現場で使う資料として、これ以上ないほど「美しい引き算」が完成されている。

清潔感があって、誰が見ても迷わず、情報がまっすぐ頭に入ってくる。 しかも最高なのは、デジタル庁がこのガイドラインを、AIがもっとも理解しやすい「Markdown形式のテキスト」で配布してくれていることだ。

CodexやClaude Codeに、このMarkdownファイルをポンと渡してこう伝える。 「このデジタル庁の基準に従って、原稿をスライドに組んで」

これだけで、AIが勝手に張り切ってネオンカラーを散りばめる事故は永久にゼロになった。

https://x.com/tetumemo/status/2096924906604958133

文字5段階、余白3段階。ルールが「削ぎ落とす勇気」をくれる

テツメモ|AI図解×検証|Newsletter - inline image

デジタル庁の基準を渡して何が起きたか。 かつて深夜0時にわたしが泣く泣く手作業でやった「削ぎ落とし」を、AIが規約として機械的に実行してくれるようになったのだ。

テツメモ|AI図解×検証|Newsletter - inline image
テツメモ|AI図解×検証|Newsletter - inline image
テツメモ|AI図解×検証|Newsletter - inline image

文字の大きさは、以下の5段階だけに厳格に固定した。

  • 表紙タイトル:48px
  • 大見出し:36px
  • 小見出し:24px
  • 本文:20px
  • 脚注・注釈:14px

「ちょっとここを目立たせたいから28px」みたいな、その場の思いつきは一切許さない。 見出しで主張を掴み、本文で理由を読み、必要なら脚注を見る。この視線誘導が全スライドで完全に固定される。

余白も「8px・24px・64px」の3種類しか使わない。 「なんとなく右下が寂しいから」と意味のないイラストを埋める悪癖をやめ、余白を「情報の区切り」として機能させる。

さらに強烈だったのが「色のコントラスト比」の判定だった。

わたしが普段の発信で大切にしているブランドカラーに、鮮やかな黄色(#fbd212)がある。 愛着のあるこの色でスライドを作らせてみたところ、デザインシステムの検査プログラムにバッサリと弾かれた。

白い背景に対するコントラスト比が「1.47:1」。 アクセシビリティの基準である「文字は4.5:1以上」「図形は3.0:1以上」に遠く及ばなかったのだ。

「わたしのシンボルカラーなのに……!」と一瞬ショックを受けたが、そりゃそうだ。プロジェクターや粗いディスプレイで薄い黄色の文字を見せられたら、会議の参加者は目を細めて疲弊するだけだ。 黄色は表紙の帯などの装飾に回し、読ませる文字には濃い青(#155585、コントラスト比7.87:1)を適用した。

自分の主観や好みを、客観的な「数値」で正してくれる。 これこそが、仕事の道具としてAIを使う最大の恩恵だった。

「3枚目の右上の…」と作文する苦痛を、指差しの赤枠が消し去った

テツメモ|AI図解×検証|Newsletter - inline image

骨組みがブレなくなっても、まだ現場には巨大なイライラが潜んでいた。 それが「修正の指示出し」だ。

AIが出してきたスライドを見て、「ここの数字をもう少し強調したい」「この補足を2行に分けたい」と思った瞬間、あの面倒な作業が始まる。

「3枚目のスライドの、右側のカードの中にある『売上60案』っていう見出しの下に書いてある小さい数字をさ……」

……書いていて発狂しそうになる。 直したい場所は目の前に見えているのに、なぜ人間がその「座標」を日本語で作文しなければならないのか。しかも必死に打った説明をAIが誤読して、まったく関係ない左上の見出しを書き換えたりする。「そこじゃない!」と画面に向かって叫ぶ時間ほど虚しいものはない。

この苦痛を根絶するために作ったのが、ブラウザで動く「赤枠レビュー盤」だ。

テツメモ|AI図解×検証|Newsletter - inline image

使い方は拍子抜けするほどシンプルだ。 スライド画像をブラウザに放り込み、直したい場所をマウスや指で「クイッ」と赤枠で囲む。 そして横の入力欄に「文字を大きく」「2行に分ける」と一言だけ書いてボタンを押す。

すると、AIへの修正指示が瞬時に生成される。

スライド3の [x: 620, y: 340, w: 200, h: 80] の領域:文字を大きく

これをCodexやClaude Codeに貼り付けるだけ。 AIは画像と座標を見て、「了解しました」とミリ単位でそこだけを直してくれる。

人間は本来、隣にいる同僚に「ここ直して」と指を差すように指示を出したいのだ。 言葉で場所を説明する作文タイムは、この赤枠レビュー盤によってこの世から消滅した。

https://x.com/tetumemo/status/2096167671910076617

楽譜(設計図)が合格でも、演奏(実物)を見るまで信じるな

テツメモ|AI図解×検証|Newsletter - inline image

だが、ここで最大の落とし穴が待っていた。

ブラウザで見るHTMLスライドだけでなく、ビジネスの現場でそのまま配れるようにPowerPoint(.pptx)形式へ自動変換する仕組みを構築したときのことだ。 文字のはみ出しや色のコントラストを機械的に判定する自動検査プログラムを走らせると、結果は見事に「ALL GREEN(全項目合格)」。

「よし、完璧だ! 配布準備完了!」 意気揚々と、WindowsのPowerPointで実ファイルを開いた瞬間、息が止まった。

……見事に崩れていた。それも5箇所も。

  1. 出典の3行目が枠の下でバッサリ消えている
  2. 数字カードの見出しが「実績 実績」と2回連呼されている
  3. 表の高さが足りず、下の注記と完全にドッキング事故を起こしている
  4. まとめの行と注意書きが重なって読めない
  5. ドーナツグラフの中央で「全60案 60案」と謎の重複

「全項目合格って言ったよな!? なんで重なってんだよ!」

原因を突き止めて、深く反省した。 プログラムが検査していたのは「ファイルを生成した時点の枠の高さ」だったのだ。 しかし、実際にPowerPointアプリがファイルを開いた瞬間、文字のフォントや折り返しによって枠が下へニュキッと伸びていた。

つまり、設計図の段階では重なっていなかったものが、アプリが描画した実物では衝突していたのだ。

わたしはかつて、リール動画のAI生成を研究していた時にもまったく同じ経験をしていた。 どれだけ完璧なプロンプト(楽譜)を書いても、実際にAIが生成した動画(演奏)を見ると、人物がマスクを貫通して料理を食べるような致命的なバグが平気で起きる。

「楽譜(設計図)」のテストと、「演奏(実物)」の品質管理(QC)は、絶対に切り離して運用しなければならない。

AIがどれだけ「合格です!」と胸を張っても、人間が最後の実物を自分の目で見届ける関所を無くしてはならないのだ。 わたしは慌てて文字が伸びた後の高さを計算するロジックへ修正し、実際にPowerPointをバックグラウンドで起動してスライド全ページを画像化し、人間の目で最終検収するステップをキットに組み込んだ。

泥臭い検証をくぐり抜けていない自動化は、現場ではただの時限爆弾でしかない。

テツメモ|AI図解×検証|Newsletter - inline image

翼竜を飛ばしてトークンを溶かしたわたしが、最後に行き着いた場所

テツメモ|AI図解×検証|Newsletter - inline image

このスライド制作キットを作る直前、わたしはOpenAIの最新モデル「GPT-6 Astra」の凄まじい進化に熱狂していた。

海外では家の間取りから歩ける3D空間を構築し、家具やコーヒーマシンまで動かす異次元のデモが流れていた。 わたしも興奮を抑えきれず、CodexのAstraに「WebGLでパンツァードラグーン風の、遺跡上空を翼竜で進むシネマティック・シューティングゲームを作って!」と無茶振りを投げてみた。

https://x.com/tetumemo/status/2096195768726216992

https://x.com/tetumemo/status/2096005966789759350

結果、わずか20分ほどでブラウザで本当に遊べる3Dゲームが出てきた。凄まじい衝撃と感動だった。 ……だがその代償として、利用枠の上限に一瞬で激突し、貴重なリセット券を溶かして利用量を「200%」消費していた。

ゲームを遊んだあと、静まり返った部屋で冷たいお茶を飲みながら、わたしは我に返った。

「……で、わたしは明日からの仕事で、毎日翼竜を飛ばすのだろうか?」

絶対に飛ばさない。 わたしが明日からの現場で本当にやりたいのは、上司やクライアントに刺さる提案資料をサクッと作ることだし、夜遅くまでの微調整から解放されることだ。

AIの派手な進化に目を奪われて、トークンを燃やすこと自体が目的になってはいけない。 最先端のモデルの力を借りながらも、手元にはデジタル庁の基準という「地に足の着いた型」を置き、日々の仕事を確実に前に進める道具として手なずける。

これこそが、非エンジニアのわたし達がAI時代を生き抜くための本当のリアリズムなのだと思う。

削ぎ落とす勇気を、AIと一緒に持つ

テツメモ|AI図解×検証|Newsletter - inline image

2016年の深夜0時、8時間かけたスライドの3分の2をゴミ箱に捨てた時、わたしは孤独だった。 何が正解かも分からず、ただ「これじゃ伝わらない」という直感だけで震えながらデリートキーを押していた。

だが今は違う。

  • 考える役割(人間 × AI):原稿を用意し、各スライドのメッセージ(タイトル列)を研ぎ澄ます
  • 整える役割(デジタル庁デザインシステム × 生成Skills):文字サイズ・余白・色の国の規約に従い、ブレないスライドを瞬時に組む
  • 確かめる役割(赤枠レビュー盤 × 人間の目):実物を眺め、直したい場所を指差しで指示し、最後の品質を人間が保証する

資料づくりの本質は、派手な飾り付けを競うことではない。 相手の脳内にクリアなメッセージを届けるために、ノイズを削ぎ落とすことだ。

そのための基準は、もうデジタル庁が用意してくれている。 直したい場所を伝えるための赤枠も、手元にある。

もう、AIの気まぐれなデザインに振り回される必要も、深夜にスライドの文字サイズをちまちま直して徹夜する必要もない。 画面の前で息を切らしていた過去の自分に、胸を張ってこの道具を手渡してやりたい。

※今回紹介した「デジタル庁デザインシステム準拠スライドSkillsキット(dads-slide-deck-v1)」や赤枠レビュー盤、PowerPoint化スクリプトの全文データは、以下の元記事にて詳しく解説・配布しています。

🔗 GPT-6 Astraの実例から、仕事の資料づくりへ。デジタル庁のデザインシステムでスライドを作り、赤枠で修正を依頼→パワポ化までできるSkillsキットを配布

📝 登録者6,000人以上! 毎週AIに特化した実体験型ニュースレターを発行しています。 無料で読めます ↓

https://x.com/tetumemo/status/2077584202950910112

YouMindで再制作

Turn one viral article into a full content workflow

Collect the source, decode the pattern, create assets, draft the story, and distribute from one AI workspace.

Explore YouMind
クリエイターのために

あなたの Markdown をきれいな 𝕏 記事に

自分の長文を投稿するとき、画像・表・コードブロックを 𝕏 向けに整形するのは手間がかかります。YouMind は Markdown 全体を、そのまま投稿できるきれいな 𝕏 記事に変換します。

Markdown → 𝕏 を試す

解読すべきパターンをもっと

最近のバイラル記事

バイラル記事をもっと見る