amazonタイムセール祭り9/20~9/23まで!参戦前に準備しよう!今回の目玉商品は?

ブログ画像のサイズから圧縮まで!初心者が知っておきたい情報まとめ

ブログ運営
スポンサーリンク

今回はブログをはじめた2ヶ月前の自分に教えたい、ブログ画像のアレコレについてまとめていきます。

 

超初心者だったわたしは、ブログの画像に関して全く知識がありませんでした。

 

様々な情報を調べて試行錯誤してきた中で、やっとたどりついた画像サイズ・圧縮方法・アイキャッチ作成方法挿入画像についてまで。使えるツールや身につけた知識を大放出します。

 

「ブログを始めるときにまとめて知りたかった画像関係情報を1ページに詰め込みました。

どなたかの参考になれば幸いです。

 

アイキャッチ画像

アイを

キャッチ!!

記事の冒頭やサムネイルのアイキャッチ画像は、読者の「目」つまり視線をとらえるために必要な要素です。

文字しかない読み物よりも、画像が入っている方が読みやすく、ビジュアル化されているためイメージが伝わりやすいのです。

またSNSでシェアする際にも、画像があると目を引いて気になりますよね。

この画像で、記事が見られる確率が変わってくるので設定しておきましょう。

 

アイキャッチの縦横比(アスペクト比)とサイズ

ちまたに出回っている画像は、縦横の長さがちゃんと考えられているんです。

昔からの定番の縦横比率(アスペクト比)はこんな感じです。

ワイド【9:16, 1:1.777..】
黄金比【約5:8, 1:1.618..】
白銀比【約5:7, 1:1.414..】
正方形【1:1】
スタンダード【3:4, 1:1.333..】

こちらのアスペクト比計算ツールで定番の比率をチェックすることができます。

アスペクト比計算ツール

赤枠に横幅サイズを入れると自動で計算されます。

 

 

ブログによって推奨サイズが違う

利用しているブログやWordPressテーマによっては、推奨サイズが決められている場合もあるので公式サイトやテーマ作成者のサイトなどで確認してみてください。

たとえば、このブログはWordPressで作成し、無料テーマのcocoonを利用しています。(2018年12月現在)

 

cocoonでは、デフォルトのメインカラムの横幅が800px。関連記事やブログカードに使われるサムネイル画像のデフォルト縦横比が16:9です。

 

変更可能ですが、私はデフォルトサイズに合わせて16:9になるように【横800px:縦450px】のアイキャッチサイズに落ち着きました。

 

また、有料テーマのJINでは【横760px:縦428pxの16:9】がキレイに表示されると案内しています。

 

なぜ、16:9が多いのかというとYouTube等でも利用されている比率のため、ネットとの親和性が高いと言われているからです。

 

SNSでシェアするなら1:1.91

Facebook や Twitter でシェアされた時に表示される画像は、1:1.91です。どちらも同じ比率で揃えているようです。

これを受けてnoteでも、見出し画像比率が1:1.91に変更されました。↓(これがブログカードです。外部サイトに飛びます)

見出し画像の比率を変更いたしました|note公式|note
いつもnoteをご利用いただき、ありがとうございます。 2018年6月14日 より、記事を作成する際に設定する見出し画像の表示比率を変更し、TwitterやFacebookでシェアした際に表示されるカードの画像サイズと互換性がある比率となりました。 変更前までに投稿された記事の見出し画像の比率はかわりません。20...

1.91:1 = 横1200 px: 縦628px などですね。

調べてみると先ほどご紹介した16:9でもSNSとの相性は悪くないようです。結構すすめてる人がいます。

画像サイズを変更(リサイズ)するときにも、16:9の方が世間に浸透しているので、ツールがサイズに適応していたりと便利な気がします。

 

ちなみにInstagram画像の推奨サイズは正方形1,080 × 1,080px。

正方形も並ぶとかわいいです。

 

Facebookなどを多用しているなら、ブログのアイキャッチも縦横比 1:1.91 がいいかもしれません。

 

▼アイキャッチ画像サイズチェッカー

アイキャッチ画像サイズチェッカー|TwitterやFacebookでシェアされた時の表示を確認
TwitterやFacebookでシェアされたときにアイキャッチ画像がどう表示されるかをまとめて確認できるツールです。はてなブログやライブドアブログにも対応。

TwitterやFacebookなどでシェアされたときに、アイキャッチ(サムネイル画像)がどのように表示されるかをチェックすることができる便利なサイトです。

小まとめ

