【いつでも受講】Claude Design × Claude Codeで「かっこいい専用ツール」を作る

​━━━━━━━━━━━━━━━━━━━━
このページは「アーカイブ受講」用です
━━━━━━━━━━━━━━━━━━━━

​2026年8月22日に開催し、391名が申し込んだイベントの
アーカイブ動画と資料一式を、そのままお届けします。

​お申し込み直後に、以下をまとめてお送りします。

​・当日のアーカイブ動画（フル収録）
・当日資料
・復習ページ（内容サマリー＋理解度クイズ）
・当日使用した補助ツール

​視聴期限はありません。倍速視聴・途中停止も自由です。

​2026年8月時点の内容を収録したものです。以降のアップデート対応・質問対応は含みません。

​▼このイベントの参加者アンケート結果（全件公開しています）
https://handson.workstyle-evolution.co.jp/?event=claude-design

​「かっこいい見た目や資料を作りたい」

​「自分専用のサービスを画面付きで作ってみたい」

​「Claude Codeで仕組みは作れるけど、画面の見た目がイマイチ」

​そんな方に向けて、Claude DesignとClaude Codeを使って「自分専用のWebサービス」を、画面デザインから実装まで2時間で作りきるイベントです。その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サービス」を作りきる場をつくりました。その2時間が、このアーカイブです。

​

​なぜ無料の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点で十分です

• ​作ったサービスは、ぜひ誰か1人に見せてください

• ​「早くてついていけない」と感じたら、一時停止・巻き戻し・倍速でご自身のペースに合わせてください。諦めずに自分の手を動かしましょう

​

​主催

​池田朋弘（いけとも）

• ​株式会社Workstyle Evolution代表取締役

• ​YouTubeチャンネル「いけともチャンネル」を運営、YouTube登録者は20万人超

• ​100社以上に生成AI研修・導入支援を実施

• ​著書『ChatGPT最強の仕事術』5.6万部、『Gemini最強のAI仕事術』2.3万部突破

• ​『Claude 最強のAI自動化術」7/27に刊行

​過去イベントの全アンケート結果も以下で公開してます！
https://handson.workstyle-evolution.co.jp/

​

​よくある質問

​Q. Claude Codeを触ったことがなくても受講できますか？

​基本操作が分かる前提で進めています。未経験の方は、先にClaude Codeの回のアーカイブを受講いただくことをおすすめします。

​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活用の楽しみ方は大きく変わります。
そんな人をどんどん増やしたいと思います。

​受講いただいた方には、絶対に受講しただけの価値があるようにしたいと思ってます。
「面白そう」「自分もできるようになりたい」と思った方、ぜひ受講してください！ご紹介も歓迎です。