お客さまがご利用のブラウザはサポートされていないため、正常に利用できない可能性があります。 お手数ですが、こちらをご確認いただき推奨環境のブラウザをインストールしてご利用ください。

トップ > オンライン > IT・リスキリング > HTML・CSS > Claude Codeで学ぶ実案件型Web実装講座
HTML・CSS AI・機械学習

6回コース講座 Claude Codeで学ぶ実案件型Web実装講座

オンライン

AIを使いながら、Figmaから公開まで学ぶ全6回マンツーマン実践講座

こんなことを学びます

この講座は、Claude Codeを活用しながら、Webサイト実装の流れを実案件に近い形で学ぶマンツーマン講座です。

単にAIにコードを書かせる方法だけではなく、
「何をAIに任せるか」
「どこを自分で判断するか」
「どう指示すれば思い通りの実装に近づくか」
まで含めて学びます。

Figmaのデザインカンプをもとに、HTML・CSS・JavaScriptで実装し、レスポンシブ対応や修正、公開まで一連の流れを経験します。


【この講座で学ぶこと】

・Claude Codeの基本的な使い方
・ローカルフォルダを使ったWeb制作
・Figmaデザインの確認方法
・デザインをもとにしたHTML／CSS実装
・JavaScriptを使った基本的な動きの実装
・PC／スマートフォンのレスポンシブ対応
・AIへの指示の出し方、修正依頼の考え方
・生成されたコードの確認方法
・表示崩れやエラーの原因の探し方
・Git／GitHubを使った制作管理の基本
・サーバーへのアップロード、公開までの流れ


【講座の進め方】

決められた操作をそのまま真似する講座ではありません。

実際のWeb制作に近い形で、
「次に何をすればいいか」
「AIにどう指示すればいいか」
を一緒に考えながら進めます。

受講者のスキルや進捗に合わせて内容を調整するマンツーマン形式です。

講師がすべてを代わりに実装するのではなく、
受講者自身がClaude Codeを操作しながら制作を進めます。


【こんな方におすすめ】

・HTML／CSSを学んだけれど、実際のサイト制作に自信がない方
・Web制作を勉強中で、実案件レベルの制作経験を積みたい方
・Claude CodeをWeb制作に活用したい方
・AIコーディングを使って制作時間を効率化したい方
・Figmaから実装する流れを身につけたい方
・デザイナーで、コーディングにも挑戦したい方


【受講前に必要なスキル】

HTML／CSSの基本的な仕組みを理解している方を想定しています。

高度なコーディングスキルは必要ありませんが、
ファイル・フォルダ操作など、パソコンの基本操作ができることを前提としています。


【目指すゴール】

講座終了後に、

「AIに何を頼めばいいかわからない」

という状態から、

「自分で実装の流れを考え、Claude Codeに適切な指示を出しながらWebサイトを完成させられる」

状態になることを目指します。

AIに丸投げするのではなく、
AIを制作パートナーとして使いながら、自分で判断してWeb制作を進める力を身につけます。
続きを読む

希望の日程で調整できます

現在開催日程はありませんが、開催リクエストを送ることで希望の日時で講座開催を相談できます。

開催予定エリアオンライン

価格(税込)¥88,000(¥14,666 × 6 回)

開催リクエストを送る
受けたい
1人が受けたい登録しています

オンライン受講日程

価格(税込)¥88,000

オンライン受講料に含まれるもの

受講料には、全6回のオンラインマンツーマンレッスン、制作進行に合わせた個別指導、実装・修正に関するアドバイスが含まれます。

Claude Code、Figma、サーバー・ドメイン等の外部サービス利用料は受講料に含まれません。
必要なサービスの契約・利用料金は受講者ご自身でご負担ください。

講座内で使用する制作データや画像素材等についても、有料素材を使用する場合は別途費用が必要です。

この講座の先生

オフィス蔵之助 くらのすけのプロフィール写真

オフィス蔵之助 くらのすけ

本人確認済み
  • 0人
  • 0回
先生ページを見る 先生に質問する
パソコンインストラクター・万事サポート

こんにちは、オフィス蔵之助のくらのすけです。

2005年からパソコン教室を運営し、個人の方から小規模事業者まで、パソコン活用や業務効率化、Web活用をサポートしています。

現在は、パソコン操作やIT活用の指導に加えて、AIを活用したWeb実装、Figmaデザインからのホームページ・LP制作、WordPress実装にも対応しています。

