こんにちは！咲耶です〜
「ホームページを作ってみたいけど、難しそう…」「プログラミングなんて全然わからない…」「でも自分のサイトを持ってみたい！」
そんな皆さんに朗報です💕今回は、Vibe Codingを使って、たった30分で素敵なホームページを作る方法をお教えします！
プログラミング経験ゼロでも大丈夫。私と一緒に、ステップバイステップで進めていきましょうね〜
🎯 30分で完成！今回作るホームページ
📋 完成イメージ
今回作成するのは、こんな素敵なホームページです：
- 🏠 トップページ：ヒーローセクション、自己紹介
- 📖 プロフィール：写真付きの詳細な自己紹介
- 💼 作品・スキル：ポートフォリオセクション
- 📧 お問い合わせ：連絡先フォーム
- 📱 レスポンシブ対応：スマホでも綺麗に表示
⏰ タイムライン（30分完成計画）
| 時間 | 作業内容 | 成果 |
|---|---|---|
| 0-5分 | Windsurf起動・プロジェクト作成 | 開発環境準備完了 |
| 5-15分 | 基本構造とコンテンツ作成 | HTMLファイル完成 |
| 15-25分 | デザイン・スタイリング | CSSで美しいデザイン |
| 25-30分 | 最終調整・公開準備 | ホームページ完成！ |
🚀 Step 1: Windsurfでプロジェクト開始（5分）
💻 Windsurfの起動
まずはWindsurfを起動して、新しいプロジェクトを作成しましょう：
- Windsurf起動：デスクトップのアイコンをクリック
- 新規フォルダ作成：「my-first-website」という名前で
- Cascadeパネル表示：サイドバーのCascadeアイコンをクリック
🎯 最初のCascade質問
コピペして使える質問文：
「個人のホームページを作りたいです。プロフィール、スキル、作品紹介、お問い合わせの4セクションがある、モダンでレスポンシブなサイトを作成してください。カラーパレットは青と白を基調とし、清潔感のあるデザインでお願いします。」
📁 プロジェクト構成
Cascadeが以下のような構成で作成してくれます：
my-first-website/
├── index.html # メインページ
├── style.css # デザインファイル
├── script.js # 動的機能（オプション）
└── images/ # 画像フォルダ📝 Step 2: HTMLで基本構造を作成（10分）
🏗️ HTML構造の理解
Cascadeへの追加質問：
「HTMLの各セクションについて、初心者にも分かりやすいようにコメント付きで説明してください。また、自分の情報に置き換えやすいように、プレースホルダーを使ってください。」
生成される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>
<!-- ナビゲーションメニュー -->
<nav class="navbar">
<div class="nav-container">
<h1 class="nav-logo">【あなたの名前】</h1>
<ul class="nav-menu">
<li><a href="#home">ホーム</a></li>
<li><a href="#about">プロフィール</a></li>
<li><a href="#skills">スキル</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</div>
</nav>
<!-- ヒーローセクション（メインビジュアル） -->
<section id="home" class="hero">
<div class="hero-content">
<h1 class="hero-title">こんにちは！<br>【あなたの名前】です</h1>
<p class="hero-subtitle">【あなたの職業・専門分野】</p>
<p class="hero-description">
【簡単な自己紹介文をここに記載】
</p>
<a href="#about" class="cta-button">もっと詳しく</a>
</div>
</section>
<!-- プロフィールセクション -->
<section id="about" class="about">
<div class="container">
<h2 class="section-title">プロフィール</h2>
<div class="about-content">
<div class="about-image">
<img src="images/profile.jpg" alt="【あなたの名前】のプロフィール写真">
</div>
<div class="about-text">
<h3>【あなたの名前】</h3>
<p>【詳細なプロフィール文をここに記載】</p>
<ul class="about-highlights">
<li>🎓 【学歴・資格】</li>
<li>💼 【職歴・経験】</li>
<li>🎯 【目標・趣味】</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>✏️ 情報の置き換え作業
HTMLが生成されたら、以下の部分を自分の情報に置き換えましょう：
- 【あなたの名前】→ 実際の名前
- 【あなたの職業・専門分野】→ 職業や専門分野
- 【簡単な自己紹介文】→ 一言メッセージ
- 【詳細なプロフィール文】→ 詳しい自己紹介
- 【学歴・資格】【職歴・経験】【目標・趣味】→ 具体的な内容
🎨 Step 3: CSSで美しくデザイン（10分）
🌈 デザインコンセプト
デザイン依頼文：
「モダンで清潔感のあるデザインにしたいです。青と白を基調とし、グラデーション効果とシャドウを使って立体感を出してください。レスポンシブデザインで、スマホでも美しく表示されるようにお願いします。」
生成されるCSS（主要部分）
/* 全体の基本設定 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
line-height: 1.6;
color: #333;
}
/* ナビゲーション */
.navbar {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}
.nav-logo {
color: white;
font-size: 1.5rem;
font-weight: bold;
}
.nav-menu {
list-style: none;
display: flex;
gap: 2rem;
}
.nav-menu a {
color: white;
text-decoration: none;
transition: opacity 0.3s ease;
}
.nav-menu a:hover {
opacity: 0.8;
}
/* ヒーローセクション */
.hero {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding-top: 80px;
}
.hero-content {
max-width: 800px;
padding: 0 2rem;
}
.hero-title {
font-size: 3rem;
margin-bottom: 1rem;
color: #2c3e50;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.hero-subtitle {
font-size: 1.5rem;
color: #667eea;
margin-bottom: 1rem;
font-weight: 500;
}
.hero-description {
font-size: 1.1rem;
margin-bottom: 2rem;
color: #555;
line-height: 1.8;
}
/* CTAボタン */
.cta-button {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 30px;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
/* レスポンシブデザイン */
@media (max-width: 768px) {
.hero-title {
font-size: 2rem;
}
.nav-menu {
flex-direction: column;
gap: 1rem;
}
.about-content {
flex-direction: column;
text-align: center;
}
}🎯 カスタマイズポイント
デザインを自分好みにカスタマイズしましょう：
色の変更
Cascadeに質問：「青の代わりに【好きな色】を使ったデザインに変更してください」
フォントの変更
Cascadeに質問：「Google Fontsから【好きなフォント】を使用したいです。フォントの読み込みとCSS設定を教えてください」
⚡ Step 4: 動的機能の追加（5分）
📱 スムーズスクロール
機能追加の依頼：
「ナビゲーションメニューをクリックしたときに、滑らかにスクロールする機能を追加してください。また、スクロールに応じてナビゲーションバーの背景を変える効果も欲しいです。」
JavaScriptコード例
// スムーズスクロール機能
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// ナビゲーションバーの背景変更
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 100) {
navbar.style.background = 'rgba(102, 126, 234, 0.95)';
} else {
navbar.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
}
});
// ページ読み込み時のアニメーション
window.addEventListener('load', function() {
const heroContent = document.querySelector('.hero-content');
heroContent.style.opacity = '0';
heroContent.style.transform = 'translateY(30px)';
setTimeout(() => {
heroContent.style.transition = 'all 1s ease';
heroContent.style.opacity = '1';
heroContent.style.transform = 'translateY(0)';
}, 500);
});📧 お問い合わせフォーム
フォーム作成の依頼：
「お問い合わせセクションに、名前、メールアドレス、メッセージを入力できるフォームを追加してください。送信時にバリデーション機能も付けたいです。」
🌐 Step 5: 公開とシェア（5分）
🚀 GitHub Pagesで無料公開
公開方法の相談：
「作成したホームページをGitHub Pagesで無料公開したいです。GitHubアカウントの作成から公開までの手順を教えてください。」
公開手順
- GitHubアカウント作成：github.com でサインアップ
- 新規リポジトリ作成：「username.github.io」という名前で
- ファイルアップロード：作成したHTML、CSS、JSファイルを追加
- GitHub Pages有効化：Settings → Pages → Source選択
- 公開完了：https://username.github.io でアクセス可能
📱 他の公開オプション
| サービス | 特徴 | 料金 | 難易度 |
|---|---|---|---|
| GitHub Pages | Git連携、独自ドメイン対応 | 無料 | ⭐⭐ |
| Netlify | ドラッグ&ドロップで簡単 | 無料 | ⭐ |
| Vercel | 高速、Git自動デプロイ | 無料 | ⭐⭐ |
| Surge.sh | コマンドライン1発 | 無料 | ⭐⭐⭐ |
🎯 完成したホームページの特徴
✨ 実装された機能
- 🎨 モダンデザイン：グラデーションとシャドウ効果
- 📱 レスポンシブ：全デバイス対応
- ⚡ スムーズアニメーション：CSS3とJavaScript連携
- 🧭 直感的ナビゲーション：スムーズスクロール
- 📧 お問い合わせフォーム：バリデーション付き
- 🚀 高速読み込み：最適化されたコード
📊 達成したこと
- ✅ HTMLの基本構造を理解
- ✅ CSSでデザインをカスタマイズ
- ✅ JavaScriptで動的機能を実装
- ✅ レスポンシブデザインを適用
- ✅ インターネットで公開
🚀 次のステップ：さらなるレベルアップ
🎯 追加できる機能
中級レベル（1-2時間）
- 🖼️ 画像ギャラリー：作品ポートフォリオ
- 📝 ブログセクション：記事投稿機能
- 🌙 ダークモード：テーマ切り替え
- 🔍 検索機能：コンテンツ内検索
上級レベル（3-5時間）
- ⚙️ CMS連携：WordPress、Strapi等
- 📊 アナリティクス：Google Analytics連携
- 🛒 Eコマース：商品販売機能
- 🤖 チャットボット：自動応答システム
💡 カスタマイズアイデア
職業別カスタマイズ
| 職業 | 追加要素 | 特徴 |
|---|---|---|
| デザイナー | 作品ギャラリー、カラーパレット | 視覚的インパクト重視 |
| エンジニア | GitHub連携、技術ブログ | 技術スキルのアピール |
| ライター | 記事一覧、執筆実績 | コンテンツ中心の構成 |
| 写真家 | フォトギャラリー、撮影情報 | 大型画像の効果的配置 |
🔧 トラブルシューティング
⚠️ よくある問題と解決法
🖼️ 画像が表示されない
- 原因：ファイルパスの間違い
- 解決法：「images/」フォルダに画像を保存、パス確認
- Cascade相談：「画像パスの設定方法を教えて」
📱 スマホで表示が崩れる
- 原因：レスポンシブCSS不足
- 解決法：メディアクエリの追加
- Cascade相談：「モバイル表示を最適化して」
⚡ アニメーションが動かない
- 原因：JavaScript読み込みエラー
- 解決法：ブラウザの開発者ツールでエラー確認
- Cascade相談：「JavaScriptのエラーを修正して」
🛠️ デバッグのコツ
- ブラウザの開発者ツール活用：F12キーで起動
- エラーメッセージを読む：Consoleタブを確認
- 少しずつ変更：大きな変更は避ける
- Cascadeに相談：エラー内容を具体的に伝える
📈 SEO対策とアクセスアップ
🔍 基本的なSEO設定
SEO最適化の依頼：
「作成したホームページをGoogleで見つけやすくしたいです。メタタグ、構造化データ、サイトマップの設定を教えてください。」
実装される要素
- 📋 メタタグ：title、description、keywords
- 🗂️ 構造化データ：Schema.org マークアップ
- 🗺️ サイトマップ：検索エンジン向け
- 🚀 Core Web Vitals：ページ速度最適化
📱 SNS連携
- 🐦 Twitter Card：ツイート時の表示最適化
- 📘 Open Graph：Facebook シェア対応
- 💼 LinkedIn：ビジネス向けシェア
- 📊 Google Analytics：アクセス解析
💡 咲耶からの30分攻略アドバイス
⏰ 時間短縮のコツ
事前準備（5分節約）
- プロフィール写真準備：正方形、1MB以下に調整
- 自己紹介文作成：短文と長文の2パターン
- 連絡先情報整理：メール、SNS、電話番号
- カラーパレット決定：好きな色を2-3色選択
効率的なCascade活用（10分節約）
- 具体的な依頼：曖昧な表現を避ける
- 参考サイト提示：「このサイトのような」と例を示す
- 一括修正依頼：色変更などは全体を一度に
- コードコピペ：生成されたコードをそのまま活用
🎯 完璧を求めすぎない
30分という制限時間を活かして：
- 80%の完成度で公開：後から改善すればOK
- シンプルイズベスト：機能より見た目重視
- モバイル最優先：スマホ表示を第一に
- フィードバック重視：公開後に友人の意見を聞く
🌟 卒業課題：オリジナル要素の追加
🎨 創造性を発揮しよう
基本のホームページができたら、以下から1つ選んで挑戦してみてください：
初級チャレンジ
- 🎵 BGM追加：好きな音楽を背景に
- ⭐ 評価システム：訪問者が星をつけられる
- 🎮 ミニゲーム：簡単なクリックゲーム
- 📅 イベントカレンダー：予定表示機能
中級チャレンジ
- 🤖 チャットボット：簡単なQ&A自動応答
- 📊 訪問者統計：リアルタイムカウンター
- 🌍 多言語対応：英語版の追加
- 📱 PWA化：アプリのようにインストール可能
🎉 まとめ：30分でWeb制作マスター
おめでとうございます！たった30分で、プロ並みのホームページが完成しましたね〜💕
🏆 今回習得したスキル
- ✅ HTML構造理解：Webページの骨組み作成
- ✅ CSS デザイン：美しい見た目の実現
- ✅ JavaScript 動的機能：インタラクティブな要素
- ✅ レスポンシブデザイン：全デバイス対応
- ✅ Web公開：インターネットでの情報発信
- ✅ Vibe Coding実践：AIとの効果的なコラボレーション
🚀 これからの可能性
今回作成したホームページは、あなたのデジタル名刺です。この経験を活かして：
- 🏢 就職活動：ポートフォリオとして活用
- 💼 フリーランス：クライアント獲得ツール
- 🎨 趣味の発信：作品や活動の紹介
- 📚 学習記録：成長過程の記録
- 🤝 人脈作り：同じ興味を持つ人との出会い
💪 継続学習のススメ
30分でここまでできた皆さんなら、きっともっと素晴らしいものが作れます：
- 毎日10分：小さな改善を積み重ねる
- 新機能挑戦：週に1つ新しい要素を追加
- 他サイト研究：好きなサイトの分析
- コミュニティ参加：仲間と一緒に成長
Web制作の世界へようこそ！皆さんの創造力で、インターネットをもっと素敵な場所にしていきましょうね〜✨
🎁 無料メルマガで最新Web制作テクニックをゲット！
Web制作の最新トレンドや実践的なテクニック、初心者向けのチュートリアルを、イケハヤさんがいち早くお届けします。30分シリーズの新作情報も定期配信中ですよ〜！
🌸 Vibe Codingサロンで制作仲間を見つけよう
“作ったサイトを見てもらいたい…””もっと高度な機能を実装したい…””Web制作で副業を始めたい…”そんな方のためのコミュニティです。メンバー同士で作品をシェアしたり、一緒にプロジェクトに挑戦したりできますよ。私もいつもサロンで皆さんの質問にお答えしています〜
次回は「プログラミング完全未経験者のためのVibe Coding入門」をお届け予定です。今回のホームページ作成で自信がついた皆さんに、さらに深いプログラミングの世界をご案内しますね〜
最後まで読んでくださって、本当にありがとうございました💕
Happy 30min Web Development! 🌐⚡
コメント