DESIGN.mdがあれば素人でもWebサイトが作れる？生成AIとの連携活用術

こここ最近よく話題に上がるDESIGN.md。

古くは、エンジニア間でプロジェクト設計意図や図解を記録するために利用されていたドキュメントですが、生成AIの登場によって改めて仕様定義のフォーマットとして注目されています。

生成AIは便利な反面、同じ状態を保ったまま何かを追加生成していくのが苦手です。

いわゆるバラつきというやつですが、webサイトやアプリのデザインを行うにあたり、

画面ごとにボタンの形や色が微妙に違う
トンマナを合わせるのが難しい

など、AIで構成するハードルがありました。

その解決策の一つとして、Google Labsは「Google Stitch 2.0」を発表。

DESIGN.mdを「デザインシステムをMarkdown形式の自然言語で定義するための公式なファイルフォーマット」として再定義しました。

デザインを「DESIGN.md」として言語化する5つの手法

ちなみにDESIGN.mdはどんなものかというと、デザインをピクセルデータ（画像）のまま扱うのではなく、テキスト（Markdown）として構造化するフォーマット形式で、これを作っておくとエンジニアやAIとの連携効率が飛躍的に向上します。

現在、現実的な抽出手法は以下の5つです。

① スクリーンショットの「画像解析」（AIの視覚機能）

最も手軽な方法です。対象サイトのキャプチャをChatGPT（GPT-4o）やClaude 3.5 Sonnetに読み込ませ、「このサイトのカラーパレット、フォントサイズ、余白ルール、コンポーネントの特徴をDESIGN.md形式で抽出して」と指示します。

実際に検証してみました。

適当に用意したhtmlとcssを、web上にアップロードします。

そしてDESIGN.mdの抽出をプロンプトで依頼。

するとMarkdown形式で、DESIGN.mdが出力されるので、プロンプトで制作依頼をしてみました。

で、出力されたのが、

画像はさておき、かなり高い精度で表現されていることがわかります。

② ブラウザの「CSS Overview」機能からスタイルデータ抽出

Chromeデベロッパーツールの「CSS Overview」パネルを使用します。サイト内で使用されている全色、フォント、未使用の宣言を一覧化できるため、そのデータをコピーしてAIに整形させます。検証画面のメニュー（下の画像にある赤枠の部分）をクリックして、その他のツール→CSSの概要と選択すると、データのキャプチャーができます。

ただ、一括でテキスト出力できるわけではないので、こちらもスクショでAIに貼り付け。という形が一番かも。

③ Chrome拡張機能「CSS Peeper」からスタイルデータ抽出

「CSS Peeper」などの拡張機能でスタイルを抽出し、それをAIに渡してMarkdownへ変換します。

有料プランでないと全てのスタイルを見ることはできないので、どちらかというとすでに拡張機能を有料で使っている人用の手段ですね。

④ ソースコードからの直接抽出

GitHub等で公開されているCSS/SASSの変数定義ファイルから、直接DESIGN.mdを生成します。

Githubにアップロードしたファイルからrawデータ（生のコード）を引っ張り出します。

html(css)mの同様の方法で引っ張り出し、AIにファイルを読み込ませた後、DESIGN.mdの出力を依頼します。

出力されたファイルでサイトを構成してもらうと、

Rawデータだけあって、スタイルはきちんと反映されています。しかし、コンテンツの内容についてはメニューやフォーム項目が再現されてなかったりと、曖昧な部分が目立ちますね。

なぜ「DESIGN.md」が必要？3つのメリット

コンテンツ内容はさておき、デザインスタイルをドキュメント化することで、スタイルコーディングの手間を極限まで省くことができそうなことが分かりました。

ではデザインをドキュメント化することで、どんなメリットがあるか見てみましょう。

「共通言語」によるチームビルディング
複数人で制作にあたる際、DESIGN.mdが「絶対的なルール」として機能します。スタイルガイドをFigmaだけでなくテキストで持つことで、コードレビューの基準が明確になり、AIでの生成にも一役買ってくれます。
外注・業務委託時の「便利な指示書」
「このDESIGN.mdに従って実装してください」という一言で、デザインのトーン＆マナーの齟齬をゼロに近づけられます。
ベンチマークの解像度向上と現状把握
競合分析やリニューアル時に、感覚ではなく「数値と構造」で現状を把握できるため、意思決定のスピードが上がります。

以前はDESIGN.mdを手動で全て作成する必要がありましたが、AIで生成することでスタイルガイドの策定をかなり時短することができそうですね。

生成AIで利用する際の懸念とリスク

とはいえ便利な反面、向き合わないといけないのがDESIGN.md策定の際のリスクですね。

著作権・意匠権の侵害: デザイン定義を抽出することは、模倣を容易にします。あくまで「設計思想」を学ぶためのリサーチに留め、デッドコピーにならない倫理観が求められます。
動的要素の欠落: 静的なMarkdownでは、ホバーアニメーションやスクロール連動といった「体験」の細部を取りこぼすリスクがあります。
情報の形骸化: サイトが更新されてもDESIGN.mdが古いままでは意味がありません。

最近はなりすましサイトも生成AIを利用しているのか、本物と見分けがつかないほど精度が高くなってきています。こういったものが簡単にガイド化できてしまうのも一つのリスクといえます。

DESIGN.mdはAI時代の新しい共通言語になる

ここまで、DESIGN.mdの抽出手法やメリット、そして懸念点について検証してきました。

AIの進化により、デザインを「テキストで構造化」できるようになったことは、制作の効率化やチーム間の認識合わせにおいて非常に大きな武器となります。

一方で、簡単に他サイトのスタイルを抽出・再現できるからこそ、著作権などの法的リスクや倫理観への配慮がこれまで以上に求められます。

DESIGN.mdは、他者のデザインを単にコピーするためのツールではなく、自社のデザインシステムをAIやチームメンバーに正しく伝えるための「共通言語」です。

リスクを正しく理解した上で、これからの新しい制作フローとしてDESIGN.mdを取り入れてみてはいかがでしょうか。