MENU
AI活用法 ✕ WEB制作 ✕ マーケティング
  1. ホーム
  2. プログラミング
  3. Gemini Code AssistとVS Codeで作る！初心者向けWEBサイト構築ガイド

Gemini Code AssistとVS Codeで作る！初心者向けWEBサイト構築ガイド

プログラミング
Gemini Code AssistとVS Codeで作る！初心者向けWEBサイト構築ガイド

「WEBサイトを作ってみたいけど、何から始めればいいかわからない…」という方は多いのではないでしょうか。

学習用の情報も溢れていますが、HTML・CSS・JavaScriptの基礎を一人で理解するのはなかなか難しいものです。

そんなときに大きな助けとなるのが、AIコード補完ツール「Gemini Code Assist」と、世界中の開発者が愛用するエディタVisual Studio Code（VS Code）です。

Gemini Code AssistはGoogleが提供するAIベースのコードアシスタントで、初心者でもわかりやすいコード補完やリアルタイムの解説を提供してくれます。

そしてVS Codeはシンプルで軽快な操作性、豊富な拡張機能が魅力のテキストエディタです。

この2つを組み合わせることで、初心者でも効率的かつ楽しくWEBサイト構築ができる環境が整います。

この記事では、Gemini Code AssistとVS Codeを活用しながら、HTML・CSS・JavaScriptでシンプルなWEBサイトを作成する方法を、具体例を交えて解説します。

コードを実際に書きながら学ぶことで、プログラミングの基礎をスムーズに習得できるはずです。

目次

Gemini Code AssistとVS Codeの組み合わせが最強な理由

Gemini Code Assistは、コードを書くときに最適な補完候補やエラーチェックを自動で提示し、初心者がつまずきやすいポイントをサポートしてくれます。

例えば、HTMLタグの閉じ忘れや、CSSプロパティのスペルミスなど、ありがちなミスを瞬時に修正案として示してくれます。

これにより、「動かない原因がわからない」といった初心者の挫折ポイントを減らすことができます。

一方のVS Codeは、軽快な操作感と豊富なプラグインで有名です。

Gemini Code AssistをVS Codeに拡張機能として組み込むと、コードを書きながらAIがリアルタイムで提案してくれる最強の開発環境が完成します。

特に、HTMLやCSSの構造を自動生成するスニペット提案、JavaScriptでの関数作成サポートなどは学習効率を大きく向上させてくれます。

例えば、h1と入力してEnterを押すだけで <h1></h1> が自動補完され、続いてGeminiが「ここにサイトタイトルを入れましょう」とコメントしてくれることもあります。

このように、自分が考える前にサポートが入ることで学習スピードが倍増します。

VS Codeの導入と基本設定

まずはVS Codeをインストールしましょう。公式サイト（https://code.visualstudio.com/）から自分のOS（Windows、Mac、Linux）に対応したインストーラをダウンロードし、画面の指示に従ってセットアップします。

インストールが完了したら、日本語化拡張機能（Japanese Language Pack）を導入すると、メニュー表示が日本語になるため初心者でも使いやすくなります。

初期設定のポイント

  • テーマの変更：視認性の良い「Dark+」や「Light」など好みのテーマを選びましょう。
  • フォントサイズ調整：自分が見やすい文字サイズに設定します。
  • 保存時の自動フォーマット：拡張機能「Prettier」を導入すると、コードが自動で整形されます。

自動整形についてはこちらの記事でも詳しく解説していますので、合わせてご覧ください！

ニコイチブログ
【VS Code】PHPとHTMLを保存と同時に自動整形（フォーマット）する方法 | ニコイチブログ VS Codeでコーディングを行っていて、自動整形（フォーマット）機能は欠かせない拡張機能だと思うのですが、HTMLとPHPを同時にフォーマットしてくれる拡張アプリが見つから…

便利な拡張機能

  • Live Server：HTMLファイルをリアルタイムでプレビューできる。
  • Path Intellisense：ファイルパスの補完をサポート。
  • Auto Rename Tag：HTMLの開始タグ・終了タグを同時編集できる。

