入会金0円／契約期間の縛りなし
セミナー開催レポートブログ
デザインシステムで色・文字・部品の基準を作り、Style Vaultの見本と組み合わせると、AIにWebサイトの試作を頼みやすくなります。ただし、基準を用意しただけでは情報の並べ方まで決まりません。2日目にできたのは画像入りのサンプルサイトまでで、レイアウトの整理と本番公開は翌日の作業として残りました。
2026年9月16日21時からのハンズオンでは、講師のKEITOがClaude DesignとCodexの二通りでデザインシステムを作る方法を案内。参加者と一緒に見本集を育て、質問からサイト試作まで進めるスキルを組みました。3日連続のうち、この回はデザインの基準を作る日です。
初日に準備したAIの作業環境を使い、2日目は「いつもの見た目」を再現できる資料と、それを使う制作スキルを作りました。進め方は3つです。
DESIGN.mdに記録する。
Webサイトの見た目は、ボタンや見出しなどの「部品」と、色や文字、余白の使い方を決める「ルール」の組み合わせです。この組み合わせを先に保存すれば、別のサイトや資料にも同じブランドの雰囲気を持ち込めるとKEITOは説明しました。
実演ではKEITOの会社のサイトから作ったデザインシステムを表示。青系の配色やボタンの形が一覧になり、それを使った別のWebページも見せていました。Claude Designの公式案内にも、資料や既存のデザインから色、文字、部品、レイアウトのパターンを取り出す説明があります（2026年11月時点）。
参加者の道具に合わせ、二通りの作り方が案内されました。どちらも参考にするサイトや画像をAIに渡すところから始まります。
Claude Designでは、デザインシステムを作る画面と、作成済みの一覧が映りました。完成まで時間がかかるため、許可の確認が出たら押しながら待つよう参加者に案内し、その間にStyle Vaultの説明へ進みました。
デザインシステムがブランドの基準なら、Style Vaultは表現の見本集です。当日の一覧には配色パターンが多数あり、サンプルサイトが付いたものは見た目を確認してから指示文をコピーできました。KEITOは、色や表現の違いをDESIGN.mdに残し、次の制作で呼び出す使い方を示しています。
DESIGN.mdとして記録する。
KEITOは青い画像を見本として渡し、新しいデザインの記録を実演しました。生成されたファイルには色、文字、レイアウト、動きの方針が書かれています。一覧には新しい項目が増えた一方、追加直後はサンプルサイトの画像がまだ反映されていませんでした。
Style Vaultは、一覧を眺めるだけでなく、色を指定して絞り込めます。気に入ったカードを開くと、サンプルサイトと色の組み合わせ、説明文がまとまっていました。講師は、その場で選んだ番号の指示文をコピーし、AIに画像を作らせて見本の使い方を確認しています。
ただし、当日の一覧にある全パターンが完成済みのWebサイトだったわけではありません。サンプルが付いていない項目にもデザインの指示はあり、必要ならAIに見本サイトを作らせる、という説明でした。
必要な資料を制作スキルにまとめて読み込ませ、毎回個別に指定する手間を省きました。スキルとは、AIに作業の順番と参照資料を渡すための手順書です。
DESIGN.mdで、今回使う表現を指定する。
画面では、Skill Creatorに渡す長い手順文も示されました。KEITOは完成したデザインシステムを書き出して添付し、Style Vaultを読む指示と、質問してから作る順番を一つにしています。
最初からサイトを作り始めず、用途や好みを質問するのが、この日の工夫でした。質問機能を使うと、選択肢から答えられます。講師の実演では、サイトの種類を尋ねる画面が出ていました。
DESIGN.mdとデザインシステムを参照する。
当日は、Claude CodeからOpenAIの画像生成を使う場合のAPIキー発行も扱いました。APIキーはサービスを呼び出すための秘密の文字列です。講師は、発行時に表示される文字列を保存し、画像生成に使う環境変数へ設定する流れを案内。API経由の利用は従量課金だと説明しています。
実演画面ではキーそのものを見せず、手順の資料を表示しました。文字列を公開ページや共有資料に載せず、利用量と上限を確認してから使うのが前提です。Codexを使う場合は追加の料金はかからないと、講師は案内していました。APIキーは.envに置き、不安ならsettings.jsonでClaudeには読ませず、スクリプトからだけ使う方法もあると案内されました。
KEITO自身の実演でも、作成したはずのスキルがスラッシュコマンドに出ない場面がありました。調べると、Codexのスキル用フォルダとは別の場所に保存されていたとのことです。「保存できた」というAIの返事だけで終わらせず、実際のフォルダを開いて場所を確かめていました。
対処は、保存先のフォルダをAIに示し、そこへ移動または保存し直すこと。参加者からも保存先について質問が出たため、Claude CodeとCodexではそれぞれのスキルフォルダを確認するよう案内しています。
講師の画面には、青系の画像を使ったサンプルサイトが表示されました。ヘッダー、見出し、画像、ボタンが並び、参加者からも完成した画面が共有されています。一方でKEITOは、自分の試作にはまだ寂しさがあると話しました。デザインのルールだけでは、各セクションに何を置き、どう並べるかが決まりきらないためです。
ワイヤーフレームは、色や装飾を決める前に、ページ内の情報と配置を整理する下書きです。翌日の回ではFigmaでこの下書きを作り、動きも加えて公開まで進める予定だと案内されました。前後の回はバイブコーディングの始め方｜写真からWebデザイン案を作るスキル実践とバイブコーディングでサイト設計｜FigmaのワイヤーフレームとVercelテスト公開です。
DESIGN.mdに追加して再利用した必要ありません。講師はClaude Designで作る方法と、Codexに配布スキルをセットして作る方法の二通りを案内しました。
作れます。KEITOは、参考サイトのほか、前日に配布した画像からもデザインシステムを作れると説明しています。
ありません。当日、配色パターンは多数ありましたが、サンプルサイトが付いた項目は一部で、ほかは指示文とデザインの記録を使う説明でした。
画像生成の設定を後回しにして進められます。講師は、Claude CodeからOpenAIの画像生成を使う人向けにキーの取得を案内し、費用をかけたくない場合は飛ばしてよいと話していました。
保存先を確かめます。実演でも別のフォルダに保存され、スラッシュコマンドに出なかったため、スキル用フォルダへ移す必要がありました。
公開していません。この日はサンプルサイトの試作までで、ワイヤーフレームによるレイアウト整理と公開は翌日の工程として案内されました。
アーカイブ動画はProcevoで見られます
プランは登録のあとに選べます
