【HTML/CSS】SF風HUD UIキット|ゲームUI・ダッシュボード・Webサイト素材
- Digital3,980 JPY






【新版】VECTOR UI Kit 2 を出しました。この版の部品はすべてそのまま使え、本物の計器のように読める計器類と、図面のための製図の層を加えた上位版です。→ https://vectormods.booth.pm/items/9093497 ゲームUI・Webサイト・管理画面・ダッシュボード・個人サイトに使える、SF・サイバー・近未来の HUD 風 UI 素材(HTML/CSS のテンプレートとパーツ)です。ボタン、ウィンドウ(パネル)、フレーム、ゲージ、レーダー、表、タブ、モーダルなどの UI パーツが入っています。 SF の計器のような画面を、素の HTML と CSS で組めるキットです。React も Vue も要りません。CSS を二つと小さなスクリプトを一つ読み込み、クラスを付けるだけで使えます。 色は三つだけです。白は情報、シアンは操作の面、赤は重大な事にだけ使います。警報が鳴ると、札を一つ増やすのではなく、画面全体が赤に変わります。 ■ 中身 ・vx-tokens.css … デザイントークン(色・文字の段・余白・ガラス・角の寸法・動きの時間)を CSS 変数で ・vx.css … 部品 23 種:パネル、見出し、大きな数字、折りたたみの行、帯、ボタン、トグル、入力欄、選択、タブ、表、一覧、進み具合、弧の計器、小さな折れ線、レーダー、警報、モーダル、横の案内、タグ、吹き出し、起動の演出、走査の帯 ・vx.js … 依存なしの小さなスクリプト:タブ、モーダル、起動の演出、計器、折れ線、レーダー、値が変わった時だけ光る表示(VX.set) ・テーマ二つ:暗いガラス(既定)と、白い製図風 ・見本の画面三つ:運用ダッシュボード、全画面の警報が出るモニター、設定 ・全部品の HTML を載せた説明の頁 画面の幅 1100px/760px で組み替わり、OS の「動きを減らす」設定(prefers-reduced-motion)では動きを止めます。 ■ 動きには意味を 回るだけの飾りはありません。パネルは順に組み上がり(罫線→角→ガラス→文字)、数字は変わった時だけ光り、レーダーは更新のたびに一度だけ脈を打ちます。 ■ 使い道 ゲームの画面、社内の道具、監視・IoT のダッシュボード、ポートフォリオのサイト、配信やイベントの画面。 ■ 動作 最近の Chrome・Edge・Firefox・Safari。ビルドの道具は不要です。フォントは同梱していません。既定は Windows の Bahnschrift、macOS の DIN などで表示され、無料の Barlow(SIL OFL)に差し替える手順を README に書いています。 ■ 許諾(要点) ・購入した一人、または一つの法人とその従業員が使えます ・案件の数に制限なく、自分や依頼主の完成品(サイト・アプリ・SaaS・ゲーム)に使え、完成品は販売できます ・キットそのものの再配布・再販売、キットを主な価値とするテンプレートや UI キットの販売、AI の学習への利用はできません ・正文は同梱の LICENSE.txt(英語)、和訳は LICENSE_ja.txt デジタルデータの性質上、購入後の返金はお受けしていません。不具合は BOOTH のメッセージでお知らせください。