推奨サイズや好みのサイトデザイン、SNSのことなど総合的に考えてサイズを決めてください。あまりに大きい画像だとブログが重くなるので、その辺りも頭に入れておきましょう。

 

画像素材は無料でゲット

ブログや商用利用可のフリー画像サイトはたくさんあります。

定番・おしゃれ・かわいい…などサイトによって特色があるので探すのが楽しくて、いつまでも画像をあさっている…なんてことも。

選ぶ画像の傾向で、ブログの雰囲気も変わってきます。

画像選びはサイトデザインに関わってくる、けっこう重要な要素ですよね。

いくつかフリー画像サイトをご紹介しますので、自分の好きなサイトを見つけてください。

 

定番と思われる画像サイト

写真AC

会員登録者数が圧倒的な日本の定番画像サイト。

写真素材なら「写真AC」無料(フリー)ダウンロードOK
無料写真素材を提供する「写真AC」のフリー写真素材は、個人、商用を問わず無料でお使いいただけます。クレジット表記やリンクは一切不要です。Web、DTP、動画などの写真素材としてお使いください。

ぱくたそ

この人見たことありませんか。日本一インターネットで顔写真が使われている(自称)、ぱくたそのフリー素材モデルさんです。

無料の写真素材はフリー素材のぱくたそ
ぱくたそは人物(男性・女性)や風景の写真、背景に使いやすいテクスチャ素材など、すべて無料でダウンロードができるフリー素材(フリ素)サイトです。あらゆるシーンの写真素材を日々更新しています。24915枚の写真を配布中。

 

Pixabay

日本語にも対応していますが、世界中で使われているサイトなので英単語で検索するとたくさんヒットします。

1 million+ Stunning Free Images to Use Anywhere - Pixabay
Find your perfect free image or video to download and use for anything. ✓ Free for commercial use ✓ No attribution required ✓ High quality images.

 

おしゃれ&ハイセンス画像サイト

girlydrop

かわいい。女の子らしい。女性向けのサイトにはぴったりな画像サイト。

おしゃれなフリー写真素材 | GIRLY DROP(ガーリードロップ)
GIRLY DROP(ガーリードロップ)は、眺めるだけで、キュンとする♡女の子による女の子な無料(フリー)写真画像サイトです。通称「がりどろ」または「ガリドロ」☆商用利用可能で会員登録やクレジットは不要!写真はオシャレな加工済みです♫

 

以下、海外サイト

unsplash

海外サイトですが、よくブロガーが紹介しているセンスの良い画像サイトです。素敵。

Beautiful Free Images & Pictures | Unsplash
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

picjumbo

ここも、おしゃれでセンス良しの画像が見つかります。

Free Stock Photos & Images • picjumbo
Download beautiful free photos and images from one of the best free stock photo sites. ❤️ Thousands of 100% royalty free stock images with no watermark.

gratisography

ちょっと個性的でユニーク、シュールな画像もある海外画像サイト

Gratisography - Free High-Resolution Photos
Hundreds of free high-resolution pictures you can use on your personal and commercial projects, free of copyright restrictions. New photos added every week!

イラスト画像サイト

イラストAC

写真ACのイラスト版。これも定番でしょう。

無料イラストなら「イラストAC」
イラストACは、無料イラスト・アート・年賀状・年賀・画像などの素材がフリー。AI・EPS形式の素材も無料でダウンロードOK!商用利用、編集もOK。かわいいフリーイラストも豊富!

 

いらすとや

ぜったい見たことのある絵柄。ネット上だけじゃなく、日常生活でも目にするくらい定番のイラストサイト。

かわいいフリー素材集
いらすとやは季節のイベント・動物・子供などのかわいいイラストが沢山見つかるフリー素材サイトです。

 

フラットアイコンデザイン

あわい色合いでかわいい。最近よく見るトレンドイラストです。

FLAT ICON DESIGN -フラットアイコンデザイン-
フラットデザインに最適!WEBサイトやDTPですぐ使える商用利用可能なフラットアイコン素材がフリー(無料)ダウンロードできるサイト『FLAT ICON DESIGN』

 

Town illust

こちらも上のデザインに似ているテイスト。街と建物に特化しています。

街、建物系イラスト専門サイト「TOWN illust」 – 無料で使える街、建物のイラスト素材サイト
ビル、マンションや観光地などのベクター素材や街並みのイラストを無料で配布するデザインサイト

 

ヒューマンピクトグラム2.0

ピクトグラムって使い勝手がいいですよね。

