Norifumi Nakazono's Blog.

【初心者】ブログのバナー/ヘッダー画像の作り方【推奨ツール3選】

HOW TO

ブログのバナーやヘッダー画像を自分で作ってみたい人「参考にしたいブログを見ると、かっこいい画像や可愛い画像が使われているけど、どうやって作るんだろうか…。自分で画像を作れる方法が知りたいなぁ。できれば『簡単に使える無料ツール』の情報が知りたいです。」

本記事の対象読者

  • ブログやサイトに使う画像に装飾をしたい人
  • ブログやサイトに使うバナーを自分で作りたい人
  • ブログやサイトに使う画像をできれば無料で作りたい人

本記事を読ことで得られる、知識 or 技術

  • ブログやサイトで使う画像を、無料で作れる方法を知ることができる
    (※もちろん、質の高い画像制作には練習が必要です)

こんにちは、ゾノです。

この記事を書いている僕は、現役でWebデザイナー&マーケターとして活動しつつ、ブログを運営しながら生活しています。今では、外出せずに学べるパソコン教室を運営し、ブログ初心者に特化したブログ指導活動にも取り組んでいます。

本記事の内容

ブログのバナー/ヘッダー画像の制作におすすめ【無料ツール3選】

ブログのバナー/ヘッダー画像の制作におすすめ【無料ツール3選】
ブログのバナーやヘッダー画像の作り方を知りたい人におすすめできる、無料ツール3選は下記のとおりです。

無料ツールとは言え、僕が本気で使えるなと心から感じたツールを厳選して紹介します。

  • 「Pixlr Editor」
  • 「Photopea」
  • 「Canva」
  • 番外編:鬼簡単「バナー工房」

ちなみに、順番は僕が使いやすいなと思った順です。

ブログのバナー制作おすすめツール1:「Pixlr Editor」

ブログのバナー制作おすすめツール1:「Pixlr Editor」
(※2019年10月4日 時点での編集画面イメージ)

ブログのバナー制作おすすめツール「Pixlr Editor」は、超手軽に簡単に使えるのが最高にGoodです。

おすすめのポイント

  • インストールなしで使用できる(ブラウザ上で操作)
  • 何よりも、簡単に画像編集をスタートできる

» Online Photo Editor | Pixlr Editor

ブログのバナー制作おすすめツール2:「Photopea」

ブログのバナー制作おすすめツール2:「Photopea」
(※2019年10月4日 時点での編集画面イメージ)

ブログのバナー制作おすすめツール「Photopea」も、ブラウザ完結のツールです。
一見、ほぼほぼPhotoshopと変わらないですね。

深い使い方を知りたい場合は、下記のWebサイトが非常に参考になるので、チェックしてみるといいですよ。
» もうPhotoshop不要?フォトショに激似な無料ツール『Photopea』の使い方

おすすめのポイント

  • インストールなしで使用できる(ブラウザ上で操作)
  • 無料ツールの中では、最上級レベルで高度な作業ができる

» Photopea | Online Photo Editor

ブログのバナー制作おすすめツール3:「Canva」

ブログのバナー制作おすすめツール3:「Canva」
(※2019年10月4日 時点での編集画面イメージ)

ブログのバナー制作おすすめツール「Canva」は、ポスターやフライヤー、バナーなどの制作に特化したツールです。

Google/Facebook/メールアドレスでの登録が必須であるのですが、使い勝手はいいので、おすすめですよ。

おすすめのポイント

  • 自動でサイズが変わるので、手間が省ける
  • 無料で使える画像素材が、わりと豊富でありがたい

» Canva|グラフィックデザインを無料で簡単作成

ブログのバナー制作おすすめツール番外編:鬼簡単「バナー工房」

ブログのバナー制作おすすめツール番外編:鬼簡単「バナー工房」
ブログのバナー制作おすすめツール番外編:鬼簡単「バナー工房」は、ダントツで簡単だと思います。

感覚でサクサクっと操作するだけでできちゃうので、僕も前職の高校教師時代にブログをせっせと頑張って自作していたときは、結構使ってました。

おすすめのポイント

  • インストールなしで使用できる(ブラウザ上で操作)
  • ありえないくらい、簡単です

» 画像加工編集サイト - 無料で画像を加工、編集するならバナー工房

ブログのバナー/ヘッダー画像の制作方法を簡単に解説【作り方】

ブログのバナー/ヘッダー画像の制作方法を簡単に解説【作り方】
ブログのバナーや、ヘッダー画像を作りたいと思ったときは、どんな手順で進めるとオッケイなのかを説明します。

僕は、もともと美大だったのですが専攻は陶芸でした(汗)
Webデザインは、基本独学&トレース(模写)で習得しています。

なので、言ってみれば昔の僕は、今画面の向こう側にいるあなたのように「どうやって画像って作るの、、、」と悩んでいた1人でした。

超独自のやり方ですが、きっと参考になるかと思いますm(_ _)m

ステップは3つです

  • 参考にしたいバナーや画像の見つける
  • デスクトップに保存して、サイズを確認する
  • トレース(模写)して、バナーを制作する

ブログ画像の作り方1:参考にしたいバナーや画像の見つける

ブログを自力で制作するときには、絶対にリサーチはしたほうがいいです。
リサーチしていると、「あ、このブログいいな」と思うブログがあると思います。

参考にしたいブログのバナーを参考にしましょう

ぶっちゃけ、初心者が完全にゼロからバナーを作るのは難しいものです。
なので、どんな感じに作れば、キレイな画像が作れるのかを参考にさせていただくわけです。

ブログ画像の作り方2:デスクトップに保存して、サイズを確認する