プロジェクトを始めるときは、VS Codeで「新しいフォルダー」を作成し、index.htmlやstyle.cssなどの必要なファイルを追加しましょう。

VS Codeのエクスプローラー画面からフォルダ構造を直感的に確認できるため、ファイル管理がしやすくなります。

VS Code関連記事

Gemini Code Assistの導入方法

Gemini Code Assistはブラウザから利用できるほか、VS Code用の拡張機能としても使えます。

まずGoogleアカウントでログインし、Gemini Code Assistの公式サイトにアクセスしましょう。

無料版でもHTMLやCSS、JavaScriptの補完・解説機能が使えるため、学習用途には十分です。

VS Codeへの組み込み手順

STEP
VS Codeを起動して「拡張機能」を開く

VS Codeを立ち上げたら、画面の左側にあるサイドバーの「拡張機能」（Extensions）アイコンをクリックします。

STEP
「Gemini Code Assist」を検索してインストール

検索窓に「Gemini Code Assist」または「Gemini + Google Cloud Code」と入力して検索してみましょう。

検索結果に出てくる「Gemini Code Assist」または「Gemini + Google Cloud Code」という拡張機能を見つけたら、「Install」（インストール）をクリックしてください。

STEP
Googleアカウントと連携（サインイン）

インストールが終わったら、VS Codeの画面左に出てくるGeminiのアイコンをクリックするか、VS Codeの右下やサイドバーに表示されるポップアップやアイコンをクリックして、拡張機能を起動します。

画面内の「Sign in With Google」または「Login to Google Cloud」をクリックすると、自動的にブラウザが開きます。

画面の指示に従って、Googleアカウントで認証（サインイン）をしてください。

認証が終わったらブラウザを閉じてVS Codeに戻れば、Gemini Code Assistを使う準備は完了です！

これで、VS Codeのエディタ画面上でGeminiの補完機能が有効になります。

コードを入力し始めると、右側や下部に提案が表示されるため、TabキーやEnterキーで適用しましょう。

なんのキーを押したらいいかもアシストしてくれますので、迷ったらどこかにポップアップしてないか探してみるのもいいですよ！

無料版でできること

  • HTML・CSS・JavaScriptのリアルタイムコード補完
  • エラーチェックと修正提案（タグの閉じ忘れやスペルミスの自動指摘）
  • コメントに対するコード生成（コメントに「赤い背景のボタン」と書くとCSS提案）
  • コード例やベストプラクティスの提案（レスポンシブデザインの書き方など）
  • 小規模プロジェクトでのAIチャット解説（「このコードの意味は？」と聞くと説明してくれる）
  • ショートカット操作での補完候補呼び出し（Ctrl + Space）

有料版との違い

Gemini Code Assistには有料プランがあり、以下のような追加機能があります。

  • より高度なコード生成（複雑なJavaScriptロジックやAPI連携例を一括生成）
  • プロジェクト全体を見渡したエラー修正提案（ファイル横断のコードレビュー）
  • 高度な学習サポート（AIによるチュートリアルやステップごとの解説）
  • 高速応答とリソース拡張（無料版は応答制限あり）

初心者の学習目的であれば、まずは無料版で十分です。

より複雑なWEBアプリや効率的な開発環境を求めるタイミングで、有料版を検討すると良いでしょう。

HTML・CSS・JavaScriptの基本構造

WEBサイトを作る上で必要になる3つの基本技術が、HTML・CSS・JavaScriptです。

これらは役割が異なり、組み合わせることで初めて見た目も動きもあるサイトが完成します。

それぞれの役割

  • HTML（HyperText Markup Language）
    サイトの「骨組み」を作る。見出し、段落、画像、リンクなど、ページの構造を記述する言語。
  • CSS（Cascading Style Sheets）
    サイトの「デザイン」を担当する。
    文字の色や大きさ、背景色、レイアウトなどを設定。
  • JavaScript
    サイトの「動き」を作る。
    ボタンクリックでアラートを出したり、スライドショーを動かすなど、インタラクティブな機能を実現。

ファイル構成例

