スキップしてメイン コンテンツに移動

CSSでドット絵を描いてみよう



ドット絵(ピクセルアート)は1980年代ごろのパソコンやゲーム機で、最もよく使われた画像の表現方法でしたが、パソコン等の高解像度化にともなって、ドット絵を使われることはほとんどなくなりました。

以前は解像度が低かったため、写真や画像を今のようにきれいに表示することができなかったので、ドットで描画することが主流でした。目で見てピクセルだと分かる範囲がドット絵と呼ぶそうです。

今だからこそ逆に斬新、かわいいと思うこともあるのですが、せっかくなのでドット絵をCSSだけで描画したいと思います。
もちろん、こんなチョコボを描くことも余裕でできます。



ドット絵に使うCSS

HTMLやCSSを使って描く表現方法はさまざま考えられますが、今回は「box-shadow」のみで描いていきたいと思います。



box-shadowでドットを描く

HTML
<div></div>

まずHTMLには空のdivを用意してあげます。これだけでHTMLは完成です。

CSS
div {
      background: transparent;
      width: 10px;
      height: 10px;
      box-shadow:
        0 10px red,
        10px 20px blue,
        20px 10px green;
    }

CSSは基点<(0, 0)の場所>をtransparent(透明)とし、基本となるドットの大きさを縦、横ともに10pxずつと設定します。

そのときに、基点から下へ10pxの箇所に赤いドットを、右へ10px、下へ20pxの箇所に青いドットを、右へ20px、下へ10pxの箇所に緑のドットを描画します。

↓↓↓こんな感じで表示されます


本来box-shadow(ボックスシャドウ)は指定した要素に立体っぽく影をつけるCSSなのですが、ぼかし具合を入力しないことでゼロ、つまりただの直線として認識されます。



ざくざく作っていこう

こんな感じで、ドット絵を書いていくには元画像を準備し、ピクセル単位で描画していきます。
チョコボを描く(HTML)
<div id="chocobo"></div>

