Claude Code未経験のクリエイター12名が、たった4時間の研修でWebサイトを公開した事例

Claude Codeを知っていても、仕事で使うイメージが揃っていなかった

株式会社スティーブアスタリスク（以下、スティーブ*）では、企画やデザイン、制作進行など、異なる役割を持つメンバーが連携しながらクリエイティブを形にしています。

参加者の多くは、すでにChatGPTやClaudeなどの生成AIを、企画の壁打ちや文章作成、リサーチ、画像生成などに利用していました。Claude Codeを触った経験があるメンバーもいました。

一方で、チームでの活用には、次のような課題がありました。

• 活用経験や習熟度がさまざま：個人でClaude Codeを触り始めているメンバーはいたが、理解の深さや活用の仕方に差が開いていました

• 実務での活用方法を検討中：「AIを使いたい」という意欲はあっても、デザイン業務の具体的な場面に落とし込めていませんでした

• デザイナーにとって馴染みのないツール：Claude Codeはエンジニアが使うものというイメージがあり、デザイナーが自走するイメージが持ちきれていませんでした

そこで、メンバー全員がClaude Codeを実際に体験するだけでなく、自分たちのクリエイティブワークにどう活かせるのか、その可能性を具体的にイメージする機会として、今回の研修を実施しました。

事前ヒアリングと研修設計

研修のゴールを、技術習得ではなく「あの業務でも使えそう」に置いた

GOROのClaude Code研修では、ツールの機能を網羅的に説明することをゴールにしていません。

今回、最初に目指したのは、参加者が研修後に、

• Claude Codeを、エンジニアだけが使う遠いツールではなく、自分たちの制作にも関係するものとして捉えられる

• 自分の言葉によって、実際の制作物が変わる手応えを得る

• 「この仕事にも使えるかもしれない」と活用の可能性を考えられる

と感じられる状態をつくることでした。

「思っていたより使える」「こんなことにも応用できるかもしれない」と感じられる体験を、研修の中につくることを重視しました。

当日の研修の流れ

1. Claude Codeを使うための環境を整える

2. 実際のWebサイトを、自分の言葉で変更する

3. Notionに整理したアイデアから、自分のWebサイトを制作・公開する

最初から自由にサイトをつくるのではなく、環境を整え、既存の制作物を小さく変更する体験を挟んでから、ゼロからの制作へ進む流れです。

Claude Codeを使うための環境を整える

研修は、VS CodeやClaude Codeを利用するための環境構築から始まりました。

講師が画面を見せながら操作を説明し、参加者も同じ手順をその場で実行。参加者ごとに異なる設定やエラーが出た場合は、講師が画面を確認しながら個別に対応しました。

先に設定を終えた参加者が、近くのメンバーをサポートする場面もあり、全員が同じ場で一斉に取り組むことで、疑問やつまずきをその場で解消できました。

このステップを終えた時点で、参加者全員がClaude Codeを操作し、Webサイト制作へ進める環境が整いました。

実際のWebサイトを、自分の言葉で変更する

環境が整った後は、スティーブ*が実際の業務で扱ったWebサイトのHTMLを使い、文章や画像の変更に取り組みました。

参加者はClaude Codeに、

• 表示されている文章を書き換える

• Webサイト内の画像を差し替える

• 指定した箇所の内容を調整する

といった指示を自然な言葉で伝え、内容が反映されたWebページを確認しました。

このステップで目指したのは、HTMLの仕組みを学ぶことでも、完成度の高いWebサイトをつくることでもありません。

まずは変更する範囲が明確な既存サイトを使い、

指示を出す　→　Webサイトが変わる　→　結果を確認する

という一連の流れを短時間で経験することです。

いきなりゼロからサイトをつくるのではなく、先に小さな変更を成功させることで、Claude Codeの基本的な動かし方をつかみました。

この成功体験を土台に、次のステップでは、自分のアイデアからWebサイトをつくる自由制作へ進みます。

Notionの情報をもとに、Webサイトを制作・公開する

既存サイトの変更でClaude Codeの基本的な動かし方をつかんだ後は、参加者一人ひとりが自己紹介サイトを制作しました。

まずNotionに、サイトに掲載したい情報を整理し、Claude Codeは、その内容を参照しながら、Webサイトの構成やデザインを生成します。

参加者は表示されたサイトを確認し、文章やレイアウト、見せ方を追加で指示しながら仕上げていきました。

Notionに蓄積した情報を、制作に活かす

Notionを使ったのは、単に参加者が普段から使い慣れているためではありません。

スティーブ*では、議事録やプロジェクト情報をNotionにまとめています。Claude Codeと連携することで、Notionに蓄積された情報や背景を参照し、文脈を踏まえて制作を進められるためです。

完成したサイトには、ルーレット形式で情報を見せるもの、AIで生成したイラストを使ったもの、アニメーションを取り入れたものなど、それぞれの参加者の意図が反映されました。

最後にサイトをWeb上へ公開し、URLをSlackで共有。一人約5分の発表を行い、制作時に工夫したことや、今後どの業務に活用できそうかを共有しました。

研修後フォロー

研修で終わらせない。チームの定着まで伴走する

GOROは研修後も利用状況をレポート化し、チームの変化を定量的に可視化することが可能です。研修後の変化を数値として残せるよう、利用頻度・活用シーンを定量的に可視化することが目的です。

ClaudeCode研修の成果

成果物

• 参加者12名が、約4時間の研修で以下を体験しました。

• Claude Codeを利用する環境の構築

• 実際のHTMLを使った文章・画像の変更

• Notionの情報をもとにした自己紹介サイトの制作と公開

環境を整えるところから、自分のアイデアをWebサイトとして他者に見せるところまでを、一つの流れとして実践しました。

Claude Code研修を検討している方へ

この研修は、menuのデザインチームの業務フローと使用ツール（Figma・Notion）に合わせてゼロからカスタム設計しました。GOROのClaude Code研修は、参加者の職種・業務・チーム体制をヒアリングしたうえでプログラムを設計します。

Claude Code研修サービスの詳細はこちら →