ご覧になる前の注意
- OS の「アニメーション効果」を切っていると動かないデザインがあります。 Windows: 設定 → アクセシビリティ → 視覚効果 → アニメーション効果 を ON に。 Mac / iPhone: アクセシビリティ → 視差効果を減らす を OFF に。ブラウザはこの設定を「動きを減らす」と解釈し、背景や光の演出、レース行のフェードインが止まります。
- ほぼ全ページが PC 表示に最適化されています。 スマホ主体で使うページに採用する場合は、レイアウトを多少作り替える必要が出ることがあります（「8. タブ式」はスマホ向き）。
- アニメーション入りのデザインは端末への負荷が高めです。 背景の動きや 3D 表示は CPU・GPU・メモリを多く使うため、スペックの低い端末（特に発売から年数が経ったスマホ）では動作が重くなったり、動きがカクつくことがあります。採用時はこの点をデメリットとしてご考慮ください。
1. ライト・ミニマル
白基調・余白・1アクセント。読みやすさ重視のシンプル系。
凡例付きパネル
白基調・凡例付きパネルで枠を表示。
Monotone + 1 Accent
モノトーン基調＋1色だけ差し色のミニマル版。
Paper Craft
余白多めのシンプル紙風。情報の追記がしやすい。
シンプルデザイン
シンプル配置＋ビビット色選択＋方眼背景。
白黒 + 要素線なし
白黒・線なしでコンパクトに振り切った構成。
切り欠きタブ（白×1アクセント）
白基調の切り欠きタブ。アクセント5色切替。
Pastel Glitter（グラデ背景×装飾5種）
パステル／ダークのグラデ地。装飾5種×色3種を切替。
Chrome Cubes（銀の立体 3D）
白い空間を流れる銀の立体。動き・形・色を切替。
Grid Frame（罫線×一枚絵 3種）
白×細罫の静止画風。グリッド／製図／時刻表の3種切替。
2. ダーク・シック
黒基調・1アクセント・大人っぽい。シック寄り、機能性も両立。
Black Based 1 Accent
黒背景に差し色を選べるシンプル＆クール。
Morning Sky Glass（夜明けの空×ガラス）
夜明けの空グラデ×ガラス。光の粒子が舞う。
Fixed Header + Random Shapes
黒シック＋メモ保存機能。控えめな図形装飾。
postmark_raceboard
シック調。表示レースのソート機能付き。
Two Sides（2場切替・斜め分割）
斜め二分割×巨大漢字。日付ごとに2場の色と図形・演出が変わる。
Index Slash（写真×斜め分割）
競馬場写真×斜めグラデ線で分割。右に出馬表、4色・黒白切替。
3. カラフル・ポップ
パステル／ビビット／賑やか系。色を主役にした明るい印象。
Pastel Pop MV（4パターン×カラー切替）
MV風フラットパステル。4パターン×6色切替。
Pastel-Vivid
ビビット／パステルのカラー調整可。
GridControl
蛍光カラーの明度・グリッド等を調整可能。
Pastel Weather（パステル4種×天候演出）
パステル4テーマ×場ごとの天候アニメ。レイアウト3種。
Memphis Pop Collection（メンフィス3種）
動くメンフィス柄×フライヤー・ポスター・ステッカー。
Flat Meadow（フラットイラスト4種）
パステルの空と丘、縞たてがみの馬。4構図を切替。
4. 質感・テクスチャ
グラスモーフィズム／ニュー／クレイ／紙質感／グラデ／動的背景など、素材感・効果を主役にした表現。
Glass Anime Pop（ポップめなガラス調）
アニメ調モチーフのポップなガラス表現。
Glass Collection（グラス系4種）
グラス4種切替: ペーパー・競馬場写真・ポリゴン・ネオン雨。
Pastel Collection（パステル3種）
パステル×ネオン／浮かぶバブル／流れるグラデ枠の3種切替。
Metal Collection（メタリック×真鍮 2種）
メタリック（8色）と真鍮×歯車のアンティーク機械装飾を切替。
Smart Motion（動く背景4種）
動く背景4種: 数字レイン・虹の渦・デジタルMV・手書き数式。
MotionBackgroundGrid
グラデ・エフェクト・透過を調整できる。
Claymorphism
クレイ調。粘土ブロブが背景をゆっくり漂う。
Neumorphism（場所ソート）
凹凸のニューモーフィズム。場所ソート付き。
Neumorphism（36 横並び）
凹凸多用・情報量多めの機能性重視36R。
5. 和・クラシック
和／季節／アンティークなど、物語性・世界観のあるクラシック寄りの表現。
Wa-Style（和テイスト）
和4種: 伝統工芸・番付・歌舞伎・お品書き。
Wa Editorial（和モダン）
和紙×墨。開催場タブで藍・紅・緑に切替。
Four Seasons（四季の情景）
四季の粒子演出＋時刻連動の空。マウスで風。
Antique Paper
アンティーク紙背景。塵とランプ光が揺れる。
世界観 詰合せ
詰合せ: エジプト・中世欧・戦国・中華。
Scrapbook / 予想ノート風
コルク×付箋×手書き印の予想ノート風。
6. ゲーム・アニメ・コミック
ゲームUI／アニメ調／漫画調。遊び心と動きを主役にした表現。
Game Generations（ゲームUI変遷）
ゲームUI5世代切替。8bit時は馬のドット絵が走る。
Game Menu Collection（ゲームメニュー風4種）
ゲームメニュー風4種: セレクト・スラント・地図ピン・コラージュ。
Pop Game UI（ポップ現代風ゲームUI）
白＋ビビット数色のポップなゲームUI。
Game UI White（白ベースeスポーツ風）
白ベースeスポーツ風。ネオン走査アニメ付き。
Pop Anime（コミック調）
漫画テイスト。スピードラインと集中線が走る。
Comic Pull-out v7
コミック・ゲーム風の動き多めアクション。
Anime Horse（アニメ調）
明色パステルのアニメ調。かわいい寄り。
7. サイバー・ネオン
漆黒×発光・近未来。ネオン／ホログラム系の光る表現。
Cyber Collection（サイバー系5種）
サイバー5種切替: HUD・ファイバー・グロウ・縦割り・ライン。
Transit Glow
漆黒×ネオン。3場選択と背景の曲線が連動。
Hologram Blue（発光ホログラム）
濃紺宇宙×発光ホログラム。色・サイズ切替多数。
Cyber Flythrough
前進し続けるデジタル空間。一覧を選ぶと右に出馬表が出る。
AI Circuit Collection（テック系4種）
回路×アイコン・蜂の巣36R・路線図ネット・発光基板。クリック演出付き。
Hex Light Collection（ネオン系6種）
六角・グリッチ5色・リング・ネオン線・行フレーム・漢字牌の6種。
8. タブ式（スマホ向き）
タブ切替で場をコンパクトに切り替える構成。主にスマホ／省スペース観点。
場所タブで切替（Material Tabs）
パステル×丸カード。場所タブで切替。
ビビッドカード×タブ
ビビット色×角のないシャープなタブ構成。
Lined Background + Memo UI
固定ヘッダー＋幾何模様が回る。タブ切替式。
スマホ表示前提
スマホ前提。デザイン4種×カラー5種を選択。
cyber-taste black_white
純黒×サイバー。SP前提、行タップで詳細展開。
Cyber HUD（ライン型×琥珀）
黒×琥珀の線だけで区切るHUD風。SP前提、5色切替。
Retro Pop Board（生成り×濃紺）
生成り地×紺枠×ベタ影のレトロポップ。場ボタンで開閉、右メニュー付き。
9. 3場並列（PC向き）
3場を横並びで一覧する、機能性・視認性重視の構成。
カード整列（Material v3）
パステル・鋭め角の機能性重視カード整列。
場所別カード（Tokyo / Kyoto / Niigata）
会場を3色で識別するパステルカード。
3types_designPattern
グラス・クレイ・マテリアルの3種比較。
Tile Burst（タイルが広がる場面転換）
押した位置から白と水色の四角が広がって出馬表へ。3場横並び。
Night Drive（動く背景×ネオン）
夜の高速・ネオン都市・地平線の4背景を切替。色が周期で変わり枠も連動。
10. 特殊フォーマット
EPG／新聞紙面／金融端末／データビズ／変遷・様式オマージュなど、独自の情報軸を持つ構成。
EPG番組表（時刻×場グリッド）
TV番組表風。時刻×場グリッド＋マイリスト。
Editorial / 新聞紙面
新聞紙面風。1面トップ特集＋各場3段組。
Finance Terminal（Bloomberg風）
金融端末風・データ密度MAX。CRT走査線演出。
Data Visualization
データ分析画面風。ライト↔ダーク切替対応。
Device History（デバイス変遷）
ガラケー→初代スマホ→現代の実機フレーム。
Web Design History（Web変遷）
Webデザイン変遷: 1995→2025を右上で切替。
競馬サイト様式 5選
競馬サイト様式5選（オマージュ＋創作）。
Community-like（コミュニティ風）
SNSコミュニティ風。リアクション装飾付き。