ムビログ

動画を中心にカメラ・撮影・編集について 紹介していきます。

はてなブログからTwitterシェア、最適なアイキャッチ画像サイズはこれだ!

アイキャッチ画像

事件は会議室で起きているんじゃない!Twitterで起きているんだ!!

ザブローです。こんにちは。
本日もお越し頂き、ありがとうございますm(_ _)m

 

※本日は、はてなブロガー向けの記事となります。

 

はてなブログアイキャッチがTwitterで見切れてしまった!そんな経験ありませんか?

アイキャッチ画像

本日は、そうならない為の最適な画像サイズはこれだ!というお話です。

 

 

アイキャッチ画像サイズ 見切れ現象

先日、マストドン記事を書いたのですが、問題はそこでおこりました。

※この正方形アイキャッチが見切れるのは、そこまで拡散に影響ないかな、と思っているので、見なかったことにします(笑)

 

マストドン記事の中で使用した画像はこちら。とくに何も考えず、サイズとレイアウトを決めていました。画像サイズ、横512pixel高さ234pixel。

アイキャッチ画像

 

はてなブログには、記事投稿と同時にTwitter・Facebookにシェアする機能があります。こちらですね。

アイキャッチ画像

 

この機能を使ってTwitterにシェアした際、問題は起こりました。その画像がこちら。

アイキャッチ画像

スマホから見ると、見事に画像が見切れてしまっています。画像付きツイートは効果的なのに、これでは効果半減、内容が伝わらない。アイキャッチとして生きていませんよね。

そして、ぼくの場合、昼12時過ぎに予約投稿し、夜の時間帯に手動でTwitterから再度、記事リンクをペーストし、ツイートさせてもらっています。1日に2度もツイートしてごめんなさいごめんなさい。

その画像がこちら。 

アイキャッチ画像

はてなブログシェア機能を使った際とは、また違った見切れ方をしました。なんじゃこりゃ。

 

Twitterの画像サイズについて

Twitterのタイムラインに表示される画像比率は仕様で決まっています。

PC 2:1
スマホ 16:9

です。

 

PCの場合

PCでは、タイムライン上の画像は、横504×高さ252の2:1で表示されます。画像サイズを測りました。※各環境によってサイズは違うかもしれません。ぼくの場合はこのサイズでした。

アイキャッチ画像

Twitterでは、最低505×252サイズとなるので、これ以上の画像サイズであれば、画像が劣化することなく綺麗に表示できます。

といってもそんなに2:1比率に合う画像の方が珍しいと思います。それ以外の比率だと、画像の上下が切り取られます。これも上下均等ではなく、任意で切られるようです。なるべく中央に情報が集まった画像を選びましょう。

このツイートをスマホからみると、このように左右が切れてしまいます。

アイキャッチ画像

 

スマホの場合

スマホの比率は、16:9と決まっています。
上のPC表示で縦が切られていないと仮定した場合、448×252となります。

アイキャッチ画像

スマホから見るとこちらです。

width=

素敵ですね。PCから見ても

アイキャッチ画像

うん。素敵ですね。

 

ということでTwitterからは、16:9サイズ画像を投稿するとPC・スマホで見切れることがありません。

さて、はてなブログからはどうでしょうか。

 

はてなブログから画像サイズ検証

 先ほどの、448×252で検証です。

はてなブログからシェア機能でツイート

はてなブログに画像を配置し、ブログ更新・シェア機能を使いました。PCから見ると

アイキャッチ画像

よしよし。素敵です。スマホから見ても、

アイキャッチ画像

うんうん。オッケーオッケー。

 

TwitterにURLリンクをペーストしてツイート

次にURLをペーストしてツイートした場合をPCから見ると、

アイキャッチ画像

むむっ!
スマホから見ると、

アイキャッチ画像

むむむっ!!!
多少ではありますが、上下が切れてしまいました。どういう影響なのでしょうか。。。

いろいろ調べてみましたが、google先生からも解決は見当たりませんでした。

 

アイキャッチ画像 最善策

現状での最善策は、はてなブログでアイキャッチ画像にしたい画像サイズは、

448×252(16:9)

となりました。これ以上のサイズでも16:9であれば構いません。

 

画像サイズを簡単に変更するには?

画像サイズが決まったのはいいですが、そんな都合のいい画像はありませんよね。

画像サイズを変更するには、photoshopなどの画像ソフトがあれば簡単ですが、それ以外の方は、こちらのサイトが大変便利です。

ブラウザ上で画像サイズ、トリミングなどが楽に出来ます。

 

画像サイズ変更ツール

 

1、立ち上げた画面

サイトにアクセスするとこのような画面になります。

アイキャッチ画像

 

2、画像を開く

赤枠の開くから任意の画像を開きます。

アイキャッチ画像

開くとこのようになりますね。あらカワイイ。タイプです。

アイキャッチ画像

 

3、画像のサイズ変更

こちらの画像のサイズ変更から、まずサイズを変更します。

アイキャッチ画像

目指したい448×252にしたいのですが、とある理由からWを449としてください。縦横比固定のチェックは入れたままです。勝手にHを決めてくれます。

アイキャッチ画像

 

4、画像のトリミング

つぎに画像のトリミングです。赤枠を選びます。

アイキャッチ画像

次にこのように画像をドラッグし、数値を見ながら448×252でOKするとトリミングします。ちょうどの数値にならない場合は、画面上の表示倍率を+で拡大すれば簡単に合わせれます。

画像サイズで449にしたのは、なぜか画像サイズを448にすると、トリミングでは447×252になってしまうからです。

アイキャッチ画像

 

5、画像を保存

最後に画像保存で完成です。

アイキャッチ画像

 

まとめ

いかがでしたでしょうか。

これで画像が見切れることなく、アイキャッチとして機能してくれますね。

ぜひ、お試しあれ!!

 

今日はここまで!

ご視聴ありがとうございました!!

 

よろしければ、フォローお願いします。

follow us in feedly

こんな記事も書いています。

 

スポンサーリンク