私は Katakatana という、日本語のカタカナ外来語を解読するための Web アプリを構築していました。このアプリは2つのコアスキルを教えるものです：カタカナ単語の英語における「意味」を認識すること、そしてそれをローマ字（romaji）でどう「読む」かを学ぶことです。目的は明確で、ターゲット層も絞られています。
しかし、「これは学習ツールだ」という認識と「ホームページを作ろう」という考えの間のどこかで、私は典型的なミスを犯してしまいました。
「ヒーローページ（Hero Page）」を作ってしまったのです。
ヒーローページの罠
あなたもそのパターンをご存知でしょう。大きなメインタイトル。サブタイトル。視覚的なティーザー。2つのCTA（行動喚起）ボタン。そしてスクロールした先（below the fold）に、実際のコンテンツがあるという構成です。
これは SaaS のランディングページには非常に効果的です。価値提案を伝え、ブランドの個性を確立し、知らない訪問者をサインアップへと導きます。客観的に見て、ユーザーが「何かを試すかどうか決断している」製品にとっては、確固たるパターンです。
しかし、Katakatana はそういう種類の製品ではありません。アプリを開くユーザーは、それが何をするものかすでに知っています。彼らは練習するためにそこに来ているのです。8xl フォントの「Slash the Pattern」を読むのに費やされるすべてのミリ秒は、彼らが日本語を学んでいないミリ秒なのです。
何かがおかしいとは感じていましたが、AI エージェントと一緒にリデザイン作業を進めるまで、それをうまく言語化できませんでした。
最初の有意義な挑戦
私は問題を説明しました：ホームページが気が散るように感じられること、そしてユーザーが練習モードに直接アクセスできるようにしたいこと。エージェントの最初のアクションは、デザインを始めることではありませんでした。「実際には何を最適化しようとしているのか」を私に尋ねることでした。
その質問は、私が曖昧にしていたことを浮き彫りにしました。このアプリは単なる練習モードの集合体ではありません。2つの具体的な学習の柱があったのです：
- 意味 — カタカナ → 英語
- 読み — カタカナ → ローマ字
これらはメニューの中の同等な項目ではありません。これらは「このアプリが存在する理由」なのです。ホームページはそれを反映すべきです。
そこで私たちは、ダッシュボードのグリッド、ミニマルなリスト、今日のフォーカスカードなど、いくつかのレイアウトアプローチを検討しました。私は2つの柱を同等なヒーローカードとして見せるアプローチに惹かれました。並列で、視覚的な重みも同じ、目立ち具合も同じです。
エージェントはこれに反論しました。
デザインを変えた洞察
その反論は美学に関するものではありません。認知負荷（Cognitive load）に関するものでした。
「完了率が最も高い学習アプリはすべて、一つの原則に収束しています：日常的な決断を排除することです。ユーザーがアプリを開いて2つの平等なオプションを見るたびに、彼らは『今日はどちらにしよう？』という小さな決断を下さなければなりません。この摩擦は複利的に積み重なります。数週間後には、それがアプリを開かない理由になってしまうのです」
これは、習慣形成に適用される選択のパラドックスです。学習アプリが入り口で2つの同じように目立つオプションを提示すると、ユーザーはセッションを始める前に、自分の弱点を自己評価することを強いられます。それは自己評価を行うべきタイミングではありません。正しいタイミングはセッションの内部であり、そこでこそアプリはその情報を使って実際に何かをすることができるからです。
Duolingo、Anki、Lingodeer といった最高の学習アプリは、開くたびにモードを選択するよう求めてきたりはしません。ただ一つのボタン、「続ける（continue）」を提供するだけです。何を練習するかについての決断は、システムか習慣によってすでに下されているのです。
3層（Three-Tier）ソリューション
この対話から生まれたリデザインは、私が今では集中型学習ツールにおける正しいデフォルトだと考える構造を持っています：
第1層 — 一つの主要なアクション、決断は不要。 1つの大きなカード：Daily Duel（デイリーデュエル）。1回のセッションで両方の学習の柱をカバーします。アプリを開いてただ練習したいユーザーは、ボタンを1つ押すだけで開始できます。考える必要はありません。
第2層 — 意図的な練習のための特化モード。 ヒーローカードの下にある2つの同等のカード：Decode（意味のみ）と Romaji Read（読みのみ）。これらは、自分が何に取り組みたいかを正確に知っているユーザーのために存在します——例えば、ローマ字のクイズで間違えたばかりで、その特定のスキルをドリルしたい場合などです。見つけやすい程度には目立ちますが、主要なアクションの注意を奪わない程度に控えめ（セカンダリ）です。
第3層 — その他すべてをコンパクトなリストに。 Rapid Slash、Syllable Forge、Pattern Drill。すべて利用可能ですが、どれも注意を引こうとはしません。
この構造は、学習哲学を直接 UI にエンコードしています：「ここから始め、必要ならさらに深く掘り下げる」という哲学です。
より広範な教訓
このプロセスでエージェントが行った最も有用なことは、レイアウトのオプションを生成したりコードを書いたりすることではありませんでした。それは、製品が何のためのものかを私に具体的に考えさせる質問を投げかけ、その具体性から、私一人では到達できなかったデザインの結論へと導いてくれたことです。
ヒーローページが悪いコンポーネントなわけではありません。それは「製品を知らない訪問者をコンバートする」という特定の役割を持ったコンポーネントです。ユーザーがすでに製品を熟知しているなら、その役割に間違ったコンポーネントを採用していることになります。
すべてのデザインパターンには、それが正解となるコンテキストがあります。自分がどのコンテキストにいるかを知ることこそが、本当のスキルなのです。自分でそれに気づくこともありますし、外部の声が必要になることもあります：*「でも、あなたのユーザーは実際には何をするためにここに来ているのですか？」*と。
その質問は、どんなモックアップよりも価値があります。
Katakatana は、App Router、Tailwind CSS、Zustand を使用して構築された Next.js 15 アプリです。ホームページ全体の再設計は4つのファイルに及び、最初の対話からビルド通過まで1時間もかかりませんでした。
付録：レイアウトの進化
デザインプロセス中に検討された3つのオプションと、最終的に承認された構造。
オプション A — ダッシュボード優先
┌─────────────────────────────────────────────┐
│ KATAKATANA [Daily] [Data] [Conf] │ ← SiteNav
├─────────────────────────────────────────────┤
│ │
│ MODULES v1.0 │
│ ┌───────────┐ ┌───────────┐ ┌──────────┐│
│ │ 📅 │ │ 🔤 │ │ 🈳 ││
│ │ Daily │ │ Syllable │ │ Romaji ││
│ │ Duel │ │ Forge │ │ Read ││
│ └───────────┘ └───────────┘ └──────────┘│
│ ┌───────────┐ ┌───────────┐ ┌──────────┐│
│ │ 🎯 │ │ ⚡ │ │ 📖 ││
│ │ Strike │ │ Rapid │ │ Learn ││
│ │ Challenge │ │ Slash │ │ Rules ││
│ └───────────┘ └───────────┘ └──────────┘│
└─────────────────────────────────────────────┘全6モードのグリッド。お馴染みのパターンですが、階層構造がありません——すべてのモードが平等に注意を引こうと競争します。
オプション B — 今日のフォーカス
┌─────────────────────────────────────────────┐
│ KATAKATANA ⚡3 [nav links] │ ← SiteNav
├─────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────┐ │
│ │ TODAY'S DUEL │ │ ← Primary CTA
│ │ コーヒー │ │
│ │ 10 words remaining │ │
│ │ [ START → ] │ │
│ └─────────────────────────────────────┘ │
│ │
│ OTHER MODES │
│ ┌───────────┐ ┌───────────┐ ┌──────────┐│
│ │ 🎯 STRIKE │ │ ⚡ RAPID │ │ 🔤 BUILD ││
│ └───────────┘ └───────────┘ └──────────┘│
└─────────────────────────────────────────────┘1つの主要な CTA と、その下に配置されたセカンダリモード。強い階層構造ですが、Daily Duel カード単体では2つの学習の柱を伝えることができません。
オプション C — ミニマルランチャー
┌─────────────────────────────────────────────┐
│ KATAKATANA ⚡3 ★47 │ ← SiteNav
├─────────────────────────────────────────────┤
│ ──────────────────────────────────────── │
│ 📅 Daily Duel 10 words [ GO → ] │
│ ──────────────────────────────────────── │
│ 🎯 Strike Challenge decode [ GO → ] │
│ ──────────────────────────────────────── │
│ ⚡ Rapid Slash 60-sec [ GO → ] │
│ ──────────────────────────────────────── │
│ 🔤 Syllable Forge builder [ GO → ] │
│ ──────────────────────────────────────── │
│ 🈳 Romaji Read read [ GO → ] │
│ ──────────────────────────────────────── │
└─────────────────────────────────────────────┘極限までシンプルにし、認知負荷を最小化。しかし、すべてのモードが同等に感じられ、どこから始めるべきかというシグナルがありません。
最終デザイン — 3層構造（承認済み）
┌─────────────────────────────────────────────┐
│ KATAKATANA ⚡3 ★47 [nav links] │ ← SiteNav + NavStats
├─────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────┐ │
│ │ DAILY DUEL [MEANING][READING]│ │ ← Primary CTA (→ /daily)
│ │ Meaning + Reading │ │
│ │ コーヒー │ │
│ │ [ START PRACTICE → ] │ │
│ └─────────────────────────────────────┘ │
│ │
│ FOCUS ON ONE SKILL │
│ ┌───────────────┐ ┌───────────────┐ │ ← Two focused modes
│ │ MEANING │ │ READING │ │
│ │ Decode │ │ Romaji Read │ │
│ │ kata → EN │ │ kata → Romaji │ │
│ │ [ DECODE → ] │ │ [ READ → ] │ │
│ └───────────────┘ └───────────────┘ │
│ │
│ OTHER MODES │
│ ⚡ Rapid Slash 60-sec → │ ← Compact list
│ 🔤 Syllable Forge Builder → │
│ 🔍 Pattern Drill Patterns → │
│ │
│ 📖 LEARN RULES 📊 DASHBOARD │ ← Footer links
└─────────────────────────────────────────────┘摩擦のないデフォルトアクションが1つ。意図的な練習のための単一スキルに焦点を当てたモードが2つ。その他のすべてはセカンダリ。階層構造が学習哲学を直接 UI にエンコードしています。