入会金0円／契約期間の縛りなし
セミナー開催レポートブログ
Claude CodeやCodexに作業フォルダを開かせれば、Webサイト用の文章ファイルを作り、写真からデザインの参考案を出すところまで進められます。ただし、色・フォント・レイアウトの決まりが粗いと、AIっぽい見た目になりやすいと講師は話していました。9月15日の1日目は、その課題に備えるための操作とスキル作成を扱い、本番環境への公開はまだ行っていません。
2026年9月15日21時から、KEITOが3日連続のバイブコーディング・ハンズオンの初回を開催しました。配布フォルダをAIエージェントで開く練習から始め、サービス紹介文を編集し、青いクラゲの写真をもとに3種類のデザイン案を出すスキルを作りました。
初回の目的はWebサイトを一気に公開することではありません。ファイルを読む・書くAIエージェントの動きを確かめ、デザイン作業を繰り返すための手順をスキルとして残すことでした。
講師は冒頭で広告向けのLP（商品やサービスを紹介する1ページのサイト）やコーポレートサイトの完成イメージを見せました。初日に制作したのは、その完成形へ向かうための準備とデザイン案です。
当日はClaude CodeかCodexのどちらかを選びました。講師はデスクトップアプリで進め、ターミナルから起動するCLI（文字でコマンドを入力する操作画面）の手順も資料に載せています。
講師は有料プランに入っていないと相当厳しいと話していました。
配布資料を解凍したあと、参加者はそのフォルダをAIエージェントの作業場所として選びました。最初の依頼は現在のフォルダの場所と中にあるファイルを報告させるもの。ここで、AIが手元のファイルを読めることを確かめています。
KEITOはWebサイトも文章や画像などのファイルを組み合わせてできているため、ファイルの作成と編集を任せられることが制作につながる、と説明しました。フォルダ設計を詳しく扱う別の回は、Claude Codeのフォルダ構成の決め方｜plan.mdとbrand.mdで指示を6文字にです。
練習では架空のサービス紹介サイトに載せる文を作りました。材料のファイルを読み、見出しと紹介文をMarkdown（見出しなどを記号で表す文章ファイル）に保存します。次に見出し案を複数出させ、気に入った案だけを採用しました。
画面には見出しを選んで保存した結果も表示されました。変更範囲を指定する依頼なら、すでにある文章を残したまま修正できます。削除までAIに任せる設定については、講師も承認なしで進むリスクを説明していました。
文章を渡すだけでも、AIはHTMLやCSSなどのサイト用ファイルを作れます。一方で、色・フォント・レイアウトの決まりが粗いと、AIっぽい見た目になりやすいとKEITOは説明しました。デザインのルールと参考パターンを用意し、次の制作でも使える形にしておくことが、この回の着眼点でした。
当日の実演では、講師が用意していたスキルのデモとして、富士山近くのキャンプ場を題材にしたサンプルLPも表示しました。
スキルはAIに繰り返し使わせる作業の手順書です。サービス紹介サイトの掲載文を作るスキルを例に、いつ使うか、作業の手順、参考にする材料、確認する基準をまとめておく形が示されました。
Claude Codeのスキル資料とCodexのスキル資料にも、スキルの定義や作成方法が載っています（2026年11月時点）。講師は、名前と説明がスキルを呼び出す手掛かりになる、と強調していました。
実際に作ったのは、写真から配色・レイアウト・キャッチコピーの参考案を出す「Photo Design Pattern」スキルです。画面では青いクラゲの写真を渡し、水の色や光の印象をデザインの手掛かりにしました。
写真に写っていない価格や商品情報を、AIに決めつけさせないことも資料に記されていました。デザインを考える材料と、実際に掲載する事実は分けて扱います。
Claude側の作成画面では、スキル名・説明・本文に、写真から案を作るための指示を登録しました。Codexではスキル作成用の仕組みを呼び出し、同じ内容をAIに作らせる方法も紹介しています。
完成したスキルを呼び出し、写真を指定すると、AIが案を作り始めました。講師の環境で作られたスキルの内容も画面で確認しています。画面操作や作成方法は変わり得るため、再現する際は前述の公式資料も参照してください（2026年11月時点）。
同じクラゲの写真でも、写真の大きさ、余白、文字の置き方で印象が変わります。ブラウザでA・B・Cを切り替え、好みの案を選んでから直す流れでした。
参加者からは、3案が出ても思ったほどお洒落にならなかったという声もありました。KEITOは初日はスキル作成の練習であり、翌日にデザインシステムを作ると話していました。
生成した案のファイルが思わぬ場所に保存されることがあります。講師は生成結果のリンクからFinderやエクスプローラーで場所を確かめ、スキルの中に参考案を蓄積するよう保存先の指示を直しました。
保存場所が分かれば、別の写真で作った案も同じ場所に増やしていけます。後日「前に作ったC案の雰囲気で」と指定するための下準備です。ただし、AIの出力場所は指示どおりになっているか、実際のファイルで確認する必要があります。
1日目の最後に、KEITOは翌日のデザインシステム作成と、用意したデザインパターンを使う作業を予告しました。1日目は「AIでフォルダを扱う」「文章を編集する」「写真を使うスキルを作る」まで。サイト制作と公開を含む3日間の続きは、それぞれの回につながります。
2日目はデザインシステムの作り方｜Claude DesignとStyle Vaultでサイトを試作、3日目はバイブコーディングでサイト設計｜FigmaのワイヤーフレームとVercelテスト公開です。
できます。1日目はデスクトップアプリでフォルダを選び、日本語でAIに依頼するところから始めました。ただし、講師は有料プランに入っていないと相当厳しいと話していました。
両方は必要ありません。当日はどちらか一方を選び、配布フォルダを開いて練習しました。
していません。初日はAIエージェントの操作、文章ファイルの編集、写真からデザイン案を作るスキルが中心でした。
生成結果のリンクからFinderかエクスプローラーで場所を確認できます。講師は保存場所を見つけてから、次回以降も同じ場所に蓄積するようスキルを直していました。
選んだ案の色や余白、見出しを指定して直します。初日の案はスキル作成の練習でもあり、KEITOは翌日にデザインシステムを扱うと説明していました。
可能だと講師は答えました。ただし、保存先からスキルを呼び出せるよう設定する必要があり、当日はパソコン内に保存されたファイルを例に説明しています。
アーカイブ動画はProcevoで見られます
プランは登録のあとに選べます