WEBサイトは、以下のようなフォルダ構成が基本です。

project/
 ├─ index.html
 ├─ style.css
 └─ script.js

HTMLの基本タグ

以下はよく使うタグの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルサイト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>こんにちは、WEBサイト！</h1>
  <p>これはサンプルページです。</p>
  <a href="#">リンクはこちら</a>
  <button id="btn">クリックしてね</button>
  <script src="script.js"></script>
</body>
</html>

CSSの基本構造

CSSはデザインを決めるためのルールを記述します。例えば以下のように、背景色や文字サイズを指定します。

body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f5f5f5;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #ff6666;
  color: white;
  border: none;
  cursor: pointer;
}

JavaScriptの基本例

JavaScriptはイベントに応じて動作を付けます。

document.getElementById('btn').addEventListener('click', () => {
  alert('ボタンがクリックされました！');
});

ポイント

Gemini Code Assistを使えば、上記のHTMLやCSS、JavaScriptの基本構造を入力する際に、タグ補完やサンプルコードの提案を受けられます。

例えば、「bodyに背景色を付けたい」とコメントすると、AIが自動的にbackground-colorの記述例を提示してくれるため、初心者でもスムーズに理解しながらコーディングできます。

実際に作ってみよう！シンプルなWEBサイト例

ここでは、HTML・CSS・JavaScriptを使って「クリックするとメッセージが出るシンプルなWEBサイト」を作ってみましょう。

Gemini Code Assistを活用すれば、コード入力の途中で補完提案や修正案が出るので、コーディングのハードルがぐっと下がります。

手順1：フォルダ構成を作る

まず、作業用フォルダを作成します。

例として「my-first-site」というフォルダを作り、その中に以下の3つのファイルを用意します。

my-first-site/
 ├─ index.html
 ├─ style.css
 └─ script.js

手順2：HTMLファイルを作成

index.htmlに以下のコードを入力します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>はじめてのWEBサイト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>ようこそ！</h1>
  <p>ボタンをクリックするとメッセージが出ます。</p>
  <button id="btn">クリック！</button>
  <script src="script.js"></script>
</body>
</html>

Geminiでの活用例

Gemini Code Assistに「HTMLの基本構造を作成して」と入力すると、上記のようなHTMLテンプレートが提案されます。

さらに、<button>タグにカーソルを合わせて「このボタンを大きくしたい」とコメントすると、関連するCSSを提案してくれます。

手順3：CSSファイルでデザインを設定

次に、style.cssに以下のコードを書きます。

body {
  font-family: 'Arial', sans-serif;
  background-color: #f0f8ff;
  text-align: center;
  margin-top: 50px;
}
h1 {
  color: #333;
  font-size: 2em;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #1e90ff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #4682b4;
}

Geminiでの活用例

CSSを書くときに「青系の背景色」とコメントするだけで、Geminiが #1e90ff や #4682b4 といった推奨カラーを提示します。

また、「ホバー時に背景色を少し暗くして」と指示すると、button:hover のコードを自動生成することもできます。

手順4：JavaScriptで動きをつける

最後に、script.jsに以下のコードを追加します。

document.getElementById('btn').addEventListener('click', () => {
  alert('ボタンがクリックされました！');
});

Geminiでの活用例

Geminiに「ボタンクリック時にアラートを表示するコード」と指示すると、上記のJavaScriptが自動生成されます。

さらに「クリック後にボタンの色を変えたい」と続けて指示すれば、追加のコード例も提案してくれます。

手順5：Live Serverでプレビュー

VS Codeに「Live Server」拡張をインストールして、index.htmlを右クリックし「Open with Live Server」を選択すると、ブラウザが自動で立ち上がり、リアルタイムに変更が反映されます。

Gemini Code Assist活用のポイント

Geminiは「このHTMLに必要なCSSを作って」といった指示も理解し、すぐに使えるサンプルを生成してくれるため、コピペだけでなく学びながら自分のサイトを完成させることができます。

単なるコード生成ではなく、提案内容を確認・修正しながら試すことで理解度が格段に向上します。

