【Claude 1つで完結】 Claude Design × Claude Codeで「かっこいい専用ツール」を作る
「かっこいい見た目や資料を作りたい」
「自分専用のサービスを画面付きで作ってみたい」
「Claude Codeで仕組みは作れるけど、画面の見た目がイマイチ」
そんな方に向けて、Claude DesignとClaude Codeを使って「自分専用のWebサービス」を、画面デザインから実装まで2時間で作りきるイベントを開催します。
Figmaも、別のデザインツールも、追加のサブスクも要りません。 あなたが今ご契約のClaude有料プラン1本で、デザインから実装まで一気通貫で完結します。
⚠️ このイベントはClaude有料版（Pro以上）が必須です。詳細は下記をご確認ください。
Claude Designとは？
Claude Designは、2026年にAnthropicがClaude有料プランに統合した、ビジュアル生成のための機能です。
テキストで指示するだけで、Webサービスの画面・ランディングページ・ダッシュボードのモックアップを生成できます。
これまでは「画面付きの自分専用サービス」を作ろうとすると、Figma等のデザインツールを覚えるか、デザイナーに発注するしかありませんでした。 そこが、Claudeの中だけで完結するようになった。これが今、大きな転換点です。
しかも、Claude Designで作った画面のデザインを、Claude Codeにそのまま渡して実装できます。
つまり、
頭の中のアイデア → Claude Designで画面に → Claude Codeで動くサービスに
ここまでの流れが、Claude 1つの中で、追加課金ゼロで完結する。
2026年6月以降のClaudeで、いま一番面白いのがこのワークフローです。
実際に池田がこのワークフローでこの数か月作ってきたもの：
過去イベントのアンケート結果ビューワー（自分のSupabaseデータを表示）
社内向けの読書ログツール（毎日の学びを構造化して保存）
YouTube動画の企画ボード（ネタ・サムネ・概要をワンビューで管理）
日次レポートの閲覧用ダッシュボード（Claude Codeの自動生成結果を見せる用）
株式投資の管理ダッシュボード
なぜこのイベントをやるのか
株式会社Workstyle Evolutionの池田です。YouTubeチャンネル（20万登録超）では「いけとも」として、日々AI活用を発信しています。
僕自身、Claude DesignとClaude Codeを組み合わせるようになってから、「画面付きのサービスを作る」感覚が一気に変わりました。 今までだったら、Figmaで画面を作り、エンジニアに渡して実装してもらう。1〜2週間かかっていた工程が、自分1人で2時間以内に終わる。
これは「効率化」というレベルの話ではなくて、「自分1人でやれることの範囲が、もう一段広がった」という感覚に近いです。
100社以上への研修の中でも、Claude Codeで仕組みは作れるようになった方が、次のステップで止まっているケースが目立ちます。
「中身は動くけど、画面が無くて人に見せられない」
「業務で使ってもらおうとするとUIが要る」
ここで止まると、せっかく作った仕組みが自分の中だけで終わってしまう。
だから今回、Claude DesignとClaude Codeを組み合わせて、「画面付きで動く、自分専用のWebサービス」を作りきる場を作ります。
なぜ無料のYouTube発信じゃなく、有料イベント？
YouTubeでも、Claude DesignやClaude Codeの活用法は発信しています。 でも、「見てると面白いが、自分ではまだ何も作ってない」 このケースが本当に多い。めちゃくちゃ残念です。
画面付きでサービスを作れる人と、作れない人。 この差は、2026年後半以降ますます開いていきます。
1年後、「あの時やっておけば」と思うか、「あの時始めてよかった」と思うか。 見ているだけでは、いつまで経っても「作れる人」にはなれない。
だから、実際に手を動かして、画面付きの自分専用サービスを作りきる場を作ります。
こんな方にオススメ
Claude Codeは触ったことがあるが、画面付きのサービスは作ったことがない
Claude Designが気になっているが、何から触ればいいか分からない
業務でちょっとした内製ツールを「人に見せられる形」で作りたい
Figmaを覚えるところで挫折した経験がある
社内のAI推進担当として、デザインから実装まで1人で回せるようになりたい
「自分専用のWebサービスを持っている」状態を一度体験してみたい
こんな方はオススメできない
AIを使いこなすには、ただ聞いたり見るだけではなく、実際に自分で手を動かすのが重要です。以下のようなスタンスだと、今回のイベントは価値が低いと思います。
自分で手を動かしたくない
受け身で教えてもらうのを待つだけ
エラーや失敗をしたくない（AIは何度ミスっても何の問題もなし。試行錯誤の回数が、AI活用力を育てます）
Claude Codeを一度も触ったことがない（基本操作が分かる前提で進めます）
当日の内容（2時間でこれやります）
前半：Claude Designで「見た目」を作る
Claude Designとは？／2026年6月以降のClaudeでの位置づけ
効くプロンプトの順番（講師がNG例も含めて実演）
Claude Designで自分の画面を作る
後半：Claude Codeで実装に渡して動かす
Claude Designの出力をClaude Codeに渡す手順
ローカルで実際に起動・動作確認
うまく動かないときの直し方（指示の修正・やり直しの仕方）
仕上げと相互デモ／持ち帰った資産の「次の一手」3パターン
※2時間で「自分専用のWebサービスが、画面付きで動いている状態」を全員が達成できるようにします。
参加後に持ち帰れるもの
「自分でも、デザインから動くサービスまで作れた」という実感・成功体験
画面付きで動く、自分専用サービス
バイブデザイン＆バイブコーディングの手法
⚠️ 事前準備・重要事項
Claude有料版（Pro以上）は必須です
このイベントはClaude DesignとClaude Codeを実際に操作するハンズオンです
どちらもClaudeの有料アカウント（Pro以上、月額$20〜）が必要です
無料アカウントではClaude Designが使えないため、ハンズオンには参加できません
まだ有料版にしていない方は、申し込み前にClaudeの有料プラン加入してください
Proだと利用枠が切れる可能性があるので、Max 5x（$100）以上を推奨します
Claude DesignとClaude Codeは、Claude有料プランの「対話枠」を共有しています
本イベントはClaude Designの生成回数を絞ることでProでも完走できる枠配分にしています
当日の安心感を最大にしたい方にはMax 5x以上を推奨します
Proの方は、当日午前のClaude利用を控えめにして枠を温存してご参加ください
その他の事前準備
PC必須（Windows、Macどちらでも可能）
Claude Codeのデスクトップアプリのインストール
プログラミング経験：不要
難しい操作：不要
参加当日のお願い
「完璧に作らなきゃ」と思わなくて大丈夫です。動けばOK、60点で十分です
作ったサービスの共有は任意ですが、ぜひ見せてください
イベント動画は後日共有します。もし「早くてついていけない」と感じても、後から復習できます。諦めずに自分の手を動かしましょう
主催
池田朋弘（いけとも）
株式会社Workstyle Evolution代表取締役
YouTubeチャンネル「いけともチャンネル」を運営、YouTube登録者は20万人超
100社以上に生成AI研修・導入支援を実施
著書『ChatGPT最強の仕事術』5.6万部、『Gemini最強のAI仕事術』2.3万部突破
『Claude 最強のAI自動化術」7/27に刊行
過去イベントの全アンケート結果も以下で公開してます！ https://gais-event-voice-259747770348.asia-northeast1.run.app/
よくある質問
Q. Claude Codeを触ったことがなくても参加できますか？
基本操作が分かる前提で進めます。未経験の方は、別のClaudeCode会をご参加いただくことをおすすめします。
Q. Claude Designを触ったことがないのですが大丈夫ですか？
はい、問題ありません。Claude Designはイベントの最初に基本から説明します。Claude Codeの基本操作だけ事前に押さえておいてください。
Q. Claude Proでも参加できますか？
はい。ただし、Claude DesignとClaude Codeは同じ対話枠を共有するため、当日午前のClaude利用は控えめにして枠を温存してください。より余裕を持ちたい方はMax 5x以上を推奨します。
Q. Claude Designは別途課金が必要ですか？
不要です。Claude有料プラン（Pro以上）に内包されており、追加課金ゼロで使えます。
Q. プログラミング経験は必要ですか？
不要です。Claude Designが画面を生成し、Claude Codeが実装を担当します。自然言語で指示するだけです。
Q. 途中でついていけなくなったらどうなりますか？
当日の動画・資料を配布するので、後から見返し可能です。パートごとに区切るので、分からない部分があったらとばして、次のパートを進めてください。質問にももちろん回答します。
Q. イベント応募後、参加できなくなったら？
当日の動画・資料を配布するので、ぜひそちらで学んでください。なお、申し訳ございませんが応募後のキャンセル・返金には対応しておりません。動画・資料の配布で代替とさせていただきますので、ご了承ください。
Q. スマホやタブレットでも参加できますか？
PCまたはMacでのご参加が必須です。Claude Designの画面操作とClaude Codeの両方を、PC環境で行います。
Q. イベント中に顔出しは必要ですか？
いいえ、不要です。チャットでのコメント・質問ができるので、ぜひ積極的に発信してください。
Q. 領収書はもらえますか？
Luma（このイベントサイト）より取得可能です。手順：Lumaログイン → 右上プロフィールアイコン → 設定 → 支払い → 「Download Receipt」 適格請求書（インボイス番号付き）として発行されます。
Q. キャンセル・返金はできますか？
応募後のキャンセル・返金には対応しておりません。当日参加できない場合でも、動画・資料を配布しますので、そちらで学んでいただけます。
「画面付きで、自分のサービスを作れる力」。 この力があるかどうかで、2026年後半以降のAI活用の楽しみ方は大きく変わります。 そんな人をどんどん増やしたいと思います。
参加いただいた方には、絶対に参加しただけの価値があるようにしたいと思ってます。 「面白そう」「自分もできるようになりたい」と思った方、ぜひ参加してください！ご紹介も歓迎です。