「難しいことを、わかりやすく」
「小さな効率化で、大きな成果を」
を大切に、受講者のスキルや目的に合わせた実践的なレッスンを行っています。

Claude Codeを活用したWeb実装、HTM... +続きを読む

カリキュラム

  • 第1回 Claude Code導入とWeb実装の進め方

    ・15分：受講目的と現在のスキル確認
    ・20分：Claude Codeの基本操作とローカルフォルダの扱い
    ・20分：AIコーディングでできること／できないこと
    ・25分：簡単なHTML・CSS修正を実践
    ・10分：振り返り・次回までの課題確認

  • 第2回 Figmaカンプを読み取り、実装設計を考える

    ・10分：前回の振り返り
    ・20分：Figmaデザインの確認ポイント
    ・20分：セクション分け・HTML構造の設計
    ・30分：Claude Codeへの指示を作りながら実装開始
    ・10分：課題・次回の実装範囲確

  • 第3回 HTML・CSSでデザインを形にする

    ・10分：進捗確認
    ・20分：生成されたコードの読み方・確認方法
    ・40分：PCまたはスマホ版の実装
    ・10分：ズレ・表示崩れの修正方法
    ・10分：次回までの課題確認

  • 第4回 レスポンシブ対応とJavaScript実装

    ・10分：進捗確認
    ・30分：画面幅に合わせたレスポンシブ調整
    ・25分：JavaScriptによる基本的な動きの実装
    ・15分：AIへの修正指示の出し方
    ・10分：次回までの課題確認

  • 第5回 デバッグ・修正とGit/GitHubの基本

    ・10分：進捗確認
    ・25分：表示崩れやエラーの原因を探す方法
    ・20分：Claude Codeを使った修正・検証
    ・25分：Git／GitHubの基本と制作データの管理
    ・10分：公開前チェック項目の確認

  • 第6回 公開・最終調整と実案件での進め方

    ・15分：完成サイトの最終確認
    ・20分：サーバーへのアップロード・公開の流れ
    ・20分：実案件でのAIコーディングの進め方
    ・20分：受講者自身で修正・追加実装に挑戦
    ・15分：全体振り返り・今後の学習方針

こんな方を対象としています

・HTML／CSSを学んだものの、実際のWebサイト制作になると手が止まってしまう方
・Web制作を勉強中で、実案件に近い制作経験を積みたい方
・Claude CodeをWeb制作に取り入れたい方
・AIにコードを書かせるだけでなく、指示や修正の方法まで身につけたい方
・FigmaのデザインカンプからWebサイトを実装できるようになりたい方
・レスポンシブ対応やJavaScript実装まで一通り経験したい方
・デザイナーで、コーディングやWeb実装にも挑戦したい方
・AIを活用してWeb制作を効率化したい方

HTML／CSSの基本的な仕組みを理解している方を想定しています。
高度なコーディング経験は必要ありませんが、ファイル・フォルダ操作など、パソコンの基本操作ができることを前提としています。
続きを読む

受講する際は以下をお読み下さい

講座はオンラインで行います。
安定したインターネット環境と、Web制作ができるパソコンをご用意ください。

受講者ご自身でパソコンを操作しながら進める実践形式です。
講師が制作を代行する講座ではありません。

事前にClaude Codeを利用できる環境をご準備ください。
初回は環境や現在のスキルを確認しながら進めます。

講座の進行状況は受講者ごとに異なるため、各回の内容や進度を調整する場合があります。

Figmaデザインや制作データを使用する場合は、講座内で使用できるデータをご用意ください。

講座時間外の制作作業や課題にも取り組んでいただくことで、より実践的なスキルが身につきます。
続きを読む
※ストアカでは講座に適用される保険を用意しています。詳しくはストアカ補償制度をご覧ください。

HTML・CSSの関連カテゴリーから講座を探す

ビジネススキル副業・起業・キャリアプログラミングアプリ開発ノーコードWebデザインWebディレクション写真加工（フォトレタッチ）Web制作・WordPressCSS3HTML5SASS・SCSSInDesignCanvaデジタルアート・イラストLP（ランディングページ）IT・リスキリング

HTML・CSSを講座以外の方法で学ぶ

HTML・CSSについて相談するHTML・CSSの個別レッスンを依頼するHTML・CSSを定額で学ぶ