human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)
人間ピクトグラム素材のギャラリー

 

 

JPEG(JPG)とPNGの違い

好みのフリー画像サイトは見つかったでしょうか。

いいな!と思った画像をダウンロードするときに、JPEG(JPG)で保存するかPNGで保存するか保存形式を選べる場合があります。

いったい何が違うのか。ざっくりとした説明しかできませんがイラストなどはPNG、複雑な画像(写真など)はJPEGが向いていると言われています。

場合にもよりますがPNGの方が画質が良く、JPEGの方が圧縮するときに圧縮率が高いとか。

私は、保存形式を選べるならファイルサイズを軽くしたいのでJPEGで保存しています。

 

小まとめ

画像サイトをたくさん紹介しましたが、まだまだフリー素材のサイトはあります。満足しなかった人は探せばもっとありますが、これだけ知っていれば十分に事足りますよ。

JPEG(JPG)・PNGも選べないのなら保存可能な形式でダウンロードすればOK!そんなに気にする必要はありません。

 

画像を加工編集する

最近のブログでは、アイキャッチに文字入れ加工がしてありパッと目を引きますよね。

IllustratorやPhotoshopのような画像編集ソフトがなくても無料でサクッときれいなアイキャッチが作れます

 

Phot Scape(フォトスケープ)

フリー画像をダウンロードすると、大きすぎることが多いですよね。

Photoscape
簡単に操作できる無料画像編集ソフト お気に入り画像をポップに加工・修正して楽しめる

このフリーソフトは、初心者にもわかりやすい画像編集ソフトです。

リサイズや指定サイズでの切り取り(トリミング)などなど他にも多機能なので、スクリーンショットをとるときや説明画像をつくるときに多用しています。

使い方の解説↓

解説ブログの画像加工に!フリーソフト「フォトスケープ」が有能すぎ
...

 

フォトスケープは画像編集後の保存時に、Exif情報を削除してくれるのが気に入っています。※保存するときに「Exif情報を保持する」のチェックを外してください。

Exif(イグジフ)には、撮影日時やカメラ(スマホ)の機種・場合によっては位置情報などが記録されています。個人情報を守るためにもスマホで撮った画像などをサイトに載せるときはExif情報を削除することが推奨されています。一部のブログやtwitterへの画像投稿ならば、自動的に削除される情報です。しかし、ワードプレスでブログを作るのであればExif情報を載せないように気をつけてください。

とにかくPhot Scape(フォトスケープ)は、感覚的で使いやすいです。

このツールに関しては使い方をググったことがありません。初見でもなんとなく使いこなせました。おそらく同様の画像編集ツールとしてGIMPも有名です。

 

Phot Scape(フォトスケープ)でも、十分アイキャッチ画像を作れます。作っていたのですが日本語フォントが少なくて、アイキャッチ画像作成は次に紹介するCanvaにくら替えしました。

 

Canva(キャンバ)

Amazingly Simple Graphic Design Software – Canva
Create beautiful designs with your team. Use Canva's drag-and-drop feature and layouts to design, share and print business cards, logos, presentations and more.

サイト上で画像の編集ができます。

もう、こればかり使っています。

これも感覚的に使いやすく、中心線やバランスのよいポイントをビビビッと教えてくれるので、センスがなくとも整った画像ができあがります。

使い方はこちら↓

 

ibisPaint X(アイビスペイントX)

こちらは無料のお絵かきアプリです。

▽ ibisPaint X[iOS:無料版]

‎アイビスペイントX
‎シリーズ4,500万ダウンロードの大人気の本格お絵かきアプリです!2,500点以上の素材!1,000種類以上のフォント!312種のブラシ!51本の画像加工用フィルター!46種のスクリーントーン!27種のレイヤーブレンドモード!作画工程動画機能!手振れ補正機能!定規機能!集中線定規!対称定規!クリッピングマスク! *...

▽ ibisPaint X[Android:無料版]

ibis Paint X - Apps on Google Play
ibis Paint X is a popular and versatile drawing app downloaded more than 45 million times in total as a series, over 2500 materials, over 700 fonts, which provi...

 

お絵かき好きには有名なアプリ。高機能で、なんでもできます。ラインスタンプを作ることも、アイキャッチやロゴも作ることができます。使いこなすには勉強が必要かもしれません。

なんといっても、透過PNG(背景が透明な形式)で保存・ダウンロードができるので、ロゴ・キャラクターを作りたい人におすすめのアプリです。