チョコボを描く(CSS)
 #chocobo {
      background: transparent;
      width: 10px;
      height: 10px;
      
      box-shadow:
        60px 0 #181010,
        70px 0 #181010,
        80px 0 #181010,
        
        40px 10px #181010,
        50px 10px #181010,
        60px 10px #c08800,
        70px 10px #f8f800,
        80px 10px #e3b600,
        90px 10px #181010,
        100px 10px #181010,
        
        30px 20px #181010,
        40px 20px #f8f800,
        50px 20px #f8f800,
        60px 20px #f8f800,
        70px 20px #f8f800,
        80px 20px #f8f800,
        90px 20px #f8f800,
        100px 20px #e3b600,
        110px 20px #181010,
        
        20px 30px #181010,
        30px 30px #e3b600,
        40px 30px #f8f8f8,
        50px 30px #c08800,
        60px 30px #e3b600,
        70px 30px #f8f800,
        80px 30px #f8f800,
        90px 30px #c08800,
        100px 30px #181010,
        
        10px 40px #181010,
        20px 40px #181010,
        30px 40px #f8f800,
        40px 40px #1838d8,
        50px 40px #f8f8f8,
        60px 40px #c08800,
        70px 40px #f8f800,
        80px 40px #c08800,
        90px 40px #181010,
        
        0 50px #181010,
        10px 50px #e88048,
        20px 50px #e88048,
        30px 50px #c08800,
        40px 50px #1838d8,
        50px 50px #f8f8f8,
        60px 50px #e3b600,
        70px 50px #f8f800,
        80px 50px #f8f800,
        90px 50px #e3b600,
        100px 50px #181010,
        
        0 60px #181010,
        10px 60px #f8d294,
        20px 60px #e88048,
        30px 60px #b95b29,
        40px 60px #e3b600,
        50px 60px #e3b600,
        60px 60px #f8f800,
        70px 60px #e3b600,
        80px 60px #c08800,
        90px 60px #181010,
        120px 60px #181010,
        130px 60px #181010,
        140px 60px #181010,
        
        0 70px #181010,
        10px 70px #e88048,
        20px 70px #181010,
        30px 70px #181010,
        40px 70px #181010,
        50px 70px #181010,
        60px 70px #c08800,
        70px 70px #c08800,
        80px 70px #181010,
        110px 70px #181010,
        120px 70px #f8f800,
        130px 70px #f8f800,
        140px 70px #f8f800,
        150px 70px #181010,
        
        10px 80px #181010,
        40px 80px #181010,
        50px 80px #f8f800,
        60px 80px #e3b600,
        70px 80px #c08800,
        80px 80px #181010,
        100px 80px #181010,
        110px 80px #f8f800,
        120px 80px #e3b600,
        130px 80px #181010,
        140px 80px #181010,
        
        30px 90px #181010,
        40px 90px #f8f800,
        50px 90px #f8f800,
        60px 90px #f8f800,
        70px 90px #f8f800,
        80px 90px #e3b600,
        90px 90px #181010,
        100px 90px #181010,
        110px 90px #f8f800,
        120px 90px #c08800,
        130px 90px #f8f800,
        140px 90px #e3b600,
        150px 90px #181010,
        
        20px 100px #181010,
        30px 100px #e3b600,
        40px 100px #f8f800,
        50px 100px #e3b600,
        60px 100px #f8f800,
        70px 100px #f8f800,
        80px 100px #f8f800,
        90px 100px #f8f800,
        100px 100px #c08800,
        110px 100px #c08800,
        120px 100px #e3b600,
        130px 100px #c08800,
        140px 100px #181010,
        
        20px 110px #181010,
        30px 110px #f8f800,
        40px 110px #f8f800,
        50px 110px #c08800,
        60px 110px #f8f800,
        70px 110px #e3b600,
        80px 110px #c08800,
        90px 110px #f8f800,
        100px 110px #f8f800,
        110px 110px #a05800,
        120px 110px #181010,
        130px 110px #181010,
        
        20px 120px #181010,
        30px 120px #c08800,
        40px 120px #f8f800,
        50px 120px #a05800,
        60px 120px #c08800,
        70px 120px #f8f800,
        80px 120px #e3b600,
        90px 120px #a05800,
        100px 120px #a05800,
        110px 120px #181010,
        
        30px 130px #181010,
        40px 130px #c08800,
        50px 130px #c08800,
        60px 130px #a05800,
        70px 130px #a05800,
        80px 130px #a05800,
        90px 130px #c08800,
        100px 130px #181010,
        
        40px 140px #181010,
        50px 140px #181010,
        60px 140px #181010,
        70px 140px #704020,
        80px 140px #181010,
        90px 140px #181010,
        
        70px 150px #181010,
        80px 150px #a05800,
        90px 150px #181010,
        
        60px 160px #181010,
        70px 160px #181010,
        80px 160px #a05800,
        90px 160px #a05800,
        100px 160px #181010,
        
        20px 170px #181010,
        30px 170px #181010,
        40px 170px #181010,
        50px 170px #181010,
        70px 170px #a05800,
        80px 170px #704020,
        90px 170px #181010,
        100px 170px #181010,
        110px 170px #181010,
        120px 170px #181010,
        130px 170px #181010;
    }

▼こんな感じ




マリオも描いてみた

マリオを描く(HTML)
<div id="mario"></div>

