【実践レポート】レベル1 バイブコーディング導入・Web1枚ページ作成コースを（実際に）やってみた

はじめに

「プログラミング未経験だけど、自分でWebページを作ってみたい」 「AIを使って、もっと手軽に自分のアイデアを形にしたい」

そんな思いを持つ方にぴったりなのが、この「レベル1 バイブコーディング導入・Web1枚ページ作成コース」です。 今回は、実際にこのコースを受講してみた実践内容をもとに、その流れと魅力をレポートします！

どんなコースなの？

基本情報

• サービス名: はじめてのバイブコーディング×業務アプリ開発
• レベル: レベル1（初心者向け）
• コース名: バイブコーディング導入・Web1枚ページ作成コース

このコースは、AIツールを活用して、プログラミング未経験でも「自分の思い通りのWebページ」を1枚作り上げることをゴールにした実践的な内容です。

事前に必要なもの

受講にあたって準備するものは、以下の通りシンプルです。

• PC環境:
  • PC（Windows/Mac問わず）
  • インターネット接続
  • ブラウザ（Google Chrome推奨）
• アカウント:
  • メールアドレス（各種サービス登録用）
  • AIツールのアカウント（ChatGPT / Gemini / Claudeのいずれか。無料プランでOK！）

もし「AIツールのアカウントの作り方がわからない…」という場合でも、一緒に作成するところからサポートしてもらえるので安心です。基本的なPC操作と、ファイルの保存などの操作ができれば問題ありません。

このコースで学ぶこと・到達目標

学べること

1. HTML/CSS/JavaScriptの基礎: Webページがどう動いているかの仕組み
2. AIツールを使ったコード生成: AIに指示を出してコードを書いてもらう方法
3. インターネット上へのデプロイ: 作ったページを世界中に公開する手順

目指すゴール

• AIに的確な指示（プロンプト）を出して、1枚のWebページを完成させること
• 完成したページを実際にインターネット上で公開すること

学習の流れ

コースは大きく分けて以下のステップで進みます。

1. 準備と環境構築: 必要なツールを揃える
2. 基礎学習: HTML/CSS/JavaScriptの役割を知る
3. 実践プロジェクト: 実際に手を動かしてページを作る
4. 公開（デプロイ）: 自分の作品をWebにアップする

Webページの仕組み（HTML/CSS/JavaScript）

Webページを作る前に、「そもそもWebページって何でできているの？」という基礎を学びます。 実際のページを見ながらの解説がとても分かりやすかったです。

• HTML（骨組み）: ページの構造を作ります。「ここが見出し」「ここが画像」といった指示書のようなものです。
• CSS（見た目）: デザインを担当します。「背景を赤くしたい」「文字を大きくしたい」といった装飾を行います。
• JavaScript（動き）: インタラクティブな機能を追加します。「ボタンを押したら動く」「スライドショーを表示する」といった動作を制御します。

これらが組み合わさって、普段私たちが目にするWebページができているんですね。

AIツールを使いこなそう

このコースの醍醐味は、なんといっても「AIツール」の活用です。 ChatGPT、Gemini、ClaudeなどのAIを使って、コードを書いてもらいます。

最近のAIツールには「Canvas」や「Artifact」といった機能があり、AIが書いたコードのプレビューをその場で確認できます。 「○○を作ってください」とお願いするだけで、あっという間に形になっていく様子は感動ものです！

実践！自分だけのページを作ってみる

ここからがいよいよ本番。実際に自分の作りたいページを作っていきます。 私は今回、架空のカフェのランディングページを作成してみることにしました。

実際にAIにお願いしたプロンプト

AI（Gemini）に対して、実際に以下のような指示（プロンプト）を送りました。

入力したプロンプト：

「カフェ『Forest Brew』のWebサイトを作ってください。
 緑色を基調とした、ナチュラルでおしゃれなデザインにしてください。」

驚いたことに、たったこれだけの指示で、一瞬にして見出しやレイアウトが整ったWebページのコードが生成されました。 「緑色を基調とした」といった具体的な指示が、しっかりとデザインに反映されています。

他にも、アイデア次第で以下のようなページも作ることができます。

• 自己紹介ページ（ポートフォリオ）
• 自社商品の紹介LP
• 動くクイズアプリ

「基本用語」を知ると、指示がもっと具体的になる

AIに修正をお願いするとき、「なんか違う…」と伝えるだけではなかなか思った通りになってくれません。 そこで役立つのがWebの「基本用語」です。

• ヘッダー: ページの一番上の部分
• カルーセル: 画像がスライド切り替わりするやつ
• アイキャッチ: 目を引く大きな画像
• 余白（パディング/マージン）: 要素同士の間隔

「ヘッダーの背景色を変えて」「ボタンをもっと大きくして」といったように、用語を使って具体的に指示することで、AIは完璧に応えてくれるようになります。

スマホ対応（レスポンシブデザイン）も忘れずに

現代のWebサイトは、スマホで見られることがほとんど。 PCでは綺麗に見えても、スマホで見ると崩れている…なんてことがないように、「レスポンシブ対応」についても学びます。

「スマホでも見やすくして」とAIに一言添えるだけで、プロ顔負けのレスポンシブデザインが完成するのは驚きでした。

最後に：作ったページを世界へ公開！

最後は、作成したページを「Netlify Drop」というサービスを使って公開します。 ファイルをドラッグ＆ドロップするだけという手軽さ！アカウント登録を行えば、一瞬でURLが発行されます。

自分の作ったページがインターネット上で誰でも見られる状態になる瞬間は、何とも言えない達成感がありました。

画像を使うときのちょっとした注意点

AIのエディタ上（Canvas等）では、自分の好きな画像を直接アップロードして表示させることに制限がある場合があります。

そんな時の対処法もバッチリ学びました。

1. 編集中は「仮の画像」を使う: ネット上のフリー素材（プレイスホルダー画像）を使って、レイアウトを確認しながら作業を進めます。
2. 完成したら「本番画像」に差し替え: ダウンロードしたHTMLファイルを編集して、自分の手持ちの写真などのファイル名に書き換えます。

この手順を踏むことで、好きな画像を使ったオリジナルのページも問題なく作れます。

まとめ

「レベル1 バイブコーディング導入・Web1枚ページ作成コース」をやってみて感じたのは、「プログラミング＝難しい」という壁がなくなったということです。

コードが書けなくても、仕組みを理解し、AIに正しく指示を出せれば、誰でもクリエイターになれる時代なんですね。

• 完璧を目指さず、まずは動かしてみる
• 分からないことはAIに聞く
• プログラミングを楽しむ

この3つのコツを胸に、次はもっと色々なページや、業務効率化ツールの作成（レベル2）にも挑戦していきましょう！

興味のある方は、ぜひこの新しい「ものづくり」の世界に飛び込んでみてください。間違いなくワクワクする体験が待っています！

「もっと詳しく知りたい」「一人で進めるのが不安」という方は、ココナラで完全サポートも行っています。

マンツーマンで丁寧に教えますので、ぜひお気軽にご利用ください。

👉 ココナラでWeb1枚ページ作成コースを見る