【神機能】Claude Designで「AIっぽくない」Webサイトを作る全手順
要約
[00:00]量産型AIデザインからの脱却：成功の鍵は「デザインシステム」の作成
単なるプロンプト入力ではなく、再利用可能なデザインシステムを基盤に据えることでブランドの統一感とプロのクオリティを実現するアプローチを提示しています。
[01:42]Claudeによる仕様書（Markdown形式プロンプト）の生成と基本設計
自分でプロンプトを書かず、Claudeに要件や動作・見た目を定義したMarkdown仕様書を作成させて初期UIを組み上げる手順を解説しています。
[06:03]Pinterestのインスピレーション画像から「デザインシステム」を自動構築
参考画像を読み込ませることで、従来何週間もかかっていたカラー・フォント・余白等の「デザインシステム」をわずか5分で自動生成する強力な機能を実演しています。
[11:34]ChatGPTでの高画質画像生成とパララックスアニメーションの実装
デザインシステムを適用してアニメーションを付与し、画像生成機能を持つChatGPTと連携してWebサイトのビジュアル精度をプロレベルへ引き上げています。
[17:21]「Claude Code」への展開と、メニュー・Instagram投稿などブランド素材の一元展開
構築したデザインシステムを共通利用し、Webサイトのみならず実店舗のメニュー表やSNS用カルーセル画像を短時間で統一感を持って大量生成する工程をまとめています。
【Aiwakからの視点】
本動画で示されたワークフローは、「AIに丸投げして出力結果をそのまま使う従来型のWeb生成」から「デザインシステムという共通言語（ガバナンス）を通じたプロクオリティのコントロール」への明確なパラダイムシフトを意味しています。
Claude Designの「デザインシステム自動生成機能」を核とし、画像生成（ChatGPT）とコーディング・実装（Claude Code）という各AIツールの長所を適切にパイプライン化する手法は、デザイナーやWeb制作陣が直面していた「AI特有の安っぽさ（量産型感）」や「ブランド表現の崩れ」を根本から解決する（Aiwak的観点における）極めて先進的で実効性の高い次世代クリエイティブ制作モデルと言えます。
