どこからでも採用

機能

モバイルボトムナビゲーション、オートコラプスパネル、スケルトンローダー、トースト通知を備えたGmailスタイルのレスポンシブデザイン。携帯電話から候補者をレビューします。

第一印象

Gmailスタイルの読み込み

アプリが初期化されると、Curriculoのロゴが表示され、その下にスムースなプログレスバーがあります。空白の白い画面も、永遠に回り続けるスピナーもありません。読み込み状態は洗練されており、意図的に感じられます。

ロゴ + プログレスバー

読み込み画面には、クリーンな背景に中央に配置されたCurriculoのロゴと、その下に細いアニメーションのプログレスバーが表示されます。アプリが読み込まれていることを伝え、進捗の視覚的な感覚を与えます。アプリの準備が整うと、読み込み画面はスムースにフェードアウトします。

このパターンは、Gmail、Notion、Linearから借用されており、読み込み体験で知られるアプリです。これにより、ユーザーがダッシュボードを見る前に品質の期待が設定されます。

適応レイアウト

パネル置き換え

狭い画面（モバイルおよび小型タブレット）では、候補者の詳細ビューを開くとリストビューが置き換えられ、隣に表示されるのではなく、すべてのコンテンツがフルスクリーン幅を占めます。1タップでリストに戻ります。

自動折りたたみサイドバー

中型画面で詳細パネルが開くと、サイドバーは自動的に折りたたまれてスペースを確保します。モバイルでは、サイドバーが完全にボトムナビゲーションバーになります。作業中のコンテンツにすべてのピクセルが使われます。

モバイルボトムナビゲーション

モバイルでは、デスクトップのサイドバーは常に表示され、1タップでアクセス可能な5タブのボトムナビゲーションバーに置き換えられます。

「その他」タブ

5番目のタブは「その他」メニューを開き、設定、分析、チーム管理、請求書、およびあまり使用されていない他の機能へのアクセスを提供します。これにより、ボトムバーはクリーンに保たれ、すべての機能へのアクセシビリティが確保されます。

モバイルタイムスタンプ

応募者行にコンパクトな日付表示

デスクトップでは、応募者行には完全なタイムスタンプ（「2026年3月15日午後2時34分」）が表示されます。モバイルでは、タイムスタンプが相対形式（「2時間前」、「昨日」、「3月15日」）に圧縮され、情報を有用に保ちながら横幅を節約します。

スケルトンローダーとトースト通知

スケルトンローダー

アプリ内のすべてのページにはスケルトン読み込み状態があり、読み込まれているコンテンツのレイアウトに一致するグレーのプレースホルダー形状が表示されます。候補者リストには行状のスケルトンが表示され、分析ページにはチャート状のスケルトンが表示されます。これにより、レイアウトのシフトが排除され、スピード感を与えます。

トースト通知

すべてのユーザーアクションではトースト通知が生成されます：「候補者が面接に移動しました」（成功、緑）、「メモの保存に失敗しました」（エラー、赤）、「面接が予定されました」（情報、青）。トーストはデスクトップでは右上、モバイルでは下中央に表示され、4秒後に自動的に消えます。

近日公開

ダークモードサポート

CSS変数の準備完了

UI全体は、色、背景、ボーダー、およびシャドウ用のCSSカスタムプロパティ（変数）で構築されています。ダークモードへの切り替えは、変数の値を入れ替えるだけで済み、インフラストラクチャはすでに整っています。

部分実装

コアコンポーネント（サイドバー、ヘッダー、カード、ボタン）にはすでにダークモードのバリアントが定義されています。フルダークモードのカバレッジは進行中であり、将来の更新でユーザーが切り替え可能な設定としてリリースされます。

システム優先設定の検出

ダークモードが起動すると、デフォルトでユーザーのオペレーティングシステムの優先設定（prefers-color-scheme: dark）を尊重し、設定で手動で切り替えることができます。