コーディングは初めてだから with ウェブパブリッシング - CSSの基礎からレスポンシブウェブまで
ezweb
無料
入門 / HTML/CSS
5.0
(22)
1,200+
Update
Update
AI時代にも、思いどおりのWebデザインを完成させるにはCSSの基礎力が必要です。CSSの基本文法からレイアウト、Flexbox、レスポンシブWebまで一つずつ学びながら、AIが生成したコードを理解して修正する力と、就職に必要な実務の基礎力を身につけてみましょう。
入門
HTML/CSS
AI時代のWeb開発者には、コーディングだけでなく、AIを活用してアイデアを実際の成果物へと完成させる能力が重要です。StitchとFigma Makeを活用したUI制作からReactの実装、デプロイまでを経験し、実務やポートフォリオに活かせるAI Web開発スキルを身につけましょう。
学習した受講者のレビュー
5.0
hafamily
ためになる講義をありがとうございました。
5.0
mr.nobody
良い講義をありがとうございました。
5.0
Lee HI
不思議ですね(笑)。とても参考になりました!
企画からデザイン、実装、デプロイまで、一つのプロジェクトの流れを自ら完成させます。
単なる機能紹介ではなく、実際のプロジェクトに適用するプロセスを学びます。
サービス構造の設計からコンポーネント構成まで、実務の流れに沿って学習します。
望む結果を導き出すためのAI活用戦略を、段階的に学ぶことができます。
単なる例ではなく、実際のサービス形式のプロジェクトを自分で作ってみることになります。
1️⃣ Vibe Codingとは何でしょうか?
「AIでコーディングする」というのは、単にコードを代わりに作成してくれる機能を意味するものではありません。
この講義では、プロンプトを通じて企画からデザイン、実装、デプロイまでの全工程を設計する新しい開発手法を紹介します。従来の一行一行コードを書く開発方式とどのように異なるのか、なぜ今この方式が注目されているのかを明確に理解できるようになります。AIを活用した開発パラダイム転換の出発点を体験できます。
バイブコーディングのプロセス
バイブコーディングの概念と従来の開発手法との違いを理解する
プロンプト中心の開発構造を理解
AIを「補助ツール」ではなく「設計ツール」として活用する視点を確立する
企画 → デザイン → 実装 → デプロイへと続くプロジェクト全体の流れを理解する
2️⃣ AIにデザインを依頼する方法
AIに「このようなデザインを作って」と依頼したものの、期待とは異なる結果になった経験はありませんか?
この講義では、AIが正確に理解し、実装できるように依頼する方法を体系的に学びます。漠然とした指示ではなく、構造化されたプロンプトから望む結果を導き出す戦略を身につけます。優れた一文が完成度の高いデザインを生み出すことを、実際に体験できます。
デザインを導き出すためのプロンプト作成原則を学ぶ
機能中心のプロンプトとUI中心のプロンプトの違いを理解する
モバイルファーストを基準に設計する方法
要件を構造化し、AIが理解できるように整理する方法
3️⃣ デザインを生成して完成度を高める
AIを活用して実際にデザインを生成し、目指す方向に合わせて繰り返し修正していきます。
「この部分を修正して」「色をもう少し明るく調整して」のように具体的なフィードバックを伝えながら、成果物を少しずつブラッシュアップしていくプロセスを体験します。AIとのインタラクションを通じて、デザインの完成度を高める実践的な方法を身につけます。
Stitchを活用した実際のデザイン生成実習
部分修正を依頼するプロンプトの作成方法
UIコンポーネント単位の修正戦略
反復改善(Iterative Prompting)方式の学習
プロンプトを通じてデザインを生成する
4️⃣デザインをコードとして実装する
完成したデザインが実際に動作するコードへ変換される過程を直接確認します。
単なる画面画像ではなく、実行可能なアプリケーションへと拡張されていく流れを理解できます。デザインと実装が分離された段階ではなく、1つにつながったプロセスであることを実感できます。
デザインからコードを生成する - AI Studio
GoogleのAI Studioにプロンプトを入力してデザインを基にコードを生成し、その後プロンプトを活用して機能や構造を修正しながら、段階的に完成度を高めていきます。
デザインをコードに変換する全体的な流れを理解する
AI Studioを活用したコード生成の実習
プロンプトベースのコード修正および機能改善方法を学習する
デザインと実装をつなぐ開発思考を確立する
5️⃣ 完成したプロジェクトをインターネットにデプロイする – 基本編
自分で作成したウェブサイトをGitHubに保存し、実際のインターネット環境にデプロイする過程を実習します。
単にローカルで実行するだけでなく、誰でもアクセスできるアドレスを持つサービスへと発展させます。デプロイリンクを共有した瞬間、1つの完成した製品を作り上げた経験を得られます。
GitHubリポジトリと連携してVercelでデプロイを行い、その後コードを変更した際に自動的に再デプロイされる流れまで併せて理解します。
GitHubを活用したプロジェクトのバージョン管理およびアップロード方法の理解
Vercelを活用したウェブサイトのデプロイ実習
Gitリポジトリとデプロイプラットフォームの連携構造を理解する
コード変更時の自動デプロイ(Continuous Deployment)の流れを理解する
6️⃣ デザイナーのように開発する - Figma Make
デザインツールを介して開発するもう一つのワークフローを学びます。
一つの方法だけが正解ではなく、状況や目的に応じて適切な方法を選択する柔軟な開発思考を身につけます。デザイン中心のアプローチとプロンプト中心のアプローチを比較し、それぞれのメリットを理解します。
Figma Makeを活用して生成したデザインを基にコードを作成し、プロンプトの指示によって構造と機能を拡張します。また、デザインなしでプロンプトだけでも完成度の高いWebサイトを実装する方法まで併せて扱います。
Figmaベースの開発ワークフローを理解する
Figma Makeを活用したコード生成の実習
デザインベースの開発とプロンプトベースの開発の違いを理解する
状況に応じた開発手法の選択戦略を学ぶ
デザインからコード生成 - Figma Make
7️⃣ 2つの方法を比較して自分のスタイルを見つける
Figmaベースの方法で生成したコードも、実際のサービスとして完成させるプロセスを進めます。
先に学習した2つのワークフローをいずれも体験したうえで、それぞれの長所と短所を比較し、自分により適した方法を分析します。単に手順に従うだけでなく、自ら選択し設計できる開発の視点を身につけます。
このプロセスを通じて、自分だけのAI活用開発スタイルを確立します。
Figmaベースのコード成果物を実際のサービスとして完成させるプロセスの理解
プロンプト中心の開発とデザインベースの開発の比較分析
各方式の長所・短所および活用場面の整理
個人に最適化されたAI開発ワークフローの設計
AIを通じて生成するため、プロンプトによって生成されたデザインは講義画面と異なる場合がありますので、あらかじめご了承ください。
学習対象は
誰でしょう?
AIを活用したウェブ開発に興味がある方
Web開発の全体的な流れを一度に体験したい初心者
実践的なポートフォリオプロジェクトが必要な就職活動中の方
デザインと開発を一緒に学びたい方
AI時代に合った新しい開発手法を学びたい方
前提知識、
必要でしょうか?
ウェブ開発が初めてでも大丈夫です。
HTMLとJavaScriptを一度でも聞いたことがある方であれば十分です。
Reactを初めて触れる方でも、無理なくついていけます。
AIツールの使用経験がなくても大丈夫です。
キャリア認証
3,012
受講生
79
受講レビュー
4
回答
4.9
講座評価
16
講座
WebパブリッシングからJavaScript・Reactの実務、AIを活用した開発まで教えるフロントエンド専門講師です。
ESTSOFT KDTやグリーンコンピューターアカデミーなどで、未経験者や初心者、就職準備中の方を対象に指導してきました。複雑な概念を小さな実習に分け、学習者が自ら成果物を完成させるプロジェクト中心の授業を目指しています。
HTML/CSSウェブパブリッシング
JavaScript基礎およびWebインタラクション
Reactベースのフロントエンド開発
Firebaseを活用したWebサービスの実装
Figma UI設計および開発連携
生成AIと共に学ぶウェブ開発
ウェブデザイン技能士実技
企業実務者向け研修、KDTコース、大学・スクールでの特別講義を実施しています。
受講対象者と事前知識、教育時間、目標とする成果物に合わせて、カリキュラムと実習プロジェクトを構成します。オフラインでの出張講義、リアルタイムのオンライン授業、録画型の教育コンテンツ制作のすべてに対応可能です。
以下のようなオンライン教育コンテンツ制作業務を行います。
講義カリキュラムおよび学習目標の設計
教材とプレゼンテーションの作成
段階別の実習コードとサンプルプロジェクトの構成
撮影用講義台本の作成
講義の撮影およびコンテンツ納品
ESTSOFT KDT フロントエンド講義
グリーンコンピューターアカデミー ウェブパブリッシング・フロントエンド講義
ウェブパブリッシングYouTubeチャンネル「ezweb」を運営
ウェブパブリッシング・ウェブデザイン分野の書籍執筆
2025.11 · 2026 SDエデュ ユ先生ウェブデザイン技能士実技個別指導ノート · 時代考試企画
2024.11 · 2025 SDエデュ ユ・ソンベ ウェブデザイン技能士実技個人レッスンノート · 時代考試企画
2023.10 · 2024 SDエデュ ユ・ソンベ ウェブデザイン技能士 実技個別指導ノート · 時代考試企画
2022.08 · はじめてのコーディング with Webパブリッシング · 永進出版社
2021.07 · Webデザイン& WebパブリッシングのためのFigma完全活用ガイド · ビージェイパブリック
企業・機関への出張講義およびオンライン教育コンテンツ制作に関するお問い合わせを受け付けています。
お問い合わせ:ezwebpub@gmail.com
全体
11件 ∙ (2時間 2分)
全体
9件
4.8
9件の受講レビュー
受講レビュー 3
∙
平均評価 4.7
受講レビュー 297
∙
平均評価 4.9
受講レビュー 4
∙
平均評価 4.3
受講レビュー 3
∙
平均評価 5.0
知識共有者の他の講座はこちら
同じ分野の他の講座を見てみましょう!
新規会員登録で25%OFF
¥1,605
25%
¥2,135