INDEX
目次
0章 はじめに
教材全体の目安学習時間：5時間
この章の目安学習時間：10分
この章で到達できるゴール
- 本教材で何を学び、何ができるようになるかを明確に理解する。
- どんな形式のデザインデータ（SVG、JPG/PNG）や、その中身の状態（テキストがアウトライン化されているか等）にも対応できる「AI実装準備」の重要性を理解し、学習へのモチベーションを高める。
【0-1】本教材の歩き方
目安の学習時間：10分
ようこそ！実装準備の世界へ
Webサイト制作の世界へようこそ。
この教材は、「AI×Web制作」ロードマップの一部であり、設計とコーディングの間に位置する「実装準備」という工程に特化しています。
一見地味に思えるかもしれませんが、この準備工程こそが、実装のスピードと品質を劇的に向上させるための鍵となります。
従来、デザインカンプから色やフォントの情報を一つひとつ手作業で抜き出すのは、時間のかかる作業でした。
しかし、AIの登場がその常識を覆します。
この教材では、ChatGPTやGeminiといった生成AIを駆使し、どんな形式のデザインカンプ（SVG、JPG、PNG）が提供されても、その中身の状態（例：テキストがアウトライン化されているか）まで見極め、効率的に実装の設計図を整える新しいワークフローを習得します。
デザインツールが苦手でも問題ありません。
AIの力を借りて、コーディング作業を迷いなく、スムーズに開始できる「段取り力」を身につけましょう！
この教材は、「AI×Web制作」ロードマップの一部であり、設計とコーディングの間に位置する「実装準備」という工程に特化しています。
一見地味に思えるかもしれませんが、この準備工程こそが、実装のスピードと品質を劇的に向上させるための鍵となります。
従来、デザインカンプから色やフォントの情報を一つひとつ手作業で抜き出すのは、時間のかかる作業でした。
しかし、AIの登場がその常識を覆します。
この教材では、ChatGPTやGeminiといった生成AIを駆使し、どんな形式のデザインカンプ（SVG、JPG、PNG）が提供されても、その中身の状態（例：テキストがアウトライン化されているか）まで見極め、効率的に実装の設計図を整える新しいワークフローを習得します。
デザインツールが苦手でも問題ありません。
AIの力を借りて、コーディング作業を迷いなく、スムーズに開始できる「段取り力」を身につけましょう！
この教材がおすすめの人
- AIを使ってWeb制作を効率化したいと考えている人
- 提供されるデザインデータの形式や状態に左右されず、スムーズにコーディングを始めたい人
- CSSの変数（カスタムプロパティ）を使いこなし、保守性の高いコードを書きたい人
- 実装作業の手戻りやミスを減らし、品質とスピードを両立させたい人
本教材を通じて到達できるゴール
この教材を終える頃には、以下のスキルが身についている状態を目指します。
- 提供されたデザインカンプの形式（SVGまたはJPG/PNG）や状態に応じて、最適な方法でAIを活用し、スタイル情報を網羅的に抽出できる。
- AIと対話しながら、抽出したデザイン情報をもとに、再利用性の高いCSS変数（カスタムプロパティ）を計画し、コードを生成できる。
- コーディング作業を迷いなく、スムーズに開始できる「段取り力」が身につき、実装の品質と速度が向上する。
それでは、AIと共に実装準備の世界を探求していきましょう。