ACCESS

東京本社
東京都港区六本木7-2-29 VORT乃木坂I-3F
岡山オフィス
岡山県岡山市北区磨屋町10-20 磨屋町ビル 6-B

SURPR!SE

サプライズ

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

2025.04.03

【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)を活用

この条件に基づいて、美しい古民家風カフェのホームページを作成してください。

■ ステップ2:HTMLをAIで生成
プロンプトを元に、AIがHTMLコードを自動生成!

■ ステップ3:商用利用可能な画像の設定
ホームページに掲載する画像は、素材サイトから取得。

■ 完成した古民家カフェHPはこちら!
URL:https://sky-link.co.jp/ai-html/

プロンプト作成 → AIによるHTML生成 → 画像差し込みという3ステップでHPが作れました。
実際にHPとして運用するには調整は必要ですが、ほぼAIのみでHPの作成を行うことができました。

CONTACT

お問い合わせ

WEBサイト制作や、システム・APP開発など、
制作案件に関するお問い合わせは
下記よりお願いいたします。

案件のご相談・お問い合わせ

パートナー企業募集

スカイリンクでは一緒にものづくりをしていけるパートナーを募集しております。

  • ・受発注問わず相互に協力関係を築けるパートナー企業
  • ・業務委託等、個人で活躍されているクリエイターの方

また、お仕事でなくても気軽に情報交換できるようなお付き合いも大歓迎です。

お問い合わせ

採用情報

時間や場所に縛られない。
リモート業務を実施しているスカイリンクでは
東京だけではなく、岡山をはじめとした県外各所から積極的に採用中です。
「新鮮な驚き」を一緒に考えてくれる仲間を求めてます。

採用サイト