【HTML/CSS】SF風HUD UIキット 2|計器・製図・ゲームUI・ダッシュボード素材
- Digital5,980 JPY







ゲームUI・Webサイト・管理画面・ダッシュボード・図面やプレゼンに使える、SF・サイバー・近未来の HUD 風 UI 素材(HTML/CSS のテンプレートとパーツ)です。パネル、フレーム、ゲージ、計器、レーダー、地形の板、寸法線、引出線、表題欄、モーダル、警報などの UI パーツが入っています。 SF の計器のような画面を、素の HTML と CSS で組めるキットです。React も Vue も要りません。CSS を二つと小さなスクリプトを一つ読み込み、クラスを付けるだけで使えます。 色は三つだけです。白は情報、シアンは操作の面、赤は重大な事にだけ使います。警報が鳴ると、札を一つ増やすのではなく、画面全体が赤に変わります。 版 2 では、本物の計器のように読める計器類と、図面・配置図・説明図のための製図の層が加わりました。 ■ 中身 ・vx-tokens.css … デザイントークンを CSS 変数で(暗いテーマと明るいテーマ) ・vx.css … 部品 - 下地:方眼、L 字の角、縁が光るガラスのパネル(奥行きつき)、大きな数字 - 計器:ゲージ、弧の計器、目盛りの帯、小さな折れ線と棒、レーダー、地形の板と標的、階の一覧、手順 - 製図:つなぎ線・罫・補助線、寸法線、引出線、通り芯と符号、番号つきの注記と改訂の三角、方位と縮尺、表題欄、SVG 用の線の太さ - 操作と表示:警報と全画面の赤、モーダル、横の案内、タグと状態の点、吹き出し、起動の演出、走査の帯、値が変わった時だけ光る表示 ・vx.js … 依存なしの小さなスクリプト:計器、製図の補助(VX.draft の dim / axis / leader)、タブ、モーダル、起動の演出、テーマの切り替え、警報 ・見本の画面六つ:command、monitor、terrain、drawing、incident、settings ・全部品の HTML とスクリプトの使い方を載せた説明の頁 画面の幅 1100px/760px で組み替わり、OS の「動きを減らす」設定(prefers-reduced-motion)ではすべての動きを止めます。 ■ v1 からの乗り換え dist/ の三つのファイルを差し替えるだけです。v1 のクラス・データ属性・トークン・VX の関数はすべて残っていて同じように動き、v1 の見本の画面も v2 のファイルでそのまま表示されます。 ■ テーマ二つ 暗いガラスと、白い製図の紙。data-vx-theme="light" を付けるか、VX.theme("light" / "dark" / "auto" / "toggle") を呼びます。切り替えのボタンは選んだ方を覚えます。auto は OS の設定に従います。 ■ 動きには意味を 回るものはありません。何かが起きた時だけ動きます。画面は順に組み上がり(罫線→角→ガラス→文字)、数字は変わった時だけ光り、走査の帯はパネルが選ばれた時や警報が上がった時に一度だけ通ります。「動きを減らす」設定では、起動の演出も含めてすべて止まります。 ■ 使い道 ゲームの画面、社内の道具、監視・IoT のダッシュボード、配置図や技術図面、ポートフォリオのサイト、イベントの画面。 ■ 動作 ビルドの道具は不要です。Windows の Chrome で、幅 375・900・1280px、明暗の両テーマを確かめています。フォントは同梱していません。DIN Condensed、DIN Alternate、Bahnschrift の順に探して表示し、無料の Barlow(SIL OFL 1.1)に差し替える手順を README に書いています。 ■ 許諾(要点) ・購入した一人、または一つの法人とその従業員が使えます ・案件の数に制限なく、自分や依頼主の完成品(サイト・アプリ・SaaS・ゲーム・キットの部品で作った図面やプレゼン)に使え、完成品は販売できます ・キットそのものの再配布・再販売、キットを主な価値とするテンプレート・テーマ・UI キット・デザインシステムの販売や無償配布、公開リポジトリなど再利用できる形でのソースの公開、AI の学習・評価への利用はできません ・完成品の中にビルド済み・圧縮済みの写しが入るのは構いません ・v1 をお持ちの方の v1 の許諾は、そのまま v1 に適用されます ・正文は同梱の LICENSE.txt(英語)、和訳は LICENSE_ja.txt デジタルデータの性質上、購入後の返金はお受けしていません。不具合は BOOTH のメッセージでお知らせください。







