• HOME
  • デザイン
  • アイキャッチ画像サイズの適正値。各SNSの適切なサイズを解説

アイキャッチ画像サイズの適正値。各SNSの適切なサイズを解説

アイキャッチ画像は、サイトを閲覧したときに最も目を引く大事な画像です。自身が運営するSNSのアイキャッチ画像サイズで迷っている人や、やったことのない人でも簡単にできる、アイキャッチ画像のサイズ適正についてお伝えしていきます。

副業で成長機会を増やしたい
エンジニア・デザイナーの方!

上場企業・スタートアップ・ベンチャーまで利用企業多数!副業するならOffers!

まずは60秒で副業を開始する!

WordPressでアイキャッチ画像を設定する

WordPressの『アイキャッチ画像』とは、サムネイル画像と同義で、興味関心を引き出すためのインパクトある画像を指します。 アイキャッチ画像は、記事ごとに設定した『ページを象徴する写真・イラスト・記号(ピクトグラム)』全般で、ブログの記事の冒頭や、記事一覧ページに配置されるため、クリック率を引き上げる重要な役割を担っています。 実際にWordPressでアイキャッチ画像を設定する方法をみていきましょう。

編集画面から追加

アイキャッチ画像の追加は非常に簡単です。WordPressにログインし、管理画面のメニューから『設定』→『メディア』をクリックします。 メディア設定画面では、『サムネイルのサイズ(150×150ピクセル)・中サイズ(300×300ピクセル)・大サイズ(1024×1024ピクセル)』と、3種類の画像サイズが指定できるようになっているため、ここから画像を追加しましょう。

サイズを変更したい場合

WordPressをインストールした直後の状態だと、サムネイルサイズ・中サイズ・大サイズが指定されています。 『サムネイルのサイズ(150×150ピクセル)』をクリックし、変更したい幅と高さを決めて『変更を保存』で、サイズ変更は完了です。

SNSに投稿する際に適切なサイズ

ブログ運営をしている人は、複数のSNSを開設・連携している場合が多いでしょう。しかし、ほとんどのSNSでは、アイキャッチ画像は自動的に、それぞれのSNSのサイズにリサイズされてしまいます。 Facebook・Twitter・はてなブックマークで、アイキャッチ画像を適切に表示させるためのサイズを解説していきます。

Facebookの画像サイズ

SNSには『OGP(Open Graph Protocol)』という、『ページタイトル・URL・概要・アイキャッチ画像』を、適切に表示させるシステムが組まれています。 『Facebook』でアイキャッチ画像を正しく表示するためには、パソコン表示では『横1200ピクセル×縦630ピクセル』が推奨されています。スマホでは『横470ピクセル×縦246ピクセル』で、基本的にパソコンサイズでの縮小表示です。 Facebookでは、縦長の画像は上下がカットされてしまうため、Facebook用のアイキャッチ画像を作成するときは『横縦比率1.91:1』のサイズが理想です。

Twitterの画像サイズ

『Twitter』では、小さい正方形と、大きめの長方形の2種類のサイズを選択できます。正方形は横縦比1:1 で、長方形は横縦比が2:1になる『横1024ピクセル×縦512ピクセル』のサイズが、パソコンでの適正サイズです。 Twitterでも縦長の画像は、上下部分がカットされます。スマホでの表示は、Facebookとほぼ同じ『横450ピクセル×縦253ピクセル』なので、基本的にFacebookと同じ画像使用で問題ないでしょう。

はてなブックマークの画像サイズ

『はてなブックマーク』は、アイキャッチ画像を投稿するという概念はなく、記事がホットエントリーされたときに画像が表示されるシステムです。 比率は『1.43:1』で、パソコンサイズでは『横400ピクセル×縦280ピクセル』、スマホでは『横198ピクセル×縦139ピクセル』です。 はてなブックマークでは、縦横比が合わなかった場合、上下左右がバランスよくカットされるのではなく、上下は下から、左右は右からカットされるため、不恰好な画像にならないよう、公開前にサイズを合わせておきましょう。

アイキャッチ画像作成で便利なサイト

実際にアイキャッチ画像を作成する手順を紹介します。画像や写真には著作権や肖像権があるので、サイトにある画像を無断で使用するのは違法行為です。 素材として販売している写真を購入したり、無料で使用可能な画像をダウンロードしたり、もちろん自分が撮影した写真なら、被写体の許可を得ている場合に限り、使用可能とされています。 それらの画像をSNSにアップするときに、知っておくと便利なサイトを紹介します。

OGP画像シミュレータで適正値を調べる

複数のSNSに適合する画像サイズを探すのは、かなり労力が必要です。FacebookのOGP画像のサイズなら、ぜひ『OGP画像シミュレータ』を試してみましょう。 自分が作成したいアイキャッチ画像を、ドラッグ&ドロップするだけで、Facebookで表示されるデザインをシミュレートできます。

OGP画像シミュレータ | og:image Simulator

写真ACでフリー素材を手に入れる

無料会員登録で全ての写真が使える『写真AC』は、商用利用も可能な画像素材が非常に多く、リンクやクレジットも表記不要なので、多くのSNSで利用されています。 写真ACのほかにも、『イラストAC』や『シルエットAC』などの無料素材サイトが展開されており、希望のアイキャッチ画像を探すのにおすすめです。

写真素材なら「写真AC」無料(フリー)ダウンロードOK

Canvaで画像を編集する

「フリー素材を、アイキャッチ画像として掲載するだけでは物足りない」という人には、オーストラリア発祥の『Canva(キャンバ)』を利用してみましょう。 Photoshopを扱うような専門知識がなくても、オリジナリティのあるデザインやレイアウトが作れ、サイズ変更はもちろん、文字入れも簡単にできます。

Canvaグラフィックデザインを無料で簡単作成

まとめ

アイキャッチ画像は、そのサイトや記事の印象を一瞬で左右する、とても大事な画像です。どんなにかっこよいデザインや写真を使っていても、サイズが不恰好にリサイズされていては台無しです。 それぞれのSNSに適した画像サイズを知って、アイキャッチ画像を自在に操り、インパクトのあるSNS運用を楽しみましょう。
この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

Rubyエンジニア2名の爆速採用に成功!2ヶ月で30倍の事業拡大を支える農業ITスタートアップの複業活用法

野菜や米、果物などの生産者と消費者を繋ぐオンライン直販所『食べチョク』を運営するビビッドガーデン。在宅時間をより充実させたい消費者が集まり、事業が急成長している。そこで課題となったのがエンジニア...

オンライン面談のみでテックリードクラスを複数採用!注目ベンチャー企業のwithコロナ時代に向けた採用術とは

日本で唯一のeKYC対応のデジタル身分証アプリを提供するTRUSTDOCK。今後、身分証がデジタルに置き換わるであろう不可逆な未来を実現するためにもエンジニアが必要だった。同社にはコロナ禍にも関...

mrubyを採用したソフトウェアを広げた第一人者・松本亮介が、面倒を感じながらもC言語を愛する理由とは?

世の中にはさまざまなプログラミング言語が存在します。そして、人によってはただならぬ愛着を持つ人も。そこで本企画では、このプログラミング言語にフォーカス。お気に入りのプログラミング言語のことを中心...

エンジニアとして、社会に新しい価値を提供し続けたい。カンカク志甫氏が考える本業と副業のバランス術

本業と数々の副業を両立させてきた志甫氏。副業を受ける決め手や本業と副業を両立させるコツ、これからのエンジニアのチャンスの掴み方について伺った。

デザイン

お金

採用・組織

グルメ