website-benchmark · round_001 · redesign

ホームページ再設計:3つの方向

ベンチマークの診断=ホームページ 1.5/3(12サイト中最下位)。問題は文字量ではなく「5秒で何だか分からない・どう動くか分からない」という positioning の明瞭さでした。 その P0 ギャップ(①ヒーローが具体を言わない ②名前付きの仕組み装置がない ③馴染みのない概念が腑に落ちない)を、3つの強度で塞いだ案です。

A 保守的 → B 中庸 → C 大胆 の順に、現行サイトからの飛距離が大きくなります。3案とも禁止クレーム・ゲート通過済み(監視/予測/スコア/感情検知/ハラスメント判定 = いずれも肯定的主張ゼロ、否定文脈のみ)。各カードの「開く」で実物が見られます。

A
保守的 / Conservative

会議で「誰が話せていないか」を、内容を読まずに見える化する。

今の7セクション構成はそのまま。弱かったヒーローの詩(「見えないものを可視化する」)だけを、/demo で 3/3 実証済みの具体文に差し替え、CTAを1本に絞る。

現行サイトから変わる点

  • ヒーロー=抽象詩 → 具体的な「何をするツールか」を5秒で言い切る一文
  • 名前付きの3ノード内容非依存フロー(会議→構造シグナル蓄積→人が確認)を追加
  • CTAを「表示される結果を見る」の1本に集約(旧:demo+pilot+governance+whyの分岐を解消)
  • 「内容判定なし・感情推定なし・人事判断なし」を静かな1行に降格
こういう時に選ぶ:今のサイトの骨格を保ったまま、コンバージョンの穴(5秒で伝わらない・CTA分岐)だけ塞ぎたい場合。実装が一番速い。
最小リスク・最短で出せる · CANON GATE ✓ PASS
B
中庸 / Middle

会議で「誰が話せていないか」を、構造で見える化する。

ページ全体を「観る→確かめる→話す→見直す」という名前付きの動詞ループで再構成。サンプル結果カードを how-it-works の実物として見せ、「誰に何が見えるか(全社・マネージャー専用ではない)」とFAQで密度を整理する。

現行サイトから変わる点

  • 名前付きの動詞ループがページの背骨になる(断片的な7セクションを再編)
  • サンプル構造シグナルの実物を how-it-works として提示(説明ではなく見せる)
  • 「誰に何が見えるか」セクション=全社に境界つきビュー(マネージャー専用の誤解を先回りで否定)
  • FAQで「シグナルなし=問題なし?」等の疑問に正面回答
こういう時に選ぶ:情報過多・「どう動くのか分からない」を、構成そのものの再設計で解きたい場合。現行と大胆案の中間。
中程度の作り直し・IA再編 · CANON GATE ✓ PASS
C
大胆 / Bold

「可視化」だけでは、何も変わらない。

Linear/Stripe型のワンビューポート勝負。出力(サンプル構造シグナルのカード)そのものをヒーローに据え、「『可視化』だけでは何も変わらない=判定ではなく確認の材料」とクリシェを否定して始める。一番現行から遠いが、伝わる天井は一番高い。

現行サイトから変わる点

  • 出力=サンプル結果カードがヒーロー(show, don't tell の最大化)
  • クリシェ否定型のヒーロー(「可視化だけでは変わらない」)で差別化
  • 1画面で WHAT/HOW/WHY を言い切る密度設計
  • deterministic を使わず『監査可能・再現可能・内容非依存』に置換
こういう時に選ぶ:思い切って「HRテックらしさ」を脱ぎ、製品の独自性(出力=モート)を最前面に出したい場合。現行からの飛距離は最大。
最大の departure・clarity天井も最高 · CANON GATE ✓ PASS

選び方

どれか1案を「これで進める」と選んでもらえれば、次はその方向を磨き込み、最終的に本物の src/app/page.tsx に実装します(実装マージ時に、本番レンダーのリーク検査=adversarial gate を必ず通します)。混ぜたい要素(例:Bの動詞ループ+Cの出力ヒーロー)があればそれも指定できます。

※ これは方向決め用の静的モックアップです。実データには一切つながっていません。