こんにちは。ジーズアドベントカレンダー2回目のやぎです。
前回は「Webにおけるサウンドインタラクションを考えてみた」とJS関連だったので、
今回はCSSについて書いてみようと思います。
8bitの歴史は繰り返す
突然ですが、最近のWeb含めデジタルコンテンツで8bitライクの見た目のものがしばしばみられるようになっています。ここでいう「8bitライク」というのは、ファミコンやスーパーファミコンの頃のようなドット絵で見た目を表現するものを指します。
なお、8bitというのも当時のゲーム機に搭載された8bit CPUが所以のようですが、今回は「ドット絵」と総称して進めていきます。
例えば、最近では以下のようなところで使われています。
ドット絵を使った事例
１. OCTOPATH TRAVELER
TVCMでもやっているスクエニのゲームソフト。スーパーファミコンのテイストに近い細かめのドット絵でありつつ、それに3DCGの画面効果も加えているようです。
２. FINAL FANTASY Record Keeper
同じくスクエニが提供するスマホアプリ。ファミコンより続くファイナル・ファンタジーシリーズのクロスオーバー的な世界観ということで、これまでのドット絵キャラが使われていのが感慨深いですね。
ちなみに、同時代に人気を博したロマンシング サガの完全新作「ロマンシング サガ リ・ユニバース」も配信されていますが、こちらもキャラクターがドット絵調になっていますね。
３. CODE QUEST
パソナキャリアのエンジニア向け求人フィード型転職サイト 「GeekOut」の特設サイトです。こちらはファミコンのような比較的粗めなドット絵作りで、エンジニア関連のワードをクイズ形式で答えて進めるコンテンツになっています。
４. HERMÈS JINGLE GAMES! ※スマホで見てください
エルメスの2018年クリスマス施策で、Basculeさんが制作されたようです。親しい人にメッセージを送れるコンテンツで、トナカイを操作してボックスからメッセージを取り出すシューティングゲームの要素も盛り込まれています。
また、12月25日まで銀座SONY PARKでリアルイベントもされていて、隣の銀座メゾンエルメスにプロジェクターでゲームスクリーンを投影する仕掛けになっています。
また、デジタル以外では同じく格子状の構成として近い刺繍やクロスステッチにも活用できるようです。
なぜドット絵を使うのか？
当時マシンスペックの制約等からドットベースによる描画、ユーザの想像力を掻き立てるような設計にせざるを得なかったのが、現在では高精細・3Dグラフィックといった視覚的にリッチな表現ができるまでになっています。
一方で、そうした高精細なグラフィックに慣れてしまったのかレトロゲームの再燃に合わせてなのか、こうした8bitな見た目を用いるケースが出てきているように感じます。
一巡回るだなんて、、、まるでプッチ神父のスタンド「メイド・イン・ヘブン」でも食らったかのようです(←食らってない)。
それだけ秀逸な表現技法だったという以外にも、
以下のような利点があると考えます。
ゲーム系コンテンツにおける直感性
当初ファミコン等のコンシューマゲームに用いられた経緯から、パッと見で「このコンテンツはゲーム系だな」と分かる直感性を持っている印象を受けます。
制作コスト
あくまで作るものやそのクオリティにもよりますが、緻密なグラフィックに比べドット絵がパーツ単位でデザイン管理できる点、エフェクト等の演出要素を除ける点よりある程度コストを抑えられるのではと考察しています。対して、ドット絵職人と呼ばれる方のように、高度な描画スキルと時間が要求されるケースもあります。
NES.css
そんな折、Twitter経由でファミコン風スタイルを提供する「NES.css」というCSSフレームワークのことを知りました。
NESというのは、Nintendo Entertainment Systemの略称のようで、確かにマリ○やポケ○ン、カー○ィと、往年のキャラクターのドット絵がGithub Pageにも載っています。
これはこれでキャラクター毎のドット絵も凝っていてそのままゲームに使えそうですが、一つ気になったことがあります。
これどうやって描画してるんだろ？
おかしいな～、おかしいな～。DOMをべらぼうに組み合わせてスタイルしたら作れそうですが、それだと相当数必要になるし、そもそもCSSフレームワークでもないし。。
...と思って、Developer Toolで該当エリアを見てみたら、、
なんと、、マ○オはcolorとbox-shadowで作られていたのでした。
背筋がゾクーッとした。。
<< 後編に続く >>
まとめ
というわけで後編(というかおまけ)に続きます。
アップしたらこちらにのせますゆえ ↓
【後編】
https://qiita.com/qei/items/895954f09efc945ed9d2