ブログ初心者

【ブログ初心者向け】画像加工まとめ【写真・イラスト】

40~50代の
blog初心者

ブログで使うアイキャッチや画像、イラストなど簡単に作れたり、素材探したり出来るようになりたいので簡単にまとめて欲しい!

アイチャッチ画像作成、画像最適化、素材探しなど
ステップを追ってまとめてみました。

初心者向けアイキャッチ画像作成

画像加工まとめ01

Photoshopなどの画像加工ソフトがなくても
ブラウザ上で簡単にアイキャッチ画像画像が作れる「Canva」の使い方。

アイキャッチ画像とは、ブログの記事冒頭や記事一覧ページに配置されているサムネイル画像

ブラウザ上でアイキャッチ画像作る例を
誰でも出来るように基本的なことだけ画像付きで説明してます。

blogバナーを選択しているので画像サイズは2240×1260(px)とかなり大きいです。
慣れてきたら画像のサイズを気にして作るといいですね。

大体ブログの記事部分やアイキャッチ画像の横幅は
最大で750px~760pxの事が多いです。

ですので横幅800pxで作っておけば
テーマを変えたりデザインを変更した場合にも対応できます。

一般的に16:9比率が使いやすいとされてますので
横800pxの場合は縦450pxで作っておくといいですね。

「Canva」に関しては無料で便利で大変ありがたいと思うので
将来的には選べる画像・フォントが増える有料プランに移行したいなと個人的には思っております。

画像最適化プラグイン

画像加工まとめ02

導入するだけで画像を
自動で最適化してくれる大変便利なプラグイン
「EWWW Image Optimizer」

アップ済みの画像も一括、個別で画像最適化出来ます。

自分は画像加工してからアップしていたので
正直必要ないと思ってたのですが
加工済み画像でもしっかりファイルサイズ小さくなるのでおすすめです。

画像を最適化することによってユーザビリティーの改善と
SEO的にもマイナスが少なくなりますので効果は高いです。

インストールして基本設定したらあとはすべて自動なので必須で入れて頂きたいプラグインとなります。

インストールから基本的な設定方法まで画像つきで紹介

日本語で探せるフリー素材サイト

画像加工まとめ04

ブログ更新に慣れてくると
ちょっとしたイメージ画像やイラストが欲しくなってきます。

自分で写真を撮るのもイラスト作成も、有料の素材を買うのもむずかしいので無料で使えるフリー素材にお世話になると思います。

そんな商用利用可能なフリー素材を
日本語で検索できるおすすめのサイトを厳選して7つ紹介してます。

これだけの素材が無料で使えることに感謝し
リンク設置できるときはなるべく設置してありがたく使わせて頂いてます。

無料の画像編集ソフト

画像加工まとめ03

Photoshopなどの画像加工ソフトがあると
画像加工したり、スクリーンショット画像に囲いや文字を入れたり
便利なのですがまあプロが使うソフトは高いです。

ですので初心者向けに機能は限定されますが
無料で簡単な国産ソフト「PhotoScape(フォトスケープ)」
インストール、使い方を紹介致しました。

直感的に使えて、画像のリサイズ、切り抜き
モザイク、ぼかしなどブログ用に必要な機能は揃ってますので
Windowsユーザーならぜひ試して欲しいです。

Macだと使えないので
海外製にはなりますが「GIMP」が高機能でおすすめだと思います。

「JPG」「GIF」「PNG」の使い分け

画像加工まとめ05

画像保存方法の使い分け方
ぼやけたり、あきらかな画像劣化させずに
なるべくファイルサイズを小さく保存する方法です。

基本的な使い分け
写真、グラデーションのかかった写真は「JPG」
色数の少ないロゴやアイコン、透過画像は「PNG-8」か「GIF」
(PNG-8で保存の出来ない場合は「GIF」)
アニメーションは「GIF」のみ
JPGでは文字がにじんでしまう画像などは「PNG-24」
(ファイルサイズが非常に大きくなるのでなるべく避ける)

画像最適化プラグインも併用するので
ファイルサイズが多少大きいくらいなら
画像の劣化少ないキレイな画像で保存しましょう!

初心者向け画像加工関連まとめ

上から順番に慣れていくと
画像の作り方、素材の探し方、加工の仕方、保存方法の使い分けと
出来る事が増えていくと思いますので参考にして頂けたらと思います!