今回の仕上がり
UI Pack - Adventureは、Kenney様のボタンやパネルなどのUI画像素材です。今回は茶色のボタンと、準備前後のマークを配置しました。素材自体にはクリック処理が付いていません。下の状態切り替えは、編集部がHTMLとJavaScriptで追加したものです。
公式素材から3枚を使う
- 公式ページのDownloadを押します。寄付の案内では「Continue without donating...」から無料ZIPへ進めます。
- 保存したkenney_ui-pack-adventure.zipを展開し、License.txtを読みます。今回のZIP内部は1.1表記でした。公式ページの更新欄の1.0表記とは区別しています。
- Vector内のbutton_brown.svg、checkbox_beige_empty.svg、checkbox_beige_checked.svgを使います。
- ボタンは元の48×24を192×96で表示し、縦横比を保ちます。24×24のマークは48×48にしました。
- 自作例の「準備する」を押します。表示が「準備できました」に変わり、マークが入れ替わります。もう一度押すと戻ります。TabとSpaceでも操作できます。
ボタンの文字はSVGへ焼き込まず、HTMLの文字として置きました。マークだけでは状態を判断しにくい場合があるため、文章とaria-pressedも一緒に切り替えています。入力内容の保存や実際のゲーム開始は実装していません。
作者・利用条件・確認範囲
作者はKenney様。公式ページとZIP内のLicense.txtはCreative Commons Zero（CC0）を案内しています。個人・教育・商用の用途に使え、作者クレジットは必須ではないとの案内です。この使用例には任意で作者名と公式URLを残し、配布ZIPへ元の案内を同梱しました。HTMLと追加処理も編集部の自作・CC0です。
2026年10月19日、公式ZIPの保存と内部ライセンス、3枚のSVGの実表示、PCと375px幅でのクリック・Space操作を確認しました。保存用ZIPには3枚だけを含め、素材一式は公式ページへ案内しています。PNG版、残りの素材、ゲームエンジンへの読み込み、スマホ実機は未確認です。新作やAI素材とは断定しません。
画像を揃えた後の操作確認はキーボードの確認記事へ。別の見た目を比べたいときは通常のKenney UI Packも参照できます。既存の「星あつめ」全12回の題材や素材を置き換える更新ではありません。