マリオを描く(CSS)
#mario {
      background: transparent;
      width: 10px;
      height: 10px;
      
      box-shadow:
        30px 0 #dc2900,
        40px 0 #dc2900,
        50px 0 #dc2900,
        60px 0 #dc2900,
        70px 0 #dc2900,
        
        20px 10px #dc2900,
        30px 10px #dc2900,
        40px 10px #dc2900,
        50px 10px #dc2900,
        60px 10px #dc2900,
        70px 10px #dc2900,
        80px 10px #dc2900,
        90px 10px #dc2900,
        100px 10px #dc2900,
        
        20px 20px #8a7301,
        30px 20px #8a7301,
        40px 20px #8a7301,
        50px 20px #ffa53c,
        60px 20px #ffa53c,
        70px 20px #8a7301,
        80px 20px #ffa53c,
        
        10px 30px #8a7301,
        20px 30px #ffa53c,
        30px 30px #8a7301,
        40px 30px #ffa53c,
        50px 30px #ffa53c,
        60px 30px #ffa53c,
        70px 30px #8a7301,
        80px 30px #ffa53c,
        90px 30px #ffa53c,
        100px 30px #ffa53c,
        
        10px 40px #8a7301,
        20px 40px #ffa53c,
        30px 40px #8a7301,
        40px 40px #8a7301,
        50px 40px #ffa53c,
        60px 40px #ffa53c,
        70px 40px #ffa53c,
        80px 40px #8a7301,
        90px 40px #ffa53c,
        100px 40px #ffa53c,
        110px 40px #ffa53c,
        
        10px 50px #8a7301,
        20px 50px #8a7301,
        30px 50px #ffa53c,
        40px 50px #ffa53c,
        50px 50px #ffa53c,
        60px 50px #ffa53c,
        70px 50px #8a7301,
        80px 50px #8a7301,
        90px 50px #8a7301,
        100px 50px #8a7301,
        
        30px 60px #ffa53c,
        40px 60px #ffa53c,
        50px 60px #ffa53c,
        60px 60px #ffa53c,
        70px 60px #ffa53c,
        80px 60px #ffa53c,
        90px 60px #ffa53c,
        
        20px 70px #8a7301,
        30px 70px #8a7301,
        40px 70px #dc2900,
        50px 70px #8a7301,
        60px 70px #8a7301,
        70px 70px #8a7301,
        
        10px 80px #8a7301,
        20px 80px #8a7301,
        30px 80px #8a7301,
        40px 80px #dc2900,
        50px 80px #8a7301,
        60px 80px #8a7301,
        70px 80px #dc2900,
        80px 80px #8a7301,
        90px 80px #8a7301,
        100px 80px #8a7301,
        
        0 90px #8a7301,
        10px 90px #8a7301,
        20px 90px #8a7301,
        30px 90px #8a7301,
        40px 90px #dc2900,
        50px 90px #dc2900,
        60px 90px #dc2900,
        70px 90px #dc2900,
        80px 90px #8a7301,
        90px 90px #8a7301,
        100px 90px #8a7301,
        110px 90px #8a7301,
        
        0 100px #ffa53c,
        10px 100px #ffa53c,
        20px 100px #8a7301,
        30px 100px #dc2900,
        40px 100px #ffa53c,
        50px 100px #dc2900,
        60px 100px #dc2900,
        70px 100px #ffa53c,
        80px 100px #8a7301,
        90px 100px #dc2900,
        100px 100px #ffa53c,
        110px 100px #ffa53c,
        
        0 110px #ffa53c,
        10px 110px #ffa53c,
        20px 110px #ffa53c,
        30px 110px #dc2900,
        40px 110px #dc2900,
        50px 110px #dc2900,
        60px 110px #dc2900,
        70px 110px #dc2900,
        80px 110px #dc2900,
        90px 110px #ffa53c,
        100px 110px #ffa53c,
        110px 110px #ffa53c,
        
        0 120px #ffa53c,
        10px 120px #ffa53c,
        20px 120px #dc2900,
        30px 120px #dc2900,
        40px 120px #dc2900,
        50px 120px #dc2900,
        60px 120px #dc2900,
        70px 120px #dc2900,
        80px 120px #dc2900,
        90px 120px #dc2900,
        100px 120px #ffa53c,
        110px 120px #ffa53c,
        
        20px 130px #dc2900,
        30px 130px #dc2900,
        40px 130px #dc2900,
        70px 130px #dc2900,
        80px 130px #dc2900,
        90px 130px #dc2900,
        
        10px 140px #8a7301,
        20px 140px #8a7301,
        30px 140px #8a7301,
        80px 140px #8a7301,
        90px 140px #8a7301,
        100px 140px #8a7301,
        
        0 150px #8a7301,
        10px 150px #8a7301,
        20px 150px #8a7301,
        30px 150px #8a7301,
        80px 150px #8a7301,
        90px 150px #8a7301,
        100px 150px #8a7301,
        110px 150px #8a7301;
    }

▼マリオもいい感じ

アイコンにもおすすめ

ハートのアイコンを描く(HTML)
<div id="heart"></div>

