ちょっと株式会社の KindBurger です！
本記事では、プロンプトだけでは表現しきれないデザイン原則を、デザインシステムを「コンテキスト」として与えることでどう改善できるのかを紹介します。
また、v0 にはサンプルのデザインシステムも用意されており、すぐに試すことができます 🎉
これを利用すれば、次のように一貫性のあるデザインが整ったサイトを簡単に生成できます。
v0 とは
ざっくりいうと 「アイデアを素早くかたちにできる」 生成 AI ツールです。
自然言語のプロンプトや画像、Figma ファイルなどから、
React / Next.js / Tailwind CSS / shadcn/ui といったモダンな技術スタックのコードを生成してくれます。
さらに、汎用的な AI ツールとは異なり、Vercel エコシステムに最適化されている点も大きな特徴です。
より詳しく知りたい方は、過去の発表資料を参照ください！
なぜデザインシステムなのか
プロンプトのみでサイトを生成すると、次のような問題に直面しがちです：
-
配色がいまいち再現されない
カラーを指定しているつもりでも、ボタンや背景の色が微妙にズレてしまう。 -
余白やレイアウトがバラバラ
サイト全体でルールが統一されず、まとまりのない印象になる。 -
部分的な指定では全体像が伝わらない
あるコンポーネントのデザインを与えても、そこに含まれる「配色」「余白の取り方」「インタラクションの一貫性」といった暗黙のルールまでは読み取れず、全体ではデザインがばらついてしまう。
ここで役立つのが、デザインシステムです！
タイポグラフィ、カラーパレット、インタラクション仕様などのデザイン原則をあらかじめ「コンテキスト」として共有することで、v0 が生成するサイト全体に一貫性を持たせることができます。
デザインシステムをコンテキストとして与える
サンプルから選んで始める
新しく始めるならオススメです！
v0 ではサンプルが用意されているので、ゼロから定義しなくてもすぐに利用できます 🎉
また、豊富なコンポーネントのプレビューで具体的な仕様を確認できます 🎉
せっかくなので、サンプルのデザインシステムを利用して EC サイトを生成してみました。
配色やレイアウトといったルールが適用され、全体でも統一感のあるデザインになっています :)
プロンプト
北欧輸入雑貨を取り扱う EC サイトを作ります。
まずは TOP ページだけ用意してください。
原則、指定したデザインシステムに従ってください。
買い物をしやすくするため、「視認性の高いレイアウト」「内容を直感的にイメージできる」「検索しやすい」を重視してください。
Tailwind から設定する
既存のプロジェクトがあるならばオススメです！
デザインシステムの定義を globals.css として与えてあげます。
「Import from CSS」から入力すると、プレビューで確認することができます。
Shadcn レジストリから配布する
shadcn/ui のコンポーネントをレジストリから配布して、プロジェクトに適用する方法もあるようです。
まだ十分に検証できていないのですが、独自の作りこんだデザインシステムを連携したい場合には適しているかもしれません。
レジストリでコンポーネントを一元管理できる考え方が面白く、今後試していきたいです。
A distribution system for code（公式ドキュメントより）
まとめ
プロンプトだけでサイトを生成すると、イメージ通りにデザイン生成することが難しい場合があります。
デザインシステムを「コンテキスト」として与えることで、生成される成果物に統一感を持たせることができます。
すぐに小さく始められます、ぜひ試してみてください！ 🎉
参考資料
ちょっと株式会社（chot-inc.com）のエンジニアブログです。 フロントエンドエンジニア募集中！ カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion