こんにちは！雪田です。今回は、WEBサイトや動画編集、ゲーム風のUIデザインなどをどこか懐かしくポップに彩ってくれる、ピクセルアート風の「ウィンドウ（正方形）」のイラスト素材を作成しました！

みほん

レトロゲーム風のピクセルアートで描かれた正方形のウィンドウイラスト素材

PNG形式

昔懐かしいレトロなRPGのメッセージボックスやステータス画面をイメージしたデザインです。ダークグレーの背景に、白と薄いグレーのラインで丁寧なフチ取りを施し、角に丸みを持たせることで、ドット絵特有の硬さを和らげたオシャレな質感に仕上げました。

制作の裏話：ドットの配置で魅せる「角丸と立体感」のこだわり

このウィンドウイラストをデザインするときに一番こだわったのは、「角丸（コーナー部分）のなめらかさと、立体感を出すためのフチのドット配置」です！
正方形のシンプルな枠だからこそ、1ドットの配置ズレで全体のバランスが大きく変わってしまいます。

そこで、単なる真っ直ぐな四角形ではなく、四隅を綺麗な曲線に見せるためにドットの削り方を何パターンも検証しました。さらに、白いフチの内側に一段明るいグレーのドットを配置することで、画面からぽんと浮き出るような、絶妙な立体感を持たせています。スマートフォンやパソコンの明るい画面で見てもコントラストがクッキリ引き立ち、中にテキストやアイコンを重ねたときに見やすくなるように設計しました。

クリエイター必見！「9スライス」対応で自由自在に変形可能

そしてこの素材、UIデザイナーさんやゲーム開発者さんにとっておきの仕様にしています！四隅の角のドット配置を完全に均等に設計しているため、UnityやFigma、CSSの「border-image」などで9スライス（9-Slice）設定をしていただくことで、角の丸みを一切潰さずに、横長のメッセージウィンドウや縦長のステータス画面へと自由自在に引き伸ばして使うことができます。

「正方形のままだと文字が入りきらないな…」というときでも、この1枚のデータがあれば、長文用のテキストボックスから小さなボタン枠まで、あらゆるサイズに綺麗にリサイズして使い回すことが可能です！

  • 懐かしいレトロゲームの世界観や、ポップなデジタル感を一瞬で演出できるドット絵デザイン
  • 9スライスに最適な均等設計だから、角を綺麗に保ったまま縦横のサイズ変更が自由自在
  • 内側のグレーラインと外側の黒フチによって、どんな背景色の上でもしっかり映える高い視認性
  • 背景が完全に透過されたクリーンなPNGデータなので、デザインソフトやWEB上で重ねるのも自由自在

こんな場面で使ってみて！おすすめの活用法

「文字だけの画面にちょっとした遊び心を出したいな…」というときに、このウィンドウをベースとして敷くだけで、一気に今風のレトロモダンな世界観が作れますよ。

  • ブログやWEBサイトでの、「ちょっとしたお知らせ」や「運営者からのひとこと」を囲むメッセージ枠に
  • YouTubeなどの動画編集で、ゲーム実況のテロップベースや、出演者のアイコンを表示するフレームとして
  • 9スライス機能を使って横に長く伸ばし、RPGゲームの会話イベント風のテキストウィンドウに
  • 自作のゲーム風WEBアプリや、ポートフォリオサイトのメニューボタンの枠線デザインとして

たとえば、このウィンドウの中にドット絵のキャラクターやフォントを組み合わせれば、まるでゲームのワンシーンのような可愛いUIが簡単に作れちゃいます！「雪田屋」の他のピクセル素材シリーズと合わせて、読者さんの目を引く楽しいデザインに役立ててもらえると嬉しいです。

きれいにレイアウトするコツ

今回の素材は背景が完全に透過されたPNG形式になっているため、背景画像やグラデーションの上にそのまま重ねてお使いいただけます。

ドット絵の雰囲気を最大限に活かすために、中に配置する文字のフォントも「ピクセルフォント（モノスペース系のドットフォント）」を選んでいただくと、画面全体の統一感がグッと上がってプロっぽい仕上がりになりますよ。9スライスで好きなサイズに調整しながら、いくつか並べてカテゴリー選択画面のように配置するのもおすすめです！

モノ,飾り,ゲーム,モックアップ,セット,インターネット,コンピューター