PRこの記事には商品プロモーションを含む場合があります。

デザイン

ブログヘッダー画像の作り方【無料で簡単!おしゃれデザイン】

Taka
会社員がブログ運営4カ月で月2万PV達成。4年目の現在は3サイトを運営しています。 こんな悩みを解決できる記事を用意しました!

ブログを始めて いざサイトのデザインを考えてみても、しっくりくるデザインってなかなかできないですよね。

大丈夫です!いくつかの無料ツールを使うと、初心者でもおしゃれなサイトデザインを実現できます

この記事では「おしゃれなヘッダー」を作るための必須ノウハウや、WordPressへのヘッダー画像の設定方法を解説していきます。

短時間でおしゃれなヘッダーを作成できるようになるので、ぜひ最後まで読み進めてみてください。

\この記事を読んだ人に人気の記事/

おしゃれなブログの作り方|参考例をテーマごとに42コ厳選【webデザイン】

ブログのヘッダーとは

ヘッダーとはブログの最上部エリアのこと。

サイトをひらいたユーザが最初に目にする部分です。

ブログのヘッダーイメージ

ヘッダー のカスタマイズの幅は WordPressのテーマによって若干ことなりますが、ほとんどのテーマで

  1. ヘッダー
  2. ヘッダー画像

を設定することができます。

基本的に ② ヘッダー画像 は「トップページ」のみに表示されます。

画像:トップページとそれ以外のページの違い

この記事では、② ヘッダー画像 について詳しく解説していきます。

① ヘッダー 部分について知りたい人はこちらの記事をご覧ください。

ブログのヘッダーを10分でおしゃれに!ロゴや画像の作り方を徹底解説

続きを見る

配色や画像など、ヘッダーのデザインは「ブログ全体の視覚的イメージ」をおおきく左右します。

サイトのデザインがダサい = 完成度が低い と思ってください!

完成度が低いサイトは、信ぴょう性もなく 記事を読む気にならないですよね。

コンテンツに興味を持ってもらうためにも、まずはサイトのデザイン、雰囲気で ユーザを惹きつけることが重要になります。

ヘッダー画像に最適な画像サイズは?

ヘッダー画像に最適な画像サイズはWordPressのテーマによって異なります。

使っているテーマに最適なサイズの画像を作成しましょう。

テーマ   横      ×       縦
Affinger2200  px  ×  500 px
Cocoon1600  px  ×  300 px
SANGO1000  px  ×  470 px
JIN:R2400  px   指定なし
SWELL1100  px  ×   200   px
STORK192400  px   ×  1400 px

※上記にお使いのテーマがない場合は

「テーマ名 ヘッダー 画像サイズ」

で検索してみてください。

推奨サイズのものを利用しないと

  • 画像の端が切れる
  • 解像度が低くなる
  • 画像の表示速度がおちる

といった現象が発生する可能性があります。

ヘッダーは1度設定したら、手直しする機械も少ないので、この辺りは最適化しておきましょう。

ヘッダー画像のバリュエーション

ヘッダー画像は下記4つのバリュエーションを組み合わせて作成します。

文字、画像素材、イラスト素材、ロゴ

ヘッダー画像のデザイン例

こんな感じで、自分のサイトにフィットするヘッダー画像を作りあげましょう。

ただ、デザイン経験のない方が 0からイラストやロゴを自作するのは難しいですよね。

安心してください!

この次の章から

デザイン初心者でも「プロ並みのヘッダー画像が作れる裏ワザ」を伝授していきます。

ヘッダー画像の作成手順

ここからは具体的なヘッダー画像の作り方を解説していきます。

その前に、ヘッダー画像の作成には、無料で使えるツール「Canva」 がおすすめ

Canva を利用すると、だれでも簡単に画像を作れちゃいます。

たった20分足らずで高クウォリティーのヘッダー画像ができるのでぜひ利用してみてください。

※以下の手順は Canva の利用を前提としています。

STEP
Canvaにアクセス

Canva公式サイトへアクセスしましょう。

画像:Canvaにアクセス

まずはCanvaに サインインする必要があります。

以下いずれかのアカウントでサインインしてください。

  • Appleアカウント
  • Googleアカウント
  • Facebookアカウント
  • Microsoftアカウント
  • メールアドレス

無料なので不安にならなくても大丈夫。とりあえずやってみましょう。

サインインすると「ホーム画面」が表示されます。

画像:Canvaホーム画面を表示

STEP
デザインを作成

ホーム画面の右上「デザインを作成」をクリックして「カスタムサイズ」を選択します。

画像:デザインを作成をクリック

STEP
画像サイズを指定

ヘッダーの画像サイズを入力して「新しいデザインを作成」を選択します。

