UI Sample Index

1. ライト・ミニマル 2. ダーク・シック 3. カラフル・ポップ 4. 質感・テクスチャ 5. 世界観・テーマ 6. タブ式(スマホ向き) 7. 3場並列(PC向き) 8. 特殊フォーマット

1. ライト・ミニマル

白基調・余白・1アクセント。読みやすさ重視のシンプル系。
凡例付きパネル
白基調、凡例名付きで枠表示。
Monotone + 1 Accent(モノトーン+差し色)
全体をモノトーン基調に統一し、1色のみアクセントとして使用したミニマル版。
Paper Craft
色味や掲載データはシンプル。余白多めで左上マークのような後情報の付け足しなどがしやすい。
シンプルデザイン
シンプルな配置、ビビットカラー選択、微グラデの方眼背景。
白黒 + 要素線なし
コンパクトに振り切ったイメージ。レースリストっぽくない。
切り欠きタブ(白×1アクセント)
白基調+直角の切り欠きタブ。右上「…」メニューからアクセント色5種に切替可。

2. ダーク・シック

黒基調・1アクセント・大人っぽい。シック寄り、機能性も両立。
Black Based 1 Accent
黒背景に差し色を選べるシンプル&クールデザイン。
黒ベースの高級感
黒ベースのシックなデザイン。差し色でネオンカラー寄りの水色。マウスホバー時に光の反射。
Fixed Header + Random Shapes
blackベースでシック寄り。カラーは多用するため○だけ塗りで控えめに抑える。メモ保存機能アリ。
postmark_raceboard
表示レースソート機能、シックなデザイン。
Metallic(メタリック)
メタリック調。カラー選択可。

3. カラフル・ポップ

パステル/ビビット/ゲームUI/賑やか系。色を主役にした明るい印象。
pop_morden_gameui(ポップ現代風ゲームUI)
表示自体はかなりシンプル。白+ビビットカラー数色、掲載情報量は抑えて。
Game UI White(白ベースeスポーツ風)
ホワイト基調のゲームUI風。ネオンの走査アニメ付き。
Pastel-Vivid
ビビットカラー/パステルカラー調整可。
GridControl
蛍光カラー明度、グリッド等の調整可能。
Pop Anime(コミック調)
太い線とポップな色使いの漫画テイストデザイン。

4. 質感・テクスチャ

グラスモーフィズム/ニュー/クレイ/紙質感/グラデ/動的背景など、素材感・効果を主役にした表現。
ポップめなガラス調
写実的なアニメをモチーフに。表示データは整理より見栄え重視。
Paper Cut Glass Boards
紙質感とガラスボードを組み合わせた柔らかい雰囲気。
Pastel
パステルカラー背景、ネオンカラー差し色、丸みの多いデザイン。近未来風なイメージ。
Polygons & Rects
赤青のビビットカラーのグラデーション+動的polygon。表示データはシンプルめ。
changeGradation
背景グラデーションが少しずつ変わる。Pastelの片割れな感じ。
MotionBackgroundGrid
背景グラデーション、動的エフェクト、レースリスト透過性を調整できる機能あり。
Pastel Bubble
浮き上がるバブルの背景。パステルカラー+丸みデザインで、シンプルでかわいい雰囲気。
Claymorphism
クレイモーフィズム的。マウスホバー時の追加表示する情報を多めに。
Moving Lines + Glass
黒背景+動的なライン。グラスモーフィズムの36Rリスト。
Neumorphism(場所ソート)
凹凸を多用したニューモーフィズム。グラデ選択。
Neumorphism(36 横並び)
凹凸を多用。掲載する情報量が多く、機能性重視したページ。背景はちょっとだけグラデ。

5. 世界観・テーマ

和/サイバー/コミック/季節/古代etc。背景写真や物語性、特定客層向けの世界観表現。
Wa-Style(和テイスト)
「伝統工芸・素材感」「相撲番付」「歌舞伎」「和食メニュー表」。
Wa Editorial(和モダン・エディトリアル)
和紙×墨のエディトリアル調。巨大透かし漢字+英字大見出し、開催場タブで配色切替(東京=藍/京都=紅/新潟=緑)。
Four Seasons(四季)
四季別デザイン(開いた時期で動的に表現可能)。
Antique Paper
アンティーク調の紙を背景。
世界観 詰合せ
「古代エジプト」「中世ヨーロッパ」「戦国時代」「中華」。
競馬場写真背景
背景を競馬場の写真に。ガラス重ね、芝/ダート色分け。
Anime Horse(アニメ調)
明色/パステルカラー主体。かわいい寄り。
Comic Pull-out v7
動きがコミック・ゲームっぽい。アクション多め。
Community-like(コミュニティ風)
SNSコミュニティUI風の一覧。カードチップやリアクション装飾を搭載。
Border Glow(Cyber × Glass)
ネオンカラー多用、透明ガラス調。サイバーパンクな背景ベース。
Cyber HUD v3(サイバー系HUD風)
黒ベース。未来感あるサイバー系デザイン。点滅多め。
Scrapbook / 予想ノート風
コルク背景に画鋲+マスキングテープ+罫線メモ用紙。手書き◎○の印、付箋3枚。
Transit Glow(夜光路線図)
漆黒×ネオン。固定背景で3場のコースが路線図のように発光し、選択場の色が強調。カードはネオンホバー+クリック波紋。
Hologram Blue(発光ホログラム)
濃紺宇宙×発光する円と星屑。四角細線カード+コーナーブラケット、ホバーで光のスイープ。カラー5色/黒白ベース/カード縦サイズL・M・S/PC・TABLET・SP表示切替(FLIPアニメ)付き。

6. タブ式(スマホ向き)

タブ切替で場をコンパクトに切り替える構成。主にスマホ/省スペース観点。
場所タブで切替(Material Tabs)
パステルカラー、やや丸みのあるカード。
ビビッドカード×タブ
ビビッドカラー、角のないシャープな構成。
Lined Background + Memo UI
固定ヘッダー&幾何模様がランダム回転。ヘッダー常時表示+タブ切替式。
スマホ表示前提
スマホ表示前提。デザインパターン4種、カラー5種から選択可。
cyber-anime taste
純黒×サイバーグラデ線。SP前提の1列12行、タブ・行ともホバーで文字ロール、行ホバー/タップで詳細展開(固定時は回転グラデ枠)。

7. 3場並列(PC向き)

3場を横並びで一覧する、機能性・視認性重視の構成。
カード整列(Material v3)
パステルカラー。鋭めの角、間隔小さめで、機能性/視認性寄り。
場所別カード(Tokyo / Kyoto / Niigata)
パステルカラー、会場を3色識別、陰影等あり。
3types_designPattern
「グラスモーフィズム」「クレイモーフィズム」「マテリアルデザイン」の比較。

8. 特殊フォーマット

EPG/新聞紙面/金融端末/データビズ/縦割など、独自の情報軸を持つ構成。
EPG番組表(時刻×場グリッド)
TV番組表風。横軸=時刻 / 縦軸=場のセルで帯表示。芝/ダ色分け、現在時刻バー、+でマイリスト追加・−で削除。
Editorial / 新聞紙面
マストヘッド+1面トップ重賞フィーチャー+各場3段組の新聞紙面風レイアウト。明朝/セリフ体、紙色背景。
Finance Terminal(Bloomberg風)
金融端末風。黒地+琥珀/緑/シアン+モノスペース。3ペイン分割、ティッカー、コマンドライン、データ密度MAX。
Data Visualization(ライト↔ダーク切替)
データ分析画面風(テーマ切替対応)。スパークライン+充足バー構成。
vertical_split
近未来SFっぽい縦割りインターフェース。
cyber_fiber
近未来感あるサイバー系の36R独自レイアウト。