Style · ピクセル
ピクセルWebデザインの参考例とAIプロンプト
UI要素・アイコン・装飾をドット絵で仕上げるピクセル系AIプロンプト集。ゲーム・レトロプロダクトに。
ピクセルについて
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 などキリのよいサイズ
- フォントもピクセルフォントに統一
- アニメはフレーム数を絞ってコマ送りに
- スクリーンサイズが大きくても整数倍に