⇒ WordPress の各テーマの推奨サイズをみる

画像:アイキャッチ画像のサイズを指定

STEP
テンプレートを選択

編集画面では左側からテンプレートを選択できます。

画像:テンプレートを選択

※良いテンプレートが見つからない場合は

「ヘッダー画像」や「イラスト」

とかで検索してみてください。

お好みのテンプレートをベースに、画像をカスタマイズしていきましょう。

画像:テンプレートをカスタマイズ

STEP
ロゴやイラストのアップロード

ロゴ や イラストを取り入れたい場合は左メニュー「アップロード」を選択。

「ファイルをアップロード」をクリックして取り込みたいロゴ・イラストを取り込みましょう。

画像:ロゴ・イラストをアップロード

「画像」項目に、取り込んだ画像が追加されたら、編集スペースに(画像を)ドラッグ&ドロップします。

画像:アップロードしたロゴを編集スペースにドラッグ&ドロップ

この機能を活用して、素材サイトの 画像 や ロゴを、Canvaでカスタマイズしましょう。

⇒ ロゴ や イラスト を無料でゲットできるおすすめ素材サイトを見る

⇒ Canva のほかの機能について、もっと詳しく見る

STEP
カスタム画像をダウンロード

カスタマイズが完了したら、できあがった画像をダウンロードしましょう。

「ファイル > ダウンロード」を選択してください。

画像:「ファイル > ダウンロード」を選択

右側にポップアップ画面が表示されたら「ダウンロード」を選択。

画像:「ダウンロード」を選択

「ダウンロード」フォルダ下に、作成したファイルをダウンロードできます。

これで完了!Canva どうでしたか?

数分でプロ並みのデザインを実現できるので、ヘッダーだけでなくアイキャッチ画像 などでも Canvaを活用していくと効果的です。

⇒ アイキャッチ画像の作り方を見る

WordPressでのヘッダー画像の設置方法

ここからは WordPress にヘッダー画像を設置する方法を解説していきます。

ただ、ヘッダーの設定方法は WordPress のテーマによって少し異なります

この記事ではAFFINGER におけるヘッダーの設定方法を紹介していくので、それ以外のテーマをご利用の人は以下から該当するものをご参照ください。

 

[AFFINGER でのヘッダー画像の設定方法]

STEP
WordPress管理画面にアクセスして「外観>カスタマイズ」を選択

WordPress管理画面のメニューから「外観>カスタマイズ」を選択

STEP
「ヘッダー画像」を選択してWordPressに画像をアップ
画像:「ヘッダー画像」を選択してWordPressに画像をアップ

これで完了です。トップページを表示して確認してみましょう。

 

ヘッダー画像を作る際のポイント

ヘッダー画像を作る時のポイントは5つ

  1. サイト全体の雰囲気に合わせる
  2. ブログの方向性に合ったデザインに
  3. 明るい画像を使用する
  4. シンプルな画像・ロゴにする
  5. 競合サイトを参考にする

それぞれ詳しく解説していきます。

サイト全体の雰囲気に合わせる

ヘッダー画像の色合い・ニアンスとサイト全体のデザインは必ず合わせてください。

これはヘッダー作成における最重要ポイントです!

ここがズレるとヘッダーが浮いてしまい、サイトの見た目に違和感が出てしまいます

Taka
ヘッダー画像だけでサイト全体の映りが良くも悪くもなるんです。

デザインに統一感がないサイトはクウォリティーに欠け、読者から信頼を得られません。

サイトの信ぴょう性を高めるためにも、サイト全体でデザインのニアンスを統一することが大切です。

ブログの方向性に合ったデザインに

ヘッダーを見るだけで「あなたのサイトが何について発信しているのか」がわかるとベスト。

というか サイトのコンセプトに全く関係ない画像は NG です。

サイトの内容とヘッダー画像が違うと、読者を困惑させてしまいます。

たとえば 仮想通貨を取り扱うサイトが、食べ物のヘッダー画像を設定していたら意味がわからないですよね。

Taka
僕が読者なら『ヘッダーになんか意図があるのか?』『 ん?雑記ブログなのか?専門性が低そうなサイトだな』 って思っちゃいます。

明るい画像を使用する

ブログジャンルやプログラミングジャンル、転職ジャンルなど

なにかの目標に向けて努力する人を ターゲットとする場合は、読者がやる気になるようポジティブな画像がおすすめ。

例として、転職 エージェント doda(デューダ) さんのサイトを見てみましょう。

明るい画像の参考例(出典:doda)

出典:doda(デューダ)

みんな楽しそうに仕事している 『明るくて元気がでてくる』 ようなヘッダー画像ですよね。

こんな感じで読者がやる気になれるような画像が効果的です。