ハートのアイコンを描く(CSS)
#heart {
      background: transparent;
      width: 10px;
      height: 10px;
      
      box-shadow:
        20px 0 #cc0000,
        30px 0 #cc0000,
        70px 0 #cc0000,
        80px 0 #cc0000,
        
        10px 10px #cc0000,
        20px 10px #ff6038,
        30px 10px #ff6038,
        40px 10px #cc0000,
        60px 10px #cc0000,
        70px 10px #ff6038,
        80px 10px #ff6038,
        90px 10px #cc0000,
        
        0 20px #cc0000,
        10px 20px #ff3300,
        20px 20px #ff3300,
        30px 20px #ff3300,
        40px 20px #ff6038,
        50px 20px #cc0000,
        60px 20px #ff3300,
        70px 20px #ff6038,
        80px 20px #ff3300,
        90px 20px #ff3300,
        100px 20px #cc0000,
        
        0 30px #cc0000,
        10px 30px #ff3300,
        20px 30px #ff3300,
        30px 30px #ff3300,
        40px 30px #ff6038,
        50px 30px #ff6038,
        60px 30px #ff3300,
        70px 30px #ff3300,
        80px 30px #ff3300,
        90px 30px #ff3300,
        100px 30px #cc0000,
        
        0 40px #cc0000,
        10px 40px #ff3300,
        20px 40px #ff3300,
        30px 40px #ff3300,
        40px 40px #ff3300,
        50px 40px #ff3300,
        60px 40px #ff3300,
        70px 40px #ff3300,
        80px 40px #ff3300,
        90px 40px #ff3300,
        100px 40px #cc0000,
        
        10px 50px #cc0000,
        20px 50px #ff3300,
        30px 50px #ff3300,
        40px 50px #ff3300,
        50px 50px #ff3300,
        60px 50px #ff3300,
        70px 50px #ff3300,
        80px 50px #ff3300,
        90px 50px #cc0000,
        
        20px 60px #cc0000,
        30px 60px #ff3300,
        40px 60px #ff3300,
        50px 60px #ff3300,
        60px 60px #ff3300,
        70px 60px #ff3300,
        80px 60px #cc0000,
        
        30px 70px #cc0000,
        40px 70px #ff3300,
        50px 70px #ff3300,
        60px 70px #ff3300,
        70px 70px #cc0000,
        
        40px 80px #cc0000,
        50px 80px #ff3300,
        60px 80px #cc0000,
        
        50px 90px #cc0000;
    }

▼アイコンかわいい


今回作ったサンプルはこちらからも確認できます




Written by Creative Flake

コメント

このブログの人気の投稿

ゲシュタルトの法則をWebデザインにも利用しよう

こんにちは、クリエイティブフレークです。

一度は聞いたことがあるかもしれない「ゲシュタルト」。

ゲシュタルト
人間の精神を、部分や要素の集合ではなく、全体性や構造に重点を置いて捉える。この全体性を持ったまとまりのある構造をドイツ語でゲシュタルト(Gestalt :形態)と呼ぶ。



人間の脳がものの形、要素をどのように認識するか、ということですね。

人間がゲシュタルトを感じるときに起こる、さまざまな種類を「プレグナンツの法則」と呼ぶそうですが、その具体例を簡単に紹介。





ゲシュタルトの法則1 : 近接の法則



近接の法則は、近くにあるもの同士が同じグループだと認識されやすい。





ゲシュタルトの法則2 : 類同の法則



類同の法則は、同じ色や、同じ形同士が同じグループだと認識されやすい。





ゲシュタルトの法則3 : 共通運命の法則



共通運命の法則は、同じ方向に動くもの、同じ周期で点滅するなどが同じグループだと認識されやすい。
共通運命の法則は、近接の法則や類同の法則よりも強く働く。





ゲシュタルトの法則4 : 良い連続の法則



良い連続の法則は、図形はつながった形になりやすいと認識されやすい。
近接、類同、共通運命の法則から、切れ目がなくや突然変化しない図形がよいものだと分かる。





ゲシュタルトの法則5 : 閉合の法則



【】や()のように、閉じた形は同じグループだと認識されやすい。
】【 は同じグループと認識しづらい。





ゲシュタルトの法則6 : 面積の法則



小さいものが図として、大きいものが背景として認識されやすい。





ゲシュタルトの法則7 : 対称の法則



対称な図形は閉じた図として認識されやすい。





