はじめに
Hugging Faceで公開されている WEBGEN-4B-Preview は、テキスト指示からHTML＋Tailwind構成のWebページを丸ごと生成できる「Webデザイン特化型LLM」。
今回は3つのテーマを指定して、AIがどんなデザインを出すかを観察しました。スクショを交えながら、テーマごとの構造・雰囲気・Tailwind構成の違いを見ていきます。
1. AIスクール ― “クリーン×余白×信頼感”
プロンプト：
Generate a single-file landing page for "AIschool".
Style: modern, minimal, generous whitespace; Tailwind; large typography; subtle gradient.
Sections: navbar; hero (2 CTAs); features; curriculum overview; pricing; FAQ; footer.
Constraints: semantic HTML, no external JS.
印象（Look & Feel）
-
キーワード：クリーン／余白リッチ／信頼感／アカデミック
-
タイポグラフィ:
Heroの極大フォントとタイトな字間で“威厳”を演出
本文は text-gray-700 系で読みやすい -
写真の使い方：
実務学習（コーディング・ワークショップ）を想起させる現場感のある写真
角丸＋影でカードとしての視認性が高い -
総評：
“教育×テック”の王道スタイルをほぼ教科書どおりに成立させたデザイン。
そのままワイヤーフレーム兼スタイル見本として使える完成度。
改善メモ
- モバイル：Heroの行間を少し詰める（leading-tight）／見出しサイズを1段階落とす
- アクセシビリティ：画像のalt追加、ボタンのコントラスト比チェック（ネイビー×白でAA以上は概ねOK）
- ブランド化：ロゴの一貫表記（AISCHOOL / AI School の統一）、2026 の年号は可変化
2. 旅フォトギャラリー ― “軽やか×ビジュアル重視”
プロンプト：
Single-file landing page for "Travel Gallery".
Style: photo-forward, airy, light; Tailwind; card grid.
Sections: navbar; hero; photo grid (6–12); features; pricing; FAQ; footer.
Constraints: semantic HTML, no external JS.
印象（Look & Feel）
-
キーワード：軽やか／空気感／写真優先／ミニマル
-
タイポ：Hero見出しが太く大きい一方、本文は text-gray-600~700 で柔らかい読み味
-
カード設計：角丸・影・適度な余白で写真が主役を徹底。余計な装飾がなく、被写体を引き立てる
-
総評：写真に語らせるというギャラリーの文法をしっかり踏襲。
Heroのメッセージ → CTAの流れが素直で、旅メディアの定番パターンとしてそのまま使える
3. クリエイターズポートフォリオ ― “透明感×静けさ×自己表現”
プロンプト：
Single-file landing page for "Creator Portfolio".
Style: simple, spacious, slight glassmorphism; Tailwind.
Sections: navbar; hero (intro + 2 CTAs); work grid; services/pricing; client logos; FAQ; footer.
Constraints: semantic HTML, no external JS.
印象（Look & Feel）
-
キーワード：柔らかい／ナチュラル／人間味／信頼感
-
フォント・構成：
Hero直後に見出しを置かず、写真で語らせる構成。
ナビゲーションが小さめで、余白を生かしたバランス感。 -
UIディテール：
CTA「Hire Me →」が右上にさりげなく配置され、過度な主張を避けた優しい誘導。
角丸・影の使い方が控えめで、ポートフォリオサイトらしいクラフト感と清潔感を両立。 -
写真選定：
“コワーキングスペース”や“コラボレーション”を想起させる写真構成。
実際のアート作品よりも人・チームの表情で信頼を表現しているのが印象的。
改善メモ
-
Hero写真下に「About me」ブロックを追加すると、自己紹介とのつながりが自然。
-
背景にごく淡い
from-gray-50 to-whiteのグラデを加えると印象が柔らかくなる。 -
CTAを2段化（例：「View Work」＋「Hire Me」）して、滞在時間を延ばす導線もあり。
総括 ― “AIはデザインを理解し始めた”
| 観点 | 共通傾向 |
|---|---|
| Tailwind構成 | 一貫性とセマンティック性が高い |
| レイアウト |
max-w-5xl, py-20, flex が多用 |
| 見出し構成 | Heroの<h1>と<p>の距離感が上手 |
| デザイン意識 | “余白”と“階層感”を学習している印象 |
手順
セットアップ
!pip install -q transformers accelerate
import re, os, json, textwrap, glob
from transformers import AutoTokenizer, AutoModelForCausalLM
import torch
model_id = "Tesslate/WEBGEN-4B-Preview" # ← Transformersで読める版
tok = AutoTokenizer.from_pretrained(model_id, trust_remote_code=True)
model = AutoModelForCausalLM.from_pretrained(
model_id,
torch_dtype=torch.bfloat16,
device_map="auto",
trust_remote_code=True
)
def generate_html(prompt, max_new_tokens=2000, temperature=0.6, top_p=0.9, repetition_penalty=1.1):
inputs = tok(prompt, return_tensors="pt").to(model.device)
out = model.generate(
**inputs,
max_new_tokens=max_new_tokens,
temperature=temperature,
top_p=top_p,
repetition_penalty=repetition_penalty
)
txt = tok.decode(out[0], skip_special_tokens=True)
# ```html ～ ``` を吐く場合のガード
txt = re.sub(r"^```(?:html)?|```$", "", txt.strip(), flags=re.MULTILINE)
return txt
テーマ×（日本語/英語）プロンプト定義
themes = {
"night_cafe": {
"ja": """単一ファイルのランディングページを作ってください。
サイト名: Night Cafe
スタイル: 暖かい/落ち着いた/木漏れ日感、Tailwind、rounded-xl、柔らかいグラデーション
セクション: ナビバー、ヒーロー(見出し+説明+CTA2つ)、特徴(3-6個のグリッド)、料金(3プラン)、FAQ、フッター
制約: セマンティックHTML、外部JSなし、読みやすい余白、アクセシビリティ配慮。""",
"en": """Generate a single-file landing page.
Site: Night Cafe
Style: warm, cozy, komorebi lighting; Tailwind; rounded-xl; soft gradients
Sections: navbar; hero (headline+subtext+2 CTAs); features grid (3–6); pricing (3 tiers); FAQ; footer
Constraints: semantic HTML, no external JS, generous whitespace, accessible markup."""
},
"travel_gallery": {
"ja": """単一ファイルのランディングページ。
サイト名: Travel Gallery
スタイル: 写真映え/軽やか/空白多め、Tailwind、カード型グリッド
セクション: ナビバー、ヒーロー(コピー+CTA1-2)、フォトグリッド(6-12)、特徴、料金(プラン表記可)、FAQ、フッター
制約: セマンティックHTML、外部JSなし。""",
"en": """Single-file landing page.
Site: Travel Gallery
Style: photo-forward, airy, light; Tailwind; card grid
Sections: navbar; hero (copy + 1–2 CTAs); photo grid (6–12); features; pricing; FAQ; footer
Constraints: semantic HTML, no external JS."""
},
"creator_portfolio": {
"ja": """単一ファイルのランディングページ。
サイト名: Creator Portfolio
スタイル: シンプル/余白広め/ガラスモーフィズム少し、Tailwind
セクション: ナビバー、ヒーロー(自己紹介+CTA2)、作品グリッド、サービス/料金、クライアントロゴ、FAQ、フッター
制約: セマンティックHTML、外部JSなし。""",
"en": """Single-file landing page.
Site: Creator Portfolio
Style: simple, spacious, slight glassmorphism; Tailwind
Sections: navbar; hero (intro + 2 CTAs); work grid; services/pricing; client logos; FAQ; footer
Constraints: semantic HTML, no external JS."""
}
}
一括生成（8ページ）
os.makedirs("outputs", exist_ok=True)
records = []
for theme, pe in themes.items():
for lang, prompt in pe.items():
html = generate_html(prompt)
fname = f"outputs/{theme}_{lang}.html"
with open(fname, "w", encoding="utf-8") as f:
f.write(html)
records.append({"theme": theme, "lang": lang, "file": fname})
print("saved:", fname)
# 生成結果のメタ
with open("outputs/records.json", "w", encoding="utf-8") as f:
json.dump(records, f, ensure_ascii=False, indent=2)
比較ギャラリー（一覧ページを自動生成）
def make_gallery():
cards = []
for r in records:
title = f"{r['theme']} — {r['lang']}"
path = r["file"].split("/",1)[-1]
cards.append(f"""
<a href="{path}" target="_blank" class="block border rounded-xl p-4 hover:shadow">
<h3 class="font-semibold mb-1">{title}</h3>
<p class="text-sm text-gray-600">{path}</p>
</a>
""")
gallery = f"""<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
<title>WEBGEN-4B — Themes Gallery</title>
<body class="bg-gray-50 text-gray-900">
<main class="max-w-6xl mx-auto p-6">
<header class="mb-6">
<h1 class="text-3xl font-bold">Theme-based Landing Pages (JA vs EN)</h1>
<p class="text-gray-600">Generated by Tesslate/WEBGEN-4B-Preview</p>
</header>
<section class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
{''.join(cards)}
</section>
</main>
</body>
</html>"""
with open("outputs/_index.html", "w", encoding="utf-8") as f:
f.write(gallery)
print("saved: outputs/_index.html")
make_gallery()
まとめと応用の方向性
WEBGEN-4B は単なるコード生成ツールではなく、
“コンセプトを読み取って構造を設計するAIデザイナー” のような存在。
今回の3テーマでは、
-
AIスクール → 機能的 UI
-
旅フォト → 空気感重視のビジュアル構成
-
ポートフォリオ → 感情的な温度と信頼感
それぞれに異なる世界観を自然に描き分けました。
💡 応用アイデア
-
ワイヤーフレーム自動生成 ＋ デザイン比較
-
Tailwind 練習用プロンプト教材
-
企業や個人ブランドの初期LP案の自動ドラフト作成
-
Webデザイナーの「AIと共作する」テンプレート制作
🐣
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com
Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。