-
Chat-GPT5.3のUIコーディングの弱さから二月にGeminiに移ったが、その後すぐに5.4が出た。
-
Chat-GPT5.4が優秀と聞き、使用されていなかった無料期間で体験
-
Canvas: Geminiと同じようにCanvasが使えることに気づいた
- 「2024年10月3日（現地時間）に初めて発表・導入」されていたらしいので、GPT5.3のころからあるようであり、自分が使えていなかっただけのよう
- Canvas使用を指定しなくても必要なら自動でCanvasを使ってくれて、便利
-
コーディング能力: 上がっている。まだ少ししか触れていないが、柔軟性が上がっていると感じた。
-
Zip: 作成した複数ファイルに跨ぐコードをZIPファイル形式で出力！ 便利
-
プロンプト: それっぽいホームページ作ってみて。UI作成能力が見たい
export default function HomepageUIMock() {
const features = [
{
title: "直感的な設計",
desc: "複雑な操作を減らし、誰でも迷いにくい画面構成にしています。",
icon: "◎",
},
{
title: "高速な開発",
desc: "React ベースの構成で、改善サイクルを素早く回せる想定です。",
icon: "⚡",
},
{
title: "拡張しやすい",
desc: "機能追加やUI差し替えを見据えた、整理されたコンポーネント設計です。",
icon: "□",
},
];
const stats = [
{ label: "導入チーム", value: "120+" },
{ label: "継続利用率", value: "93%" },
{ label: "平均改善速度", value: "2.4x" },
];
return (
<div className="min-h-screen bg-slate-950 text-white">
<header className="sticky top-0 z-30 border-b border-white/10 bg-slate-950/80 backdrop-blur">
<div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-cyan-400/20 text-cyan-300 shadow-lg shadow-cyan-500/10">
N
</div>
<div>
<div className="text-sm text-slate-400">Next UI Studio</div>
<div className="text-lg font-semibold tracking-wide">NovaFlow</div>
</div>
</div>
<nav className="hidden items-center gap-8 text-sm text-slate-300 md:flex">
<a href="#features" className="transition hover:text-white">機能</a>
<a href="#about" className="transition hover:text-white">強み</a>
<a href="#pricing" className="transition hover:text-white">料金</a>
<a href="#contact" className="transition hover:text-white">お問い合わせ</a>
</nav>
<button className="rounded-2xl border border-cyan-400/30 bg-cyan-400/10 px-4 py-2 text-sm font-medium text-cyan-200 transition hover:bg-cyan-400/20">
無料で試す
</button>
</div>
</header>
<main>
<section className="relative overflow-hidden">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(34,211,238,0.18),transparent_30%),radial-gradient(circle_at_left,rgba(99,102,241,0.16),transparent_25%)]" />
<div className="mx-auto grid max-w-7xl gap-12 px-6 py-20 md:grid-cols-2 md:items-center md:py-28">
<div className="relative z-10">
<div className="mb-4 inline-flex items-center gap-2 rounded-full border border-cyan-400/20 bg-white/5 px-3 py-1 text-sm text-cyan-200">
<span className="h-2 w-2 rounded-full bg-cyan-300" />
UIの印象で、サービスの信頼感を上げる
</div>
<h1 className="max-w-2xl text-4xl font-semibold leading-tight tracking-tight md:text-6xl">
速く作れて、
<span className="text-cyan-300">ちゃんと良く見える</span>
ホームページ。
</h1>
<p className="mt-6 max-w-xl text-base leading-8 text-slate-300 md:text-lg">
NovaFlowは、個人開発や小規模チーム向けに、見た目の整ったWeb体験を短いサイクルで作るためのUI基盤です。
伝わるデザインと使いやすさを両立します。
</p>
<div className="mt-8 flex flex-col gap-4 sm:flex-row">
<button className="rounded-2xl bg-cyan-400 px-6 py-3 font-medium text-slate-950 shadow-xl shadow-cyan-500/20 transition hover:-translate-y-0.5">
デモを見る
</button>
<button className="rounded-2xl border border-white/15 bg-white/5 px-6 py-3 font-medium text-white transition hover:bg-white/10">
導入事例を見る
</button>
</div>
<div className="mt-10 grid max-w-lg grid-cols-3 gap-4">
{stats.map((item) => (
<div key={item.label} className="rounded-2xl border border-white/10 bg-white/5 p-4 backdrop-blur">
<div className="text-2xl font-semibold text-white md:text-3xl">{item.value}</div>
<div className="mt-1 text-sm text-slate-400">{item.label}</div>
</div>
))}
</div>
</div>
<div className="relative z-10">
<div className="rounded-[32px] border border-white/10 bg-white/5 p-4 shadow-2xl shadow-cyan-950/40 backdrop-blur">
<div className="rounded-[28px] border border-white/10 bg-slate-900/90 p-4">
<div className="flex items-center justify-between border-b border-white/10 pb-4">
<div>
<div className="text-sm text-slate-400">Dashboard Preview</div>
<div className="text-lg font-semibold">Project Overview</div>
</div>
<div className="rounded-full bg-emerald-400/15 px-3 py-1 text-sm text-emerald-300">
Live
</div>
</div>
<div className="mt-4 grid gap-4 md:grid-cols-2">
<div className="rounded-3xl border border-white/10 bg-slate-800/70 p-5">
<div className="text-sm text-slate-400">進行中の改善</div>
<div className="mt-2 text-3xl font-semibold">18</div>
<div className="mt-4 h-2 overflow-hidden rounded-full bg-white/10">
<div className="h-full w-3/4 rounded-full bg-cyan-300" />
</div>
<div className="mt-2 text-sm text-slate-400">今週の進捗 75%</div>
</div>
<div className="rounded-3xl border border-white/10 bg-slate-800/70 p-5">
<div className="text-sm text-slate-400">満足度スコア</div>
<div className="mt-2 text-3xl font-semibold">4.8 / 5</div>
<div className="mt-4 flex gap-2">
{[1, 2, 3, 4, 5].map((n) => (
<div
key={n}
className={`h-3 flex-1 rounded-full ${n < 5 ? "bg-cyan-300" : "bg-white/15"}`}
/>
))}
</div>
<div className="mt-2 text-sm text-slate-400">ユーザー調査ベース</div>
</div>
</div>
<div className="mt-4 rounded-3xl border border-white/10 bg-slate-800/70 p-5">
<div className="flex items-center justify-between">
<div>
<div className="text-sm text-slate-400">アクティビティ</div>
<div className="text-lg font-semibold">最近の改善ログ</div>
</div>
<div className="text-sm text-cyan-300">更新中</div>
</div>
<div className="mt-4 space-y-3">
{[
"トップページのCTAを改善",
"カードUIの余白を最適化",
"初回導線の離脱率を低下",
].map((item, idx) => (
<div
key={item}
className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/5 px-4 py-3"
>
<div className="flex items-center gap-3">
<div className="flex h-8 w-8 items-center justify-center rounded-xl bg-cyan-400/10 text-cyan-300">
{idx + 1}
</div>
<span className="text-sm text-slate-200">{item}</span>
</div>
<span className="text-xs text-slate-400">今日</span>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="features" className="mx-auto max-w-7xl px-6 py-16 md:py-24">
<div className="max-w-2xl">
<div className="text-sm font-medium text-cyan-300">FEATURES</div>
<h2 className="mt-3 text-3xl font-semibold tracking-tight md:text-4xl">
雰囲気だけで終わらせない、
実用寄りのUI設計
</h2>
<p className="mt-4 text-slate-400 leading-8">
見た目の整合性、情報の優先順位、次に押してほしいボタンの明確さまで含めて設計します。
</p>
</div>
<div className="mt-10 grid gap-6 md:grid-cols-3">
{features.map((feature) => (
<div
key={feature.title}
className="rounded-[28px] border border-white/10 bg-white/5 p-6 shadow-lg shadow-black/10 backdrop-blur transition hover:-translate-y-1 hover:bg-white/7"
>
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-cyan-400/10 text-xl text-cyan-300">
{feature.icon}
</div>
<h3 className="mt-5 text-xl font-semibold">{feature.title}</h3>
<p className="mt-3 text-sm leading-7 text-slate-400">{feature.desc}</p>
</div>
))}
</div>
</section>
<section id="about" className="mx-auto max-w-7xl px-6 pb-16 md:pb-24">
<div className="grid gap-6 md:grid-cols-[1.15fr_0.85fr]">
<div className="rounded-[32px] border border-white/10 bg-gradient-to-br from-cyan-400/10 to-indigo-400/10 p-8">
<div className="text-sm font-medium text-cyan-300">WHY NOVAFLOW</div>
<h2 className="mt-3 text-3xl font-semibold tracking-tight">第一印象を整えるだけで、伝わり方はかなり変わる。</h2>
<p className="mt-4 max-w-2xl text-slate-300 leading-8">
サービスの価値そのものだけでなく、最初の数秒で感じる「信頼できそう」「使いやすそう」が重要です。
そのための余白、配色、視線誘導を、最小構成でも成立するようにまとめています。
</p>
<div className="mt-8 flex flex-wrap gap-3 text-sm text-slate-200">
{[
"洗練された印象",
"情報整理された構成",
"CTAが分かりやすい",
"B2B / SaaS風にも対応",
].map((tag) => (
<span key={tag} className="rounded-full border border-white/10 bg-white/5 px-4 py-2">
{tag}
</span>
))}
</div>
</div>
<div className="rounded-[32px] border border-white/10 bg-white/5 p-8">
<div className="text-sm font-medium text-cyan-300">VOICE</div>
<p className="mt-4 text-lg leading-8 text-slate-200">
「最低限の情報しかない段階でも、かなり完成形っぽく見える。これなら企画段階の説明にも使いやすい。」
</p>
<div className="mt-6 text-sm text-slate-400">個人開発者 / UI検討中</div>
<div className="mt-8 rounded-3xl border border-white/10 bg-slate-900/60 p-5">
<div className="text-sm text-slate-400">おすすめ用途</div>
<ul className="mt-3 space-y-3 text-sm text-slate-200">
<li>・ポートフォリオのトップページ</li>
<li>・SaaS風の紹介ページ</li>
<li>・プロダクトの初期モック</li>
</ul>
</div>
</div>
</div>
</section>
<section id="pricing" className="mx-auto max-w-7xl px-6 pb-20">
<div className="rounded-[36px] border border-white/10 bg-white/5 p-8 md:p-10">
<div className="grid gap-8 md:grid-cols-[1fr_auto] md:items-end">
<div>
<div className="text-sm font-medium text-cyan-300">GET STARTED</div>
<h2 className="mt-3 text-3xl font-semibold tracking-tight md:text-4xl">
とりあえずそれっぽく見せたい、
から始められる。
</h2>
<p className="mt-4 max-w-2xl text-slate-400 leading-8">
最初はモックでも十分です。まず見た目の方向性を固めて、そのあとで機能を積み上げる流れが取りやすくなります。
</p>
</div>
<div className="rounded-[28px] border border-cyan-300/20 bg-cyan-400/10 px-8 py-6 text-right">
<div className="text-sm text-cyan-200">Starter Plan</div>
<div className="mt-2 text-4xl font-semibold">¥0</div>
<div className="mt-1 text-sm text-slate-300">モック作成・検討用</div>
</div>
</div>
<div className="mt-8 flex flex-col gap-4 sm:flex-row">
<button className="rounded-2xl bg-cyan-400 px-6 py-3 font-medium text-slate-950 transition hover:-translate-y-0.5">
今すぐ始める
</button>
<button className="rounded-2xl border border-white/10 bg-transparent px-6 py-3 font-medium text-white transition hover:bg-white/5">
資料をダウンロード
</button>
</div>
</div>
</section>
</main>
<footer id="contact" className="border-t border-white/10 bg-slate-950/80">
<div className="mx-auto flex max-w-7xl flex-col gap-4 px-6 py-8 text-sm text-slate-400 md:flex-row md:items-center md:justify-between">
<div>© 2026 NovaFlow Inc. All rights reserved.</div>
<div className="flex gap-6">
<a href="#" className="hover:text-white">利用規約</a>
<a href="#" className="hover:text-white">プライバシー</a>
<a href="#" className="hover:text-white">会社情報</a>
</div>
</div>
</footer>
</div>
);
}