先に紹介したcanvaやPhot Scape(フォトスケープ)は、透過PNGで保存できないのです。(canvaは有料会員なら可能)

 

この吹き出しの絵は、イラストACのフリー画像をアイビスペイントで加工したものですよ。

 

使えるフォントも色々あります!

 

画像サイズを一括変更する

わたしは主に画像編集のときに合わせてサイズ調整をしていますが、画像を一気に何枚もリサイズできる便利なツールもあります。

 

Easy Picture Resizer

画像サイズを一括でリサイズする時短ツールEasy Picture Resizer(イージーピクチャーリサイザー)。

複数画像ファイルを一括縮小できるソフト「Easy Picture Resizer」
複数画像ファイルを一括縮小できるソフト「Easy Picture Resizer」の評価とレビュー、ダウンロードや使い方を解説します。画像ファイルをドラッグ&ドロップでリストに登録し、「スタート」ボタンをクリックすると指定した横幅に画像を一括縮小できます。縦幅は横幅が縮小された比率と同じ比率で縮小さ…

 

一括リサイズのツールは、たいてい画像の縦横の比率を保持してリサイズする仕様になっています。

Easy Picture Resizerも同様です。サイズ指定(横幅だけを選ぶ)と一括リサイズしてくれます。

フリーソフトなので、ダウンロードさえすれば無料で使えます。

 

画像の横幅だけ統一できたらいいから一気にリサイズしたい、という方にオススメです。

 

画像を圧縮して軽くしよう

画像をアップする前に、その画像がどのくらいの容量なのか見てみてください。

美しい写真の画像だと、けっこう重たいと思います。数百KBとかあるんじゃないですか。圧縮した方がいいですよ。上の猫ちゃん写真は15KBまで圧縮されました。

重たい画像をサイトに使っていると、積み重なってどんどん激重サイトになってしまいます

 

Googleは、サイトの評価にページ速度も重要だと見ていますから、Google様に嫌われないように対策しましょう。

 

画像圧縮プラグイン

ワードプレスの利用者は画像をアップロードしたら、勝手に圧縮してくれるプラグインを入れているかと思います。

 

EWWW Image Optimizer

どこで調べてもオススメされている画像圧縮プラグインですね。いまだに読み方がわかりませんが、とても有名です。

 

TinyPNG

こちらの方が圧縮率が高いと聞いて、私はこのtinypng利用しています。かなりギュギュギュっと圧縮してくれております。

 

アップロード前に画像を圧縮する

画像をアップロードする前にも、簡単に圧縮をしてくれるサイトやツールがあります。

 

TinyPNG

先ほど紹介したプラグインと同じところですが、これはプラグインではなくサイトです。このサイトにアクセスして、画像をドラックアンドドロップで圧縮できます。

TinyPNG – Compress PNG images while preserving transparency
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

 

JPEGmini

こちらはパソコンにダウンロードして使う無料ツールです。圧縮できるのはJPEG形式のみ。パソコン上で画像をドラックアンドドロップするだけ一瞬で圧縮してくれます。私はこちらを利用しています。

デジカメ、スマートフォンで撮りためた写真のファイルサイズを高品質のまま最大80%縮小するソフト「JPEGmini」
デジカメ、スマートフォンで撮りためた写真のファイルサイズを高品質のまま最大80%縮小するソフト「JPEGmini」の評価とレビュー、ダウンロードや使い方を解説します。写真ファイル(JPG)の見た目がほとんど変わらないままにファイルサイズを最大で80%も小さくできるソフトです。ディスクの空き容量で困っ…

 

私はアップする前と後(プラグイン)で二重に圧縮しているので、字の小さい説明画像は画質が落ちて字が読みにくくなります。圧縮のし過ぎも考えものですね。

字の小さい画像は、アップ前の圧縮が不要だと感じている今日この頃です。

 

まとめ

  1. 画像の縦横比とサイズ
  2. フリーの画像サイトまとめ
  3. おすすめ画像編集用ツール
  4. 使える画像圧縮用ツール

今回はこんな感じで画像のイロハをご紹介してきました。

 

今回、紹介したツールがあればサイトロゴアイキャッチ画像説明画像独自キャラクターもなんだって作れてしまうと思います。

 

すべて無料なのに使い勝手も良くて、本当に便利な世の中ですよ。

 

この記事は、2ヶ月前の私が目にしていたら楽だっただろうなと思えるような記事を目指して書きました。

 

同じようなブログ初心者へ届けっ!!

 

 

最後までお読みいただき、ありがとうございました。