田口和裕の「ChatGPTの使い方！」 第49回

AIはデザイナーの代わりになる？　Claude Designを試してわかった実用度

Claude Codeへ渡せば、実装の一歩手前まで

　それでは、Claude Designで作ったページ案を、開発側で扱いやすいZIPに書き出して、実際にClaude Codeへ渡してみよう。

Claude DesignからClaude Codeへ渡すためのZIPファイルを生成した画面

　今回の例では、Claude Design側でClaude Code向けのZIPを作成した。中身は、実装時に読むREADME.mdと、プロトタイプのHTMLファイル。完成画像を渡すのではなく、画面案と実装メモをセットにしたパッケージとして受け渡せる。

README.md

　README.mdには、イベント告知ページの概要、デザインファイルの扱い、想定する実装先、画面構成、レイアウトや色、ナビゲーションの指定などがまとめられていた。たとえば「このHTML／JSXファイルはデザインリファレンスであり、そのまま本番投入するコードではない」といった注意も含まれている。

　Claude Codeは、Anthropicが提供する開発支援ツールだ。自然文で「このREADMEを読んで実装して」「このバグを直して」と指示すれば、コードの作成や修正を進めてくれる。ファイル単位ではなくフォルダごと読み込めるため、複数ファイルにまたがる作業も任せられる。ターミナルで動かすのが基本だが、VS CodeやJetBrainsの拡張、デスクトップアプリ、Webブラウザなどからも使える。

Claude CodeでREADME.mdを読ませ、既存ファイルに実装するよう指示

　Claude Code側では、ZIPを展開したフォルダを開き、「README.mdを読んで既存コードベースに実装して」と指示した。Claude CodeはREADME.mdを読み込み、既存ファイルを確認したうえで、必要な修正を進めた。実装したのは、title、SEO meta、OGP、Twitter Card、Schema.org、レスポンシブ対応などの項目だ。

Claude CodeがREADME.mdの要件に対して実装した内容を表で示した画面

　本格的なWebアプリ開発まで踏み込まなくても、Claude Designで作った画面案を、説明文だけでなくファイルとREADME.mdごと開発側へ渡せる。非エンジニアが頭の中の企画を「こんな感じです」と言葉だけで説明するより、見た目も構成も込みで共有できるほうが話が早い。

　Claude Designでページ案を作り、Claude Codeへ渡して必要な修正点をコード側で確認するところまで進めば、「こういうものを作りたい」という説明はかなり具体的になる。