採用サイトデザイン

8つのシーンで語る採用ページ

このKimi採用サイトの再構成は、セクションがビューポートを流れていくだけの縦長ページではありません。1つのビジュアルステージに8つのシーンを重ね、スクロールの進行に応じて各シーンの不透明度・位置・スケール・ブラーを変化させます。その効果は、通常の求人掲載ページを読み進めるというより、プレゼンテーションのフレームを切り替えていく感覚に近いものです。

この違いが、採用サイトデザインとしての視覚的な魅力と制限の両方を説明しています。このシーケンスは強い雰囲気を確立できますが、実用的な情報はトランジションの外でも参照できる状態を保つ必要があります。応募プロセスを知りたい訪問者と、ブランドストーリーを探索している人とでは、求めているものが異なります。

スクロール位置がシーントランジションになるしくみ

ソースは、ページのスクロール可能な移動範囲を0から7の位置に対応付けており、8つのシーンそれぞれに1つの位置が割り当てられています。その位置に最も近いシーンが現在のシーンになります。隣接するシーンは切り替わりの間も一部表示され続けることがあり、これが2つのシーンの中間で撮影したスクリーンショットがぼやけて見えたり二重に見えたりする理由です。

軌道上の応募パスに設けられた4つの番号付きポイント

応募シーンは、シーケンスを月面ルートとして表現しています。コンピュータと「Submit」のアイコンが付いたポイント1が下部中央付近に現れ、ポイント2はその左側、ポイント3と4は軌道の上部にかけて続きます。ジオメトリが見慣れた左から右へのタイムラインではないため、番号が読み取り順序を担っています。

01

パスはつながりを示し、番号が順序を示す

軌道線は4つのポイントが一連のものであることを伝えます。しかし、どこから始まるか、どちらの方向に進むかは、それだけでは示されません。大きな番号バッジがその欠けている順序を補います。同じ区別は、曲がりくねったオンボーディングフローやイラスト付きプロセス図においても重要です。

02

イラストはすべての説明ではない

このシーンは応募プロセスを示していますが、供給された再構成ではイメージとして描画されています。実際に機能するページには、ステップ名・要件・遷移先がテキストとして存在する必要があります。スマートフォンでフロー図が縦積みになったときも、それらの詳細が読める状態を保つ必要があります。

ビジュアル再構成が実際のHTMLを必要とする部分

OpenDesignはこれをMoonshot社からの受託プロジェクトではなく、ハッカソンの公式サンプルおよびビジュアル考察として作成しました。その違いは実装に現れています。シーン2〜8は供給された参照画像であり、それらの画像にはaria-hiddenが付与されています。表示中のシーンを切り替えても、画像の内部のラベルがテキストとしてアクセシブルになるわけではありません。

1. 見出しを背景画像の外に配置する

   実際に動作するバージョンでは、シーンのタイトルと説明は選択可能なテキストとして残す必要があります。コックピット・星・月は背景として表現できますが、応募案内の唯一の置き場所にしてはなりません。

2. モーションと情報アクセスを切り離す

   モーションを低減した場合でも落ち着いて読めるレイアウトと、プロセスへの直接ルートを用意してください。これは提案された改善点であり、供給された再構成で確認された機能ではありません。次のステップを見つけるために、訪問者がスクロールアニメーションを使いこなせる必要があってはなりません。

この採用サイトデザインが示すもの

この事例が示すのは、シーン構成とスクロール連動モーションであり、現在の求人情報や実際に動作する応募バックエンドではありません。意図的にピクセル化された参照アートワークはベクターアートではなく、ネイティブ解像度でエクスポートしてもそのスタイル上の制限は取り除けません。ナラティブとトランジションの仕組みを学ぶためにご活用ください。実際の採用情報については、各企業の公式チャンネルをご確認ください。