Web制作

非デザイナーが簡単にブログの
アイキャッチ画像を作る方法

2017.07.31

非デザイナーが簡単にブログのアイキャッチ画像を作る方法

「アイキャッチ画像」は、ブログのクリック率を高めるためにも大切な要素の一つです。しかし、「画像の編集なんてプロでもないのに簡単にできない!」そうお困りではありませんか?

かく言う私も、営業寄りのWebディレクターのため、専門的なアプリを駆使してホームページのデザインを作ることはできません。そんな非デザイナーの私でも、無料で簡単にできるブログのアイキャッチ画像の作成方法があります。

オンラインで画像編集ができるPixlr Editorを使う

Pixlr Editorを使えば、わざわざ専門アプリを購入したりPCにインストールする必要はありません。まずは、Pixlr Editorにアクセスしてください。

ページにアクセスしたら、アイキャッチ画像に使用したい画像を「コンピューターから画像を開く」を選択して読み込ませます。

コンピューターから画像を開くを選択して読み込ませます

これで画像を編集する準備は整いました。後は、画像のサイズを縮小して、余計な部分をカットするだけでアイキャッチ画像が出来上がります。 今回は、サンプルで用意した画像サイズ「4000×2667ピクセル」の画像を、このブログのアイキャッチ画像でも使用している16:9の比率を例に、「740×416」のサイズに編集します。

1.画像のサイズを縮小

まずは、素材として用意した画像の縦横サイズを、比率を保ったまま縮小します。上部メニューにある「画像」→「画像サイズ」を選択します。

用意した画像の縦横サイズを、比率を保ったまま縮小

「画像サイズ」のボックスが出てきたら、「幅」の右にあるピクセル数値を変更します。ここでは「740」と入力します。その際、「縦横比を固定」にチェックしてあることを確認してください。

740と入力すると、「高さ」も自動的に変更されますので、この状態で「OK」を選択します。

「幅」の右にあるピクセル数値を変更します。ここでは「740」と入力します。

これで画像サイズが縮小されました。このままではこの後の作業が行いにくいので、画像左下にある「●●%」を選択し100%と入力すると、変更したサイズはそのままで100%表示されます。

740と入力すると、「高さ」も自動的に変更されますので、この状態で「OK」を選択します。

2.余計な部分をカット

画像を縮小することで、横幅は740ピクセルのサイズとなりました。しかし、サンプル画像の高さは493ピクセルですので、これを416ピクセルにするために、画像の上下をカットします。

画像をカットするために、左側のツールメニュー左上にある「切り抜きツール」のアイコンを選択します。

画像をカットするために、右側のツールメニュー左上にある「切り抜きツール」のアイコンを選択します

カーソルが変化したと思いますので、この状態で上部メニューバーのすぐ下にある「固定化」横のプルダウンメニューから、「出力サイズ」を選択します。

上部メニューバーのすぐ下にある「固定化」横のプルダウンメニューから、「出力サイズ」を選択します。

その後プルダウンメニューの横に表示されている「幅」と「高さ」に数字が表示されますので、「高さ」の数字を416と入力します。

「幅」と「高さ」に数字が表示されますので、「高さ」の数字を416と入力します。

この状態で、画像の左端から右端までをドラッグドロップすることで、画像をカットする範囲が表示されます。「出力サイズ」が740×416に固定化されているので、この比率は保たれます。

画像の左端から右端までをドラッグドロップすることで、画像をカットする範囲が表示されます。

範囲選択の位置は調整することが可能です。選択範囲の枠の中をドラッグドロップすることで、上下に移動させることができますので、任意の位置に調整します。位置が決まったら、キーボードのEnterを押すと、選択範囲を残して画像がカットされます。

これで、画像は740×416ピクセルのサイズになりました。

これで、画像は740×416ピクセルのサイズになります。編集作業はこれで終わりです。

画像の保存忘れにご注意ください!

注意していただきたいのが、最後にメニューの「ファイル」→「保存」で編集した画像を保存することです。保存せずに作業中にブラウザを閉じてしまうと、一連の作業が無駄となってしまいますので、必ず保存することを忘れないようにしてください。

色々操作を試してみてください

Pixlr Editorは無料のサービスですが、非常に高機能なツールです。今回ご紹介した、画像の縮小・カットする作業のほか、例えば画像の明るさの変更などもできます。色々と試してみることで、さらに思い通りのアイキャッチ画像が作れるかもしれません。

ブログのアイキャッチ画像のリサイズやトリミングにお困りの方は、是非参考にしてください。

SHARE

この記事の筆者

Webアドバイザー 鈴木 亘

Webアドバイザー 鈴木 亘

Webの悩みをお客様の視点に立って一生懸命解決法を考える、Webアドバイザーの鈴木亘です。Webマーケティング初心者の方でも安心してご相談いただけるよう、わかりやすい戦略立案を心がけていますので、どんな些細な問題でもお気軽にご相談ください。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。