ぼそぼそ

ツーセロに乗る人妻ライダーのブログ

はてなブログの魅力的なヘッダー画像の作り方

お久しぶりです。ヅッキーです!

生きてます、安心してください←

 

2月から神奈川でも仕事を始め、オンオフともに充実しすぎて今になりました。

ちなみに、仕事は希望だったDTP系ですb

前の会社では思いっきりデザインをしていたのですが、今の会社はどちらかといえば原稿を忠実に再現していく仕事といったところでしょうか。

そんな日々を送っていると、デザインしたい欲が溜まってきたので、作らせてくださいツイートしてみるとありがたいことに希望してくれる方がチラホラ…!

 

ひとつは友人の工具屋さんのチラシ、そしてもうひとつが今回のタイトルになってる通り、ヘッダーです!

 

依頼してくれたのは、はてなブロガーで2児のパパでもあり、ライダーでもあるぼっちバイカーさん(id:botti-bk)です。

(ちなみに今回のタイトルはぼっちさんからの希望です←)

ありがたいことにヘッダーに関しての記事も書いてくれました。

www.botti-bk.com

すごく褒めてくださってるので読んでください(照

…では本題です(^^;)

 

作ったヘッダーは?

ヘッダーの概要、イメージ

 

ご本人が作られたヘッダーを元にイメージを再構築していきました。

●ヘッダーはPC用とスマホ用とサイズが違うので、2種類作成。

同じブログだし、イメージもごっそり変えないように同じ素材で少しずつ変化を出すような形で作るようにしました。

●フォントはゴシックのような角が固めの感じ、アイコン的な何かがほしい、色味はモノトーンぐらいで。

まずはぼっちさん作のヘッダーから。

f:id:grgr_bnbn:20170415224510j:plain

 

個人的に素人が作るにしては上手くない?と思いましたが決定的な指摘があるのでそれは後ほど。

そして、私が作ったのはこんなのです!

 

PC用(1150×200px)

f:id:grgr_bnbn:20170415222604j:plain

 

スマホ用(800×250px)

f:id:grgr_bnbn:20170415222940j:plain

 

アイコンとして取り入れたのは勿論ENDURO君!

私が個人的に好きなプカプカホーンも入れさせてもらいましたw

 

制作時の工夫点など。

色はモノトーン系の予定でしたが、KTMといえばやっぱりオレンジ!と思い、シンプルな要素にオレンジをアクセントに入れたいなぁと思い追加。

最初はバイクもシルエットにして、フレームだけオレンジにする予定だったのですが、いざ作ってみるとなんだかなぁ〜…(※阿藤快ではありません)という具合になったのでデカールやらヘッドライトも色付けして一目で分かるように変更w

ちなみに、このイラストは写真を勝手に拝借してイラレでトレース(なぞる)しました。

 

次はフォント選び。

肝なのは和文フォント。

欧文って何書いてもおしゃれに見えるけど、和文って意味が分かるだけに結構フォントによってイメージが変わります。それが面白いんだけど。

ベターなゴシック(小塚ゴシックとか新ゴ?)でもいいけど、少し遊んだ形のカクッとしたフォントがいいなーということで、A-OTF フォークを使用しました。

大きさや配置、伸ばし棒の長さをいじったりして硬すぎない印象に仕上げたつもりですw

 

PCverとスマホverの差別化させたのは文字の置き方。

PCだと基本的に大きい画面で見るからそれとなく要素が伝わるけど、スマホだと小さい画面で情報を伝えないといけないと考えたので、なるべく文字を大きめに。

線を入れることでタイトルと英語の間隔に一呼吸つけるようにしました。

PCverは150px空けるようにご指示があったので線を入れれなかったなんて言えない

 

というわけで、以上が工夫点でした!

 

デザインの基本

少し話が変わって、デザインのお話。

これから作ろうとしてる人、作っていて煮詰まった人に向けて!

少しでもお役に立てれば幸いです。

 

①揃えるところは揃える

社会人になってからひたすら言われた言葉です。

でも、これをするだけで完成度が少しずつ高くなっていくのでマストですb

f:id:grgr_bnbn:20170415231836j:plain

ベースラインであったり、左右であったり揃えるところを揃えているのが分かるでしょうか。

一見バラバラだけど、実は揃ってるからうるさくならない これがミソ。

 

だから配置にしてもそう。

f:id:grgr_bnbn:20170417224246j:plain

分かりにくいですが、上はなんとなく真ん中に置いた状態、下は上下左右同じ比率で置いた状態。

たったそれだけだけど、洗練された雰囲気に仕上がります!

イラレやフォトショがある人はガイドを使うと楽ですし、イラレがない人は同じ大きさの四角を作って配置しながら同じ比率にしてみるのはいかがでしょうか(実はイラレを使う私でもたまにやりますw)

 

②文字にメリハリをつける

街の中やチラシなどをよーく見たら意外と多く使ってる方法だと思います。

文字が大きい小さいまたは太いもの見たことないですか?

必要な文字は大きくしたり、太くして目立たせることで内容が一目で入ってくるので便利な方法ですw

反対に「の」や「と」などの接続詞はあまり重要ではないので小さくするとメリハリが出ます。

その結果

f:id:grgr_bnbn:20170415232421j:plain

「ブログ」の文字を標準とすると、「ぼっちバイカー」を大きく太く、「の」を小さくしました。

どこが重要かを考えて優先順位をつけていくとやりやすいと思います。

この作業をしていると「文字を並べるだけなら誰でもできる」と昔先輩に言われてハッとしたことを未だに思い出しますw

 

他にフォントの大きさや太さ意外で差別化させるとする手もあります!

例えばですが、目立たせたいものはゴシック体を使って、そうではないものに明朝を使うという方法もあります('ω')

もうここは本人のセンスなどがあるので感覚で作ってくださいっ!←

 

③意味のある空間をつくる

これが難しい話なのですが、重要です。

先ほど言っていたぼっちさんが作ったヘッダーに決定的な指摘があるというのはここです。

f:id:grgr_bnbn:20170423194135j:plain

この空間は“説明できる空間”なのかが大切です。

意味のない空間を作ることでおそらくよく分からないけど、しっくりこない感覚があるんだと思います。

同じ素材で自分なりに作り直したのがこちら。

f:id:grgr_bnbn:20170423194450j:plain

構成が一緒になってしまったのは許してください…←

大小をつけて空間を埋めることでそれなりに見えませんか?('ω';;)

困った時はイラストを使ったり、バーを引くことで穴埋めできるかと思います、はい。

 

以上の点を踏まえて作ってみると少しは納得のいく作品が作れるのではないでしょうか。

また気が向いたらデザインの話の記事も書いてみたいと思います!

ではでは〜