MENU
SATO-AI塾は閉塾いたしました。ご自由にご覧ください➡ 動画保管庫へ

生成AIでリッチなホームページ作成講座

1. イントロダクション

動画概要

本動画では、生成AIを活用したホームページ作成講座の全体像と目的について紹介します。プログラミングやWebデザインの専門知識がなくても、AIに日本語で指示することで簡単にホームページが作れる時代になっています。本講座では、メタプロンプトを活用してAIに意図を正確に伝える技術や、Cursorを使った実践的な制作・公開の方法まで、初心者でも取り組めるステップで解説していきます。

重要ポイント

  • AIの活用により、コード知識がなくてもホームページが作れる
  • 初心者でもコードへの抵抗感をなくすことが目的
  • メタプロンプトで制作意図をAIに伝えるスキルを習得
  • Cursorを使って実践的なWeb制作が可能
  • 作成したWebサイトを自力で公開できるようになる

目次

  1. 講座の目的と全体像
  2. なぜAIでホームページを作るのか
  3. 講座で扱うツールとスキル（メタプロンプト・Cursor）
  4. 今後の講座構成の紹介

2. メタプロンプトの基本と言語化の重要性

動画概要

本講座では、生成AIを活用したホームページ作成において、最初のステップである「言語化とメタプロンプトの活用」について学びます。目的やターゲット、雰囲気などを具体的な言葉で整理し、AIに伝えるための設計図（メタプロンプト）を作る重要性を解説します。また、V0やbolt、CreateXYZなどのAIツールの紹介と、講座で使用するChatGPTとCursorによる安定した制作環境についても触れます。

重要ポイント

  • ホームページ作成は言語化から始める
  • メタプロンプトは指示文を作るための設計図
  • サイトタイプ・名前・コンセプト・目的・ターゲットを明確化
  • AIによる自動生成ツール（v0、bolt等）の特徴
  • ChatGPT+Cursorを活用する理由と利便性

目次

  1. 言語化の重要性とイメージの具体化
  2. メタプロンプトの基本と活用方法
  3. サイト概要の構成要素の整理
  4. 代表的なAIツールの特徴と選定理由
  5. 実践環境としてのCursorとChatGPTの活用

プログラミングに役立つAIツール

Create.xyz

自然言語で指示を与えると、デザインやコードをノーコードで自動生成。対話形式で細かい修正を行うのが得意で、初心者にも比較的やさしい。

v0.dev

Next.jsやTailwind CSSなど、モダンなフロントエンド技術をベースにコードを生成。ある程度大きめのサイトやWebアプリのプロトタイプに向いている。 [4, 5]

bolt.new

ブラウザ上でコード生成から実行・デプロイまで完結するフルスタックなAI開発環境。シンプルなUIで短時間にサイトを形にしやすいが、複雑なデザインはやや苦手。

STUDIO AI

デザインノーコードツールSTUDIOにAI機能を追加したプラットフォーム。ドラッグ＆ドロップ操作とAIによるレイアウト提案で、見栄え重視のサイトを作りたい方に最適。

Figma

生成AIではなく、UIデザインに特化したクラウド型ツール。細部までこだわったデザインが可能だが、コード化は別途検討が必要。

Replit Agent

オンラインIDE「Replit」に搭載されたAIで、フロントからバックエンドまでコード生成をサポート。 [10, 14, 17] ある程度プログラミングに慣れている人向けで、自由度が高い。

windsurf

テキスト指示を中心に、最新のJamstack構成（Next.jsやNuxtなど）でサイトを生成できるプラットフォーム。AIがページ遷移や動的機能も提案してくれるため、中規模以上のウェブサービス試作にも対応可能。

Cline

スマホアプリ感覚のUIで、ノーコード感覚のままReactやVueなどのコードを生成。チームでリアルタイム共同編集できる機能があり、デザインからコーディングまで一貫して効率的。

Devin

