動画URLから記事下書きまで約5分｜AIに「型」を教えて品質を固定する
インタビュー動画のURLを渡すだけで記事下書きが完成する仕組みを作り、2〜3時間の作業を約5分にしました。効いたのは自動化より型の事前定義で、過去記事4本の文体学習と採点表による自己採点・最大2回の自動リライトで品質を固定しています。
@ai-katsu-editorial·2026/7/15Claude CodeYouTube Data API資料作成・デザイン👁 10 · 👍 0動画をHTMLで書く｜Premiere Pro・Remotion・HyperFramesを全部試した結論
AIで動画を作る3方式を同一目的で比較し、HyperFramesを採用しました。約60秒の動画を縦横2本、HTMLを1行も書かずClaude Codeへの日本語指示だけで制作しています。8場面をAIが並列生成する挙動、未登場要素でレイアウトがずれる罠、字幕が自動同期しない前提までまとめています。
@ai-katsu-editorial·2026/7/8Claude CodeRemotion資料作成・デザイン👁 12 · 👍 0画像生成からコードまでAIで完結させたら｜Figma MCP経由のLP制作で見えた限界
「画像生成 → Figmaでデザイン → MCP経由でコード化」というワークフローを実際に回しました。動くものを見ながら認識合わせできる価値は確かにある一方、出力コードはベタ書きでレスポンシブは全く対応できていません。定型部分はFigmaを経由しない方が早い、という発見もまとめています。
@ai-katsu-editorial·2026/5/19Claude CodeFigma資料作成・デザイン👁 2 · 👍 0AIくさいスライドを卒業する｜画像生成にデザインカンプを作らせる分業設計
PPTX生成エンジン単体ではAIらしいシンプルなデザインに寄る、という課題に対し、画像生成モデルに「視覚的な正解例」を先に作らせる分業を検討しました。最大の関門は画像から編集可能なPPTXへ戻す工程で、4ルートを固定した評価軸で比較する設計にしています。
@ai-katsu-editorial·2026/5/6OpenAI APIFigma資料作成・デザイン👁 5 · 👍 0スライド構成の「型」をAIに持たせる｜パターン辞書スキルと生成スキルの分業
生成ツールは形式を出せてもテーマ別の鉄則を持っていない、という課題に対し、スライド構成のパターン辞書を自作スキルにして生成は既存スキルへ委譲する設計を試しました。依頼ワード逆引きによる辞書の引き方、スキル発動率を上げるコツ、外部情報源を参照する際の著作権上の線引きまでまとめています。
@ai-katsu-editorial·2026/5/6Claude Code資料作成・デザイン👁 5 · 👍 0Remotionで口パク動画を作る｜立ち絵1枚から自動生成する全工程
キャラクターの口パク動画を、立ち絵1枚から作る手順をまとめました。核心は音声解析でフレームごとの開閉を0/1配列に還元すること。あとはフレーム番号で引いて画像を差し替えるだけになります。表情差分4枚の作り方と、品質を左右する要素も解説します。
@ai-katsu-editorial·2026/4/28ImagenRemotion資料作成・デザイン👁 16 · 👍 0AIにアーキテクチャ図を描かせる｜python-pptxで70点精度を出す制約設計
DBシリンダ・太矢印・クラウドアイコンを含むPowerPointのアーキテクチャ図を、AIエージェントで自動生成するための設計をまとめました。精度を決めるのは「Do's and Don'tsの明示」と「EMU座標のゾーン定義」。AIに座標を計算させず参照させる仕組みと、DESIGN.md／SKILL.mdの三層構造を解説しています。
@ai-katsu-editorial·2026/4/20Claude CodeGoogle Stitch資料作成・デザイン👁 6 · 👍 0AIでスライドを作るならどのルートか｜Claude Design・PowerPoint・Marpの使い分け
2026年4月17日にリリースされたClaude Designを軸に、法人向けスライドとシステム解説図の作成にどのツールが適しているかを整理しました。Figmaの代替ではなくラピッドプロトタイピング用途という位置づけ、PPTX直接エクスポートとデザインシステム登録の価値、そして品質を上げる「型・ルール・禁則」の3層プロンプト設計をまとめています。
@ai-katsu-editorial·2026/4/20ClaudeMarp資料作成・デザイン👁 4 · 👍 0AIは動画を「見ずに読む」｜Video Useが音声トランスクリプトで編集を自動化する仕組み
Claude Codeのスキルとして動作する動画編集自動化ツール「Video Use」を調査しました。LLMは映像を直接見ず、単語レベルタイムスタンプ付きの音声トランスクリプトで「読む」設計。フィラー除去・字幕焼き込み・カラグレを自然言語で指示でき、レンダリング後に最大3回まで自己修正する検証ループを備えています。
@ai-katsu-editorial·2026/4/20Claude CodeElevenLabs資料作成・デザイン👁 6 · 👍 0Claude Design Toolでどこまでできるか｜V0の代替として十分、ただし本番投入には手が要る
リリース当日にClaude Design Toolを検証しました。短いプロンプトからヒーローレイアウト5種×カラースキーム5種の25通りを一度に生成。自然言語で慣性スクロールやパララックスを詰めていける対話体験と、コードがベタ書きで出力されるという実用上の課題をまとめています。
@ai-katsu-editorial·2026/4/18ClaudeFigma資料作成・デザイン👁 2 · 👍 0コードで動画を作る｜Remotionで解説動画を量産する仕組みと「何を作るか」の基準値
プログラミングで動画を生成できるRemotionを使い、テロップ・背景等の基本コンポーネントと30秒〜3分の解説用テンプレートを構築しました。あわせて動画の「レッスン化（教材化）」の基準値を策定し、どの情報を動画にするかを数値で判断できる状態にしています。MINIMAX APIによるクローン音声の合成も検証中です。
@ai-katsu-editorial·2026/1/10Remotion資料作成・デザイン👁 4 · 👍 0Figma→Webflowインポートで横並びが崩れる｜Auto LayoutとFlexboxの整合性という壁
Figmaで作成したデザインをWebflowへインポートし、コーディングなしでサイト公開するフローを検証しました。プラグイン利用時に横並び要素が縦並びに変換される不具合が発生。FigmaのAuto LayoutとWebflowのFlexbox構造定義の整合性が原因と見られ、手動修正の工数が大きいため保留とした判断をまとめています。
@ai-katsu-editorial·2025/10/2Figma資料作成・デザイン👁 1 · 👍 0Webflow AIでサイトを生成する｜インタラクション実装の強みと、修正が煩雑という弱点
Webflow AIのSite Builderが既存の制作ワークフローを代替できるかを検証しました。ポン出しの品質は高くGSAP連携やコードエクスポートにも対応、特にインタラクションをノーコードで組める点はエンジニアにも効果大。一方で修正にはWebflow固有の知識が必須なため、修正回数自体を減らす「多段階指示法」に至った経緯をまとめています。
@ai-katsu-editorial·2025/9/22GeminiWebflow資料作成・デザイン👁 1 · 👍 0まじん式プロンプトでスライドを自動生成する｜無料で作れる範囲と、向かない資料
GASとGeminiでGoogleスライドを自動生成する「まじん式プロンプト」の実用性を検証しました。DeepResearchで構造化した情報をソースにすれば、有料ツールなしで高品質な構成のスライドが作成可能。一方でデザインは白背景にテキストのみに限定されるため、「構成案の視覚化」と位置づけるハイブリッド運用に至った経緯をまとめています。
@ai-katsu-editorial·2025/9/19GeminiGoogle Apps Script資料作成・デザイン👁 5 · 👍 0Gemini CanvasとStitchでUIを作る｜デザインと実装のギャップを埋めるのはどちらか
GeminiのCanvas機能とGoogleの実験的ツールStitchを、ラピッドプロトタイピング用途で検証しました。StitchはHTML/Tailwind CSS/JSXを即時エクスポートでき実装への橋渡しに強い一方、Canvasはコピペを省くエディタとして優秀。プレビューの制約と、実装環境へ引き継ぐフローの標準化をまとめています。
@ai-katsu-editorial·2025/9/18GeminiGoogle Stitch資料作成・デザイン👁 6 · 👍 0Kombaiでデザインをコードに変換する｜v0を上回る再現度と、実プロジェクトで残る手作業
Figmaデザインをコードに変換するKombai（VSCode/Cursor拡張）を検証しました。デザイン再現度はv0を上回った一方、実プロジェクトへの書き出しではNext.jsやTailwindの設定ファイルが不足し手動調整が必須に。「デザインの骨組みを高速生成するツール」として割り切る現時点の使い方をまとめています。
@ai-katsu-editorial·2025/8/2Kombai資料作成・デザイン👁 3 · 👍 0生成AIでUIデザインはどこまで作れるか｜v0を検証して分かった限界と「共作」という最適解
v0（Vercel）などのUI生成AIで、非エンジニアでもプロ級のデザインが作れるかを検証しました。基本的なレイアウトは高速に生成できる一方、ブランド独自の質感やインタラクティブ要素には限界があり、「AIっぽいデザイン」からの脱却が課題に。丸投げでも自作でもない「共作」スタイルが現時点の最適解という結論に至った経緯をまとめています。
@ai-katsu-editorial·2025/7/19Vercel資料作成・デザイン👁 3 · 👍 0クラス名を指定するだけでスライドが組める｜Marpで背景ごとの体裁を事前定義する
企業向けスライドで背景ごとに文字サイズや位置を毎回調整する手間を、事前定義で解消する仕組みを作りました。Markdownベースのため大量作成・一括修正・AIによる生成に強く、PowerPoint出力後の微調整も可能です。「毎回同じ判断をしているなら定義に落とせる」という設計の考え方をまとめています。
@ai-katsu-editorial·2025/4/1Marp資料作成・デザイン👁 3 · 👍 0