Claude Code未経験の非エンジニア10名が、2時間の研修でサイト公開まで到達した事例

Claude Codeがチームに浸透しきれていなかった

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

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

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

そこで、チーム全員で同じスタートラインに立つ場として、研修を設けることになりました。

事前ヒアリングと業務に合わせた研修内容の検討

チームの「業務の実態」を把握することから始めた

GOROのClaude Code研修は、ツールの操作習得だけを目的としていません。研修前のヒアリングで、menuのデザインチームがどのようにFigmaを使い、どこで時間を取られているかを把握したうえで、プログラムをゼロから設計しました。

ヒアリングで見えた実態と方針

確認できた実態

• チーム全体で足並みを揃えたいが、個人でのキャッチアップには時間がかかります

• CLIやHTMLに普段触れる機会が少ない環境でした

• レビューとコメント対応に繰り返し時間がかかっていました

この実態から、3つの設計方針を立てました

1. 「できた」体験を最初の2時間に集約する：インストールから始めてWebページを公開するまでを1回目に詰め込む

2. 業務に直結するシナリオを使う：Figmaコメント対応・プロトタイプ修正という実業務そのものを2回目のテーマにする

3. 全員が同じペースで進められる設計にする：既存HTMLの小さな修正から始め、段階的に難易度を上げる

まず「自分の指示で、サイトが動く」を体験する

環境構築から2時間で、全員がWebページを公開した

「自分の言葉で指示したら、サイトが形になっていた」——1回目が終わったとき、全員がこの感覚を持ち帰りました。CLIの操作が初めてのメンバーも手順に沿って全員が環境構築を越え、既存のHTMLファイルを修正する小さな体験から、ゼロから採用サイトを制作するところまで進めました。

テキストで指示を出すだけでワイヤーが生成され、余白・色・フォント・コンポーネントのルールを反映し、menuのトーンに沿ったビジュアルに調整されていきます。

チームのデザインレビューをClaude Codeで自動化する

プロトタイプをFigmaに上げてコメントをもらい、修正して返す——デザインレビューの中で地味に時間を取られてきた一連の作業が、自動化できるとしたら？

AI駆動でプロトタイプを設計

Figmaレビューの自動化を、チームで実践した

HTMLで作ったプロトタイプをFigmaに取り込み、コメントをClaude Codeが読んで修正を反映し、変更差分をFigmaに自動投稿する流れを通しで体験した。

研修後フォロー

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

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

Claude Code研修の成果

成果物

• 参加者全員が2時間でAIのみでWebサイトを公開

• Claude Codeを使ったプロトタイプ設計とFigmaコメントのやり取りの自動化

チームの変化

• デザインレビューとプロトタイプ修正をFigma上で自動化するイメージが、業務に直結する形で得られました

• 研修後、チーム内でClaude Codeの活用ルール検討がスタートしました

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

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

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