1番シェアされている記事はこちら

【ワードプレス初心者向け】軽いアイキャッチ画像の作り方!重たいブログとはさよなら!

わたしのブログはまだ重い!こんにちはミカコ(@mikakolife)です。

前回、「主婦の方、収益の出るブログを書きませんか?」という記事を書きました。

主婦の皆さん!収益の出るブログを書いてみませんか?初歩のやり方を伝授!

これはその続編的な記事です。
WordPressブログ初心者の方にも参考にしていただければ!

わたしのような初心者がWordPressでブログを作ろう!と思い立った時につまづいて、調べるのに時間がかかったこと、これだけあります。

  1. アイキャッチ画像ってどうやって作ればいいの?
    ミカコ
    なんとか作ったけど画像が重たいみたい…!
  2. 子テーマって何!
    ミカコ
    エッ!カスタマイズ、普通にしちゃだめだった?!
    【ワードプレス超絶初心者向け】子テーマとは?デザインのカスタマイズの前に必読!
  3. 吹き出し用アイコンの画像どうやって用意するの?
    ミカコ
    上手にイラストが描けない…
    【超絶初心者でも簡単】ワードプレス・吹き出しの作り方、アイコンイラストの用意
  4. バックアップってどうすれば…?
    ミカコ
    復元作業、難しそう!!
  5. セキュリティって、自分でやらないといけないんだ…?
    ミカコ
    ググったけど、難しそうなサイトばかりでよくわからないー

すいすい記事を書こう!と思っても、最初にやらなきゃいけないことがこんなにあって、その都度調べるのは、時間がかかります。

そこで、ただ検索しただけでは出てこない、Twitter内で諸先輩方に教えて頂いたことをまとめてお伝えしていきます!

今回はアイキャッチの作り方と、画像を軽くする方法についてです。

アイキャッチを作れるサイト・アプリ

多分、上級な方はIllustratorやPhotoshopを使っているかもしれませんが、初心者のわたしの場合でご紹介します。

PCで作る時canvaという、色々なデザインが作れるサイトがあります。

参考 Amazingly Simple Graphic Design Software – CanvaCanva

使い方はこちらのサイトが参考になります 

参考 おしゃれなアイキャッチ画像の作り方&デザインのコツ8つサルワカ | サルでも分かる図解説明マガジン
ミカコ
おしゃれなアイキャッチがすいすい作れるよ。

スマホやタブレットで直感的に作ることができるアプリもあります。

phontoというのですが、こちらのブログで詳しい説明とともに紹介されています 

参考 スマホで簡単、アイキャッチ画像の作り方。デザインのコツまで徹底解説!|セトさんドットコムセトさんドットコム

Phonto 写真文字入れ

Phonto 写真文字入れ
開発元:youthhr
無料
posted withアプリーチ

 

ミカコ
わたしはセトさんのブログを見てから、もっぱらphontoを使っているよ!

ベースとなる写真素材は、ぱくたそUnsplushからダウンロードしています。

そして、初心者のわたしは作ったアイキャッチ画像の重さについて知識が全然足りていないことが昨日発覚しました。

(もっと早く気付けばよかった…!)

画像を軽くするための工夫

まずは、わたしの初心者丸出しの恥ずかしいツイートからご覧ください。
(クリックすると、実際にリプ頂いている貴重なご意見も読めます)

ミカコ
画像が400KBしかないって書いたら…「それは大きい!」と総ツッコミがはいりましたー!知らなかった…!

沢山リプを頂きましたので、わかったことをまとめていきます。

①素材はサイズ変更!

写真素材サイトから素材をDLした時、サイズがかなり大きいので、横幅を500〜700pxにサイズ変更をする。

追記:テーマJINを使用の方は、横760×縦428px がキレイにハマるサイズだそうです!

画像のサイズ変更などが一発で出来る便利なサイト:iLobeIMG 、 画像を縮小する!