心が明るくなるだけでなく、読者が「なりたい姿」をヘッダー画像に映せるとベストです。

シンプルな画像・ロゴにする

「ヘッダー画像のデザインが思いつかない」「なんか見た目がパッとしない」など、困ったときは シンプルなデザインにしましょう。

なんならヘッダーなんて「フォントだけ」でもいいですし、ちょっとしたロゴをいれるだけとかでもOK

シンプルな画像の参考例(出典:ブロラボ)

出典:ブロラボ

ブロラボさんのサイトは、ヘッダーにブログ名のロゴのみを表示しています。

とてもシンプルなデザインですがおしゃれですよね。

実際、凝ったデザインだと見栄えを良くするのがとても難しいです。

それとくらべてシンプルなデザインなら、簡単に作れるうえ、おしゃれに見えやすい

デザイン経験のない人や自信のない人は、シンプル路線ですすめていきましょう。

競合サイトを参考にする

ヘッダーデザインがなかなか思いつかない場合は、すでに実績のあるサイトのヘッダーデザインを参考にしましょう。

Taka
すでに成果を出しているサイトというのは、今までにものすごい時間やお金をサイト構築に費やしています。

とてもじゃないけど、独自のセンスだけでは太刀打ちできません。

だから 成功者のサイトを分析して、そこからヒントを得るんです。

あくまでオリジナリティを追求すべきですが、他サイトの分析から得たヒントを取り入れることでサイトのクウォリティーがぐっと上がっていきます。

注意点

つぎに、ヘッダー画像を設置するにあたって気を付けなければならない3つの注意点について説明します。

  1. 画像のデータ容量は小さくすること
  2. スマホでの見た目も確認すること
  3. 著作権や肖像権に注意する

これらはすべて重要な点なので、とくに意識していきましょう。

画像のデータ容量は小さくすること

ヘッダーに画像を設定する場合、画像サイズはできるだけ軽くしましょう。

画像サイズが大きいと、サイトの表示速度が低下してユーザ離脱率が高くなる恐れがあります。

サイト表示速度はとても重要。

表示速度が1秒のサイトに比べて、3秒のサイトは離脱率が 35% も高くなってしまいます。

以下のツールを利用すれば、無料で簡単に画像を軽量化できるのでぜひ活用してみてください。

画像圧縮ツール compressor AC のイメージ画像

compressor AC

 

スマホでの見た目も確認すること

ヘッダーを設定したらスマホ画面での見た目も確認しましょう。

いまやスマホ対応は必須の時代!

モバイルからのアクセスはかなり多いので必ず対策しておきましょう。

Taka
PCからでも、スマホ画面での見え方を確認できます。

【PCからスマホ表示を確認する方法】

STEP
WordPressへアクセスして「外観>カスタマイズ」を選択

画像:WordPressでのスマホ表示の確認方法(ステップ1)

STEP
左下の「スマホ表示」ボタンをクリック

画像:WordPressでのスマホ表示の確認方法(ステップ2)

STEP
スマホ画面での見え方を確認

画像:WordPressでのスマホ表示の確認方法(ステップ3)

このように WordPressの機能を利用すると、簡単にスマホ表示をチェックできます。

「実際にスマートフォン端末で映りを確認する」とかでもよいので、やりやすい方法でスマホ表示を最適化していきましょう。

 

著作権に注意すること

サイトに画像をアップする場合は、著作権に注意してください。

ほかの人が載せている画像を勝手にコピーして、自分のサイトに掲載するとかは論外。

法的なトラブルの原因になります

商用利用が許可されている素材 または 自分で撮影した画像などを使いましょう

ヘッダー作成の参考にしたいサイト集

ここからは 個人ブログや企業サイトから、参考にしたいヘッダーデザインをいくつか紹介していきます。

カラフルで明るいヘッダーデザイン

画像:カラフルで明るいヘッダーデザイン(出典:シカカラDH)

出典:シカカラDH

 

モノトーンを基調としたヘッダーデザイン

画像:モノトーンを基調としたヘッダーデザイン(出典:WAROCOM)

出典:WAROCOM

 

景色を前面に押し出したヘッダーデザイン

画像:景色を前面に押し出したヘッダーデザイン(出典:やまうみ日記)

出典:やまうみ日記

 

イラストをモチーフにしたヘッダーデザイン

画像:イラストをモチーフにしたヘッダーデザイン(出典:こいまな)

出典:こいまな

 

ロゴをモチーフにしたヘッダーデザイン