ブログのバナーに参考にしたいバナーが見つかったら、自分のパソコンに一度保存します。

確認ポイントは、下記のとおりです。

画像サイズは、何ピクセルかを確認

たとえば、参考のバナー画像は「350 × 240」であれば、同じサイズで画像を作ればオッケイということですね\(^o^)/

質問:どれくらいのサイズで作ればいいですか?

こういう質問が、僕のパソコン教室の生徒さんから結構あります。

回答:参考にしたいバナーを保存して、確認しましょう

これが回答です。

※注意:画像サイズの意識はマジで大事です。あまりにも大きい画像を無駄に設置しているとサイト全体が重たくなりますので、それは避けましょう。

ブログ画像の作り方3:トレース(模写)して、バナーを制作する

ブログのバナーに参考にしたいバナーの、画像サイズが分かれば、あとはトレース(模写)して制作していきましょう。

これで、オッケイです。

ブログ画像制作に使える、素材サイトをシェアします【無料です】

ブログ画像制作に使える、素材サイトをシェアします【無料です】
フレームやキラキラの星とか、結構使える素材が無料で用意されているので、僕も頻繁に使っていますよ。
» Pngtree

ブログのバナー/ヘッダー画像の作り方を簡単に動画解説【簡単】

ブログのバナー/ヘッダー画像の作り方を簡単に動画解説【簡単】
ブログのバナーやヘッダー画像の作り方を簡単に動画で説明していきます。

一応、ステップをおさらいしておきます。

ステップは3つです

  • 参考にしたいバナーや画像の見つける
  • デスクトップに保存して、サイズを確認する
  • トレース(模写)して、バナーを制作する

では、動画で解説してきます【バナー/ヘッダー画像の作り方】

ブログのバナー制作おすすめツール1:「Pixlr Editor」をメインに使って、動画を撮影してみました。

使ってみた感想

僕はプロのWebデザイナーとしても現役で活動しているのですが、日頃は「Illustrator/Photoshop」を使用しています。
もっと細かいところを触りたいな、、、と感じる部分もありましたが、率直な意見としては「全然、十分です」というのが感想です。

大事な話を最後にして、おわります【Web制作は時間が鬼かかる】

ということで、本記事では「【初心者】ブログのバナー/ヘッダー画像の作り方【推奨ツール3選】」というタイトルに沿って、ブログを書いてきました。

最後に、Web制作を頑張って良いブログを作りたい人に向けて、本気のメッセージを書いておわりにします。

ブログの作成は、鬼キツイです

必要なものは、下記のとおり。

  • 継続する努力
  • 常に良くしていこうとする、向上心

でも、本当に大事なことは、いち早くブログを見てもらうことです

ブログの制作に、あまりにも多くの時間を費やしてしまうのはNGです。

7割の完成で、GOしましょう

なぜなら、ブログをはじめとするWebサイトに完成はないからです。

美しいブログを作ることが目的ではないはずなので、まずは、いち早く人の目に触れるためにはどうしたら良いか、、、を考えていくことのほうが優先順位は高めです。

最高に良い作品を作っているのに、売れない陶芸家にならないように、注意が必要ですね。

徒歩よりも、飛行機やタクシーに乗って移動すること

ここからは、ちょっと僕の宣伝になるのですが、よかったら読んであげてくださいm(_ _)m

ブログやサイト制作のみならず、世の中のビジネスすべては「サービス自体にお金を払いつつも、実は時間に投資しているんだな」と最近思うんですね。

僕は、移動が多めの生活スタイルを送っているので、飛行機やタクシーなどを頻繁に利用します。

東京→大阪区間の移動も、あらゆる手段がありますね。

  • 徒歩 or 自転車
    → ありえないほど面倒です
  • 車 or タクシー
    → 少し時間かかるけど、楽です。1人でまったり
  • 新幹線 or 飛行機
    → 最速で移動できる

ブログやサイト制作は、上記とまったく同じなんです

  • 自分で作る
    → ありえないほど面倒です
  • 教えてもらいつつ、自分で作る
    → 少し時間かかるけど、安心です。自分のペースでまったり
  • 発注して作ってもらう
    → 最速で移動できる

という感じですね。

僕がやっている具体的な活動は、プロフィールページに掲載しているとおりなのですが、下記のようなカタチでお力になれることができます。

※上記、青い文字をクリックすると、各ページの詳細を確認できます。

すみません、ご案内でしたm(_ _)m

僕のパソコン教室では、画像の作成方法などもサポートしているので、一緒になってブログ制作してみたい人は、ぜひ。
興味があれば、お気軽にお問い合わせくださいね。

ブログは、Web資産として未来に残ります

僕もブログを頑張っている1人です。
なので、ぜひみんなもブログを頑張って、Webから集客できる仕組みを構築していきましょう\(^o^)/

下記の記事も、あわせてチェックすると参考になると思います。
» 【地方のWeb集客】成功事例を交えた効果的な方法【SEO対策含む】

お問い合わせ&感想は、いつでも受付けています。

何かあればメッセージくださいm(_ _)m

最後まで読んでくれて感謝です\(^o^)/

お し ま い

当ブログと他のサイトの圧倒的な違いは様々な疑問や悩みを解決するために【無料体験レッスン】30分相談会(オンライン開催)に初回限定で参加できることです。

どうしても分からなかったり、1人で悩むことがあればご相談ください。
また質問やメッセージ、相談があればお気軽にお問い合わせください(*´∀`*)
» お問い合わせ

人気記事【Minimalカスタマイズ】マナブログをモデリングして、ブログを作る【manablog】

人気記事【目指せマナブログ】WordPressテーマコピー/相談チャット【無料】