ブログを更新する際に写真や画像を記事内に挿入する事って多々ありますよね。
ブログに画像を入れることで記事の内容がよりわかりやすく読み手に伝わるようになる為、記事内に写真・画像を載せることは良いことです。
ですが、とはいえサイズ調整とか複数画像を用意する場合、結構な労力を使うと思います。
写真や画像を一枚ずつサイズ変更（リサイズ）や画角調整を行うとあっという間に時間が経過してしまいます。
そこで今回はブログに使う画像・写真等の素材を簡単に複数用意する方法を紹介したいと思います。
リサイズもサイズ調整も簡単です！
- ブログに載せる写真や画像の適切なサイズがわからない。
- ブログ用の画像を作るのがとても大変だし面倒だなぁ・・・。
- ブログ用の画像を複数用意するのがとても大変だ。
- 写真や画像のサイズ容量はどうしよう・・？
- 画像編集ソフトは何が良いだろう・・？
こんな疑問に答えます。
本記事の内容
・ブログに掲載する画像の容量を小さくするメリットと方法
ブログ記事の写真や画像を簡単にリサイズする方法
自分で撮影した写真や作成した画像をブログに載せる場合、サイズの調整が必要になりますよね。
推奨画像サイズは使用しているブログのテーマ（WordPressの場合）にもよりますが、大体はブログテーマの公式サイトに推奨サイズが掲載されています。
その掲載されているサイズに沿って画像または写真をトリミング・リサイズするのが1番良いです。
そのほか、一般的に推奨できるサイズは横幅640px以上がベストです。
スマホが普及している今の世の中、ほとんどの人がスマホを使ってインターネット検索をします。
ブログの閲覧者もスマホ経由の人が圧倒的に多いです。
引用：ニールセン
今のスマホはどんどん解像度がよくなっているので、640px以下で画像トリミングをすると、画質がものすごく荒くなってしまいます。
モニターサイズが320pxを平均とした場合は、その２倍の640pxで画像作成するとスマホでも綺麗に表示されます。
逆に1200pxとかの大きな画像のまま掲載すると、画質はとても良いのですが、画像容量が大きくなってしまう為、丁度いいバランスの640px以上1000px未満の画像サイズでブログにアップしましょう。
サイズ感が分かったら、今度は簡単に写真や画像を作成・リサイズする方法を紹介します。
結論から言うとAdobe Photoshopというツールを使うことでめちゃくちゃ画像作成が捗ります。
尚且、複数画像のサイズを一気に作成できますし、写真の加工も出来ます。
プロが使うデザインツールになりますので、様々な便利機能を兼ね備えているのです。
ぼくは元々Webデザイナーなので今でもPhotoshopはバリバリ使用していますが、ブログを書くときにもかなり重宝しています。
このような形で画像サイズを指定してアートボードを作成し、その枠の中に掲載したい画像を取り込んで書き出すだけでOKです。
複数の写真や画像をブログに乗せる場合でも効果バツグン
僕がブログに画像や写真を掲載するにあたって大変な作業だと思っているのが、複数の画像を用意するときです。
一枚ずつ画像を加工したりリサイズしたりダウンロードするのは地味に辛いんですよね・・！
そこで、先程紹介したPhotoshopのアートボード機能というのが活躍してくれます。
このアートボード機能を使うことで、１画面に対して複数の決まったサイズのアートボード（画像を作る領域）を形成してくれます。
プラスボタンを押すだけでいくつもの画像編集領域を増やすことができるので、一覧で直感的にブログで使用する画像を編集することが可能になります。
各画像編集領域に名前もつけられるので、自分でわかりやすく管理することができます。
※例えばブログ内のどの部分で活用する画像や写真なのかがわかるように番号や名前を振っておくなどが便利です。
複数画像一気に書き出せるのでひと手間で簡単に画像ダウンロードが出来ます。
これはめちゃくちゃ便利なのでおすすめします！！
この機能を使うことで僕の画像作成時間は圧倒的に削減出来ました。
ブログ記事作成の時短化成功です。
ダウンロードしたら画像をブログにアップして完了です。
ゴリゴリにおすすめしているPhotoshopですが、費用としてはかなりリーズナブルです。
Amazonで購入すると、年間で20,160円。月に換算すると、1680円になります。
ちなみに今ならヒューマンアカデミーが運用している『たのまな』という通信講座でAdobe製品を買うのがめちゃくちゃお得です。
Adobe CC というサブスクを購入するのですが、Photoshopはもちろん、WEB制作や動画編集でプロが使用しているAdobeソフトがセットで手にはいります。
- ① Illustrator
- ②Photoshop
- ③Dreamweaver
- ④InDesign
- ⑤After Effects
- ⑥Premiere Pro
- ⑦Adobe XD
- etc
しかもお値段、Adobeオンライントレーニング通信講座付きで、通常価格より最大49％OFFの36,346円！
Photoshop以外のデザインツールやWeb制作ソフトがバッチリ入っていてこの値段。
月割で計算すると、ひと月で3029円！
Adobe公式サイトで購入するとキャンペーン価格でも年間47760円(税抜)ですので、
もし購入を検討している人がいたら『たのまな』で購入するのが1番お得です。
Photoshopのみ必要であれば、Adobe公式サイトをみると「フォトプラン」というのがあるのでそちらは年間11760円(税抜)です。
月額9額980円で購入できるのでこちらを試してみてもいいと思います。
※たのまなのようにトレーニング講座等はありません。
ブログ用の画像は容量を圧縮して掲載
最後に、作成した画像は圧縮をかけて画像サイズ（容量）を小さくしましょう。
画像容量が軽くなると、ページ表示の高速化に繋がります。
ページの表示が早くなると、ユーザビリティといって読み手のストレスが減ります。
そうなると相対的にGoogleがサイトを評価してSEO順位で上位を狙う事が出来ます。
現時点でもそうなのですが、今後Googleはサイトスピードやサイトパフォーマンスの評価についてますます力を入れいてくことがすでに分かっていますので、少しでもサイトのパフォーマンスを上げるために画像圧縮を心がけましょう。
WordPressを使ったブログ運営をしているのであれば、EWWW Image Optimizerというプラグインがおすすめです。
プラグインの他にもTinypngというオンラインで画像圧縮できるツールがあるのでこちらもおすすめ！
ちなみに僕は、Tinypngで画像圧縮してサイズ容量を落としてから、WordPressプラグインで更に画像の軽量化を行っています。
画質も落とさずサイズ容量は軽くなっているので、効果ありです。
というわけで、今回はブログ記事の写真や画像を簡単にリサイズする方法を紹介しました。
結論はAdobePhotoshopを使うことでめちゃくちゃ効率的に画像のサイズを設定して書き出したり、複数画像の編集が可能になります。
オンラインサービスとの違いとして、自分のパソコンにインストールされるので、Canvaのようなオンラインサービスに比べてネットワーク通信の遅さや画像アップロード・ダウンロード等の時間もかかりません。
そして、Adobe製品を購入するなら、使い方講座つきで動画編集ソフトやIllustratorなどもセットでついてくる『たのまな』で購入するのをおすすめしています。
ぜひ、ブログやデザインでも活用してみてくださいね。
それではまた〜！＾＾
コメント