divタグとCSSで「はてなブログのロゴマーク」を作る手順
深い意味は無いのですが、最近ブログに時間をかけるよりその分たくさんコードを書こうと思い始めました。
ササっと作って公開するなら、やはり手軽なのはHTMLやCSSです。
まずはこれらを使い、何でも良いので作っていこうと思います。
前回作った食べれないサンドイッチはこちら。
１．大まかな部品を構想する
CSSでは1つの要素を複雑な形に変形させることができないため、作りたいものがある場合には、何を組み合わせて表現するかを考えておく必要があります。
HTML,CSSでは基本的に四角形を扱いますが、
- 枠線を利用して三角形や台形を作る
- 角を落として楕円形にする
などの簡単な変形は可能です。
CSSの変形に慣れていない人は、こちらのサイトなどを見ながら、そもそもCSSではどんな種類の部品が作れるのかを知っておくと進めやすくなります。
ここでは全体のイメージのため、頭の中で行った部品分けを書き出してみました。
この写真の通り、はてなのロゴは次の3つの部品で表現できると考えました。
- ペン先の尖った部分
- ペンの隙間（1, 3に重ねる）
- ペン先の胴体
２．まずはザックリ作る
今回作るものはそこまで複雑ではないので、まずは全体をさっと作った後、ズレやサイズなどを補正していくことにしました。
まずザックリつくったものがこちらです。
（開始から45分経過）
スタンガンかな？
なにやら危険な香りがします。
確かにペン先は尖っているものですが、これはちょっと明らかにアレすぎますね。
ジャンプの漫画的に言うと、トリコの「ノッキングガン」、もしくはワールドトリガーのスナイパー銃「ライトニング」という感じです。
ここでは先っぽが尖っていない点と、隙間部分が太すぎる所が問題だと考えました。
３．修正していく
最初の時点で完成版の作り方が分からなくても、「とりあえず作る」という行動により、評価が行えるようになったのは大きな進歩です。
ビジネスもコーディングもブログも、まずは始めてみることが第一歩となります。
話を戻し、第一版の問題点を修正していくと、次はこんなものができました。
（開始から70分経過）
さっきよりは、かなり本物に近いですね！
でもちょっと先っぽが鋭利すぎます。こんなペンで文字を描いたら紙がすぐに破れてしまいそうです。
あと、形が整ってきたことで、全体のバランスも気になり始めました。
あと一息ですので、気合を入れて修正していきましょう。
４．完成させる
調整に調整を繰り返し、やっと完成したものがこちらです。
（開始から120分経過）
※下は本物の画像です。
思ったよりそれっぽく仕上がりました。
定規で図ると結構ズレていそうですが、見慣れた人でなければ本物との区別は難しそうです。
作っていて一番大変だったのは、ペン先が若干内側に湾曲していること。
CSSは外側に湾曲させる（凸型）表現は割と簡単ですが、内側の湾曲（凹型）は「要素Aに、外側に湾曲した要素Bを重ねる」というやり方でしか表現できないため、位置調整などに結構手間がかかります。
５．おまけ：遊び心を加える
さて、本物には近づいたわけですが、やっぱり模倣だけでは面白みがありません。
ここでは何かちょっとしたオリジナル要素を入れてみましょう。
あまり凝った演出は面倒なので、簡単にできそうな変更を考えます。
- 右上方向から光が当たった感じを表現する、ペン先の金属反射
- 左奥方向への影
- 虫眼鏡っぽくするための取っ手
1, 2の効果はradial-gradient(楕円形のグラデーション)で、3はdivタグを追加して表現します。
更に経過すること50分、最終的にはこんな見た目になりました。
はてなブログ、みいつけた！
※全体的に著作権は元ファイルにありますので、ご利用は計画的に。
さいごに
上記のとおり、「開始～大まかな形ができるまで」よりも最後の微調整の方が時間がかかっています。
今回の場合、ペン先の湾曲を無視すれば、あと1時間は早く完成できました。
特に表現の凝ったものを作る場合、「ザックリ作る」のと「そこから微調整して完成させるまで」というのは同じくらいか、もしくは後者のほうがずっと時間がかかることも多々あります。
皆さんも仕事において、エンジニアやデザイナーに作業を依頼する時には、
『「大体できてる」状態から、「完成」までには時間がかかる』
ということを意識しておくと、お互いに幸せになれると思います。
結論：はてなのロゴはかっこいい。
