画像を一切使わずCSSで描かれた「けいおん！」の澪がマジですごい！

2011.12.182022.07.18

今回紹介するのは、画像を一切使わずにhtml+CSSだけで「けいおん！」の秋山澪を描いた技術デモ作品です。実際に作品を見てもらえば分かると思いますが、ものすごくクオリティが高くて普通に画像にしか見えないレベルです。久しぶりにCSSで絵を描く作品で驚かされたので、これはぜひ紹介せねばと思い記事を書きました。

「けいおん！」（K-ON!）は、軽音楽部で4人の高校生たちがガールズバンドを組み、音楽活動を行っていくストーリーで人気のかきふらい氏による4コマ漫画作品です。2年前にアニメ化、今月12月より映画が公開されている人気作品ですね。秋山澪はその作品に登場するキャラクターです。その秋山澪をまったくの画像なしで、html+CSSのコードだけで表現しています。

私も以前にCSSでドラえもんなど様々な作品を描いたりしましたが、はっきりいってhtml+CSSのコードだけで絵を描くのはとても大変です（コードの量的な意味で・・・）。絵の複雑度によりますが、html+CSSのコードだけで色々表現するのにはとても面倒な行為です。そういった意味で今回のけいおんの澪は正直言って神レベルだと思いました。

まあ、こういうものはなんだかんだうだうだ語るより実際に実物を見せたほうが早いですね。百聞は一見に如かずと言いますし・・・。

Demo作品

K-ON! 秋山澪 with CSS3 Demo

この作品をぱっと見て、これが画像じゃないと気がつく人が何人いるでしょう。実際に見ても本当の画像のように見えます。それくらいすばらしい出来だと思います。

http://rei.idv.tw/sample/mio.html

ハッキリ言って、これを見せられて突然「これ画像じゃないです」といわれても、見せられた人は「ちょっと何言ってるかわからないっすね。」状態でしょう。この人何言い出してるんだ？と思われること間違いなし。どうもみても画像です。本当にありがとうございました。ってなるのが普通の反応だと思う。

ブラウザ比較

Firefox8,Chrome16,Opera11,IE10 Developer Preview ,IE9,IE8の比較画像です。CSS3系ではいつもどおりIE8がネタにされるのですが、今回もIE8だけドット絵の様ですね・・・。まあとりあえず、絵が崩れたブラウザは残念でしたってことです。早くバージョンをあげましょう。

今回ブラウザ比較をしていて、Firefox8,Chrome16,IE10 Developer Previewはアニメーションで髪の毛と目が動いていました。私も髪と目のアニメーションはぐぬぬインデックスでやったのですが、髪の毛は結構面倒なのでよくできているなと感心しました。

今回のK-ON! 秋山澪は完成度が高すぎて、ネタ度が低いですね。実際にはIE7とかも動かしたんですが、IE8とほとんど変わらなかったですね。もっと面白い感じに崩れてくれればよかったんですけど。

Demo作品2

Lacus Clyne with CSS3 Demo

この製作者の方は、その他の作品では機動戦士ガンダムSEED ラクス・クラインなども作っているようです。

Pon De Lion with CSS3 Demo

今回この作品を作った方は台湾人の方みたいですね。ちなみに台湾人の方の作品でもう一つすごいのがあって、これは以前の記事でも紹介したんですが、html+CSSだけでポン・デ・ライオン(Pon De Lion)を描いた作品です。

画像を一切使わずにCSS3だけで描かれた「ポン・デ・ライオン」がすごい！

こちらもどう見ても画像です。はい。それくらいレベル高い作品です。

記事などを見るとどちらもCSSドラえもん関連の記事にリンクされていました。ちなみになぜCSSドラえもんが台湾で認知されているのかというと、過去にEngadget 中文版に記事が載ったため。そういったところから話が広がり、どうやら台湾ではCSSドラえもんのおかげで、CSSで絵を描くという変態コーディングが一部で盛り上がっているようです。マジでこれ誰得だよ！まあ言わずもがな俺得な訳ですが・・・。

Pure CSS Design

Pure css design

私が作ったCSSドラえもんなどの過去作品はPure CSS Designの方で公開中です！興味のある人はぜひご覧ください。たまに重い時があるので、そういうときは時間を置いてからアクセスしてください。他の作品の記事は下からどうぞ。

画像を一切使わずにCSS3だけでとあるぐぬぬの禁書目録を描いてみた！画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた！ IE10に対応したCSS3 Draemon Ver3を公開！

今回の個人的感想！

今回もとんでもない作品が海外から来ましたね。今回は製作者の@reiidvさんから直接Twitterで話しかけられて、作品紹介されてそのクオリティにびっくりしたので早速記事にしたものです。CSSの行数を見ましたが、結構短くまとめた状態で1300行以上ありました。こんだけ書けば普通にサイトが一個できますよ、はい。

ちなみに製作者は台湾人らしいです。ポン・デ・ライオンの件といい、台湾どうなってるんだよ・・・。などとつっこみ入れたい感じなのですが、その元凶が自分自身にもあるのでなんとも言えない。確かに、ぐぬぬインデックス書いたときにこれ以上の作品を求むとか調子乗って書いてしまったが、それにしても送られてくる作品のレベルが高いこと高いこと。レベルが高い作品は当然載るべき。という訳で今回も記事にしたわけです。

CSSで絵を描くというのは実用的ではないと前から言っているわけなんですが、それでもチャレンジする人がいるんですから、世界は面白いですね。実際のところPure CSS Designの方も海外のアクセスが多いですからねー。自分の作品が多くの人に影響を与えることができるというのは本当にうれしいことです。また、このようにさらにすごい作品が出てくることを願っています。