自律型エージェントの仕組みで、運用改善までAIが継続支援するサービス。 [2, 3] 初期設定したコンセプトやデザイン方針を参照しながら、自動的にコードを修正・アップデートし、パフォーマンスや集客の最適化を目指す。CSSフレームワークやJavaScriptライブラリの一括管理など拡張性が高いが、正式リリース状況や料金プランが不透明なため、導入時の検証が望まれる。

3. メタプロンプトの具体的な書き方・構成

動画概要

本講座では、生成AIを使ってホームページを作成する際に必要な「メタプロンプトの具体的な書き方」について解説します。サイトタイプ、名称、コンセプト、目的、ターゲットといった要素の設定方法を整理し、抽象度を下げて具体的に表現する方法を紹介します。また、メタプロンプトを実際にChatGPTに入力して動作を確認する流れも示します。

重要ポイント

  • サイト概要は5要素（タイプ、名前、コンセプト、目的、ターゲット）で構成
  • 抽象表現を避け、具体的かつ明確な言語で構築
  • 不要な要素は明確に排除しておく
  • 目的は明確に定め、行動につなげる意図を持つ
  • 実例を用いてメタプロンプトを構築し、AIに投げることで動作を確認

目次

  1. サイト概要5要素の再確認
  2. 抽象度を下げる具体的な記述の工夫
  3. 不要要素の明示的排除方法
  4. メタプロンプトの具体例紹介
  5. ChatGPTでの実行と生成確認

メタプロンプト例

あなたは世界トップクラスのフロントエンドエンジニア兼UIデザイナーとして、以下の条件で{site_type}を制作してください。HTML/CSS/JavaScriptをインラインで含む単一ファイルのindex.htmlを生成してください。

まず、下記の【サイト概要】を受け取ったら、このプロンプトの中身をその【サイト概要】に基づいて改訂した上で、サイト制作を進めてください。

【サイト概要】
サイトタイプ：{site_type}
サイト名：{site_name}
コンセプト：{concept}
目的：{objective}
ターゲット：{target_audience}

