当サイトの運営を開始してからはや半年強。「いつかは…」と思いながらもずっと放置していたヘッダ画像を変更しました。
まあブログのデザイン(特にヘッダ)なんてものはほぼほぼ運営者の自己満かもしれませんが、ヘッダが変わると気分も新たになった感じがしますね。
今後また変更をする時やサブブログ等を立ち上げる時のためにも、画像サイズ等の情報をメモ書きとして残しておこうと思います。
ちなみに上の方にも表示されてると思いますが、現状の完成品はこちらです。
【完成品画像】
目次
ヘッダ画像を作ろう！！
元々は適当な写真を使ってましたが、せっかくなので自作してみることにしました。僕は芸術方面のセンスはからきしですが、まずはやってみてから考えようということで(笑)
ロゴマーク
まずは当ブログのロゴマークです。これは前々から考えていたアイディアがありした。
これはイギリスはロンドンの地下鉄の駅のマークで、写真は実際にロンドンに旅行にいった際に自分で撮影したものです。
いくつかの駅で写真はとっていたのですが、これが一番綺麗でかつ背景も加工しやすいということでこれを採用。
ちなみに形としては簡単なものなのでＰＣのペイントでフツーに図形を組み合わせて作ろうともしたのですが、かなり安っぽい感じになってしまい実際の写真を使用することにしました。
適当な無料アプリを使って周りの背景を削除・透明化します。
元の駅名を塗りつぶして上からブログ名を。ちなみにここからはＰＣのペイント機能を利用しています。
ブログ名のフォントはもっといいのがあったら変更したいです。（でもペイントだと選べるフォントが少ない…）
画像サイズ
画像サイズはいくつかのサイト様でご紹介されている数値をいくつか試した結果、以下が一番しっくりきました。
また、Twitterのヘッダー画像用のものも併せて用意しました。
【ＰＣ版】
横：1000px × たて：200px
【スマホ版】
横：800px × たて：250px
【Twitter用】
横：1500px × たて：500px
上記サイズにした白背景にロゴマークを置いてシンプルバージョンがとりあえず完成。
やっぱりちょっとあっさりしすぎて寂しいですね。
装飾を加えてみる
とりあえず好きなものを加えてみました。
このブログではもはやお馴染み(？)のアッガイさんと、映画やおすすめソフトのレビューをしたりと当ブログと縁深いポケットモンスターからピカチュウさん。
人気者にあやかっていくスタイル
これらの画像は共にデジカメで撮影した写真を背景消したりして使用しています。ロンドンの地下鉄マークと同じですね。
自分の好きなものというと他にもスターウォーズとかサッカーとかも入れたかったり、当サイトは仕事についてのことも多く書いているのでその要素も入れたかったり…、と色々あったのですがごちゃごちゃしてしまいそうだったので最初はこのくらいにしてイメージが浮かんだら修正していくことにしました。
とりあえず完成品
スポンサーリンク
ＰＣ版
【採用案】
とりあえず2017年10月現在ヘッダーに設定しているもの。
【シンプルバージョン】
先程の作成過程でも登場したロゴのみバージョン。これをベースに色々なパターンのデザインを模索して行こうと思います。
というか、これにハロウィンぽい画像つけて「ハロウィン期間中バージョン！」みたいにしたら楽しかったかも。(もう遅いw)
【説明文入り】
はてなブログのデフォルトで表示される説明文をヘッダー画像に直接入れ込んだものです。
個人的には嫌いじゃないんですが、ブログ名の文字が大きくないので説明文に負けてしまってる感があります。
それぞれの画面イメージはこんな感じ。
【採用案】
【シンプルバージョン】
【説明文入り】
うむむむ…。
スマホ版、Twitter用
サイズは前述の通り800×250pxで編集。ＰＣ版の完成画像をサイズ変更したというよりも、800×250の下地を新たに用意してパーツを再配置した感じ。
Twitter用も製作の行程は同じです。
余談：写真の背景透明化について
今回作成したヘッダー画像のように、自分で撮った写真を使用する場合は背景等の邪魔な部分を加工してあげる必要があります。
やり方については僕も色々と調べたのですが、こちらで紹介されている手法が一番楽で確実そうです。MicrosoftOfficeのパワーポイントを使った方法です。
僕もそうするつもりだったんですが、いざアッガイさんやピカチュウさんの写真も撮って画像加工となった段で気づきました。
うちのパソコン、Officeねぇ…
最終的にはスマホの無料アプリを探してやりましたが細かい調整が必要だったり(しかもスマホの小さい画面で指でしないといけない)、デジカメ⇒ＰＣ⇒スマホ⇒ＰＣの移動が面倒だったり色々と大変でした。
ケチってOffice無いやつにするんじゃなかったなぁ…。
さいごに
周りのブロガー様方を見ているととても魅力的なデザインのブログがたくさんあります。
それと比べてしまうと「もっとセンス方面にステータス振りたかったなぁ」と思わないこともないのですが、何だかんだ自作のものにはやはり愛着がわきますね(笑)
ともあれ、まずはやってみないと上達しないのも事実。今後も魅力的なデザインを見かけたらパクる参考にして色々試してみたいと思います。
おしまい。
【ブログ関連のおすすめ記事です！】
www.yumekichi-blog.com
www.yumekichi-blog.com
www.yumekichi-blog.com