1

生成AI × Webデザインの全体像

全1chapter

約1時間

当コースの導入Lessonとして、生成AIとWebデザインの概要、またWebデザイナーが生成AIを習得するべき理由と活用事例を学びます。
加えて、当コースで学ぶ主要ツールと学習の流れ・全体像を理解し、当コースで「生成AI × Webデザイン」を本格的に学ぶ土台をつくります。

2

Webデザインの基礎知識

全5chapter

約8時間

Webデザインを学ぶ上で最初に押さえておくべき「基礎知識」を体系的に学びます。
Webデザインの目的や役割、Webデザイナーの働き方と制作プロセスを理解し、またデザインの基本原則や色彩理論、タイポグラフィについて実践的に学びます。
さらに、生成AI時代のWebデザイナーに求められるスキルを理解します。

3

プロンプトエンジニアリング

全11chapter

約7時間

生成AIへの指示出しを効果的に行い、圧倒的な生産性を手に入れるための「プロンプトエンジニアリング」の基礎を習得します。
プロンプトを構造的に記述して生成AIの出力精度を高めるための基本テクニックに加え、CoTやFew-shot、メタプロンプティングやRAGといった応用テクニックも学びます。

4

画像素材制作

全17chapter

約17時間

生成AIツールで用途に合った高品質なオリジナル画像を生成し、画像編集ツールで調整して仕上げるための実務的な方法を学びます。
画像生成ツールとしてAdobe FireflyとNano Banana、Ideogram、また画像編集ツールとしてPhotoshopとIllustratorという、人気ツールの基礎を習得します。

5

バナーデザイン制作

全10chapter

約15時間

これまでに学んだWebデザインの基礎知識や画像生成・編集スキルを統合し、Webデザイナーへの制作依頼として多いバナー制作の方法を学びます。
バナーデザインの基本原則を理解した上で、手作業と生成AIを活用した方法の両方を習得し、デザイン初心者でも約30〜60分で完成度の高いバナーを制作できるようになります。
また、より実務的な内容として、制作したバナーを複数媒体へ効率的に展開するスキル、加えてバナーを生成AIに評価させ、改善サイクルを回して品質を向上させる方法も学びます。

6

Web企画

全7chapter

約15時間

デザインの前に、Webサイト・ページの設計図を作る工程である「Web企画」について、生成AIで効率的に行う一連の流れを体系的に学びます。
具体的には、マーケティングのフレームワークである3C分析を用いたデスクリサーチから始まり、クライアントヒアリングと目的・目標設定、またユーザーインタビュー（UXリサーチ）やペルソナ・カスタマージャーニー設計、それらを基にしたUSP設計を行い、最終的にクライアント提案にそのまま使えるWeb企画書を作成するところまで一気通貫で学びます。

7

Figma基礎

全6chapter

約16時間

現代のWeb制作現場で広く支持されている、Webデザインツールの「Figma」について、基本的な使い方を実践形式で体系的に学びます。
Figmaを使い手作業でデザインする方法に加え、Figmaの生成AI機能である「Figma AI」を活用して効率的にデザインする方法、また制作したデザインをエンジニアに連携する方法などを学びます。

8

ワイヤーフレーム制作

全7chapter

約18時間

Webサイト・ページの設計図である「ワイヤーフレーム」を生成AIで効率的に作る方法を学びます。
まずは、情報をどのように配置するかという「情報設計（IA）」の基礎を理解し、成果の出るワイヤーフレームを作るための基本原則、また作ったワイヤーフレームを生成AIに評価させ、「評価 → 改善 → 再評価」の改善プロセスを回して品質を向上させる実務的な方法を習得します。

9

デザインカンプ制作

全10chapter

約27時間

ワイヤーフレームに色や画像を適用した「デザインカンプ」を生成AIで効率的に作る方法を学びます。
まずはデザインの方向性を一枚のボードにまとめた「ムードボード」を作り、それを基にデザインカンプの叩き台を生成して、手動で調整する方法を習得します。
さらに実務的な内容として、デザインカンプで使った色・フォント・余白などのルールを整理して再利用できる形式でまとめた「スタイルガイドライン」の作り方を学び、最終的には制作したデザインを操作できる「プロトタイプ」を作れるようになります。

10

コーディング基礎

全11chapter

約25時間

制作したデザインカンプを、Webブラウザ上で実際に動作させるための「コーディング」の基礎を学びます。
具体的な技術として、Webページの骨組みを作る「HTML」、装飾をつけるための「CSS」、また画面に動きをつけるための「JavaScript」に加え、JavaScriptを効率的に使うための「jQuery」を習得します。

11

デザインのコード変換と生成AIコーディング

全8chapter

約15時間

生成AIを最大限に活用し、デザインカンプからコーディングする工程を大幅に効率化する方法を学びます。
具体的には、Figma上のデザインを「Figma MCP」を活用してコードに変換し、「Cursor」という生成AIコーディングツールを活用して、生成AIの補助を受けながら効率的にコーディングできるようになります。

12

Web公開（デプロイ）

全1chapter

約1時間

コーディングしたWebサイト・ページに、第三者がURLからアクセスできるよう「公開（デプロイ）」する方法を学びます。
GitHub Pagesというツールを使えば、無料で手軽に公開可能です。

13

最終課題：実案件を想定したWeb制作

全12chapter

約25時間

これまでに学んできた、生成AI／Webデザイン／コーディングのスキルを総動員し、ポートフォリオとして使えるクオリティの本格的なWebサイト・ページ制作に挑戦します。

題材として、以下の4つを用意しています。

■ 飲食店検索サイト：ノーコード生成AIアプリの「Dify」も活用し、生成AI機能を搭載したチャットボットを埋め込んだWeb制作に取り組む
■ 映画宣伝ページ：独自の世界観を表現したビジュアルデザインの制作に取り組む
■ 採用ページ：企業の採用ブランディングに特化したWebデザインに取り組む
■ 既存LPのリニューアル：実際のLPのリニューアル案件を疑似体験する

14

（任意）案件獲得・転職準備

全13chapter

約13時間

Webデザインのスキルを仕事・収入に結びつけるための実践的な方法を網羅的に学びます。
Webデザイナーとしての働き方の選択肢を理解した上で、案件獲得の具体的な方法や、トラブルを防ぐための見積・請求・契約の基礎、また単価アップとリピート戦略に加え、転職活動の進め方についても理解します。
さらに、ポートフォリオをまとめた「ポートフォリオサイト」の制作にも取り組みます。