Font Awesomeで目だの手だの書いて「おめでとう」って言ってみた

はじめに

アニメ初期のちびまる子ちゃんで、「まるちゃん年賀状を書く」というお話がありました。¹

アニメや漫画では、お姉ちゃんのサインペンを借りて書いていたまるちゃんですが、21世紀になるとデジタルでできちゃうのでは・・・と思い、まるちゃんの代わりにやってみました。

元ネタ

まるちゃんが書いていた文章は、以下の通り

あけましておめでとう　ことしもよろしく　まる子より

この中で、イラストがふんだんに使われているのが「あけましておめでとう」の部分なので、ここを再現してみます！
ちなみに、YouTubeに上がっていたアニメのキャプチャを取ってきたら、こんな感じでした。

使う技術：アイコンフォント

画像をイラストレーターなどで書き起こすなら、20世紀のサインペンのまるちゃんと（ほぼ）変わらない！！
21世紀なら、アイコンフォント使おうよ！
ってことで、今回はFontAwesomeを使いました。

やってみた

下準備

Font Awesomeを使えるように、HTMLのheaderタグの中に、以下のタグを埋め込んでおきます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

出力結果

ソースコード

<div><i class="fab fa-dropbox"></i></div> <!-- あけ -->
<div>ま</div>
<div>４</div>  <!-- し -->
<div>て<i class="far fa-hand-paper"></i></div>

<div><i class="fas fa-dog"></i><span style="background-color: #FFFFFF; position:relative; left: -7px;">　</span></div> <!-- お -->
<div><i class="fas fa-eye"></i></div>  <!-- め -->
<div><i class="far fa-hand-paper"></i></div>  <!-- で -->
<div><i class="fas fa-door-open"></i></div>  <!-- と -->
<div>う</div>

元ネタとの違い

「あけまして」のあけ

元ネタでは、窓を開けて人が顔を出しているイラストでしたが、FontAwesomeには見当たらなかったので、「何かが開いている」アイコンを探しました。
ドアのアイコンだと、後半に出てくる「おめでとう」とイラストが被るので、箱のふたが開いているものを探しました。
・・・結果、DropBoxのロゴになりました

「おめでとう」のお

些細なことなんですが、元ネタでは右側に尻尾が出ています（＝顔が左を向いている）。
が、FontAwesomeでは動物は全て右を向いていたので、元ネタとは逆向きの方向になってます。
そして、頭を隠すために、

<span style="background-color: #FFFFFF; position:relative; left: -7px;">　</span>

を使ってます。
「なんか白いのをpositonずらして重ねればいいんじゃね？」というやっつけ感ハンパない仕上がりです・・・。

「おめでとう」のと

元ネタによく似たイラストが見つかりませんでした・・・。
でも、ドア・扉のアイコンがあったので、それを使ってます。

感想

年が明けてから思いついて、やっつけ突貫工事で作った割には、案外うまく再現できたなぁ思いました。
イヌのしっぽを隠すやり方が全くイケてないので、もうちょっとイケてる方法があれば、そっちにしたかった・・・。

1. コミックスだと７巻くらい・・・？墨汁が垂れたのをごまかしたり、いも判に失敗しておてもやんにされたり、あぶり出ししようとしてボヤ騒ぎになったりする話です（笑
   年賀状のネタに困ったまるちゃんが、膝を打って「いいこと思いついた！」とやりだしたのが、目や手の絵をかいて「おめでとう」と書くこと² ↩

2. このシーンのキートン山田のナレーションが「まさか、目だの手だの書いておめでとうって言うんじゃないだろうな」でした。 ↩