INDEX
目次
前の章に戻る1章 コーディング前の「神準備」がすべて！
この章の目安学習時間：40分
この章で到達できるゴール：
- 実装品質とスピードを左右する「準備」工程の重要性を、具体的な事例を通じて理解する。
- デザインデータの形式（ベクター/ラスター）や状態（テキストがアウトライン化されているか等）の違いが、情報抽出にどう影響するかを理解する。
- 本教材で活用するAIツールの概要と、効果的な使い方の基本を理解する。
【1-1】実装スピードは「準備」で9割決まる！
目安の学習時間：20分
AI登場以前のWeb制作における「準備」
かつて、Webサイト制作の「実装準備」は、地道な手作業の連続でした。
デザイナーから受け取ったデザインカンプを画面に表示し、スポイトツールでカラーコードを一つひとつ吸い取り、目視で要素間の余白を測る。この作業には、多くの時間と集中力が必要でした。
デザイナーから受け取ったデザインカンプを画面に表示し、スポイトツールでカラーコードを一つひとつ吸い取り、目視で要素間の余白を測る。この作業には、多くの時間と集中力が必要でした。
このような準備不足は、コーディング段階で様々な「悲劇」を生み出します。
- コーディング中の迷い：
「ここの余白は何ピクセルだっけ？」「このボタンの色は、さっきの色と同じでいいんだっけ？」と、作業が頻繁に中断する。 - 手戻りの発生：
実装後に「なんかデザインと違う…」と気づき、大幅な修正が必要になる。 - 品質の低下：
場当たり的な実装が積み重なり、サイト全体の一貫性が失われる。
これらの問題は、スキル不足だけでなく、準備工程の非効率さに根本的な原因がありました。
AIが変える「実装準備」の未来
生成AIの登場は、この「準備」の風景を一変させました。これまで人間が地道に行ってきた作業の多くを、AIが代行してくれるようになったのです。
この教材で学ぶ「AIアシスト準備術」は、単にスピードを上げるだけのテクニックではありません。
この教材で学ぶ「AIアシスト準備術」は、単にスピードを上げるだけのテクニックではありません。
- 属人性の排除：
誰がやっても、AIが安定した品質で情報を抽出してくれます。 - 品質の安定化：
情報の抜き出し漏れや測定ミスがなくなり、デザインの再現性が高まります。 - 創造的作業への集中：
面倒な単純作業から解放され、より本質的な設計や実装に時間を使えるようになります。
AIを賢く活用することで、実装準備は「面倒な作業」から「創造的な設計」へとその役割を変えつつあります。
この章から、そのための具体的な知識とスキルを学んでいきましょう。
この章から、そのための具体的な知識とスキルを学んでいきましょう。
【1-2】AIの「頭脳」と「眼」を使いこなす基本
目安の学習時間:10分
使うツール紹介：ChatGPTとGemini
本教材では、主にChatGPTとGeminiという2つの生成AIを活用します。
これらは、単に文章を作るだけでなく、Web制作の準備を強力にサポートする2つの重要な能力を持っています。
これらは、単に文章を作るだけでなく、Web制作の準備を強力にサポートする2つの重要な能力を持っています。
- コード解析（頭脳）：
SVGファイルのようなコードで書かれたデザインデータの中身を読み解き、構造を理解して正確な情報を引き出す能力。 - 画像認識（眼）：
JPGやPNGのような画像ファイルを見て、そこに写っている色や形、テキストなどを認識し、特徴を推測する能力。
AIへの指示は「聞き方」が9割！プロンプトの基本
AIを上手く活用するには、「プロンプト」、つまりAIへの指示の出し方が非常に重要です。
AIは非常に賢いですが、こちらが何を知りたいのかを正確に伝えないと、期待通りの答えは返ってきません。
良いプロンプトには、いくつかの基本パターンがあります。
AIは非常に賢いですが、こちらが何を知りたいのかを正確に伝えないと、期待通りの答えは返ってきません。
良いプロンプトには、いくつかの基本パターンがあります。
- 役割を与える：あなたはプロのWebデザイナーです。 のように、AIに特定の専門家として振る舞うようお願いする。
- 目的を明確に伝える：このWebサイトで使われている色を全て抽出してください。 のように、何をしてほしいのかを具体的に指示する。
- 出力形式を指定する：CSSのコメント形式でリストアップしてください。 のように、どのような形式で答えてほしいかを指定する。
- SVGコードには：このコードを解析して… と、頭脳（コード解析能力） に働きかける。
- JPG/PNG画像には：この画像を見て… と、眼（画像認識能力） に働きかける。
この使い分けを意識するだけで、AIから得られる情報の質は劇的に向上します。
考えてみよう！
もし、AIにデザインカンプの情報を抽出させたい時、「この画像について教えて」というプロンプトだけを送った場合、どのような返答が来ると想像しますか？そして、なぜその返答では不十分なのでしょうか？
解答例
AIは、画像に何が写っているかの説明（例：「企業のウェブサイトのようです」「モダンなデザインですね」など）をするだけで、具体的な色やフォントの情報は教えてくれない可能性が高いです。
なぜなら、こちらが欲しい「実装に必要な情報」を具体的に指示していないからです。
このことから、AIに期待通りの仕事をしてもらうためには、目的と欲しい情報の形式を明確に伝えるプロンプトがいかに重要かがわかります。
考えてみよう！
もし、AIにデザインカンプの情報を抽出させたい時、「この画像について教えて」というプロンプトだけを送った場合、どのような返答が来ると想像しますか？そして、なぜその返答では不十分なのでしょうか？
解答例
AIは、画像に何が写っているかの説明（例：「企業のウェブサイトのようです」「モダンなデザインですね」など）をするだけで、具体的な色やフォントの情報は教えてくれない可能性が高いです。
なぜなら、こちらが欲しい「実装に必要な情報」を具体的に指示していないからです。
このことから、AIに期待通りの仕事をしてもらうためには、目的と欲しい情報の形式を明確に伝えるプロンプトがいかに重要かがわかります。
【1-3】1章 -章末課題- [ケーススタディ：準備不足で起きた失敗談]
目安の学習時間：10分
問題
ある新人Web制作者が、クライアントから受け取ったデザインカンプをすぐにコーディングし始めました。しかし、途中で何度も作業が止まり、結果的に納期が遅れてしまいました。
この章で学んだ「準備」の重要性を踏まえて、この新人Web制作者が陥ったであろう「準備不足が原因のトラブル」を3つ想像して記述してください。
この章で学んだ「準備」の重要性を踏まえて、この新人Web制作者が陥ったであろう「準備不足が原因のトラブル」を3つ想像して記述してください。
解答解説
この課題に正解はありません。
この章で学んだ内容を踏まえて、どのようなリスクが考えられるかを想像することが目的です。
もし行き詰まったら、専属のコーチに相談してみるのも良いでしょう。
以下に解答例を示します。
この章で学んだ内容を踏まえて、どのようなリスクが考えられるかを想像することが目的です。
もし行き詰まったら、専属のコーチに相談してみるのも良いでしょう。
以下に解答例を示します。
-
色の不統一
- デザインカンプ上で微妙に異なる複数の色が使用されていたにも関わらず、事前にカラーパレットを定義しなかった。そのため、コーディング中にどの色を使用すべきか繰り返し迷いが生じ、後の修正にも多大な工数を要した。
-
余白ルールの不在
- 要素間の余白（マージンやパディング）をその都度、感覚的に設定したため、サイト全体のレイアウトに統一感が欠如。結果としてクライアントから「全体的に整理されていない印象を受ける」という修正指示を受けることになった。
-
フォントスタイルの非標準化
- 見出しや本文で使用するフォントサイズや太さのルールを事前に洗い出さなかった。その結果、セクションごとに微妙にスタイルが異なり、デザインの一貫性が損なわれてしまった。
これで「1章 コーディング前の「神準備」がすべて！」の解説を終わります。
次の章に進みましょう。
次の章に進みましょう。