夜更けのアーカイブ｜文芸・ミステリー向けUI素材110点【SVG・PNG／背景＆動く見本付き】

物語を、ひとつの世界に。

夜の書斎や古い手紙を思わせる、文芸・ミステリー向けのUI画像素材集です。

蔵書票風の会話枠、リボンの名前枠、番号を添えやすい選択肢、記録用の保存枠まで、同じ世界観で揃えました。

深い濃紺のInk、温かい白のPaper。2つの配色を用意しています。

【実際の画面で、使い方がわかる】

同梱のPREVIEW.htmlを開くと、選択肢・履歴・保存と読み込み・配色と文字サイズの設定を試せます。

外部通信・ログイン・追加インストールは不要。見本のHTML/CSS/JavaScriptと文章も作品制作に使用できます。

使用例の書斎背景1点もフルセットに同梱しています。

【フルセット】

55種の形状・状態×2配色＝UI110点。各SVG・PNGで収録（SVG110＋PNG110）。

点数にはボタンの状態違い・配色違いを含みます。形式違いを別のデザインとして数えていません。

各配色の内訳：

・操作アイコン24点

・会話枠、名前枠、メニューパネル、保存枠：4点

・横長ボタン、選択肢、正方形ボタン×通常・ホバー・押下・無効：12点

・タブ、チェック、ラジオ、トグル、スライダー、スクロール、区切り線：15点

追加：書斎背景PNG1点、動く見本とソース、使い方ガイド、寸法・文字配置範囲の一覧、利用条件。

【無料ミニセット】

Ink配色の10点をSVGとPNGで収録。無料版も商用利用できます。

会話枠・名前枠・横長ボタン4状態・play/settings/back/closeの4アイコン。

無料版には背景、フルセットの動く見本、Paper配色は含みません。

制作ソフトへの読み込みや、画面との相性を無料版でお確かめください。

【使い方】

1. ZIPを解凍して、見本をブラウザで開く。

2. pngフォルダの画像を制作ソフトに読み込む。

3. セリフやボタン名を重ね、クリック時の動作を設定する。

色や形を変えるときは、同名のSVGを編集できます。

【形式と対応範囲】

PNGはRGBA。枠の外側・アイコン背景が透明、パネル内部は不透明です。

UIのSVGは文字・外部画像・スクリプトを含みません。

会話枠・メニューパネルは9スライスの指定値とブラウザ見本を同梱。他の装飾付き枠は縦横比を保ってご使用ください。

エンジン用の9スライス設定済みファイル、PSD、フォント、キャラクター、BGM、音声は含みません。

画像素材とブラウザ見本の商品です。エンジン用プラグインや自動組み込み機能はありません。

特定ゲームエンジンへの組み込みは未検証です。無料版でお試しください。

見本の保存はブラウザ内のみで、端末間の同期はありません。

【利用条件】

個人・法人、商用・非商用の作品に使用可。改変可。クレジット任意。作品数制限なし。

完成作品に組み込んで販売・配布できます。背景と見本のコード・文章も同条件です。

素材単体や加工素材を素材集として再配布・再販売することは禁止します。

詳しくは同梱LICENSE.txtをご確認ください。

【制作】

UIはAIのコード作成支援を使用してSVGを設計しています。書斎背景はAI生成画像です。

個別の組み込み作業、個別改修、将来の追加素材は含みません。

v2.0 / 2026-09-18

ファイルの不備はBOOTHショップのメッセージへ、ファイル名と症状をお知らせください。