サンプル一覧

同じ方向性(操作はシンプル、背景と発光でAIシステム感)で、見た目の作り方が違う2パターンです。レース一覧からレースをタップすると出馬表(AI予測・買い目)へ進みます。スマホでの確認を推奨します。

Lログインページ NEW

一覧・出馬表と同じ世界観(背景の動き・発光)で作ったログイン画面です。ライセンスキーと数字4桁のパスワードを入力して「ログイン」を押すと、認証演出のあとレース一覧(A-b)へ進みます(入力内容は送信されません)。「ログイン状態を保持」のチェックは置かず、ログイン後はその端末(ブラウザ)で約1週間保持される想定です。「パスワードをお忘れの方」はページ遷移せず、ホバー/タップで「担当者までご連絡ください」の吹き出しが出ます。

ログインページを開く→ ログイン後はレース一覧 A-b へ

Aカード型

半透明のカード(面)で区切るタイプ。角丸で、選んだものがカードごと光ります。

レース一覧 A を開く→ レースをタップで出馬表へ
A の改良案(カードを明るく・背景の透過感はそのまま)ご指摘「カードが暗く背景と馴染む」への対応。半透明パネル(開催日・開催場・レース行・出馬表)の塗り方だけを変えた3案です。操作・構成は A と同じ。
A-a 白寄りのすりガラス白い半透明の面。カードが一番はっきり浮き上がる
A-b 青〜シアンの色ガラス青系の半透明の面。世界観に馴染ませつつ明るく ← 採用
A-c 暗いまま輪郭を強調面の色は元のまま、枠線と光で背景から切り離す

Bライン型

面で囲わず、罫線・発光する下線・左バーで区切るタイプ。計器や端末に近い佇まいで、背景の動きは控えめ・ゆっくりです。

レース一覧 B を開く→ レースをタップで出馬表へ

A と B の違い

A カード型B ライン型
区切り方半透明カード(面)・角丸罫線・発光する下線・左バー(線)・角は直線寄り
開催日の選択2つの丸みのあるボタン1つの枠を2分割したセグメント
開催場の選択3枚のタイル(選択中が光り、下に▼)3つのタブ(選択中の下線が光る)
レース行カード。R番号ボックス/条件チップ/AI本命+確信度バー罫線リスト。左に時刻とR/条件は1行テキスト/右に確信度のリングゲージ
次のレースの強調カード全体が明滅+NEXTバッジ左の縦バーが明滅+NEXTバッジ
レース情報(出馬表上部)丸いR番号と条件チップのカード左バー付きのヘッダー。条件は1行で「|」区切り
AI予測の演出進捗バー+日本語ログ → 確信度の数字+バー、印5頭のリスト、買い目はチップ端末風の英字ログ → 大きなリングゲージ+TOP3、△は1行、買い目は表
出馬表表形式(枠・馬番・馬名/騎手・オッズ・人気・AI)行カード(枠色の中に馬番、馬名/騎手、右にAI指数とオッズ・人気)
背景の動き速度 1.0×、通常の明るさ速度 0.5×、不透明度を下げ暗幕を濃くして控えめ
共通背景 TUNNEL、黒〜濃紺 × 青〜シアン、右上はユーザー名+メニュー(≡)、馬番順⇄AI順の切替、前後レース移動
共通事項