Google AI Studioで本格的なサイトを作る — コーディング不要！
Google AI Studio で完全なウェブサイトを作成。最初のアイデアとデザインから、オンラインに公開して動くサイトまで。
ロードマップと資料
サイトを作成する（Google AI Studio）
最初のコンセプトを生成する
Google AI Studioを開き、メインのプロンプトを書いて「AI Life Planner」サイトの最初のバージョンを生成します。
使用プロンプト – サイトの作成
「AI Life Planner」という名前の、モダンで見やすく、印象的なサイトを作ってください…
Create a modern, clean, and visually impressive website called "AI Life Planner". The website should help users organize their goals, daily routines, habits, and personal growth. You have full creative freedom to choose the layout, colors, and visual style. Include: • Hero section • User input form • Personalized plan section Make the website fully responsive. Return everything in a single HTML file with embedded CSS and JavaScript.
UIを改善・カスタマイズする
デザインとレイアウトを調整する
デザインを改善し、ヒーローセクションを調整して、高級感のあるグラスモーフィズムのヘッダーを追加します。
使用プロンプト – ダークテーマと週間プランナー
サイト全体をモダンなダークテーマに変更してください…
Change the entire website to a modern dark theme with premium gradients. Add a "Weekly Planner" section below the Personalized Plan section. Ensure everything remains responsive and visually consistent.
使用プロンプト – グラスモーフィズムのヘッダー
モダンなグラスモーフィズム（リキッドグラス）のヘッダーを追加してください…
Add a modern glassmorphism (liquid glass) header at the top of the website. Include: • "AI Life Planner" text logo on the left • Blurred glass background with soft shadows • Menu items on the right: Home, Features, Plans, Contact • Smooth hover animations • Sticky behavior on scroll Ensure full responsiveness.
使用プロンプト – ヒーローセクションのリニューアル
大きく力強い見出しでヒーローセクションをリニューアルしてください…
Redesign the hero section with a large bold headline, subtle gradient shapes, and a modern premium call-to-action button. Keep the design clean and consistent with the site.
インタラクティブな機能を追加する
機能を強化する
ToDoリストなどのコンポーネントを追加して、アプリをより便利にします。
使用プロンプト – ToDoリスト機能
シンプルなToDoリストのセクションを追加してください…
Add a simple To-Do List section below the hero section with checkboxes to mark tasks as completed. Keep the design minimal and clean.
サイトをオンラインで公開する
Hostingerへのデプロイ
サイトのファイルをダウンロードしてHostingerにアップロードし、サイトを公開します。
🎥 Google AI StudioのサイトとWebアプリをデプロイする
Google AI StudioのサイトとWebアプリをデプロイする
https://youtu.be/HGs-4QjyjHQ?si=Cs4oHKURdxp6J70E
しっかりしたエラー処理を実装する
デプロイ時のエラーをうまく処理し、ユーザーにわかりやすく伝えられる状態にします。
使用プロンプト – エラー処理とフィードバック
よくあるデプロイ時のトラブルに備えて、しっかりしたエラー処理を追加してください…
Implement a comprehensive error handling system for the website. If a user encounters an error (e.g., network failure, form submission error), display a friendly, clearly visible error message instead of a generic browser alert. Provide suggestions for fixing the issue (e.g., "Check your internet connection"). Also, ensure that successful actions display a confirmation message.
参考リソース（任意）
プロンプトの書き方マスタークラス
AIから良い結果を引き出すために、シンプルで効果的なプロンプトを書く方法を学びます。
🎥 プロンプトの書き方チュートリアル
プロンプトの書き方チュートリアル
https://youtu.be/UlkdOrr3RKM?si=rKQvhMqWmO1HakUp