はじめに
昼のカフェはたくさんある。けれど「夜のカフェ」って、どこか特別な響きがありませんか？
キャンドルの灯り、ヴィンテージジャズ、ふっと落ち着く深夜の一杯。
今回は、Hugging Faceで公開されている UIGEN-FX-4B-Previewというモデルを使い、「夜カフェ」のランディングページをAIに作ってもらいました。結果は……ちょっと鳥肌が立つほど“それっぽい”仕上がりに。
出力されたページ
Heroには大きく “Midnight Roast. Velvet Sounds.” の文字。
背景は漆黒、アクセントにアンバー。スクロールすると「Wi-Fi完備」「ロースタリー直送」などの特徴がカードで並び、ラストは予約フォームまで。
正直、そのまま公開できそうな完成度でした。
出力のポイント（良かったところ）
・雰囲気の表現力：黒地にアンバーの光、見出し「Midnight Roast. Velvet Sounds.」が強く印象付けます。
・読みやすいレイアウト：Hero → 特色（Wi-Fi/電源/ロースタリー提携 など）→ メニュー → アバウト → ロケーション → お問い合わせの順に自然に遷移。
・そのまま運用可能：Tailwind なので、ボタン文言・値段・営業時間などをHTML内で即編集できます。
仕上げの微調整（任意）
・画像差し替え：夜の店内・キャンドル・レコードのある写真に変更すると一層“らしさ”が出ます。
・CTA 文言：View Menu → Order Takeout / Reserve へ変更
・視認性：白テキストが多くなるため、見出しは少しグレー寄り（例：text-gray-200）にしてコントラストを整えると上品です。
・モバイル時のナビ：ハンバーガーメニューが出るテンプレートになっていればOK。なければdisplay: none/blockの切り替えを加えるだけで十分です。
公開のしかた（手早い順）
1 GitHub Pages：night_cafe.html をリポジトリに置いて Pages を有効化
2 Vercel/Netlify：新規プロジェクト→静的サイトとしてデプロイ
3 自社サーバ：/public などにアップロードしてリンク
手順（Colab）
1) セットアップ
!pip install -q transformers accelerate torch
2) モデル読み込み
from transformers import AutoModelForCausalLM, AutoTokenizer
import torch
model_id = "Tesslate/UIGEN-FX-4B-Preview"
tokenizer = AutoTokenizer.from_pretrained(model_id)
model = AutoModelForCausalLM.from_pretrained(
model_id,
torch_dtype=torch.bfloat16,
device_map="auto"
)
def generate_html(prompt, filename,
max_new_tokens=2200,
temperature=0.6,
top_p=0.9,
repetition_penalty=1.1):
inputs = tokenizer(prompt, return_tensors="pt").to(model.device)
outputs = model.generate(
**inputs,
max_new_tokens=max_new_tokens,
temperature=temperature,
top_p=top_p,
repetition_penalty=repetition_penalty,
)
html_code = tokenizer.decode(outputs[0], skip_special_tokens=True)
with open(filename, "w", encoding="utf-8") as f:
f.write(html_code)
print("✅ Generated:", filename)
3) 夜カフェの生成プロンプト（コピペ可）
prompt_night = """
Create a single-file landing page for a coffee shop called "Luna Night Cafe".
Constraints:
- Use semantic HTML and TailwindCSS
- Sections: navbar, hero (night ambience), menu, about, location, contact form, footer
- Style: dark theme with warm amber accent, candle-light vibe, vinyl & late-night atmosphere
- No external JavaScript
- Ensure accessible alt text and responsive full-width hero image
"""
generate_html(prompt_night, "night_cafe.html")
4) プレビュー
左の「ファイル」から night_cafe.html をダウンロード → ブラウザで開くと完成です。
使ってみた感想
・夜カフェはとても相性が良いです。暗い背景＋暖色の光という記号が明確で、モデルが安定して“気分”を再現してくれました。
・一方で、ニュアンス依存のテーマ（例：木漏れ日）はプロンプトやCSS演出が必要でした。夜カフェのように“はっきりした条件”を与えると成功率が上がる印象です。
まとめ
・UIGEN-FX-4B-Preview × 夜カフェは、手触りのよいランディングページを短時間で作るのに向いています。
・そのままでも十分見せられますが、写真とCTAの微調整で“実運用レベル”まで引き上げやすいのが強みです。
・次の一歩として、**イベント告知（ナイトライブ／DJ／季節メニュー）**のセクションを追加したり、予約リンクを外部フォームに接続すると実用度が高まります。
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com
Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。