キー画像と「左へ」「右へ」をセットにする
下の例で「操作領域を選ぶ」を押し、←→キーを押してください。四角が20pxずつ動きます。上のキー画像は操作を説明するためのもので、クリックできるボタンではありません。見た目と操作できる場所を分けました。
公式の無料ダウンロードから、2枚だけ選ぶ
公式素材ページの「Download」から寄付の案内を開きます。寄付せず取得する場合は「Continue without donating...」へ進みます。今回はそこに案内されたZIPを保存・展開し、同梱License.txtのCC0表記まで確認しました。寄付や購入は行っていません。
展開後のKeyboard & Mouse/Defaultから、keyboard_arrow_left.pngとkeyboard_arrow_right.pngを選びます。今回のZIP内の表記はInput Prompts 1.5Aです。似た名前のoutline版やDouble版と混同しないよう、ファイル名と寸法を確かめてください。
使用した2枚と出典・ライセンス、自作の使用例だけを確認用ZIPにまとめています。公式セット全体ではありません。
画像は64px、操作の意味は文字でも伝える
<span class="key">
<img src="keyboard_arrow_left.png"
width="64" height="64" alt="">
左へ
</span>画像だけで意味を伝えず、横に「左へ」を残します。この例では同じ内容を文字で伝えるため、画像のaltは空にしています。画像が単独で操作を表す場合や、ボタンにする場合は、その役割に合わせた名前や動作が必要です。
PNGは暗い面の上に置き、64×64で表示しました。サイトのライト・ダーク切り替えでも画像そのものの色を反転しません。説明のキーと実装を照合し、この例では左を2回で190pxから150px、右を1回で170pxへ動くことを確かめています。
CC0でも、作品名と出典は残す
公式ページと同梱License.txtにはCC0が示され、個人・教育・商用利用が案内されています。クレジットは必須ではありませんが、作者への敬意と出典が分かるよう、Kenney様、作品名、公式URL、同梱の利用条件を残しました。
今回はキーボードの矢印2枚だけを使っています。セットに含まれるゲーム機の名称やロゴまで、商標上の利用を一律に確認したとは扱いません。スマホ実機でのタッチ操作、全画像・フォント・ベクター、ゲームパッド接続は未検証です。
確認日は2026年10月11日。最近のXでこの素材が流行しているという反響は確認できていません。今回の採用理由は、確定した利用条件と、左右キーの説明に使える実表示です。操作説明の実装は星あつめ第05回、図形のaltは画像の役割に合わせる例も参照できます。