画像:ロゴをモチーフにしたヘッダーデザイン(出典:mico's journal)

出典:mico's journal

 

サイトごとにデザインはさまざまですが、どれもおしゃれですよね。

こんな感じで、たくさんのヘッダーデザインを見て、自分のサイトを作るうえでの参考にしましょう。

ヘッダーデザインのサイト事例をもっと見る

 

【無料】おすすめフリー素材サイト

ここからは完全無料で使えて、商用利用可クレジット表記不要のおすすめフリー素材サイトを紹介します。

ではさっそく見ていきましょう。

unDrow画像:unDraw 公式サイトunDraw

unDrawは シンプルでおしゃれなイラストが豊富なフリー素材サイトです。

会員登録不要で、制限なしにイラストを無料ダウンロードできるのがポイント。

独特のイラストスタイルなので、デザインの統一性もあり、とても使いやすいです。

ただ、海外のサイトなので、イラストの検索は英語でおこなう必要があります。

 

IRA Design画像:IRA Design 公式サイト

IRA Design

IRA Designでは 200種類以上のイラストを組み合わせが可能!さらに、パーツごとに配色を変更できるので、レパートリーが豊富です。

こちらの素材サイトも無料 かつ 会員登録不要です。

シンプルなデザインでかっこいいイラストが無料で手に入るのでぜひ利用してみてください。

なお、これも海外のサイトなので、英語で検索しなければいけません。

 

イラストAC画像:イラストAC 公式サイト

イラストAC

イラストACは 日本語で検索できて使いやすいうえ、イラストの種類が圧倒的に多い

基本的に無料で利用できますが、会員登録(メールアドレスで登録)や1日のダウンロード制限もあるので、有料版のほうが使いやすいっちゃ使いやすいです。

とはいえ、1日のうちに何10枚もダウンロードしないのであれば、無料でも十分に使えますよ。

 

ACO-DAN画像:O-DAN 公式サイト

O-DAN

O-DANは 40 個以上のフリー素材サイトから、画像を一括検索できるサイトです。

いくつものフリー素材サイトを巡り画像を探し回る手間が省けるうえ、海外の素材サイトを日本語で検索できるというのが最大のポイント。

ただ、一部の素材は有料であったり、日本語での検索にひっからなかったりもするので多少のデメリットもないわけではないです。

そうは言っても、便利なツールであることは間違いないのでぜひぜひ利用してみてはいかがでしょうか。

 

素材サイトの紹介は以上になります。

フリー素材サイトでダウンロードした画像と Canva併用することで、レパートリーは無限大に広がります。

短時間で高クウォリティーのヘッダーを作るためにも、使えるものは使っていきましょう。

ヘッダー画像・ロゴ作成を外注できるサービス

ヘッダー画像の作成を外注するなら ココナラ がおすすめ。

画像:COCONARA公式いマーク

ココナラ で発注すると、ブロガーやWebデザイナーなど、経験豊富なプロに仕事を依頼できます。

まあ、納品物のクウォリティーは人によるので、そこを見極めるのは重要。

受注側にはプロフィールがあり、過去の実績やスキルなんかもみれるので、適切な人材を探して仕事を依頼していきましょう。

QA

以下は ヘッダー画像を作るフェーズ でよくある質問 です。

初心者の方が悩みやすいところなので、ぜひ参考にしてください。

Canvaの画像は商用利用できるの?

結論:Canva のテンプレートは商用利用可能です。

ただ Canva のテンプレートや素材を無加工のまま利用するのは禁止されています

かならず加工したものを利用しましょう。

Canvaで作ったヘッダーは他のサイトと被らない?

結論:なくはないが、あまり考えなくて良いです!

Canva にはたくさんのテンプレートがあるうえ、テンプレートは定期的にアップデートされています。

また 前述の通り、テンプレートはそのまま使うことが許されていないため、全く同じ画像になる確率は低いでしょう。

もちろん似たようなデザインになる可能性にはなくはないですが、気にするほどでもないかと思います。

 

まとめ

ここまでヘッダー画像の作り方やコツ・注意点について解説してきました。

最後に重要なポイントを振り返ってみましょう。

  • ヘッダー画像とサイト全体のデザインは統一する
  • 画像サイズはできるだけ小さく
  • スマホ表示の見た目もチェック
  • 無料ツールを活用する
  • 著作権に注意する

上記を意識してヘッダー画像を作っていきましょう。

ここさえ押さえておけば、だれでもおしゃれなヘッダーを作れるようになります。

この記事は以上になります。

最後まで読んでいただきありがとうございました。(≧▽≦)

 

\この記事を読んだ人に人気の記事/

おしゃれなブログの作り方|参考例をテーマごとに42コ厳選【webデザイン】
SEOに強いブログカテゴリーの分け方・作り方を徹底解説

-デザイン

Copyright© タカログ , 2024 All Rights Reserved Powered by AFFINGER5.