AIを「答えを出す道具」ではなく、「一緒に考えるパートナー」にするために
ChatGPTやGeminiなどの生成AIが身近になり、Web制作の学習や実務でもAIを活用することが当たり前の時代になりました。AIを使えば、
- HTMLやCSSのコードを作成してもらえる
- JavaScriptやPHPのエラーの原因を教えてもらえる
- WordPressの使い方やカスタマイズ方法を質問できる
- デザインや改善案まで提案してもらえる
など、多くの作業を効率よく進めることができます。
しかし、学習の現場では最近、このような声も少なくありません。
- AIに作ってもらったけれど、何をしているコードなのか分からない
- 動いてはいるが、内容を質問されると説明できない
- 少し仕様が変わると、自分では修正できない
- エラーが出た瞬間に、どこを確認すればよいか分からなくなる
これはAIが悪いのではありません。AIを使う「順番」と「考え方」が少し違うだけなのです。
AIは、完成した答えを受け取るための道具ではなく、考えを整理したり、アイデアを広げたり、学習をサポートしたりするための強力なパートナーです。
この記事では、HTML・CSS・JavaScript・PHP・WordPressを学び始めた方に向けて、AIをどのように活用すると知識や技術が身に付き、実務でも役立つのかを、具体例を交えながら紹介します。
また後半では、ChatGPTやGeminiを使った学習だけでなく、専用のAIアシスタントを作成できる「Dify」の考え方についても紹介します。
AIに仕事を頼む前に必要なもの
生成AIは、指示された内容をもとに文章やプログラムを作成することが得意です。しかし、何を作ればよいのかを考えるのは人の役割です。
例えば、AIに
「ホームページを作ってください。」
と依頼した場合、どのようなホームページを作ればよいのか分かりません。会社のホームページなのか、ポートフォリオなのか、お店の紹介ページなのかによって、必要な内容は大きく変わります。
一方で、
- 会社の紹介サイト
- トップページとお問い合わせページを作成する
- 青を基調としたシンプルなデザイン
- スマートフォンでも見やすいレイアウト
など、目的や条件を整理して伝えると、AIはより希望に近いものを作成できます。
これはWeb制作でも同じです。いきなり「プログラムを作ってください」と依頼するのではなく、まずは何を作るのかを整理することが大切です。
そのため、実務では「仕様書」や「要件定義」と呼ばれる資料を作成してから制作を進めることが一般的です。
仕様書というと難しく感じるかもしれませんが、初心者の場合は次のような内容を整理するだけでも十分です。
- 何を作るのか
- どのような機能が必要か
- 入力する項目は何か
- 結果として何を表示するのか
- 使用する技術（HTML・CSS・JavaScriptなど）
AIは、このような情報が整理されているほど、正確な回答を返しやすくなります。
HTML/CSSでのAIの正しい使い方
HTMLやCSSを学び始めた段階では、まず自分でコードを書き、ブラウザで表示を確認することが大切です。
HTMLでは、タグの意味や要素同士の親子関係を理解する必要があります。CSSでは、セレクタがどの要素を指定しているのか、どのプロパティによって見た目が変わっているのかを確認しながら学びます。
最初からAIにページ全体を作ってもらうと、見た目は完成していても、コードの構造を理解できないまま進んでしまうことがあります。
AIを使ってよい場面
AIは、分からないことを整理したり、理解を深めたりするために活用できます。
- 自分で書いたコードの意味を説明してもらう
- CSSが反映されない原因の候補を教えてもらう
- HTMLの親子構造が正しいか確認してもらう
- 同じレイアウトを作る別の方法を聞く
- 修正したコードと元のコードの違いを説明してもらう
例えば、CSSが反映されないときに、すぐ修正コードを求めるのではなく、次のように質問してみましょう。
「このCSSが反映されない原因として、確認する場所を順番に教えてください。」
原因を考える手順を教えてもらうことで、次に同じ問題が起きたときにも自分で確認しやすくなります。
注意したい使い方
次のような使い方を続けると、コードを理解する機会が少なくなります。
- ページ全体を最初から作ってもらう
- 意味が分からないコードをそのまま貼り付ける
- 動作したことだけを確認して次へ進む
- 修正前と修正後の違いを確認しない
AIが作ったコードを使う場合も、HTMLの各要素やCSSの指定を一つずつ確認することが重要です。
完成したコードを受け取って終わるのではなく、なぜこの書き方になるのかを質問することが、AIを学習に役立てるポイントです。
JavaScript・PHPでは「理解不足」がさらに危険になる
HTMLやCSSは、コードに問題があると見た目の崩れとして確認できることが多くあります。
一方、JavaScriptやPHPでは、画面を見ただけでは処理の流れが分からないことがあります。動いているように見えても、条件によってエラーが発生したり、意図しないデータが処理されたりする可能性があります。
JavaScriptでは、次のような知識が必要です。
- 変数に何が入っているか
- 条件分岐がどの順番で実行されるか
- どの要素にイベントが設定されているか
- 関数がいつ呼び出されるか
- 入力された値がどのように処理されるか
PHPでは、さらにサーバー側で処理が行われるため、フォームから送信された値やセッション、ファイル、データベースなども関係します。
動いているだけでは十分ではない
AIにJavaScriptやPHPのコードを作ってもらうと、一度は正常に動作することがあります。
しかし、入力されていない場合や、想定外の値が送信された場合まで正しく処理できるとは限りません。
例えば、フォームを作る場合は次のような確認が必要です。
- 未入力の場合はどうなるか
- 数字を入力する欄に文字が入力されたらどうなるか
- メールアドレスの形式が正しいか
- 不正なデータが送信されても問題ないか
- エラーメッセージが利用者に伝わるか
特にPHPでは、入力値の検証やCSRF対策、出力時のエスケープなど、セキュリティに関する確認も必要です。
意味を理解しないままコードを公開すると、単に動かないだけでなく、個人情報の漏えいや不正操作につながる可能性もあります。
AIには処理の流れを説明してもらう
JavaScriptやPHPのコードをAIから受け取ったときは、次のように質問すると理解しやすくなります。
- この処理を上から順番に説明してください
- 各変数には何が入りますか
- 入力値のチェックはどこで行っていますか
- エラーが発生する可能性がある場所を教えてください
- セキュリティ上の問題がないか確認してください
AIが書いたコードをそのまま完成品と考えず、処理を理解するための教材として使うことが大切です。
WordPressは「AIが常に正しい」とは限らない
WordPressについてAIに質問すると、テーマの編集方法やプラグインの使い方、PHPコードなどを短時間で提案してもらえます。
ただし、WordPressは利用している環境によって、正しい対応方法が大きく変わります。
- WordPressのバージョン
- 使用しているテーマ
- 親テーマと子テーマ
- 導入しているプラグイン
- PHPのバージョン
- サーバーの設定
- クラシックエディタかブロックエディタか
AIは、質問の中で伝えられていない環境まで自動的に確認できません。
そのため、一般的には正しいコードでも、自分のサイトでは動作しなかったり、テーマの機能と重複したりすることがあります。
質問するときは環境を伝える
WordPressについて質問するときは、できる範囲で環境を伝えましょう。
例えば、次のように質問します。
「WordPressのSWELL子テーマを使用しています。固定ページだけにCSSを読み込む方法を、functions.phpへ追加するコードで教えてください。」
使用しているテーマや編集するファイル、実現したいことを伝えると、回答の精度が上がります。
エラーについて質問する場合は、次の情報も役立ちます。
- 表示されたエラーメッセージ
- 編集したファイル名
- 追加または変更したコード
- エラーが発生する前に行った操作
- 本番環境かローカル環境か
コードを追加する前に確認する
AIから提案されたコードを、すぐに本番サイトのfunctions.phpなどへ貼り付けるのは危険です。
PHPコードに記述ミスがあると、管理画面を含めてサイト全体が表示されなくなることがあります。
変更する前に、次の点を確認しましょう。
- ファイルのバックアップを取る
- できればローカル環境やテスト環境で試す
- どのファイルへ追加するコードなのか確認する
- 同じ機能がテーマやプラグインにないか調べる
- 追加後に表示や管理画面を確認する
また、AIが提案したプラグインや関数が、現在も利用できるとは限りません。古い情報や、すでに推奨されていない方法が含まれることもあります。
WordPressでAIを活用するときは、回答をそのまま正解と考えるのではなく、自分の環境に合っているかを確認してから使用することが重要です。
AIが本当に役立つのは「基礎がある人」
AIを使えば、初心者でも短時間でコードを作成できます。
ただし、AIを使うことで学習が不要になるわけではありません。むしろ、HTMLやCSS、JavaScriptなどの基礎がある人ほど、AIの回答を上手に活用できます。
基礎があると、AIが作成したコードを見たときに、
- どこを変更すればよいか
- 不要なコードが含まれていないか
- 自分の希望と違う部分はどこか
- エラーの原因になりそうな場所はどこか
を判断できるようになります。
一方、内容を理解しないまま使っていると、少しデザインを変更したい場合や、機能を追加したい場合に対応できません。
AIの回答を判断する力が必要
AIは、質問に対して自然な文章で回答するため、内容が正しいように見えることがあります。
しかし、古い書き方や、自分の環境には合わない方法を提案することもあります。
そのため、AIを使う人には、回答をそのまま受け取るのではなく、確認して判断する力が必要です。
これは、すべてのコードを暗記するという意味ではありません。
HTMLの役割、CSSの基本的な指定方法、JavaScriptの処理の流れなどを理解していれば、分からない部分を調べたり、AIへ質問し直したりできます。
AIは基礎学習の代わりではなく、基礎を使って作業を早く進めるための道具です。
自分で考え、分からない部分をAIに質問し、回答を確認しながら修正することで、学習と制作の両方に役立てることができます。
まず最初に仕様を整理する
いきなりAIへコードの作成を依頼するのではなく、最初にアプリの内容を整理します。
作成するもの
身長と体重からBMIを計算するWebアプリ
必要な機能は？
- 身長を入力できる
- 体重を入力できる
- ボタンを押すとBMIを計算する
- BMIを小数第1位まで表示する
- BMIに応じた判定結果を表示する
- 未入力や正しくない値にはエラーを表示する
今回使用する技術は？
HTML・CSS・JavaScript
このように仕様を整理しておくと、AIへ具体的に依頼できます。技術指定がないと、AIの得意なコードで記述してくる可能性もあります。
AIへの依頼例（指示書）
HTML、CSS、JavaScriptを使って、BMI計算アプリを作成してください。
身長はcm、体重はkgで入力します。計算ボタンを押すとBMIを小数第1位まで表示し、BMIに応じて「低体重」「普通体重」「肥満」の判定を表示してください。
判定基準は次のとおりです。
- 18.5未満：低体重
- 18.5以上25未満：普通体重
- 25以上：肥満
未入力、0以下、数字以外が入力された場合は、分かりやすいエラーメッセージを表示してください。
画面は、パソコンでは左右2列のカード型レイアウトにしてください。
左側には、次の内容を表示してください。
- 「BMI計算アプリ」という見出し
- 身長の入力欄
- 体重の入力欄
- 青色の「BMIを計算する」ボタン
- BMIについての簡単な説明
右側には、次の内容を表示してください。
- 「あなたのBMI」という見出し
- 計算したBMIを大きな文字で表示
- 判定結果
- BMIの判定基準を示す表
- 結果は目安であることを伝える注意書き
全体は白を基調とした、シンプルで清潔感のあるデザインにしてください。ボタンや見出しには青色、計算結果の部分には淡い緑色を使用してください。カードには角丸と薄い影を付けてください。
スマートフォンでは、左右の内容を縦に並べて表示してください。
HTML、CSS、JavaScriptは、それぞれ次の3ファイルに分けてください。
- index.html
- style.css
- script.js
初心者にも分かるように、コードには簡単なコメントを入れてください。外部のCSSフレームワークやJavaScriptライブラリは使用しないでください。
「BMIアプリを作ってください」だけでなく、入力項目や表示内容、ファイル構成まで伝えることがポイントです。
作成されたコードは必ず確認する
AIからコードが返ってきたら、そのまま完成とは考えず、内容を確認します。
- HTMLの入力欄に分かりやすいラベルがあるか
- CSSでスマートフォン表示にも対応しているか
- JavaScriptで未入力を確認しているか
- BMIの計算式が正しいか
- 判定の条件が正しく設定されているか
- エラーが利用者に分かりやすく表示されるか
分からないコードがあれば、改造のためにもAIへ説明を入れておきましょう。
「このJavaScriptを、処理される順番に説明してください。」
「BMIを小数第1位にする処理はどこですか。」
「入力チェックを行っている部分を説明してください。」
自分で機能を追加してみる
基本のアプリが完成したら、機能を一つ追加してみましょう。
- リセットボタンを追加する
- 判定ごとに表示を変える
- 判定を詳しく 低体重・普通体重・肥満（１度）〜（４度）
- 過去の計算結果を表示する
- 入力欄でEnterキーを押して計算できるようにする
- 計算結果に詳細な説明またはワンポイントアドバイスの追加
- BMIからみた適正体重を追加し、適正体重との比較
追加したい機能も、最初に内容を整理してからAIへ依頼します。
AIにすべてを任せるのではなく、自分で仕様を考え、AIと相談しながら作ることが大切です。
この流れを繰り返すことで、AIが作ったコードを使うだけでなく、自分の考えをWebアプリとして形にできるようになります。
追加機能の仕様書を作る
基本のアプリに機能を追加するときは、現在のコードにどのように追加するのかもAIへ伝えます。
例えば、リセットボタンを追加する場合は、次のように依頼します。
リセットボタンの追加仕様書
現在作成しているBMI計算アプリに、リセットボタンを追加してください。
追加する内容は次のとおりです。
- 「BMIを計算する」ボタンの下に「リセット」ボタンを追加する
- リセットボタンを押すと、身長と体重の入力欄を空にする
- BMIの表示を「–.-」に戻す
- 判定結果を「未計算」に戻す
- エラーメッセージを消す
- 判定基準表の強調表示も解除する
- HTML、CSS、JavaScriptの現在の構成は変更しない
- 外部ライブラリは使用しない
現在のindex.html、style.css、script.jsへ追加する形で作成してください。
コードを回答するときは、次の内容も説明してください。
- HTMLのどの部分に追加するのか
- CSSのどの位置に追加するのか
- JavaScriptのどの処理の前後に追加するのか
- 変更するコードと、新しく追加するコードを分けて示す
既存の処理が動かなくならないように、現在のコードとのつながりを確認してから修正してください。
Difyで「自分専用AI」を作るという考え方
ChatGPTやGeminiは、文章作成、質問への回答、プログラミングなど、さまざまな用途に使える汎用的な生成AIです。
一方、Dify（ディファイ）は、生成AIを利用したアプリや業務用の仕組みを作るためのプラットフォームです。プロンプトや処理の流れ、参照する資料などをあらかじめ設定し、特定の目的に合わせたAIを作成できます。
例えば、次のようなAIが考えられます。
- HTMLやCSSの質問に答える学習用AI
- Gitの操作を初心者向けに説明するAI
- ポートフォリオの改善点を提案するAI
- 社内マニュアルをもとに回答するAI
- 問い合わせ内容を整理するAI
このようなAIは、新しいAIモデルそのものを作るわけではありません。
ChatGPTなどのAIモデルに対して、役割や回答のルール、使用する資料、処理の順番を設定し、目的に合ったAIアプリとして利用できるようにします。
毎回同じ指示を入力しなくてよい
通常の生成AIでは、質問するたびに目的や条件を入力します。
例えば、Web制作の学習用として使う場合は、
- 初心者向けの言葉で説明する
- 完成コードだけでなく理由も説明する
- HTML、CSS、JavaScriptを別ファイルにする
- 古い書き方を避ける
- すぐに答えを出さず、確認する順番も示す
といった条件を毎回伝える必要があります。
Difyでは、このような指示をあらかじめ設定できます。
利用者が短い質問を入力しても、決められた役割やルールに沿って回答するため、回答の方向性をそろえやすくなります。
独自の資料を参照させることもできる
Difyには、登録した資料をAIの回答に利用する「ナレッジ」の仕組みがあります。
授業資料、社内マニュアル、商品資料、よくある質問などを登録すると、一般的な知識だけでなく、その資料をもとに回答するAIを作成できます。
例えば、Web制作講座の教材を登録しておけば、受講者からの質問に対して、授業で使用している内容やルールに沿った回答を返しやすくなります。
複数の処理を順番に実行できる
Difyでは、質問に回答するだけでなく、複数の処理を組み合わせたワークフローも作成できます。
例えば、ポートフォリオ添削AIであれば、
- 利用者が作品の情報を入力する
- 入力内容を項目ごとに整理する
- デザインやコードを確認する
- 良い点と改善点に分ける
- 初心者向けの文章で回答する
という処理を順番に実行させることができます。
このように、AIへ毎回細かく指示を出すのではなく、目的に合わせた指示や手順を仕組みとしてまとめるのがDifyの考え方です。
ChatGPTやGeminiが何でも相談できる汎用的なAIだとすれば、Difyはそれらを活用して、会社、学校、サービスなどに合わせた「専用AI」を作るための道具と考えると分かりやすいでしょう。
他のアプリに挑戦
HTML・CSS・JavaScriptだけで、落ちものパズルゲームを作成してください。
【ファイル構成】
・index.html
・style.css
・script.js
【条件】
・外部ライブラリは使用しない
・XAMPPなどのサーバーを使わず、index.htmlを開くだけで動作する
・初心者が学習できるように、複雑すぎないコードにする
・HTML、CSS、JavaScriptをそれぞれ別ファイルにする
・コード内に日本語のコメントを入れる
【基本機能】
・ゲーム画面は横10マス、縦20マス
・7種類のブロックをランダムに表示する
・左右キーで移動する
・上キーで回転する
・下キーで速く落とす
・横一列がそろったら、その行を消す
・消した行に応じてスコアを加算する
・ブロックが上まで積み上がったらゲームオーバーにする
・スタートボタンとリセットボタンを付ける
・画面にスコアと操作方法を表示する
最初に、どのような処理が必要かを初心者向けに説明してください。
そのあと、3つのファイルのコードを省略せずに提示してください。