Kenney UI Packの使い方｜無料のボタン・UI素材を入手して使ってみた

UI素材は、ゲームの「操作する部分」の見た目

UIはユーザーインターフェースの略。ゲームなら、開始ボタン、設定欄、チェックマークなどが身近な例です。このパックには、そうした画面に使える画像がまとめられています。

素材は完成済みのゲームでも、画面を自動で作るツールでもありません。素材の配置、文字、クリック後の動きは自分で作ります。公式ページの「430×」はファイル数の案内で、430種類の独立した機能が付いているという意味ではありません。

無料配布の先に、次の作品がある

Kenney様の公式サイトはゲーム素材、制作ツール、スターターキットを公開しています。ダウンロード画面では、コミュニティの支援が無料配布を支えていると説明されています。

素材を使えることだけでなく、見た目や利用条件を整え、ほかの人が制作を始められる形で渡してくれていることに価値があります。作者名と公式配布元を残し、気に入ったらほかの作品や支援の案内にも目を向けたいところです。寄付は任意で、この紹介では決済を行っていません。

新作としての紹介ではありません。公式の更新欄では初版は2014年、今回の2.0は作り直された版と案内されています。同梱ライセンスの制作日は2024年6月12日です。

公式から入手して、PNGを一つ選ぶ

STEP 01

「UI Pack」のページとCC0表示を確認

公式配布ページを開き、タイトルがUI Packであることを確認します。似た名前の別パックと混同しないようにします。左側のLicense：Creative Commons CC0が今回の利用条件の入口です。

STEP 02

「Download」を押す

Downloadを押すと寄付の案内が出ます。支援するならDonate、今回は寄付せず進むContinue without donating...を選びました。隣のGet All-in-1 bundleは別のまとめ商品への入口です。

今回の仕上がり：押せる「はじめる」ボタン

当サイトでは、選んだPNGをHTMLのボタン背景へ配置し、その上に「はじめる」の文字を載せました。クリックすると説明文が変わる、小さな使用例です。素材は見た目、文字と反応はコードという役割が分かります。

操作サンプルを別タブで開く →

実際に配置してみると、ボタンの凹凸によって、押せる場所を見つけやすく感じました。一方、元画像を細長く伸ばすと角や縁も伸びます。素材に合う比率を保ち、文字の読みやすさと押す領域を別々に確認しましょう。画像だけをクリック部品にせず、今回はHTMLのbutton要素を使っています。

ゲームエンジンで使う場合は、対応する画像読み込み機能へPNGを入れ、UIの部品として配置します。Godot・Unityでの導入や9-slice設定は今回未検証です。

CC0で使えても、公式作品のふりはしない

公式FAQでは、素材は商用でも使用でき、クレジットは必須ではないと案内されています。当サイトでは、作者への敬意を込め、配布元を後から確認できるように、Kenney UI Pack／Kenney様を明示しています。今回入手したLicense.txtも確認できます。

Kenneyのロゴは公式プロジェクト用とFAQに記載されています。配布素材を使ったからといって、作者が監修・推奨したゲームであるように見せないでください。この記事の公式サイトのスクショは配布手順の説明用で、ロゴを自分の作品のブランドに使うものではありません。

CC0でも商標、肖像、プライバシーなどの問題がすべてなくなるわけではありません。外部から追加する画像・音楽や別の素材パックには、別の条件がある場合があります。配布元と同梱ライセンスを作品ごとに確認しましょう。

出典と確認範囲

確認日：2026年9月27日。PCで公式の寄付案内からZIPを取得・展開し、License.txtを読み、青いボタンとチェック画像をWebの使用例で表示しました。クリック後の文言変化を確認済み。決済、ゲームエンジンへの導入、Font・Sounds・Vectorの使用は未検証です。

• UI Pack公式配布
• Kenney公式FAQ
• Kenney公式サイト
• 作者のX
• Creative CommonsのCC0説明

公式素材と実画面・当サイトの使用例を掲載しています。現在Xでバズっているかは確認できていないため、流行順位や反響数は掲載していません。