Style · ピクセル

ピクセルWebデザインの参考例とAIプロンプト

UI要素・アイコン・装飾をドット絵で仕上げるピクセル系AIプロンプト集。ゲーム・レトロプロダクトに。

Designs002 Styleピクセル Keywordピクセル

ピクセルについて

UI要素をドット絵で仕上げる表現。8bit/16bitゲームの質感をWebに持ち込み、ゲーム・同人・レトロプロダクト・インディーシーンで愛されます。基本はアンチエイリアスを切り、整数倍でだけ拡大すること。image-rendering: pixelated を指定し、1.5倍のような半端な拡大を避けないと、ドットが滲んで様式そのものが崩れます。ビットマップ書体は小さいサイズ用に作られているため、見出しと装飾に限定し、読ませる文字は通常の書体へ逃がしてください

ピクセルの視覚パラメータ

  • #0F0F1B
  • #F2F2F2 文字
  • #E23D3D 主色
  • #4EC94E 副色
書体
ビットマップ書体。整数倍でだけ拡大する
角丸0。image-rendering: pixelated を必ず指定
動き
コマ送り。steps() で中割りを作らない

よく使われる場面

  • インディーゲームのLP
  • レトロゲーム風プロダクト
  • 同人・ファンコミュニティ
  • NFTアートのプロジェクト
  • エンジニアツールの遊び心演出

成功のポイント

  • image-rendering: pixelated で画像ぼけを防ぐ
  • アイコンは16x16 / 32x32 などキリのよいサイズ
  • フォントもピクセルフォントに統一
  • アニメはフレーム数を絞ってコマ送りに
  • スクリーンサイズが大きくても整数倍に

このスタイルのデザイン

他のスタイル