このゲシュタルトの法則は心理学をはじめとした様々な分野に応用されていますが、人間の特性を活かすという点で、デザインの分野にも活用されています。

たとえばリモコンのボタン配列。



数多くのボタンを、誰が見ても直感的に分かりやすく、誤操作させないように配置しています。





こちらは私のMacのドック。



急いでいるとよく間違ったアイコンをクリックしてしまうので、試行錯誤の末、この配列が一番使いやすい結論に。





Webデザインにおいては、もしすべてのパーツが単調に置かれていたら……



どこを見ていいのかも分かりづらく、どれがクリックできるのかも分かりづらい。



色や形を変えたり、適度な距…

白の可能性は無限大!無料の白い背景10個まとめ

使用度の高い白とグレーを使った、無料でダウンロードできる背景パターンを集めました。
定番・王道パターンから、最新トレンドのパターンまで素敵なパターンをまとめています。



大きめ白菱型パターン 立体感のあるグラデーションの白菱型パターンはふんわりとした印象にも、ラグジュアリーな印象で、美容系やウェディング系にも使える素材。

大きめ白菱型パターン素材のダウンロード



小さめ白菱型パターン こちらも自然な感じに立体感のある白菱型パターン。背景はもちろん、ボタンの一部にしても使えそうなおしゃれな素材。

小さめ白菱型パターン素材のダウンロード



四角なパターン 幾何学的な空間のような四角モチーフのパターン。奥行き感があって、Web素材にも印刷用素材にも使えそう。

四角なパターン素材のダウンロード



ネットワークなパターン 点と点を線でつないだ、ネットワークのような格子状パターン。スタイリッシュな印象にぜひ。

ネットワークなパターン素材のダウンロード



六角形のシームレスパターン 六角形をモチーフにしたつなぎ目のない、シームレスパターンです。色を変えたり、透過度を変えてみてアートな印象にも。

六角形のシームレスパターン素材のダウンロード



四角格子のパターン ドットでつないだ四角形の格子のパターンは、かわいい感じに。

四角格子のパターン素材のダウンロード



白のポリゴンパターン 自分で描くと結構大変なポリゴンパターン。数年前から人気継続中です。

白のポリゴンパターン素材のダウンロード



白のポリゴンパターン 上のポリゴンパターンとはちょっと違う、折り紙を折ったようなパターン。人とは違うポリゴンを探していたという方はぜひこちらを。
白のポリゴンパターン素材のダウンロード



セールっぽい放射状のパターン 白い放射状はクリーンでおしゃれ。中心を引き立てたいときにも、背景にももちろん。
セールっぽい放射状のパターン



三角形のパターン どんなイメージにも使えそうな三角形のパターン。ちょっとした色のアクセントでさらに目を引く印象に。
三角形のパターン素材のダウンロード







Written by Creative Flake

Photoshopで文字にアンチエイリアスをかける

こんにちは、クリエイティブフレークです。

Photoshopで文字を書いていると、「太字を選択するほどでもないけど、あと気持ちちょっと太かったらいいのに!」、「あとちょっとクリアに見せたいのに!」と思ったことはありませんか?



そんなときに活用したいのが「アンチエイリアス」です。

「エイリアス」とは曲線がギザギザ、ガタガタに表現されてしまうことで、ドット絵みたいに見えます。

なので「アンチ」って言うんですね。



実際に見比べてみると


▲ヒラギノ角ゴシックPro 24pt



明らかに「なし」を選択したものはギザギザです。

「太く」と「シャープ」はちょっと太い感がありますが、「鮮明」と「なめらか」の差が難しいですね。



今度はフォントサイズを変えてみました。


▲ヒラギノ角ゴシックPro 14pt



個人的には、文字が太くなる「シャープ」と「太く」がややジャギー感(ギザギザ感)が残っていますが、「鮮明」と「滑らかに」はフォントサイズを小さくしたときに潰れてしまいやすいイメージです。



では実際どうやって変更するの?なのですが、Photoshop CS6を例に説明します。


▲テキストツール(Tの形)を選びます




▲文字を書いたら上のアンチエイリアスを選びます(うちのマシンが英語ですみません)

Web用や印刷用など、用途によって強弱を使い分けたいですねヽ(・∀・)ノ



Written by Creative Flake