このプレビューは実サイトを埋め込み表示しています。レイアウトは実際の閲覧環境と異なる場合があります。
コンセプト
「はたらく」を、つなぐ会社だ。をコンセプトに、白×墨の方眼紙の上へ青・桃・黄の3色を吹き出し・マスク・ドットでだけ置くデザイン言語で組んだ採用サイト。固定表示のメインビジュアル(青→橙→桃の3テーマが約4秒ごとに溶け替わり、アウトライン英字が1文字ずつ立ち上がる)の上に本文面が被さって上がる構造を、GSAPなしのクラス付与+CSSトランジションで実装。TOP/社員インタビュー(一覧+3名の詳細:写真FV・吹き出し札・深青のQ&A・プロフィールと1日のスケジュール)/1日の流れ(3職種タブ×縦タイムライン)/働く環境・福利厚生(stickyナビ・数字カード6枚・研修表)/募集要項(3色タブ×定義リスト表)/エントリー(入力→確認→完了の疑似3ステップ)/プライバシー/404の全10ページ。
背景・課題
実在の高品質な採用サイトをヘッドレスで実測(配色・タイポ・余白・イージング・下層10ページの構造)し、印象でなく実値を憲法として踏襲した。iOS安全のため、CSSマスク→SVG clipPath、3D coverflow→2Dカルーセル、vw連動フォント→pxの3段階、100vh→svh二段、mix-blend/filter→不使用へ翻訳。人物写真は透過切り抜きを使わず吹き出しクリップに収めて事故を避け、数字カードの数値・円グラフ・ピクトは画像でなくHTML/インラインSVGで組んだ。フォームは実送信なし・ハニーポット付きの疑似送信で、必須・形式チェックと確認画面をJSで実装。Chromium/WebKitの両方で横はみ出しゼロを機械検証。
DESIGN PERSPECTIVE
TECHNOLOGIES & FEATURES
主な機能
テーマ巡回メインビジュアル吹き出しマスク写真2Dカルーセルマーキータブ切替縦タイムライン数字カード(SVGグラフ)stickyサイドナビほか 2 件
使用技術
HTMLCSSJavaScript
CMSなし
フォームあり
アニメーションあり