Gemini Code Assistでコーディングを効率化

Gemini Code Assistは、ただコードを補完するだけでなく、初心者が効率よく学習・開発できるようにさまざまな機能を備えています。

ここでは、実際の作業で活用できる具体的なテクニックを紹介します。

1. コメントからコードを生成

例えば、HTMLファイルに <!-- ヘッダー --> とコード内に記述して「Windows/LinuxならCtrl+Enter、macOSならcontrol+Returnを押すと、Geminiが<header>タグを含むサンプル構造を提案してくれます。

CSSでも ボタンを赤色にしたい と書くと、自動で background-color: red; を含むスタイル候補を生成します。

実例

<!-- ヘッダー -->

と入力すると、Geminiは以下のような提案を行います。

2. コードのリファクタリング提案

書いたコードをGeminiに「もっと効率的な書き方はある？」と尋ねると、冗長な記述をまとめたサンプルを返してくれます。

特にJavaScriptでのイベント処理や条件分岐の簡略化に役立ちます。

実例

document.getElementById('btn').addEventListener('click', function(){
  alert('クリックされました');
});

に対して、Geminiが次のような提案をすることがあります：

const btn = document.getElementById('btn');
btn.onclick = () => alert('クリックされました');

3. 学習用の解説機能

意味を知りたいコードを選択して、Geminiのチャット欄に「このCSSコードの意味を教えて」と入力すると、コードの各部分を解説してくれます。

例えば、

button:hover {
  background-color: #4682b4;
}

に対して、コードの意味を尋ねると「ホバー時に背景色を変更する疑似クラスです」と教えてくれるため、コードの意味が理解しやすくなります。

4. 複数の提案から最適なものを選択

特定の処理方法について複数案を提示してくれることもあり、初心者はその中から自分に合った書き方を学べます。

例： 「ボタンクリックでテキストを変えるコード」とチャット欄で指示すると、innerText を使う方法や textContent を使う方法など複数のパターンが提案されます。

具体的に聞けば効くほど制度の高い回答が帰ってきます。

5. 実務で役立つショートカットの自動補完

Gemini Code Assistを使うと、よく使うHTMLタグや属性が自動補完されます。

以下は具体例です。

HTMLの例

  • div と入力後、Tabキーを押すと <div></div> が展開されます。
  • img と入力すると、<img src="" alt=""> の形式で自動補完されます。
  • a と入力すると、<a href=""></a> の形式で補完されます。

CSSの例

  • bg と入力すると background-color: などの候補が出現。
  • m10 といった短縮入力で margin: 10px; と提案されることがあります（スニペット拡張を併用すると便利）。

JavaScriptの例

  • addevent と入力すると、element.addEventListener('event', () => {}); の雛形が出てきます。
  • query と入力すると document.querySelector('') が補完されます。

これらの補完機能はVS Code標準のIntelliSenseとGeminiのAI提案を組み合わせることで、より豊富な候補が表示されます。

実際に使うときは、候補が出たらTabまたはEnterで補完を確定し、必要な部分を編集しましょう。

初心者がつまずきやすいポイントと解決法

WEB制作を始めたばかりの方が直面するトラブルやエラーも、Gemini Code Assistを活用すれば効率よく原因を特定し、解決策を得ることができます。

以下では、よくあるトラブルとGeminiの活用方法をセットで紹介します。

1. CSSが反映されない

原因例

  • linkタグのhrefのパスが間違っている。
  • CSSファイル名を誤っている（例：styles.cssではなくstyle.cssにする必要がある）。
  • キャッシュが効いていて変更が反映されていない。

Geminiでの解決方法

  • linkタグを選択して「このCSSのリンク先が正しいか確認して」とコメントすると、パスミスを自動で検出し修正案を提示します。
  • CSSファイル名を誤っている場合、Geminiは「style.cssが見つかりません。正しい名前に修正しますか？」と提案してくれます。
  • 「CSSが適用されない原因は？」と尋ねると、キャッシュや構文エラーの可能性をリストアップしてくれます。

2. JavaScriptが動かない