【デザイン要件】
サイト概要の雰囲気に合うように次の内容を適切に調整してください。
– 全体的なデザインテイスト
– 配色（メインカラー、アクセントカラー、ダークカラー、ライトカラー）
– フォント（Noto Sans JP (メイン）、Montserrat (英字見出し）、Source Code Pro (コード表示用））
– レスポンシブ対応（スマートフォン、タブレット、PC）
– アニメーション効果（スクロールアニメーション、タイプライター効果、パーティクルエフェクト）
– 使用するアイコンセット（基本Material Design Icons）

【サイト構成】
サイト概要に基づいて組織的にセクションを構成し、各セクションの内容を最適に調整してください。
– ヘッダー（ロゴ、ナビリンク、CTAボタン、モバイルメニュー）
– ヒーローセクション（キャッチコピー、サブコピー、CTAボタン、ビジュアル要素、背景）
– プロフィールまたは企業紹介セクション
– サービスまたはプロダクト紹介セクション
– コミュニティまたは顧客レビューセクション
– SNS最新投稿またはニュース・活動報告セクション
– フォローまたはコンタクトセクション
– フッター（ロゴ、簡潔な説明、SNSリンク、サイトマップ、コピーライト）

【特殊エフェクト】
サイト概要やサイト構成に最適なものを適宜選定して活用してください。以下はあくまでも例です。
– マウス追従スポットライトエフェクト
– フローティングアイコンアニメーション
– 波形SVGアニメーション
– タイピング音付きタイプライターエフェクト

【技術要件】
基本は下記を踏襲しつつ、サイト概要に合わない場合は適宜変更してください。
– HTML5, CSS3, ES6+
– 外部ライブラリ：AOS（スクロールアニメーション）, Particles.js（パーティクルエフェクト）
– カスタムJavaScript：
* タイプライターエフェクト
* ヘッダースクロール効果
* モバイルメニュー制御
* スクロールトップボタン
* Twitter埋め込み調整

【パフォーマンス最適化】
– CSSとJavaScriptはインライン化
– アニメーションの最適化
– レスポンシブイメージ対応
– 適切なセマンティックHTML構造

【レスポンシブブレークポイント】
– 1200px（大型デスクトップ）
– 992px（小型デスクトップ/タブレット横向き）
– 768px（タブレット縦向き）
– 576px（大型スマートフォン）
– 375px（標準スマートフォン）
– 320px（小型スマートフォン）

すべての要素は日本語で作成し、SEO対策も考慮してメタタグを適切に設定してください。

4. 特殊エフェクトの活用

動画概要

本講座では、ホームページに視覚的な魅力を加えるための特殊エフェクトの種類とその活用方法について解説します。特殊エフェクトをどのようにメタプロンプトに組み込み、実装を指示するかを学びます。

重要ポイント

  • 特殊エフェクトにはスクロール、フェード、タイプライター、マウス追従など多数存在
  • エフェクト名は明示的に指定する
  • 各セクションごとに使うエフェクトを明確に設定
  • 重すぎる演出は避け、見やすさとのバランスを考慮
  • サンプルサイトを参考に効果の名前を把握し活用

目次

  1. 代表的なエフェクトの種類と説明
  2. エフェクト例の参照サイトと使い方
  3. メタプロンプトへの具体的な盛り込み方法
  4. 各セクションごとの効果の設定指示方法
  5. アニメーションとサイト軽量化のバランスの重要性

特殊エフェクトの具体例を見られる参考サイト

Codrops

先進的なUIインタラクションのサンプルやチュートリアルが多い

Awwwards

デザイン性の高い受賞サイトが集まっており、アニメーションの参考になる

Animista

CSSだけで実装できる様々なアニメーションのサンプルを一覧で確認

Hover.css

ホバーアニメーション専用のCSSライブラリ

Maromaroブログ：『よく使うアニメーションのエフェクト名』

フェードイン/アウト、スライド、ポップアップなど定番アニメーションを名称と一緒にリスト化。サンプルコードが公開されており、HTML/CSS/JSを確認しながら実際の動作もチェック可能。

BRISK：『サイトをリッチに見せるCSSアニメーションまとめ』

シーン別（シンプル、ポップ、スタイリッシュなど）のアニメーションをデモつきで紹介。実際のコード例も閲覧でき、導入のイメージがつかみやすい。

ウィルラボ：『マウスストーカーのサンプル集』

カーソル追従エフェクトに特化し、複数のパターンを動画プレビューで公開。HTML/CSS/JSの具体的な実装方法まで解説しているので、すぐに導入しやすい。

CodeMyUI

Webアニメーションやインタラクションのスニペットを多数掲載し、GIFプレビューとコード例をセットで紹介。スクロールアニメーションやパーティクルエフェクトなど、幅広い種類を一度に確認できる。

5. Cursorを使ったホームページ作成（初期設定）

動画概要

本講座では、Cursorを使ったホームページ作成に必要な初期設定について解説します。エディターのインストール、ユーザー登録、基本設定、拡張機能導入までの流れを丁寧に紹介しています。

重要ポイント

  • Cursorのユーザー登録とインストール
  • 初期プロジェクトフォルダの作成
  • 画面構成と設定パネルの理解
  • 使用モデルやユーザーの設定方針
  • 拡張機能「Live Server」の導入

目次

  1. Cursorの導入手順
  2. プロジェクトフォルダの準備
  3. エディター画面構成の把握
  4. モデルとルールの設定の基本
  5. 拡張機能Live Serverのインストール

6. Cursorを使ったホームページ作成（UI作成）

動画概要

本講座では、CursorとChatGPTを用いた実践的なホームページ作成作業を進めます。サイト概要に基づくコード生成から、リンク修正・画像設定・不足機能の補完までを段階的に行い、実用的なWebサイトを構築する手順を解説します。

重要ポイント

  • メタプロンプトから生成したプロンプトをAIに入力し、トップページを自動生成
  • AI出力を基にリンク・セクション・アニメーション等を手動で調整
  • Askで不足機能をピックアップ
  • フッターやニュース、サービスページなどを順次追加
  • 画像ファイルは指定名に変更し、該当フォルダに配置

目次

  1. メタプロンプトに基づくコード生成と編集
  2. サイト構造とリンク設定の修正
  3. AIによる未実装要素の抽出と実装補完
  4. 画像生成と画像ファイルの配置方法
  5. SNSリンク設定の調整方法
  6. サイト全体の仕上げと保存手順

7. Cursorを使ったホームページ作成（問い合わせフォーム作成）

動画概要

本講座では、PHPを用いた問い合わせフォームの実装に取り組みます。ローカル開発環境では動作確認が難しいため、本番サーバーへのアップロード後の動作検証も含めた手順を紹介します。

重要ポイント

  • 問い合わせフォームはPHPで実装
  • フォーム送信後のエラーログはF12→コンソールで確認
  • エラー内容はAIに貼り付けて修正依頼
  • 本番環境で動作確認が必要

目次

  1. 問い合わせフォームのPHP実装
  2. コンソールログでのエラー確認方法
  3. AIによるエラー修正と再実行
  4. ローカルと本番サーバー環境の違いと対応
  5. 本番サーバーアップロードに向けた準備

8. Cursorを使ったホームページ作成（reCapture v3準備）

動画概要

本講座では、問い合わせフォームにスパム対策としてreCAPTCHAを導入する方法を紹介します。Google Cloud Platformでプロジェクトを作成し、reCAPTCHA v3を設定する手順を解説します。

重要ポイント

  • 問い合わせフォームにreCAPTCHAを導入
  • Google Cloud Platformでプロジェクトを作成
  • reCAPTCHA v3を使用し、サイトキーとシークレットキーを取得
  • 独自ドメインの取得が推奨される（reCAPTCHA動作に必要）

目次

  1. reCAPTCHA導入の目的と手順
  2. GCPでのプロジェクト作成
  3. reCAPTCHAサイトキー・シークレットキーの取得
  4. ドメイン取得の重要性とSEO観点でのメリット

9. ConoHa WINGへのアップロード

動画概要

本講座では、生成AIで作成したホームページを本番環境にアップロード・公開する方法を解説します。ドメイン取得からSSL設定、ファイル転送、公開後の運用までの手順を説明します。

重要ポイント

  • ホスティングサービスの選定
  • ドメインの取得とSSL（https）設定
  • FTPアカウントの作成とファイルマネージャーでのアップロード
  • 公開後の動作確認（問い合わせフォームなど）
  • アクセス解析（Googleアナリティクス）とSEO対策（メタタグ、SNS連携）
  • 画像形式の軽量化（WebP）によるページ速度の改善

目次

  1. ホスティングサービスの選び方とドメイン取得
  2. SSL設定とその重要性
  3. FTPアカウントの作成とファイルアップロード手順
  4. 実際の公開確認方法
  5. 公開後の更新・管理方法（画像・記事更新など）
  6. アクセス解析とSEO対策の基本
  7. ページ速度改善のヒントと画像形式の選定

各サイトのリンク

10. 本番環境アップロード後のテストと調整

動画概要

本講座の最終回では、本番環境にアップロードされたホームページの問い合わせフォームの動作確認と、reCAPTCHA v3の導入によるスパム対策の実装を行います。実際の送信テストとログ確認を通じて、メール送信機能の成功とセキュリティ強化のポイントを解説します。

重要ポイント

  • 問い合わせフォームの本番テスト
  • PHPログの確認とデバッグ対応
  • メール送信の迷惑メールの確認
  • Google reCAPTCHA v3 の導入
  • ファイルマネージャーによるバックアップと再アップロード
  • 自動生成された文章の編集や調整

目次

  1. 問い合わせフォームのテストと送信確認
  2. メールの送受信トラブル対応とログの確認
  3. スパム対策としてのreCAPTCHA導入
  4. 更新データのアップロード
  5. reCAPTCHAの実装確認と動作チェック