こんにちは。制作部の中山です。

突然ですが、みなさんはドット絵をご存知ですか？ドット絵とは、出力最小単位の小さなマス目を塗りつぶし、それを並べて絵を書いていく技法です。

若い世代の方には伝わりづらいかもしれませんが、30代以上の方は、1980年代のゲーム機の画面を思い浮かべていただくとイメージに近いかもしれません。

当時は今と違い、解像度、色、データサイズなどに制限がありました。その制限の中で、可能な限りの表現をするために生まれたグラフィックの技法がドット絵です。

当時そのような背景は知らなかったものの、小学生時代のわたしもドット絵に魅せられた一人で、学校から帰ると宿題そっちのけでドット絵を書いていました。

ドット絵はIllustratorやPhotoshopのような本格的なソフトが無くても作ることができるので、小学生のわたしにも手軽にはじめることができたのです。当時の作品はお世辞にも上手いとは言えないものでしたが、今思えば「モノづくり」の楽しさに気づく1つのキッカケになったように思います。

さてそんな思い出話はさておき、先日技術ブログを読み漁っていた時に「CSSでドット絵を描く」といった記事を見かけました。

記事のタイトルを見た時は、ブロック要素のタグを複数作成して背景を変えて…などと考えたりしたのですが、それだと空タグが連なってしまい、実現出来たとしても全然スマートじゃないですよね…。

そこで登場するのが、box-shadowプロパティです。
今回の記事は入門編ではないので細かな説明は避けますが、ざっくりと説明すると、box-shadowプロパティはエレメントに影を与える時に使用します。デザイナーの方ですと、ドロップシャドウをイメージしていただけるとわかりやすいと思います。

そのbox-shadowプロパティを使って、わたしも1作品組んでみました。パンダです。

See the Pen wvBXRzw by yuka kimura (@kimurayuka) on CodePen.

作り方としては、まずは起点となるドットを「.dot::before」で疑似要素として作成します。これはあくまで起点となるドットなので、背景色は「 background: transparent;」で透明に。このドットを起点とし、影の位置を左から○px、上から○pxと1ドットずつ指定していくのです。

なおCSS上でいきなり座標を指定していくのは困難なので、事前に図面を用意してから、CSSを組み始めていくとスムーズです。今回わたしは、ハンドメイドのフリー図案を配布しているサイトから図案をお借りしました。ジャンルは違いますが、編み物やビーズ刺繍なども図案をもとに1目ずつ組んでいくので、ドット絵と工程が似ていて参考になります。

普段一般的な使い方しかしないプロパティも、アイディア次第で違った表現ができたり、
制作の現場には日々発見があります。何年現場にいても、どれだけ学んでも、新しいアイディアに出会えるところが制作の現場の楽しいところです。

今年もブログを通して色々なことを調べたり、実際に作ってみたり、新しいことにどんどん挑戦していきたいと思います。

今年もMEプロモーションはもちろんのこと、制作部をよろしくお願いいたします。