「そろそろWeb制作をちゃんと学びたい」
「ちょっとHTMLを触ってみたけど、ちゃんと理解できてない…」
そんなあなたにこそ、AIと一緒に学ぶこのシリーズがぴったりです！
HTMLやWebの基礎は、本や動画だけではなかなか身につかないもの。
でも今は、ChatGPTに質問しながら手を動かすだけで、しっかり理解しながら自分のページが作れるようになります。
この講座では、AIに聞きながらコピペでOKなコードを使って、
「Webページってこうやってできるんだ！」という実感を得られるように構成しています。
少しでも「やってみたい」と思った今がチャンス。
AIと一緒に、あなたのWeb制作スキルを一歩ずつ形にしていきましょう！
- プログラミングの知識は不要
- コピペからスタートOK
- ChatGPTに質問しながら安心して学べる
完成を目指すのは「自分のポートフォリオにも使える自己紹介ページ」。
全10回で、実際にブラウザで見られるページを作っていきましょう！
STEP1｜HTMLの基本構造を理解しよう（コピペで1ページ完成）
HTMLってなに？Webページの土台を作る言語
HTML（エイチティーエムエル）は、Webページの“骨組み”を作る言語です。
見出しや文章、画像などの配置を「タグ」と呼ばれる記号で表現します。
これから学ぶのは、自己紹介ページを作るための超基本。
「タグって何？」「どう書くの？」そんな疑問を、ChatGPTと一緒に解決しながら進めていきましょう。
この講座ではまず「自己紹介ページ」を作ります。
なぜなら、自分自身のことを表現する内容ならイメージしやすく、どんな文章を入れるか迷いにくいからです。
また、ポートフォリオやSNS連携など将来的にも活用できるページとして、練習にぴったりの題材です。
ChatGPTに聞いてみよう：HTMLのひな形を教えて！
まずはChatGPTにこう聞いてみましょう。
初心者向けのHTMLひな形を教えてください。見出しと段落だけでOKです。すると、次のようなコードを教えてくれます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介ページ</title>
</head>
<body>
<h1>はじめまして！</h1>
<p>これは私の自己紹介ページです。</p>
</body>
</html>このコードを、コピーしてメモ帳やVS Codeなどに貼り付けてください。
そして、index.htmlという名前で保存しましょう。
書いたコードをブラウザで表示しよう
保存した index.html をダブルクリックすると、ブラウザが開いてページが表示されます。
h1→ 「はじめまして！」という大きな見出しp→ 「これは私の自己紹介ページです。」という文章
実際に表示されたら、Webページが自分で作れたということ！感動の第一歩です。
ChatGPTを使って、コードの意味を理解しよう
それぞれのタグの意味がよくわからない場合は、ChatGPTにこう聞いてみましょう。
このHTMLのコードの意味をタグごとに簡単に解説してください。または、特定のタグだけ気になる場合は、
<DOCTYPE html> って何ですか？初心者にもわかるように説明してください。のように質問してみてください。AIがやさしく解説してくれます。
今回のまとめ
- HTMLはWebページの土台を作る言語
h1やpを使って見出しや文章を表示できる- index.html を保存してブラウザで開けば、自分のWebページが見られる
次のSTEPでは、ページのデザイン（色・配置）を整えるCSSについて学んでいきます。
STEP2｜CSSでページの色とレイアウトを整えよう
Webページに“デザイン”を加えるCSSとは？
HTMLでページの構造は作れましたが、見た目はまだシンプルすぎる状態です。
そこで登場するのが CSS（シーエスエス）。
文字の色や大きさ、配置や背景色などを指定して、ページを美しく整えられます。
ChatGPTに聞いてみよう：色とレイアウトを整える方法は？
まずは、ChatGPTに以下のように聞いてみましょう。
自己紹介ページに使えるシンプルでおしゃれなCSSの例を教えてください。すると、次のようなコードを提案してくれます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介ページ</title>
<style>
body {
background-color: #fdf6f0;
color: #333;
font-family: "Helvetica Neue", sans-serif;
padding: 20px;
}
h1 {
color: #ff6f61;
}
p {
line-height: 1.6;
}
</style>
</head>
<body>
<h1>はじめまして！</h1>
<p>これは私の自己紹介ページです。</p>
</body>
</html>このコードでは、ページ全体の背景色や文字色が変更されています。
見出しの色だけ変えることもできるので、色味やバランスを自分の好みに合わせて調整してみましょう。
ChatGPTで配色の相談もできる！
どんな色を使えば良いかわからないときは、ChatGPTにこう聞いてみてください。
女性向けのポートフォリオに合う配色パレットを5つ教えてください。カラーコード付きでバランスのよい提案をしてくれます。
その中から好きな組み合わせを選んで、CSSの background-color や color に設定するだけです。
今回のまとめ
- CSSを使うと背景色や文字色、フォントなどが変更できる
<style>タグ内に書くCSSで簡単に見た目を整えられる- ChatGPTに配色やスタイルの相談をすると、初心者でもセンスよくデザインできる
次のSTEPでは、JavaScriptを使ってWebページに動きを加える方法を学びます。
STEP3｜JavaScriptでページに動きをつけよう
Webページに“動き”を加えるJavaScriptとは？
HTMLとCSSで、見た目が整った自己紹介ページができました。
次は、クリックで要素を開閉したり、メッセージを表示したりといった「動き」をつけてみましょう。
それを可能にするのが JavaScript（ジャバスクリプト）です。
ChatGPTに聞いてみよう：簡単なJavaScriptの例を教えて！
まずは、ChatGPTにこう聞いてみてください。
ボタンをクリックしたら文章が表示されるJavaScriptを教えてください。初心者向けでお願いします。すると、次のようなHTMLとJavaScriptの組み合わせを教えてくれます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介ページ</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
#message {
display: none;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>はじめまして！</h1>
<p>これは私の自己紹介ページです。</p>
<button onclick="showMessage()">もっと見る</button>
<p id="message">実はWeb制作にチャレンジ中です！</p>
<script>
function showMessage() {
document.getElementById("message").style.display = "block";
}
</script>
</body>
</html>このコードでは、「もっと見る」ボタンを押すと、非表示だった文章が表示されます。onclick や getElementById といったキーワードが使われていますが、意味がわからなければその都度ChatGPTに聞いてOKです。
ChatGPTにお願いしてコードをカスタマイズしよう
「クリックで表示」だけでなく、他にもいろんな動きをつけてみたいときは、次のように聞いてみてください。
ボタンを押すたびに表示と非表示が切り替わるJavaScriptを作ってください。ChatGPTが、動きに応じたコードを提案してくれます。
そのコードを貼り替えながら、違いを体験してみましょう。
今回のまとめ
- JavaScriptを使うとWebページに「動き」を加えられる
- ChatGPTに聞けば、初心者向けのサンプルコードを出してくれる
- クリックや表示の切り替えなど、身近な動きを取り入れてみよう
次のSTEPでは、GitとGitHubを使ってコードの履歴を管理する方法を学びます。
STEP4｜GitとGitHubでコードの履歴を管理しよう
バージョン管理ってなに？作業の記録を残す仕組み
Web制作では、少しずつ修正を加えながらページを完成させていきます。
ですが、「前の状態に戻したい」「何を直したか確認したい」と思うことが必ず出てきます。
そんなときに役立つのが Git（ギット） というバージョン管理ツールです。
さらに、作ったコードをクラウド上に保存できるのが GitHub（ギットハブ） です。
ChatGPTに聞いてみよう：Gitを初めて使うには？
まずはChatGPTにこう聞いてみましょう。
初心者向けにGitの基本的な使い方と、最初にやることを教えてください。ChatGPTは次のような手順を教えてくれます。
- Gitをインストールする（公式サイトから）
- ターミナルで
git init（新しいリポジトリの作成） git addとgit commitで変更を記録- GitHubにアカウントを作成し、リモートリポジトリを作る
git pushでクラウドにアップロード
わからないコマンドが出てきたら、都度ChatGPTに聞きながら実行すればOKです。
実際にやってみよう：自己紹介ページをGitHubにアップ
- 自己紹介ページのあるフォルダをGitで初期化
- ファイルを追加してコミット
- GitHubに新しいリポジトリを作成
- リモート先を設定し、
git pushでアップロード
ChatGPTに以下のように具体的な手順を聞いてみてください。
HTMLファイルをGitHubにアップロードするまでの手順を、初心者向けに詳しく教えてください。丁寧にステップを教えてくれますし、途中でエラーが出た場合もそのままコピペして相談できます。
今回のまとめ
- Gitは作業の履歴を記録できる便利なツール
- GitHubを使えばWeb上に自分のコードを保存・共有できる
- ChatGPTに手順やエラーの対処法を聞きながら安心して進められる
次のSTEPでは、VS Codeと便利な拡張機能を使って作業効率をアップする方法を学んでいきます。
STEP5｜VS Codeと拡張機能で作業を効率化しよう
Web制作に必須のエディタ「VS Code」とは？
これまでのSTEPで、HTML・CSS・JavaScript・Gitを使ってWebページを作ってきました。
これらの作業を効率よく進めるには、コードを書くための専用ツール（エディタ）が欠かせません。
その中でも多くのエンジニアに支持されているのが、Visual Studio Code（VS Code）です。
無料で使えて、日本語対応・拡張機能も豊富。初心者にもおすすめです。
ChatGPTに聞いてみよう：VS Codeの便利な設定や拡張機能は？
まずはChatGPTにこう尋ねてみましょう。
HTML/CSS/JavaScriptを書くのに便利なVS Codeの設定とおすすめ拡張機能を教えてください。ChatGPTが教えてくれる代表的な拡張機能はこちら：
- Live Server：ブラウザでリアルタイムに表示を確認できる
- Prettier：コードを自動で整えてくれる
- Emmet：短い記法でHTMLを爆速入力できる
- ChatGPT拡張：VS Code上から直接AIに質問できる
Emmetって何？HTMLを爆速で書ける機能
たとえば、次のように入力すると…
ul>li*3Enterキーを押すだけで、次のようなHTMLが一瞬で出力されます。
<ul>
<li></li>
<li></li>
<li></li>
</ul>これを Emmet（エメット） といいます。VS Codeでは標準で使えるので、ぜひ試してみましょう。
ChatGPTに聞いて拡張機能をインストールする手順を教わろう
以下のように質問すれば、VS Code上での操作方法を丁寧に教えてくれます。
VS CodeでLive Serverをインストールして使う手順を教えてください。手順に沿って進めれば、コードを書いて保存するだけで自動的にブラウザが更新されるようになります。
今回のまとめ
- VS CodeはWeb制作に最適な無料エディタ
- 拡張機能を使えば作業が速く、正確になる
- EmmetやLive Serverなど、AIに聞きながら設定して使ってみよう
次のSTEPでは、画像生成AIを活用してWebサイトに使えるオリジナル素材を作成してみます。
STEP6｜画像生成AIでオリジナル素材を作ろう
Webページに“オリジナル画像”を使いたい！
テキストだけのページから一歩進んで、見た目にも印象的なWebページを作るには、画像の力が欠かせません。
とはいえ、商用利用可能なフリー画像を探すのも意外と手間がかかります。
そこで便利なのが、画像生成AI（Image AI）。
自分のイメージを文章で伝えるだけで、オリジナル画像を生成してくれるツールです。
ChatGPTに聞いてみよう：画像生成の指示文を考えてもらう
画像生成AIに指示するための文章（プロンプト）を考えるのが難しいときは、ChatGPTに頼ってみましょう。
たとえば、次のように聞きます。
ポートフォリオサイトのトップに使える、やわらかい色合いのヒーロー画像を生成するためのプロンプトを考えてください。すると、画像生成ツールにそのまま入力できるプロンプト文を出してくれます。
実際に生成してみよう：画像生成ツールを使ってみる
おすすめの画像生成サービス（無料あり）
- Bing Image Creator
- Adobe Firefly
- Canva（AI画像生成機能付き）
- NightCafe
- Leonardo AI
それぞれのサービスにChatGPTから得たプロンプトをコピペするだけで、自分だけの画像が作れます。
作った画像をWebページに配置してみよう
生成した画像をダウンロードしたら、Webページに貼り付けてみましょう。
<img src="hero.jpg" alt="メインビジュアル" width="100%">画像のファイル名とパスが合っていれば、ブラウザ上にきれいに表示されます。
今回のまとめ
- 画像生成AIを使えば、自分だけのビジュアル素材が作れる
- ChatGPTにプロンプトを考えてもらえば、指示もスムーズ
- 生成した画像はHTMLで簡単にWebページに貼り付けられる
次のSTEPでは、SEOの基本とメタ情報の設定方法を学んでいきます。
「見せられるページ」が作れたら、次にやるべきことは？
実は、Web制作の本質はここからです。
- 検索に強いSEO設計
- フォームから連絡が取れるお問い合わせ機能
- Web上で見てもらうための無料公開（GitHub Pages）
- 仕上げとしてのスマホ対応＆コードレビュー
これらを身につけて、「作って終わり」から「公開・運用できるページ」へ進化させていく。
この続きは、noteで公開中です
続きを学びたい方には、STEP7〜STEP10を収録したnote記事をご用意しています。
👇 こちらのnoteから、残り4STEPをまとめて読めます
- SEOの基礎とメタ情報の書き方（STEP7）
- お問い合わせフォームの実装（STEP8）
- GitHub Pagesでの公開手順（STEP9）
- 全体統合＆AIによるコードレビュー（STEP10）
「なんとなくコピペしただけ」から
「仕組みがわかって、自分で応用できる」へ。
AIと一緒に進めるから、途中でつまずいても大丈夫。
この4STEPを終えたとき、あなたのWebページは“実務に出せる状態”になっているはずです。
