おはようございます。デザイナーの森島です。
今朝も寒いですね。１月も終わり、節分がやってきますが皆様いかがお過ごしでしょうか。
さて、お気づきかと思いますが、モノづくりブログのデザインがリニューアルしました。
今回は私がデザインを担当させて頂きました。サッパリと読みやすいものを心がけています。文字も大きめ。
なんと記事の詳細ページに入ると執筆者のプロフィールまで表示されるようになりました。
もう「デザイナーの森島です」と毎回書かなくてもよくなりました。とっても便利。
今回のデザインのポイントはなんと言ってもタイトルロゴ。
ビジネスのブログなのですが、真面目な話以外にもイラスト・漫画を載せていたり（犯人は私ですが…）しているので親しみやすいものがいいだろうとなり、積み木のような形にしています。
他がシンプルなのでタイトルロゴだけとっても映えますしお気に入りです。
タイトルロゴができるまで
今回も折角なのでロゴの制作過程をご紹介したいと思います。まず手書きで構想
今回は、いつもよりすんなりと制作が進みました。構想も「コレ！」というものを２つ制作。
▼A案
[コンセプト]
モヤモヤしていたことや分からなかったことがブログを読んで頭の中で「繋がる」。「！」ピンとくる。
⇒今見直してみると随分とか細い印象ですが、これを太くして作ってみようと提案。一つめはこれに決定。
⇒今見直してみると随分とか細い印象ですが、これを太くして作ってみようと提案。一つめはこれに決定。
▼B案
[コンセプト]
親しみやすいデザイン＞積み木のようなデザイン＞遊びの原点＞モノづくりの原点！
⇒無駄な線が多くて汚い紙だし見切れているしすみません。実際にデータに起こすといいものが出来そう、とのことでこれに決定。
⇒無駄な線が多くて汚い紙だし見切れているしすみません。実際にデータに起こすといいものが出来そう、とのことでこれに決定。
Illustratorで清書
そして苦労の末完成したのがこちら。
▼A案
▼B案
A案、B案協議の末B案の方に決定。A案はシンプルなんですけどパンチが無さそうだとの理由でした。
そのほか
ロゴだけでなく、右柱部のバナーがランダムで切り替わったり、タイトルの一文字目が大きかったりと工夫をしています。一文字目だけ大きくするのってCSSだけでできちゃうんですね。Wordpressのプラグインかと思って調べていたら出てこないし無駄に調査に時間を食ってしまいました。
せっかくなのでご紹介。
コードメモ
h1:first-letter{ font-size:26px; font-weight:bold; }
この「:first-letter」を追加すると、要素の中の最初の文字だけにCSSを適用できます。わお。知らなかった。素晴らしい。ブロック要素にしか効力がないようなので注意です。IEでもOKですし、文頭が「 【 」だったりした場合は自動で二文字目も大きくなっています。賢いですね。（下記タイトル参照）
【おわりに】
さて、装いも新たに、弊社「モノづくりブログ」今後ともどうぞ宜しくお願い致します。今日もおしごと頑張ります。それでは。
