[STEP3-5] アメーバブログのヘッダー画像を綺麗に作成する

Pocket

んばんは、YUです。

アメブロの初期設定だけでも少し時間がかかってしまうのですが、頑張ってやっていきましょう。

難しいことなどは一切ありませんよ。

 

さて、ここではアメブロのヘッダー画像を作っていきます。

このヘッダー画像はアメブロの顔になりますので、ここをコケてしまうと見栄えが悪くなってしまいます。

なので、しっかり記事を落とし込んで作ってみてくださいね。

 

ヘッダー画像とは

まずアメブロのヘッダー画像とは、下のようにページのトップに出てくる画像です。

(画像は僕のアメーバブログのものです)

 

みなさんはこれからヘッダー画像を作っていくのですが、気を付けるポイントがあります。

それは、

 

・見やすいこと

・パッと見てどんなサイトなのかすぐに分かること

この2点です。これさえ守っていればどんなヘッダー画像でも大丈夫ですよ。

 

ヘッダー画像の作成方法

ヘッダーのパターンはいろいろあるのですが、僕が実際にやった方法でいきましょう。

 

ヘッダー画像は、

・背景画像

・他の画像

・文字

主にこの3つを組み合わせて作ります。

 

1.背景画像について

まず、背景となる画像を用意します。

基本的に好きな画像で良いのですが、あとで文字を入れるため、黒や藍、紫など濃い色より、ピンクや白、薄緑など薄い色が中心の画像をお勧めします。

ちなみに、無地の画像でもいいですし、模様が入っているだけの画像でも良いですね。

 

この画像は自分で撮った写真やイラストを使ってもいいですし、フリー画像を使っても大丈夫ですよ。

フリー素材は、ぱくたそやフォトマルシェなどから無料ダウンロードできます。

ぱくたそはこちら

フォトマルシェはこちら

 

元となる画像を用意したら、アメブロに合うよう、サイズを変更します。

今のアメブロでは、横1120px、縦300pxが基本ですね。

 

なおサイズ変更は以下のサイトでできます。

画像サイズ変更:βtoolsはこちら

※こちらでサイズ変更をすると、画像が片側の方向だけつぶれてしまうことがあります。

もしそれが嫌でしたら、トリミング機能であらかじめ横長に切り出してからのサイズ変更をお勧めします。

 

そして、忘れず画像を適当な場所に保存します。

これで背景画像ができました。

 

2.他の画像を組み合わせる

続いて他の画像を組み合わせます。

このサイトのように背景画像の上に自分の画像をのせてもいいですし、フリーランスで活動していることに関係したイラストをのせてもよし、何ものせなくても大丈夫です。

 

正解はないので、自分が良いようにしてくださいね。

ただし、ごちゃごちゃして見づらくなる、というのだけは避けましょう。

 

画像の合成は、GIMPなどの画像編集ソフトでできます。

画像編集ソフトをお持ちでなければ、画像を好きな形に切り取るのはGIMPが良いです。

GIMPはこちら(無料。リンク先のDOWNLOADボタンをクリックします)

GIMPの使い方は、「GIMP で2枚の画像を合成する方法と、自然になじませる3つのワザ」で解説されています。

 

簡易的な編集であれば、パワーポイントなどでもできますよ。

 

3.文字の入力

さて、あとは文字の入力ですね。

ここではアメブロのタイトルと、入れるとしたらブログの簡易説明を入れておくのがよいです。

また、自分の画像を入れた人は自分の称号や名前も入れます。

 

タイトルは、何のブログか分かりやすく、かつ読者にとってそのブログを読むメリットが伝わるものにしてくださいね。

簡易説明はタイトルを補うものなので、必要なければ入れなくても大丈夫です。

 

タイトルは例えば、

(アメブロタイトルのダメな例)

みっつんのダイエットブログ

 

(アメブロタイトルの良い例)

サボり魔でも30日で無理なく効果が出せるダイエット法7選

 

このような感じで、何のブログかが分かり、かつ興味を引くようなものにしてくださいね。

 

入れる文字を決めたら、実際に画像に入れてみましょう。

パワーポイントなどでも入れられますし、こういったものをお持ちでないならバナー工房というサイトでの文字入れをお勧めします。

バナー工房はこちら

 

文字は小さすぎず、でも画像からはみ出さないように調整してくださいね。

また、文字の色と背景の色は、反転しないほうがいいです。かなり見づらくなってしまいます。

 

バナー工房で画像を作成したら、必ずPCに保存しておいてください。

 

これでヘッダー画像は完成です。

お疲れ様でした。

 

では、また次の記事でお会いしましょう。

次記事:[STEP3-6] アメーバブログの正しいヘッダー画像の設置へ進む

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です