これまでUI/UX設計やプロトタイピングにはAdobe XDやFigmaといった専用ツールが必須とされてきました。しかし、近年の大規模言語モデル（LLM）、特にChatGPTの進化により、デザインを爆速で生成する新しいワークフローを考えてみました。
この記事では、ChatGPTを活用してUIモックを構築する方法について、ハンズオン形式で紹介していきます。
HTMLとCSS(今回の記事ではTailwindcssを使用)を使ってUI画面を構築していきます。
モック制作を目的としているため、実際の機能は開発していません。
今回の記事ではTwitter(X)のUIのモックを作成していきます。
実際に使用したプロンプトと制作物の画像を載せておきます。
Twitter風のタイムラインのUIをHTMLとTailwindcssで再現してください
まあいいでしょう twitterは3カラムのサイトですよ
田中太郎さん以外のアカウントも増やしてください
ホーム 検索 通知などの欄にアイコンを追加してください さらにアカウントを増やしてください
おすすめユーザーをさらに増やしてください メニューも実際のTwitterはもっと多いです
左側のカラムに検索窓を追加してください
タイムラインのツイートを充実させて下さい
最終成果物のソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Twitter風3カラムUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
twitter: '#1DA1F2',
},
},
},
};
</script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-100 text-gray-800">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 min-h-screen">
<!-- 左カラム -->
<aside class="md:col-span-3 p-6 hidden md:block">
<h2 class="text-2xl font-bold text-twitter mb-6">🐦 MyApp</h2>
<!-- 🔍 検索ボックス -->
<div class="mb-6 relative">
<input type="text" placeholder="キーワードを検索" class="w-full pl-10 pr-4 py-2 bg-white border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-twitter" />
<div class="absolute left-3 top-2.5 text-gray-400">
<i data-feather="search"></i>
</div>
</div>
<!-- メニュー -->
<nav class="space-y-4 text-lg">
<a href="#" class="flex items-center space-x-2 hover:text-twitter"><i data-feather="home"></i><span>ホーム</span></a>
<a href="#" class="flex items-center space-x-2 hover:text-twitter"><i data-feather="search"></i><span>探索</span></a>
<a href="#" class="flex items-center space-x-2 hover:text-twitter"><i data-feather="bell"></i><span>通知</span></a>
<a href="#" class="flex items-center space-x-2 hover:text-twitter"><i data-feather="mail"></i><span>メッセージ</span></a>
<a href="#" class="flex items-center space-x-2 hover:text-twitter"><i data-feather="bookmark"></i><span>ブックマーク</span></a>
<a href="#" class="flex items-center space-x-2 hover:text-twitter"><i data-feather="list"></i><span>リスト</span></a>
<a href="#" class="flex items-center space-x-2 hover:text-twitter"><i data-feather="users"></i><span>コミュニティ</span></a>
<a href="#" class="flex items-center space-x-2 hover:text-twitter"><i data-feather="user"></i><span>プロフィール</span></a>
<a href="#" class="flex items-center space-x-2 hover:text-twitter"><i data-feather="settings"></i><span>設定</span></a>
<a href="#" class="flex items-center space-x-2 hover:text-twitter"><i data-feather="log-out"></i><span>ログアウト</span></a>
</nav>
<button class="mt-6 w-full bg-twitter hover:bg-blue-600 text-white py-2 rounded-full text-center">投稿</button>
</aside>
<!-- 中央カラム -->
<main class="md:col-span-6 p-6 space-y-4 bg-white shadow-md">
<!-- タイムラインの投稿 -->
<div class="space-y-6">
<!-- 1 -->
<div class="flex space-x-4 p-4 border-b">
<img src="https://placehold.co/48x48" class="rounded-full w-12 h-12" />
<div class="flex-1">
<div class="flex justify-between text-sm text-gray-500">
<span><strong class="text-gray-800">田中太郎</strong> @tanaka · 1h</span>
<span>⋯</span>
</div>
<p class="text-gray-700 mt-1">今日は公園で猫と遊んだ🐱 天気も良くて気持ちよかった！</p>
<div class="flex mt-2 space-x-6 text-sm text-gray-500">
<span>💬 2</span><span>🔁 10</span><span>❤️ 45</span>
</div>
</div>
</div>
<!-- 2 -->
<div class="flex space-x-4 p-4 border-b">
<img src="https://placehold.co/48x48?text=AI" class="rounded-full w-12 h-12" />
<div class="flex-1">
<div class="flex justify-between text-sm text-gray-500">
<span><strong class="text-gray-800">AI_botくん</strong> @aibot · 2h</span>
<span>⋯</span>
</div>
<p class="text-gray-700 mt-1">ChatGPT + TailwindCSS でUIプロトタイプ爆速構築中💨</p>
<div class="flex mt-2 space-x-6 text-sm text-gray-500">
<span>💬 4</span><span>🔁 12</span><span>❤️ 99</span>
</div>
</div>
</div>
<!-- 3 -->
<div class="flex space-x-4 p-4 border-b">
<img src="https://placehold.co/48x48?text=🍜" class="rounded-full w-12 h-12" />
<div class="flex-1">
<div class="flex justify-between text-sm text-gray-500">
<span><strong class="text-gray-800">ラーメン太郎</strong> @ramenlove · 3h</span>
<span>⋯</span>
</div>
<p class="text-gray-700 mt-1">新宿の「麺屋こころ」めちゃ美味かった！！🔥 濃厚魚介スープ最高🍜</p>
<div class="flex mt-2 space-x-6 text-sm text-gray-500">
<span>💬 8</span><span>🔁 22</span><span>❤️ 134</span>
</div>
</div>
</div>
<!-- 4 -->
<div class="flex space-x-4 p-4 border-b">
<img src="https://placehold.co/48x48?text=🎨" class="rounded-full w-12 h-12" />
<div class="flex-1">
<div class="flex justify-between text-sm text-gray-500">
<span><strong class="text-gray-800">ドット絵職人</strong> @pixel_guy · 4h</span>
<span>⋯</span>
</div>
<p class="text-gray-700 mt-1">新作の勇者ドット描いた⚔️👾 8bitな世界観がやっぱり好き。</p>
<div class="flex mt-2 space-x-6 text-sm text-gray-500">
<span>💬 5</span><span>🔁 16</span><span>❤️ 89</span>
</div>
</div>
</div>
<!-- 5 -->
<div class="flex space-x-4 p-4 border-b">
<img src="https://placehold.co/48x48?text=📷" class="rounded-full w-12 h-12" />
<div class="flex-1">
<div class="flex justify-between text-sm text-gray-500">
<span><strong class="text-gray-800">フォトジェニックY</strong> @photo_Y · 6h</span>
<span>⋯</span>
</div>
<p class="text-gray-700 mt-1">昨日の夜景がエモかった…📸 Lightroomでちょっとだけ補正した。</p>
<div class="flex mt-2 space-x-6 text-sm text-gray-500">
<span>💬 1</span><span>🔁 4</span><span>❤️ 58</span>
</div>
</div>
</div>
<!-- 6 -->
<div class="flex space-x-4 p-4 border-b">
<img src="https://placehold.co/48x48?text=👟" class="rounded-full w-12 h-12" />
<div class="flex-1">
<div class="flex justify-between text-sm text-gray-500">
<span><strong class="text-gray-800">朝ラン部</strong> @run_morning · 8h</span>
<span>⋯</span>
</div>
<p class="text-gray-700 mt-1">朝5kmランしてからのコーヒー☕が最強すぎる。継続は力なり！</p>
<div class="flex mt-2 space-x-6 text-sm text-gray-500">
<span>💬 0</span><span>🔁 3</span><span>❤️ 41</span>
</div>
</div>
</div>
</div>
</main>
<!-- 右カラム -->
<aside class="md:col-span-3 p-6 hidden md:block">
<h2 class="text-lg font-bold mb-4">トレンド</h2>
<ul class="space-y-2 text-sm text-gray-600">
<li>#AIタグ生成</li>
<li>#春のおすすめ写真</li>
<li>#TailwindCSS</li>
<li>#ストックフォト</li>
</ul>
<h2 class="text-lg font-bold mt-8 mb-4">おすすめユーザー</h2>
<div class="space-y-3 text-sm">
<div class="flex justify-between items-center">
<span>@photoman</span>
<button class="text-blue-500 hover:underline">フォロー</button>
</div>
<div class="flex justify-between items-center">
<span>@llm_master</span>
<button class="text-blue-500 hover:underline">フォロー</button>
</div>
<div class="flex justify-between items-center">
<span>@animep</span>
<button class="text-blue-500 hover:underline">フォロー</button>
</div>
<div class="flex justify-between items-center">
<span>@frontendX</span>
<button class="text-blue-500 hover:underline">フォロー</button>
</div>
<div class="flex justify-between items-center">
<span>@deepseek_ai</span>
<button class="text-blue-500 hover:underline">フォロー</button>
</div>
</div>
</aside>
</div>
<script>feather.replace();</script>
</body>
</html>
このように学習が必要なデザインツールを使わなくても実際に触れるプロトタイピング物を自然言語だけで作成することができる時代になりました。是非ご自身のプロジェクトにも生かしてみて下さい
おまけ
Iphone風のUI
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>iPhone風UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-white flex justify-center items-center min-h-screen">
<div class="w-[375px] h-[812px] bg-black rounded-[2rem] overflow-hidden shadow-lg border-4 border-gray-700 relative">
<!-- ステータスバー -->
<div class="flex justify-between items-center px-4 py-2 text-xs text-gray-300 bg-gray-950">
<span>9:41</span>
<div class="flex items-center space-x-1">
<span>📶</span>
<span>🔋</span>
</div>
</div>
<!-- 背景 -->
<div class="p-4 h-full bg-gradient-to-tr from-blue-600 via-purple-600 to-pink-500">
<!-- アイコングリッド -->
<div class="grid grid-cols-4 gap-4 mt-6">
<!-- アイコン -->
<div class="flex flex-col items-center">
<div class="w-14 h-14 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center text-xl">📞</div>
<span class="text-xs mt-1">電話</span>
</div>
<div class="flex flex-col items-center">
<div class="w-14 h-14 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center text-xl">✉️</div>
<span class="text-xs mt-1">メッセージ</span>
</div>
<div class="flex flex-col items-center">
<div class="w-14 h-14 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center text-xl">📷</div>
<span class="text-xs mt-1">カメラ</span>
</div>
<div class="flex flex-col items-center">
<div class="w-14 h-14 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center text-xl">🌐</div>
<span class="text-xs mt-1">Safari</span>
</div>
<!-- 2列目 -->
<div class="flex flex-col items-center">
<div class="w-14 h-14 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center text-xl">🎵</div>
<span class="text-xs mt-1">ミュージック</span>
</div>
<div class="flex flex-col items-center">
<div class="w-14 h-14 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center text-xl">🗓</div>
<span class="text-xs mt-1">カレンダー</span>
</div>
<div class="flex flex-col items-center">
<div class="w-14 h-14 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center text-xl">🕓</div>
<span class="text-xs mt-1">時計</span>
</div>
<div class="flex flex-col items-center">
<div class="w-14 h-14 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center text-xl">📍</div>
<span class="text-xs mt-1">マップ</span>
</div>
</div>
<!-- Dock -->
<div class="mt-12 flex justify-around bg-white/10 backdrop-blur-md rounded-3xl py-2 px-4">
<div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">📞</div>
<div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">💬</div>
<div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">🧭</div>
<div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">📁</div>
</div>
</div>
</div>
</body>
</html>