TOKUMORI / 4 EDITIONS

学生向け 企業カタログ
4パターン(並行運用・正本)

共通の骨格(運営のおすすめを最上段に置く / 特徴別レーンが1枚ずつ送られて止まる / カーソルでカードが前に出る / カードから各社のLPへ)を、4つの質感で作り分けています。1本には絞らず、4パターンとも正本として並行運用します。どの用途(Lステップ配信/説明会告知/CA提案/SNS拡散など)にどれを使うかは検討中です。回るサークルはD案だけの特徴です。配色は各ページ右上の COLOR ボタンで3種類を循環できます(既定=近未来:ピュアホワイト×ピンク×水色 → 青:白×ティール → ブランド赤)。掲載データはノースサンドのみ実データ、他は「SAMPLE」表記の未入稿枠です。

A

回遊型

ZOZOの構造 × Apple Storeの静けさ
  • 小さめカードが5枚見えて、レーンが多い=回遊させる
  • ホバーで浮いた瞬間だけスペック行が現れる
  • 企業数が増えたときに一番強い
開く →
B

大判・雑誌型

明朝主役・余白で見せるエディトリアル
  • 大判カードで1社ずつ読ませる。写真が主役
  • 1枚ずつ送る間隔がゆったりで、読ませる設計
  • ホバーで赤いルールが引かれ、番号がロールする
開く →
C

比較・データ型

数字で見比べる
  • 残業・離職率・年間休日を大きな数値で主役に
  • ホバーで業界平均との比較バーが伸びる
  • レーンごとに「残業が少ない順」で並べ替えできる
開く →
D

オービット(回るサークル)

ガチャのように円が回る
  • 企業カードが円周に並び、ゆっくり回り続ける
  • ドラッグ/矢印で回す。前面に来た企業の詳細が下に出る
  • 下段は他パターンと同じ「1枚ずつ送るレーン」
開く →

確認のしかた

レーンの動き1枚ずつ送って止まる(送り0.56秒→3.6秒停止)。1本ごとに送る向きが逆=左右対称。カーソルを乗せると止まり、離すと再開。右上の ❙❙ で完全に止められます。
サークルの傾き(D)カードの縦位置とリングの楕円を同じ式(縦圧縮率 sin14°)で描いているので、カードは必ずリングの弧の上に乗ります。A/B/Cにサークルはありません。
ティッカーヘッダー直下の帯が電光掲示板のように流れます(カーソルを乗せると停止)。数値は実データがある企業だけ、他は「準備中」。
サークルの操作(D)円をドラッグして回す/‹ › で1社ずつ回す/❙❙ で停止。正面の企業に合わせて下の情報バーが入れ替わります。
配色右上 COLOR で「近未来(既定・ピンク×水色)→ 青(白×ティール)→ ブランド赤」を循環。選択は保存されます(?theme=neo|biz|brand でも指定可)。
手動操作スマホは指でスワイプ(1枚ずつスナップ)。PCは矢印ボタン・ドラッグ・矢印キー(レーンをクリックしてから)・Shift+ホイール。
ポコっと前に出るPCはカードにカーソルを当てる。スマホは押している間に同じ動きをします。
検索上部の検索とタグを使うと、レーン表示から結果グリッドに切り替わります。クリアで戻ります。
離脱ポップアップ開いて8秒以降、PCはカーソルを画面の上端から外に出すと1回だけ出ます。スマホは上方向に勢いよくスクロール。1セッション1回のみ(もう一度見るには新しいタブで開く)。
CA向け機能URLの末尾に ?ca=1 を付けると、提案セットのチェックと画面下トレイ(URL一括コピー)が現れます。付けないときは学生向け表示のみで、痕跡は出ません。
掲載データの出典:公式採用ページ・2027年1月期第1四半期決算説明資料・Salesforce登録情報(ノースサンド)/noindex・社内レビュー用