参考 iLoveIMG | 画像編集用オンラインツールiLoveIMG | 画像編集用オンラインツール 参考 画像を縮小する!画像を縮小する!

②pngよりjpgファイルのほうが小さくできる

アイキャッチ画像を作り終わったら、保存する時、写真ベースならjpgファイルで保存する。
透過画像を使っているなど、イラストメインのときはpng

jpgのほうがファイルが小さく圧縮される
のだそうです!

③画像を圧縮する

 

メディアライブラリにアップロードする前に、画像を圧縮!

②のサイトでもできますが、先輩方はパンダのサイト(Tiny PNG)で圧縮されているようです!

(圧縮技術がなんかいいのかもしれない!)
参考 TinyPNG – Compress PNG images while preserving transparency

追記
わたしは現在、パンダのプラグイン(下記参照)を使用しているため、このサイトはほとんど使わなくなりました。

④画像圧縮プラグインを併用する

④これは先に設定しておくのがおすすめ、画像圧縮プラグインを入れておく!

よく使われているのが「EWWW Image Optimizer」というプラグイン。

調べてみると、「TinyPNG」もプラグインがあって、これもアップロードする時に自動で圧縮され、「EWWW Image Optimizer」よりも小さくなるのだとか。

2019.10.19 追記
わたしは「EWWW Image Optimizer」を使っていましたが、パンダの「Compress JPEG & PNG image」に変えました。

前者で圧縮していたものが更に圧縮されたため、ブログ表示スピードが少し上がりました!

また、このプラグインを使用すればパンダのサイトで圧縮していた作業は省略できます。

画像のきれいさをとっても、パンダのプラグインのほうを全力でおすすめします!

※月に画像500枚までが無料です。

参考までに、プラグインの画面です 
上のプラグイン名をコピペして、プラグインの新規インストールで検索しましょう!
(プラグイン名は正しく入れないと、途中までのワードは検索結果に出てこないみたいなので注意です!)

参考リンク 

参考 WordPressの画像圧縮プラグインは「TinyPNG」が絶対おすすめ。 MORIAWASE(モリアワセ)

⑤画像の大きさの目安

最終的に、重さは30KB〜50KBが目安!

ミカコ
400KBで軽いと思ってたわたしって一体…

⑥今のブログの重さを把握して、改善しよう!

PageSpeedInsights というサイトで、自分のブログの表示速度が、モバイル・PC別にわかります。
ぜひ計測をおすすめします!

ミカコ
せっかく見に来てくれたのに、画像が重くて表示されずに閉じられちゃったら、悲しいですよね…!

ココさんのブログに詳しい使い方と改善方法が初心者向けに紹介されています。

わたしもここで計測しながら一気にプラグインで画像圧縮を試みて、32→68まで改善されましたが…まだ少しPC表示が重いようです。

今後アップする画像はこのやり方でやり、過去の重い画像はぼちぼち見つけたら軽くしていきます。

追記
その後、パンダのプラグインを導入しさらに画像を圧縮し、色々な工夫を試みたおかげで81までスピードを上げることが出来ました!
参考 【初心者向け】ブログの表示速度が遅い?画像を一括で軽くした結果 - ココブログ-新米パパの子育て奮闘記-ココブログ-新米パパの子育て奮闘記-

まとめ:画像を軽くしてブログの表示スピートをあげましょう

初心者には色々とつまづきの多いアイキャッチ画像ですが、Twitter内でお聞きしてみて、検索しただけではわからなかったことを学ぶことができました!

ミカコ
今まで、これでいいのかな?と迷いながらやっていたことが勘違いだらけでしたっ

同じように迷われていた初心者の方のお役にたてたら幸いです!

【おしまい】

主婦の皆さん!収益の出るブログを書いてみませんか?初歩のやり方を伝授! 【WordPress】超初心者ブロガーのTwitterの使い方。離れ小島で、アクセスの少なさに涙目にならないための方法! ブログ開設1週間の運営報告。