入会金0円／契約期間の縛りなし
セミナー開催レポートブログ
AIで作ったWebサイトが「なんとなく素人っぽい」のは、AIのセンスが足りないからではなく、デザインの仕様書がないからです。色・フォント・ボタンなどのルールを「DESIGN.md」というテキストファイルに数値で書き、CLAUDE.mdに「必ずDESIGN.mdを参照する」と1回書いておきます。それだけで、Claude Codeは「LPを作って」という短い指示でも、毎回同じルールに沿ったデザインを出せます。ただし、DESIGN.mdで整うのはおよそ9割までで、ありきたりではない仕上がりにするには、別の指示を足す必要があるそうです。
2026年4月10日のProcevoのセミナーでは、講師のKawaiさんが「デザインはセンスではなく科学」という考え方から、DESIGN.mdとCLAUDE.mdの書き方、数値での直し方、仕上げのコツまでを解説しました。同じ文章のサイトをDESIGN.mdだけ変えて4つ作ったデモページも紹介されました。
講座の出発点は「DESIGN IS SCIENCE（デザインは科学）」という考え方です。良いデザインには再現できる理由があり、次の4つの法則で説明できます。
2026年11月時点のW3CのWCAG 2.2（https://www.w3.org/TR/WCAG22/ ）では、文字と背景のコントラスト比はAAで4.5:1以上（大きい文字は3:1以上）、AAAで7:1以上と定められています。どれも数値やルールで書けるため、AIにもそのまま伝えられます。
指示があいまいだと、AIは学習したデータの「統計的な平均」に近いものを選びます。講師の資料では、設計書がないとAIは統計的に最も無難なデザインを出し、「誰のものでもないデザイン」になると説明されていました。解決策は、デザインの要件を先に決めてAIに渡すことです。
講師の資料では、Business Insider Japanの記事（2026年2月16日、https://www.businessinsider.jp/article/2602-agentic-engineering-andrej-karpathy-vibe-coding/ ）も紹介されていました。記事によると、「バイブコーディング」という言葉を生み出したアンドレイ・カーパシー氏は、次の大きな潮流は「エージェントエンジニアリング」だと語っています。講座では、AIにコードを書かせるだけでなく、エージェントに仕事を任せる時代だという流れで話が進んだそうです。
DESIGN.mdは、AIが読むデザインの仕様書です。Figmaのようなデザインツールとは違い、ただのテキストファイル（Markdown）です。講師の資料によると、Claude・Gemini・Cursorのどれでも読めて、Gitでバージョン管理もできます。Figmaは人が見るもので、DESIGN.mdはAIが直接読むもの、という違いだそうです。Googleが提唱した形式だとも紹介されていました。
デザインを別のツールで作ってからサイトにする方法は、「StitchでWebサイト制作｜Google AntigravityとNetlifyで公開」で扱っています。
DESIGN.mdは、3つの分類・9つのセクションで構成します。講師の資料では「数値と固有名詞だけで書く設計書」と説明されていました。
最初から9つ全部を書く必要はありません。02 カラーパレット・03 タイポグラフィ・04 コンポーネント（色・フォント・ボタン）の3つだけでも、デザインの品質は大きく上がるそうです。講座の進行表では、配られたテンプレートの色・フォント・余白を5分で書くワークが入っていたそうです。
講座で使われたDESIGN.mdでは、色に名前と役割をつけ、具体的なカラーコードで指定しています。
DESIGN.mdの最初の下書きは、AppleのデザインガイドラインやHCD（人間中心設計）の研究をもとに、AIに作らせることもできるそうです。
色選びには、講師が公開しているカラーパレットのツールが紹介されました。メインカラーを1つ選ぶと、その色の濃淡と相性の良い組み合わせが並び、組み合わせごとにWCAGの基準に照らした点数が出ます。
このツールは、講師の資料のスライドから開ける「Color Maker」（https://kawai-color.pages.dev/ ）です。2026年11月時点のページでは、Main・Accentの色とBaseの色のコントラスト比から点数とAA・AAAの判定を出し、選んだ配色をマークダウンでコピーできます。基準はWCAG 2.2のAA 4.5:1・AAA 7:1と書かれています。画面のつくりは講座の時点と変わっています。
DESIGN.mdを作っても、AIが読まなければ意味がありません。そこで、Claude Codeが毎回最初に読むCLAUDE.mdに、次のルールを書いておきます。
## デザインルール
UIを実装する際は必ずDESIGN.mdを参照すること
DESIGN.mdにない色・フォントを独自に追加しないこと設定は1回で済み、以後のClaude Codeの作業でずっと読まれます。2行目があることで、AIが勝手に色やフォントを足してデザインが崩れるのを防げます。講座で配られた文例では、さらに、DESIGN.mdが無いときは作業を止めて確認すること、定義されていない角丸や影を使わないこと、などの制約も細かく書かれていました。
目的やブランドをファイルに書いておき、短い指示で作業させる考え方は、同じくKawaiさんが講師の回でも扱っています。詳しくは「Claude Codeのフォルダ構成の決め方｜plan.mdとbrand.mdで指示を6文字に」で紹介しています。
CLAUDE.mdとDESIGN.mdは同じフォルダに置きます。「LPを作って」と頼むと、Claude CodeはCLAUDE.mdを読み、そこに書かれたとおりDESIGN.mdも読んでから、index.htmlとstyle.cssでサイトを作ります。DESIGN.mdに書いた色・フォント・角丸などが、そのままサイトに引き継がれます。
講師の資料では、DESIGN.mdがないと毎回200字ほどのプロンプトを書くことになるのに対し、あれば「LPを作って」の6文字で済むと比べていました。同じDESIGN.mdを使えば、お問い合わせや料金などの別のページも同じトーンで作れるそうです。
講座では、同じ文章のサイトを、DESIGN.mdだけ変えて4パターン作ったデモページが紹介されました。ダーク、シンプル、ナチュラル、ポップの4つで、指示文は同じでも見た目がまったく変わり、その違いはDESIGN.mdから生まれています。
写真からWebデザインの参考案を作る例は、「バイブコーディングの始め方｜写真からWebデザイン案を作るスキル実践」で紹介しています。
できあがったデザインを直すときは、「ボタンをもう少し大きく」のようなあいまいな言い方ではなく、数値で伝えます。
数値で伝えると、AIの解釈がぶれず、修正が一度で決まりやすくなります。決めた数値はDESIGN.mdにも書き足しておくと、次から同じ指示が要らなくなります。
講師の資料によると、デザインの一貫性はDESIGN.mdでおよそ90%まで作れます。残りの10%は、指示していない部分にAIの標準の判断が出るところです。ここを突破するために、デフォルトを避ける指示をCLAUDE.mdに書き足す方法が紹介されました。
あわせて、Anthropic公式のClaude Code向けプラグイン「Frontend Design」も紹介されました。2026年11月時点の公式ページ（https://claude.com/marketplace/plugins/frontend-design ）では、ありきたりなAI生成のデザインとは違う、作り込んだフロントエンドを作るためのプラグインと説明されています。決まりきったシステムフォントや紫のグラデーションなどの、よくある形を避けるように作られているとのことです。
講座の最後には、初めての人はテンプレートの数値を書き換えてClaude Codeでサイトを1つ作り、すでにプロジェクトがある人はそこにDESIGN.mdを追加して作り直してみる、という次の一歩が勧められました。
小文字でも動くそうです。CLAUDE.mdにそのファイル名をはっきり書いておきます。
使えます。フォントファイルをプロジェクトのフォルダに入れ、DESIGN.mdでそのフォントを使うと指定します。
場合によります。TailwindやReactを使う構成など、プロジェクトのつくりに合わせて決めます。
スキルは作業の手順（ワークフロー）で、DESIGN.mdはその作業中に読むルールです。スキルの中でDESIGN.mdを読ませる、という組み合わせ方ができます。
似たサイトにはなりにくいそうです。オリジナリティは、ブランドカラーや自分で撮った写真・素材から生まれるとのことです。テンプレートをもとにしても、色と素材を自分のものに変えれば独自のサイトになります。
pxで固定すると、画面の大きさによって崩れることがあります。rem、vw、cqwなどの相対的な単位を使うと、さまざまな画面でバランスを保てるとのことです。
アーカイブ動画はProcevoで見られます
プランは登録のあとに選べます
