本文へ移動
DESIGN VOCABULARYデザインスタイル図鑑

← 検索結果へ戻る

STYLE PROFILE

ピクセルアート

Pixel Art

四角い画素を見える大きさで並べ、絵を作る表現です。形や色の変化を小さなマスに置き換えることで、初期のゲームを思わせる見た目になります。

ピクセルアートのスタイル見本
見本はこの図鑑のためにAIで生成した画像です。

ピクセルアートの代表配色例

色コードと役割をまとめてコピーできます。
背景（#17233E）とのコントラスト比
色役割比文字に使う目安
#F4EEDB文字と構造13.44:1本文の文字にも使える
#55B6A5主色6.40:1本文の文字にも使える
#E89677強調色6.72:1本文の文字にも使える

比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です（達成基準1.4.3・1.4.11）。

ピクセルアートのプロンプト例

ピクセルアートでデザインしてください。四角い画素の並び、階段状に見える輪郭、マス単位で切り替わる色を取り入れてください。

ピクセルアートの主な視覚的特徴

  1. 四角い画素の並び

    画像を四角い画素の格子に分け、1つひとつのマスが見える大きさで並べます。ケアも方眼紙のマス1つを1画素に見立てて、アイコンの下絵を描きました。

  2. 階段状に見える輪郭

    斜めの線や曲線も四角いマスで表すため、輪郭が階段のように見えます。ケアは書体を縦・横・45度の線だけで組み、当時の等幅の書体に見られたぎざぎざした見た目を避けました。45度の線も1マスずつずれる階段になりますが、段差が規則正しくそろいます。

  3. マス単位で切り替わる色

    色はマスごとに塗り分けられ、隣のマスとの境目ではっきり切り替わります。ぼかしを使わず、マスの並べ方で明暗や形を表します。

ピクセルアートが向いている成果物

ピクセルアートとは

ピクセルアート（ドット絵）は、画素（ピクセル）の単位が肉眼で見分けられるほどの解像度で作られる、デジタルな画像表現です。もとは1970〜90年代のゲーム機（ファミリーコンピューターなど）で主流だった表現で、当時はゲームに使うデータ量を抑えるために使われていました。

描くときは、マス目の1つを1つの画素として扱います。1980年代初めにアップルでグラフィックデザインを担当したスーザン・ケアは、小さな方眼紙に32×32のマス目を取り、1,024のマスをそれぞれ1画素に見立てて、アイコンを1画素ずつ手で描きました。

ケアがマッキントッシュのために作ったアイコンは、文字を切り取る機能をはさみで、ファイルを消す機能をごみ箱で表しました。1文字を9×7の点に収める制約の中で書体も作り、そのひとつのシカゴは20年以上使われました。1982年のスケッチブックは、ニューヨーク近代美術館（MoMA）とサンフランシスコ近代美術館が共同で所蔵しています。

AIGAは、ケアが新しい世代のピクセルアートを導いたと評価し、MoMAは、その操作画面の影響が今日の機器にも見られると説明しています。また、静岡文化芸術大学の修士論文の要旨は、昨今ではあえてドット絵を使い、遊ぶ人にある種の懐かしさを感じさせる意図で用いることもあると述べています。

見分けるときは、次の点を確かめてみてください。

  • 四角い画素が並んでいるのが見える
  • 輪郭が階段状にぎざぎざしている
  • 色がマスごとに切り替わっている

これらのいくつかが揃っていると、ピクセルアートの特徴を持っていると言えるでしょう。

実例を見る

Google画像検索で「ピクセルアート」を見る（新しいタブで開きます）検索結果の画像はこの図鑑には保存しません。

出典

名称・説明・主な視覚的特徴と「ピクセルアートとは」の事実は、上の出典に基づきます。特徴の説明と見分け方は、出典の内容をこの図鑑がまとめたものです。代表配色例・向いている成果物・プロンプト例は、この図鑑の編集上の提案です。制作・編集：小林 秀樹（セカヤサAIブログ）

見た目の特徴が2つ以上重なるスタイルを、最大4件表示しています。2件に満たないときは、印象や成果物の近いものを加えて2件にしています。