原因例

  • script.jsの読み込み位置が間違っている。
  • getElementByIdで指定するIDがHTML側に存在しない。
  • コンソールにエラーが出ている。

Geminiでの解決方法

  • 「このJavaScriptが動かない原因を教えて」とコメントすると、Geminiがエラーの箇所をハイライトし修正例を提示します。
  • getElementByIdで参照するIDがHTMLに無い場合は、「このIDは存在しません。対応するタグを作成しますか？」と提案。
  • console.logを入れるデバッグ例を自動で補完することも可能です。

3. 日本語が文字化けする

原因例

  • HTMLの<head>に<meta charset="UTF-8">が記載されていない。

Geminiでの解決方法

  • 「文字化けを直すには？」と聞くと、Geminiが<meta charset="UTF-8">の追加を提案し、自動挿入コードを生成してくれます。

4. レイアウトが崩れる

原因例

  • CSSのセレクタ指定が間違っている。
  • 不要なmarginやpaddingが設定されている。

Geminiでの解決方法

  • 「このCSSが正しく動作していない原因は？」と指示すると、CSSセレクタのミスを指摘し、修正済みコードを提案します。
  • 「余計なスペースを消すCSSを提案して」と尋ねると、marginやpaddingの調整例を提示してくれます。

5. ファイル保存忘れ

原因例

  • コードが反映されないが、実は保存していないだけのケース。

Geminiでの解決方法

  • ファイル未保存時に「未保存の変更があります。保存しますか？」と警告を出すようアラートしてくれる機能があります（VS Code連携機能）。

まとめと次のステップ

ここまで、Gemini Code AssistとVS Codeを活用して基本的なWEBサイトを構築する流れを解説してきました。

HTML・CSS・JavaScriptの基礎に加えて、Geminiを使えば単なる「コピペ」ではなく、コードの意味や正しい書き方を理解しながら効率的に学習できます。

本記事で学べるポイントの振り返り

  • Gemini Code AssistとVS Codeの導入
    AIとエディタを組み合わせた学習環境構築。
  • 基本的なWEBサイト構成
    HTMLで骨組みを作り、CSSでデザイン、JavaScriptで動きを追加。
  • Geminiの活用法
    コメントからのコード生成、リファクタリング提案、解説機能を使いながら理解を深める。
  • 初心者がつまずきやすいポイントと解決策
    Geminiを使ったエラー原因の特定と修正方法。

次に挑戦したいステップ

  1. CSSアニメーションを追加してみる
    Geminiに「ボタンをクリックしたときにアニメーションを追加したい」と指示すると、@keyframesを使ったアニメーション例を自動で提案してくれます。
  2. フォーム機能の実装
    簡単な入力フォームを作り、「入力内容をJavaScriptでバリデーションするコード」と指示すれば、フォームチェック機能を簡単に追加可能です。
  3. レスポンシブデザインの導入
    「スマホとPCで表示を変えるCSSを作成して」とコメントするだけで、@mediaクエリを使ったサンプルコードを生成してくれます。

学習を継続するためのヒント

  • Geminiの提案をそのまま使うのではなく、「なぜそのコードが必要なのか」をGeminiに質問しながら理解を深める。
  • VS Codeのショートカットや拡張機能を組み合わせることで、より効率的な開発環境を整える。
  • 小さなWEBサイトをいくつか作って実践することで、基礎知識がしっかり身につきます。
プログラミング
Gemini Code Assist VSCode
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

じゅんじゅんのアバター じゅんじゅん

愛知県を拠点に、AIを活用した業務改善支援、WEB制作、マーケティング戦略サポートを行っています。

営業、マーケティング、WEB開発など多分野で20年以上実務経験を積み、現場視点を持った提案と問題解決を強みとしています。

「誰でも気軽にAIを活用できる世界をつくる」をモットーに、中小企業や個人事業主向けに、成果につながる実践的なノウハウを提供。
ブログやYouTubeを通じて、わかりやすく実用的な情報発信にも力を入れています。

AI活用・業務効率化・マーケティング（集客）でお困りの際は、ぜひご相談ください。

関連記事

目次