AIでLPを作るとき、最初の出力はそれなりに整って見えることが多いです。
ただ、よく見ると「どこかで見たことがある」「情報は並んでいるけれど、ブランドらしさが弱い」と感じることもあります。
そこで今回は、同じ条件で2つのLPを作り、Taste Skillを使う場合と使わない場合で、見た目や完成度にどのような違いが出るのかを比較しました。
検証に使ったのは、架空のラグジュアリーホテル予約サービス「LUNA」です。
実装コードとスクリーンショットは、以下のGitHubリポジトリに保存しています。
Kazuya-Sakashita/codex-taste-skill-ui-ux-taste
検証条件
公平に比較するため、以下の条件はすべて統一しました。
- サービス名: LUNA
- ジャンル: Luxury Hotel Booking
- ターゲット: 富裕層、記念日旅行、ハネムーン、高級ホテル好き、海外旅行好き
- 技術スタック: Next.js、React、Tailwind CSS
- セクション構成: Hero、Featured Destinations、Why Choose、Experience、Testimonials、Pricing、FAQ、Footer
- コンテンツ量: 同じ
- 写真素材: 同じ
- CTA文言: 同じ
変更したのは、Taste Skillを使うかどうかだけです。
Taste Skillなし版
Taste Skillなし版は、一般的なAI生成LPとして実装しました。
過剰に品質を落とすのではなく、「普通に良いLP」を目指しています。
第一印象としては、かなり分かりやすいLPです。
左にコピー、右にホテル写真を置く構成で、CTAも見つけやすく、情報の整理もできています。
ただし、全体としてはSaaSや予約サービスのテンプレートに近い印象があります。
写真はきれいですが、ブランドの世界観を作る主役というより、レイアウト内の補助要素として扱われています。
Taste Skillなし版の特徴
- Heroは左にコピー、右に写真を置く標準的な構成
- CTAは見やすく、操作対象として分かりやすい
- 各セクションはカード形式で整理されている
- 情報の理解はしやすい
- 一方で、高級ホテルブランドらしい余韻や没入感は弱め
Taste Skillあり版
Taste Skillあり版では、Taste Skillの design-taste-frontend を導入し、LP向けのデザイン判断に沿って実装しました。
今回は、以下のように読み取りました。
premium consumer luxury hotel booking landing for affluent travelers
つまり、単なる旅行予約サイトではなく、高級ホテルブランドの公式サイトに近い印象を目指しています。
大きな違いは、写真の扱いです。
Taste Skillあり版では、Hero全体にホテル写真を敷き、テキストを写真の上に重ねています。
これにより、最初に目に入るのは「機能」ではなく「滞在体験」になります。
LUNAが何を売っているかを説明する前に、どんな世界観のサービスなのかが伝わる構成です。
Taste Skillあり版の特徴
- Heroで写真を全面に使い、第一印象を強くしている
- 小見出しを減らし、見出しと写真の優先順位を明確にしている
- セクションごとに余白とカード配置のリズムを変えている
- CTAは目立たせつつ、全体の世界観に馴染ませている
- 高級感を出すため、暖色ベージュ一辺倒ではなく、シルバーグレー系の落ち着いた方向に調整している
比較表
| 項目 | Taste Skillなし | Taste Skillあり |
|---|---|---|
| 第一印象 | 分かりやすく安心感がある | 写真の没入感があり、ブランドサイトらしい |
| ブランド感 | 予約サービスとしては成立している | 高級ホテルブランドに近い印象がある |
| タイポグラフィ | 太く読みやすいが、やや一般的 | 細めで大きく、落ち着いた印象 |
| 余白 | 標準的で効率的 | 広く、呼吸感がある |
| 写真の見せ方 | レイアウトの補助要素 | ブランド体験の中心 |
| レイアウト | 均等グリッド中心で整理されている | セクションごとにリズムがある |
| CTA | 目立ち、機能的 | 世界観に馴染みつつ押しやすい |
| 全体の完成度 | 普通に良いLP | ブランドLPとしての完成度が高い |
実装して分かったこと
今回一番分かりやすかったのは、同じ写真と同じ文章でも、見せ方だけで印象が大きく変わるという点です。
Taste Skillなし版も、LPとして破綻しているわけではありません。
むしろ短時間で分かりやすいページを作るという意味では、十分に実用的です。
一方で、Taste Skillあり版は「どの情報を最初に見せるか」「写真をどれくらい大きく扱うか」「小見出しをどこまで減らすか」「カードを均等に並べすぎていないか」といった判断が増えます。
その結果、テンプレート感はかなり弱まり、ブランドらしさは強くなりました。
ただし、Taste Skillを使えば自動で完璧になるわけではない
今回の実装中にも、いくつか調整が必要でした。
- Hero上の文字が写真の明るい部分に重なり、可読性が弱くなる
- ガラス風のナビゲーションで文字のコントラストが不足する
- スクロール時に表示されるアニメーションが、フルページスクリーンショットでは写らない
- 遅延読み込みされた画像が、撮影タイミングによって空白になる
これらは、実際にブラウザで見たり、スクリーンショットを撮ったりしないと気づきにくい問題です。
Taste Skillは、出力の方向性を良くするための強い補助になります。
ただし、最後の目視確認と微調整はやはり必要です。
結論
Taste Skillなしでも、普通に良いLPは作れます。
特に、情報を分かりやすく整理したい場合や、短時間で実用的なページを作りたい場合には十分です。
一方で、ブランド感や第一印象を重視するLPでは、Taste Skillありの方が明確に有利でした。
余白、写真、タイポグラフィ、CTA、セクションリズムを意識することで、AIっぽいテンプレート感が減り、人がデザインしたページに近づきます。
今回の検証では、Taste Skillは「魔法の自動デザインツール」というより、AIの出力をより良い方向へ導くためのデザインレビュー基準として有効だと感じました。
成果物
- GitHubリポジトリ: Kazuya-Sakashita/codex-taste-skill-ui-ux-taste
- Taste Skillなし:
/plain - Taste Skillあり:
/taste - 比較画像:
comparison-first-view.png - フルページ画像:
plain-full-page.png,taste-full-page.png