さて、前回の記事ではブログのトップページをオリジナルにデザインしなおした際のBefore＆Afterをお見せしました。
今回の記事からは、ブログのトップページデザインシリーズとして、それぞれのデザインを行った際に利用したCSSコードやツールを丁寧にご紹介していきたいと思います。
第一回目の本記事では、ブログを開いたらまず目に入るという意味で非常に重要な「ヘッダー」についてご説明していきます。
ブログの顔！トップページのヘッダー画像のデザイン
ヘッダーデザインとは、本ブログでいう、この画像の部分ですね。
見てわかる通り、このヘッダーでは「地球の形をした青いアイコン」＋「セカイキ」というこのブログの略称＋「世界で生きるラボ」いうこのブログの正式名称というデザインにしています。
細長いデザインとすることで、下のコンテンツも目に入るようにする
ブログ立ち上げ当初はもっと大きなヘッダーを作成していました。
しかし、縦横比の縦が長いデザインにしてしまうと、「代り映えのない」ヘッダー部分ばかりに目が入ってしまい、肝心なコンテンツの部分がぱっと目に入ってこないことに気づきました。
ヘッダーは「ブログの顔」ではあるけれど、目立ちすぎたら逆に邪魔。
本当に見てほしい下のコンテンツへスムーズに誘導できるような、「シンプルなデザイン」が望ましいと思いました。
試行錯誤を繰り返し、最終的に決めた縦横比は 幅800px、縦100px です。
ヘッダーはブログを印象づけ、かつ邪魔にならないようなシンプルなデザインにするとよい。
ブログのイメージにあったロゴを入れることで、ブログの印象を強める
テレビ番組でも会社でもあるように、その番組・企業を印象付けるような「ロゴ」というのはとても重要です。
そして、そのロゴのイメージとブログのテーマは一致させていると効果的でしょう。
人は文字で覚えるのと画像で覚えるのでは、右脳と左脳の全く違う場所を使うと言われています。
人々は毎日多くのサイトを訪れているわけですから、簡単にはブログを覚えてくれないと思います。
２，３回目訪れたときに、視覚として「あ、このブログのヘッダー前も見た気がするな。」と思ってもらえれば完璧です。
略称と正式名称はフォントを変える
最後に、ブログ名のフォントの設定です。
「セカイキ」と「世界で生きるラボ」のフォントが違うのがわかるかと思います。
「セカイキ」のフォントは、ゴシックで濃い感じのフォントとすることで、左側に配置したロゴの太い黒線と合うようにデザインしています。
一方で、「世界で生きるラボ」まで太くすると、少し強い（しつこすぎる）印象になります。
また、「ラボ」とあるように、スマートなブログイメージも意識したいと考えました。
そこで、フォントサイズを少し小さくし、フォントも細めのものを選ぶことにしました。
ちょっとした微調整で印象が大きく変わりますので、こだわりを持ってデザインしたいですね。
ヘッダーデザインはサイズ変更自在の２ツール（無料）で完璧
さて、ここまででブログのヘッダーデザインをするうえで、重要な３つのポイントは理解していただけたかと思います。
①オンラインツールを使った簡単なロゴの作り方
このオンラインツールというのが、こちらの「Free logo design」というページです。
Try our free logo maker. Trusted by 30M+ businesses, our onl…
言語は英語で日本語はありませんが、文章を理解する必要はないので英語が分からなくても問題ありません。
むしろ、日本語ではないロゴサイトなので、他の多くのブログと差別化するには良いですね！
ブログ名、カテゴリを選んでスタート
サイトにアクセスしたら、上のような画面が現れると思います。
まず、❶の赤枠のなかにある「Enter your company name」に、英語のブログ名の場合は入れましょう。
日本語の場合は何も書かなくて大丈夫です。
次に、❷でブログのテーマに関わりそうなカテゴリを選びます。
英語が良くわからない場合は、初期設定（All categories）のままでOKです。
最後に、❸のGet Startedをクリックして次のページに進みます。
好きなロゴのイメージを選ぼう
選んだロゴを改造して、オリジナルなロゴデザインを作ろう
ロゴを確認してダウンロード
②オンラインツールを用いたヘッダーのデザイン
ここまでの作業で、ロゴを作成することができました。
上のロゴ作成ツールの限界は、英語しか文字を入れられないことです。
ここからは、別のツールを用いてヘッダー全体のデザインをしていきましょう。
そのためのツールがCanvaです。
まずはアカウントを作成しよう
メインページにアクセスしたら、Facebook、Google、またはメールアドレスで登録しましょう。
自分が登録したいものを選んで、FacebookやGoogleの場合はリンクが確認できればあっという間に登録が完了します。
メールアドレスの場合でも、登録は１分程度で簡単に終わります。
登録が終わったらメールを確認し、デザインするためのメインページに移動しましょう。
デザインする内容（サイズ）を選ぼう
デザインのメインページは上の画像のような感じです。
デザインしたい内容によって、すでに決められたサイズから簡単に選ぶこともできます。
例えば、Blogバナーというものもありますね。
このようにすでにサイズが決まっているものは、作るものがそのサイズしかない場合は便利です。
しかし、わたしが今回工夫したように、ヘッダーのサイズを微調整して決めたい場合には向いていません。
右上にある、カスタムサイズをクリックして、作成するデザインの幅と高さを指定しましょう。
先ほど説明した通り、この例では幅800px、縦100pxとしましょう。
デザインしてみよう！
サイズを指定すると、上のような画面になってデザインの編集ができるようになります。
左側のタブから、テンプレート・素材・テキスト・背景・アップロード・フォルダと必要なものを変更しましょう。
デザインに使いたいものは、右側のデザインエリアにドラッグするだけで簡単に配置できます。
入れたい画像などについても、直接デザインエリアにドラッグすればOKです。
それでは、先ほど作成したロゴを入れてみましょう。
このような感じになりました。
あとは、ブログのタイトルの文字を入れていきましょう。
左側のタブから「テキスト」を選択します。
「テキストボックスの追加」、または、そのまま使いたい文字のデザインがあればサンプルのリストから選びましょう。
文字を選択したら、下のような表示が出てきます。
基本的にはワードなどと同じですね。
- チェックポイントというのが現在指定されているフォント
- ２４がフォントサイズ
- Aのマークは色を変更
- Bは文字を太く変更
- Iは文字を斜めに
- その右は文字を左や中央、右にそろえる
といったことが調整できます。
さて、今回用に試しに作ってみたのがこちらです。
真ん中に先ほど作ったロゴを置き、両サイドにはCanvaの「素材」から無料で使える図形を入れています。
そして、ロゴの両サイドに「週刊少年キャンプ」の文字をチェックポイントのフォントで入れています。
下の英語は英語用のフォントを使用し、色を変えています。
色の選択においては、メインの「週刊少年キャンプ」は、ロゴの色に合わせた暖色で、少し濃い目立つ色にしています。
英語のWeeklyは、ロゴの木の色の系統に合わせて緑色、Campはテントの色に合わせて青色、メインの色より目立ちすぎないような色合いに設定しました。
まとめ：無料でできるブログヘッダー画像のカスタマイズ
いかがでしたでしょうか。
今回は、２つのオンラインツールを使ったヘッダーデザインについてご紹介しました。
ブログ初心者からブログマスターに向けて、少しでもブロガーの方にとって本記事が役に立てばうれしいです！
