【AIで簡単！】古民家カフェのホームページを作ってみた

SURPR!SE

サプライズ

HOME
サプライズ
【AIで簡単！】古民家カフェのホームページを作ってみた

2025.04.03

OTHERS

【AIで簡単！】古民家カフェのホームページを作ってみた

ナガオカです。

AIのアウトプットを信じて、基本はそのまま活かすというスタイル。細かい修正をせずに、どれだけ実用的なHPがAIのみで作れるのか？を検証してみました。

■ ルール
AIで作成したHTMLは極力手直しをしない！

■ ステップ1：AI用プロンプトを作成
まずは、AIに古民家カフェのホームページを作ってもらうためのプロンプト（指示文）の作成を依頼します。

プロンプト作成の依頼内容

古民家風のカフェのHPを生成AIで作成するのですが、オシャレな感じで作成できるプロンプトを作成していただけますか

▼ 実際に作成したプロンプト

以下の要件を満たした、古民家風カフェのオシャレなホームページを作成してください。
—
カフェのコンセプト
– 古民家をリノベーションした温かみのあるカフェ
– 木の温もりを感じるナチュラルなデザイン
– 手作りスイーツとオーガニックコーヒーを提供
– 都会の喧騒を忘れる癒しの空間
—
デザイン要件
1. 全体の雰囲気
– 和モダン、ナチュラル、レトロモダンなデザイン
– ベージュ、ブラウン、グリーンを基調とした落ち着いたカラーパレット
– 余白を活かしたミニマルなデザイン
2. フォント
– 日本語フォント: “Noto Serif JP” または “Zen Kaku Gothic Antique”
– 英語フォント: “Playfair Display” または “Merriweather”
3. レイアウト
– ヘッダー: ロゴ、ナビゲーション（ホーム / メニュー / ギャラリー / アクセス）
– メインビジュアル: フルスクリーンの背景画像（和風のカフェの雰囲気を伝える画像）
– コンテンツセクション:
– コンセプト紹介
– おすすめメニュー（スライダーで表示）
– 店内ギャラリー（モーダルウィンドウで拡大表示）
– フッター: SNSリンク、営業時間、著作権表記
4. アニメーション
– フェードイン・フェードアウトを活用したやわらかい動き
– 画像ホバー時に少し浮き上がるエフェクト
– ナビゲーションのスムーズスクロール
5. レスポンシブ対応
– スマホ・タブレット・PCで最適な表示
– ハンバーガーメニューの実装
—
実装技術
– HTML / CSS（Tailwind CSS推奨） / JavaScript（少しだけ）
– 画像はUnsplashやPexelsのフリー素材を使用
– 必要なら軽量なライブラリ（Swiper.js, AOS.js）を活用
—
この条件に基づいて、美しい古民家風カフェのホームページを作成してください。