うさぎのWeb年賀状を作ろう
Complete
あけましておめでとうございます
エンジニアの長張です。
2023年がやってきましたね。
エルから新年のご挨拶として、Web年賀状コンテンツを公開しました。
「NEW YEAR’S CARD 2023 | うさぎのWeb年賀状を送ろう」
送りたい相手の名前を入れてWeb年賀状を完成させ、メールやLINEで送ることができます。
気軽に送れるWeb年賀状、ぜひ使ってみてください。
7年ぶりの復活
ところでこのWeb年賀状、見覚えのある方はいるでしょうか？
実は、2016年に制作した年賀コンテンツのリバイバルなんです。7年ぶりにうさぎバージョンで帰ってきました。
2016年の年賀状も私が制作を担当しました。この年賀状は、猿をCSSだけで描画する挑戦をしています。
今年、年賀状を復活させるにあたっても、7年前のマインドを引き継いでうさぎはCSSだけで描画することにしました。
うさぎをCSSで描こう〜猿の描画方法との変化
2016年の猿は、HTMLはdivひとつだけで実装することにもこだわっていました。スタイル付けのために構造的に不必要なタグをたくさん使うのは冗長で美しくないと思っていたんです。
そのため、divひとつとbefore要素、after要素の3つのパーツのみで描画できる方法を考えました。
限られたパーツで描画するために、猿はbox-shadowを使って多数の円を描きました。
ベースになっているのは右鼻の穴で、大きさ・色・位置・重なりを調整しながら丸いシャドウを加えていくことで、猿の顔になっています。
box-shadowはお手軽な方法ではありますが、シャドウはベースと同じ形にしかできないため、パーツの形が限られるという課題があります。猿も、顔の中身は全て円、湯に浸かっている体と波紋は全て楕円、と形を限定したデザインにしました。
今年うさぎを描画するときには、耳は円では描けないし、うさぎらしい形を目指すとbox-shadowでは厳しそうだな..と直感的に思いました。
また、猿の年賀状から7年経った今、私はすっかりタグがミニマムでないことへも抵抗が薄れています。最近のサイトはレイアウトやスタイルが複雑でとても凝っていますよね。業務の中でそうしたデザインをHTML/CSSで再現しているうちに、無理に少ないタグで実装しようとするより、わかりやすくメンテナンスしやすい構造で作ろうと心境が変化していきました。
そんなわけで、今回は無理なくうさぎらしい形を作るためにdivを2つ使って輪郭と顔の中身のパーツに分けて実装しました。
（もっと細かく分けることもできますが、制約があったほうが実装が面白いので最低限で。）
今年もよろしくお願いいたします
来年は辰かぁ..格段に難しそうですね。
本年もデザインスタジオ・エルをどうぞよろしくお願いいたします。