Loading...
最初のウェブサイトを作成しよう
Mini App AIで
今日、本物のウェブサイトの作り方を学びます 🚀
ウェブサイトとは？
インターネット上の場所。ページの集まり。情報を共有する方法。
学校のウェブサイト
ビジネスページ
ポートフォリオ
Mini App AIとは？
シンプルなテキストプロンプトを使用してウェブサイトを構築できるAIツールです。
1
あなたが説明する （プロンプト）
2
AIが処理します(ビルダー)
3
ウェブサイトが表示されます(結果)
ウェブサイトの作り方
すべてのモダンなウェブサイトは、セクションを積み重ねて構築されています。
ヘッダー(ナビゲーション)
ヒーロー(メイン紹介)
CARD
コンテンツ(情報ブロック)
CARD
フッター(連絡先とリンク)
最初のプロジェクト
シンプルでモダンな学校のウェブサイトを構築します。
- ナビゲーションバー
- ヒーローセクション
- ボタンとクリーンなレイアウト
SCHOOL LOGO
Join Us Today
良いプロンプトの書き方
指示が具体的であるほど、ウェブサイトの品質も向上します。
❌ 悪いプロンプト
"ウェブサイトを作成して"
Result: AI doesn't know what you want. It will guess, and you might not like it.
✅ 良いプロンプト
"ナビゲーションバー、ヒーローセクション、アバウトページ、グラスモーフィズムデザイン、青とシアンのカラーテーマを備えたモダンな学校のウェブサイトを作成して。"
Result: AI understands exactly what to build and gives you a professional result.
プロンプトの内訳
強力なプロンプトには5つの重要な要素があります:
1. タイプ (例: 学校のウェブサイト)
2. スタイル (例: モダン、ミニマル)
3. セクション (例: ヒーロー、フッター)
4. 機能 (例: カード、ボタン)
5. 色 (例: 青とシアン)
AI生成プロセス
あなたのアイデアが目の前で本物のウェブサイトになります。
AI Termial Output
プロンプトを待機中...
WEBSITE LOGO
Welcome to the Future
ウェブサイトを理解する
各セクションをクリックして、その仕組みと重要性を確認してください。
Header
Hero Section
Content
Footer
👈 左側のセクションをクリックして詳細を確認してください！
ウェブサイトを改善する方法
デザインとは明快さのことです。これら2つのレイアウトを比較してみましょう。
❌ Bad
Navbar link 1 link2
WELCOME TO MY SITE!
too much text here too much text here
different style block
❌ 乱雑なデザイン
色が悪く、間隔が不適切で、読みづらい。
✅ Good
Logo
HomeAbout
Welcome to My Site
Clean, readable, and easy on the eyes.
✅ クリーンなデザイン
コントラストが良く、間隔が均等で、テキストが明確。
プロンプトを修正しよう！
このプロンプトは曖昧すぎます。不足している要素をクリックして修正してください。
"ウェブサイトを作成する"
クラスルームチャレンジ 🏆
次はあなたの番です。クリエイターになりましょう。
-
1. 独自のプロンプトを書く。
-
2. ウェブサイトを生成する。
-
3. デザインを改善する。
Webクリエイターバッジがロックされています
最初のウェブサイトが完成しました 🎉
クリエイターはインターネットを使うだけでなく、インターネットを構築します。