Claude Codeで洗練された雑誌風スライドを自動生成

登壇資料のデザインに奪われる週末

カンファレンスの登壇が決まるたび、頭を抱えるのは「話す内容」よりも「見せ方」だったりする。PowerPointやKeynoteの真っ白なキャンバスは、エンジニアにとって自由すぎるのだ。少し気を抜けば箇条書きだらけの退屈なスライドになり、逆にデザインに凝り始めれば、Figmaのコンポーネント調整やフォント選びで貴重な週末が消し飛ぶ。

ここ数年で、プロンプト一つでスライドを作ってくれるAIサービスも数多く登場した。しかし、出力されるのはどれも「いかにもAIが作りました」と言わんばかりの、薄っぺらなストックフォトと単調なレイアウトの山。結局、細部が気に入らず手作業で手直しする羽目になる。私たちが本当に求めていたのは、無限の選択肢を与えてくれるツールではなく、「決してダサくならない」という確固たる制約を持った、専属のアートディレクターなのではないか。

自由を奪うことで得られる「Monocle」の美学

そんなデザインに対するモヤモヤを抱えていた折に見つけたのが、ターミナル上で動くAIエージェント「Claude Code」に新たな能力を与えるための、ある特異なリポジトリだ。

このツールが生成するのは、よくあるPDFやPPTXではない。ブラウザ上で横スクロールしてページをめくる、単一のHTMLファイルだ。特筆すべきは、そのビジュアルの基調が「電子雑誌 × 電子インク」に完全に振り切っている点である。イギリスのカルチャー誌『Monocle』の誌面をウェブに移植したかのような、セリフ体の巨大な見出しと計算された余白。そして、表紙(ヒーローエリア)でだけ密かにうねるWebGLの流体背景。技術的でありながら、どこかアナログな手触りを残している。

何より興味深いのは、作者が設計原則として「装飾よりも構造」「自由を与えるよりも美学を守ることが重要」と明言している点だ。用意された5つのカラーテーマ(インク、インディゴ、フォレスト、クラフト、デューン)は、ユーザー側でのHEX値のカスタマイズをあえて禁じている。エンジニアがやりがちな「とりあえず原色の青や赤を使って全体のトーンを台無しにする」事故を、システムレベルの制約で防いでいるのだ。

Claude Codeを専属のエディトリアルデザイナーにする

導入方法も、現代のAIエージェントの作法に則っていて心地よい。GUIの専用アプリをインストールするのではなく、Claude Codeのディレクトリに「Skill」として教え込むだけだ。

# Claude Codeのスキルディレクトリにcloneする
git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/magazine-web-ppt

# あとはClaude Codeを開き、こう指示するだけ
# 「AIプロダクトのデモ用に、インディゴのテーマで雑誌風のスライドを作って」

これだけで、Claudeは10種類のレイアウト(カバー、章立て、引用、Before/Afterの比較など)から内容に最適なものを選択し、指定されたテーマに沿った一枚のHTMLを生成し始める。ビルド環境もWebサーバーも不要。生成されたHTMLをブラウザで開くだけで、キーボードやスワイプで小気味よくめくれるスライドが完成する。

既存のアプローチとの決定的な違い

スライド作成における既存の選択肢と、今回のアプローチがどう違うのかを整理しておこう。

ツール・アプローチ 設計思想と特徴 適した用途
Marp / Markdownツール 論理構造の素早い視覚化。デザインは簡素で情報重視。 社内LT、技術情報の共有
一般的な生成AIサービス プロンプトからの全自動生成。汎用的な見栄え。 構成の壁打ち、ドラフト作成
本リポジトリ (Magazine Web PPT) タイポグラフィ重視。テーマ色やレイアウトを厳格に制限。 独自の世界観を出したい登壇、私的なピッチ

もちろん、このツールは万能ではない。大量のデータが詰まった巨大な表を載せたり、情報密度の高い社内研修用の資料を作ったりするのには全く向いていない。作者のREADMEにも「不適切な用途」として明確に記されている。

しかし、「自分だけの強いメッセージ」を伝えるためのピッチや、個人的な世界観を前面に出したいオフラインでの登壇においては、これ以上ない強力な武器になる。美しいフォントと余白さえあれば、語るべき言葉は自ずと際立つからだ。

選べないという美しさ

テクノロジーが進化し、あらゆるものを自由に生成・調整できるようになった時代だからこそ、「あえて選べないこと」がクリエイティビティの質を担保する。我々のデザインセンスの欠如を、AIの厳格なルールの枠組みで包み込むこのアプローチは、エージェント駆動開発が当たり前になるこれからの時代の、新しいUI/UXのひとつの解になるはずだ。

参考リポジトリ: op7418/guizang-ppt-skill

Photo by @felirbe on Unsplash

コメントする