UI Sample Index

1. ライト・ミニマル 2. ダーク・シック 3. カラフル・ポップ 4. 質感・テクスチャ 5. 和・クラシック 6. ゲーム・アニメ・コミック 7. サイバー・ネオン 8. タブ式(スマホ向き) 9. 3場並列(PC向き) 10. 特殊フォーマット

1. ライト・ミニマル

白基調・余白・1アクセント。読みやすさ重視のシンプル系。
凡例付きパネル
白基調・凡例付きパネルで枠を表示。
Monotone + 1 Accent
モノトーン基調+1色だけ差し色のミニマル版。
Paper Craft
余白多めのシンプル紙風。情報の追記がしやすい。
シンプルデザイン
シンプル配置+ビビット色選択+方眼背景。
白黒 + 要素線なし
白黒・線なしでコンパクトに振り切った構成。
切り欠きタブ(白×1アクセント)
白基調の切り欠きタブ。アクセント5色切替。

2. ダーク・シック

黒基調・1アクセント・大人っぽい。シック寄り、機能性も両立。
Black Based 1 Accent
黒背景に差し色を選べるシンプル&クール。
Morning Sky Glass(夜明けの空×ガラス)
夜明けの空グラデ×ガラス。光の粒子が舞う。
Fixed Header + Random Shapes
黒シック+メモ保存機能。控えめな図形装飾。
postmark_raceboard
シック調。表示レースのソート機能付き。
Metallic Silver(メタリック)
メタリック調。カラー選択可。

3. カラフル・ポップ

パステル/ビビット/賑やか系。色を主役にした明るい印象。
Pastel Pop MV(4パターン×カラー切替)
MV風フラットパステル。4パターン×6色切替。
Pastel-Vivid
ビビット/パステルのカラー調整可。
GridControl
蛍光カラーの明度・グリッド等を調整可能。
Pastel Weather(パステル4種×天候演出)
パステル4テーマ×場ごとの天候アニメ(晴・曇・雨)。レイアウト3種切替。

4. 質感・テクスチャ

グラスモーフィズム/ニュー/クレイ/紙質感/グラデ/動的背景など、素材感・効果を主役にした表現。
Glass Anime Pop(ポップめなガラス調)
アニメ調モチーフのポップなガラス表現。
Glass Collection(グラス系4種)
グラス4種切替: ペーパー・競馬場写真・ポリゴン・ネオン雨。
Pastel
パステル背景+ネオン差し色の近未来風。
changeGradation
背景グラデーションが少しずつ変化する。
MotionBackgroundGrid
グラデ・エフェクト・透過を調整できる。
Pastel Bubble
浮かぶバブル背景のかわいいパステル調。
Claymorphism
クレイ調。粘土ブロブが背景をゆっくり漂う。
Neumorphism(場所ソート)
凹凸のニューモーフィズム。場所ソート付き。
Neumorphism(36 横並び)
凹凸多用・情報量多めの機能性重視36R。

5. 和・クラシック

和/季節/アンティーク/蒸気機関など、物語性・世界観のあるクラシック寄りの表現。
Wa-Style(和テイスト)
和4種: 伝統工芸・番付・歌舞伎・お品書き。
Wa Editorial(和モダン)
和紙×墨。開催場タブで藍・紅・緑に切替。
Four Seasons(四季の情景)
四季の粒子演出+時刻連動の空。マウスで風。
Antique Paper
アンティーク紙背景。塵とランプ光が揺れる。
Antique Brass(真鍮×歯車)
真鍮枠×リベット×回る歯車のアンティーク機械装飾。
世界観 詰合せ
詰合せ: エジプト・中世欧・戦国・中華。
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(発光ホログラム)
濃紺宇宙×発光ホログラム。色・サイズ切替多数。

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

タブ切替で場をコンパクトに切り替える構成。主にスマホ/省スペース観点。
場所タブで切替(Material Tabs)
パステル×丸カード。場所タブで切替。
ビビッドカード×タブ
ビビット色×角のないシャープなタブ構成。
Lined Background + Memo UI
固定ヘッダー+幾何模様が回る。タブ切替式。
スマホ表示前提
スマホ前提。デザイン4種×カラー5種を選択。
cyber-anime taste
純黒×サイバー。SP前提、行タップで詳細展開。

9. 3場並列(PC向き)

3場を横並びで一覧する、機能性・視認性重視の構成。
カード整列(Material v3)
パステル・鋭め角の機能性重視カード整列。
場所別カード(Tokyo / Kyoto / Niigata)
会場を3色で識別するパステルカード。
3types_designPattern
グラス・クレイ・マテリアルの3種比較。

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コミュニティ風。リアクション装飾付き。