アメブロ【新プロフィール】カバー・ヘッダー画像のサイズ(大きさ)について考察してみた。

備忘録

2018年4月18日より、アメーバブログのプロフィールページのヘッダー画像が設定出来るようになっています。

そこで、パソコン、タブレット、スマートフォンなど、各端末からどの様に表示されるかをメモとして残しておきます。

画像作成の参考になれば幸いです。

スポンサーリンク

パソコン表示 1120×256px(適正サイズ)

PCから表示される画像サイズは、上記の通りとなっています。

横幅が1120pxに満たない場合は、1120pxまで引き伸ばされ、高さが256pxを超える場合は、上下の一部がカットされます。
ですので、まず「Illustrator」で、

1120×256pxの画像を作成

アメブロプロフィールテストヘッダー画像

実際に表示させてPCから見てみる

ame-prof-result-pc

上下左右ともにピッタリ収まっています。

これが適正・基準サイズとなります。

しかし、スマートフォンやタブレットで見みると一部が切れます。

スマートフォン(iPhone8 横幅375px)で見てみる

ame-prof-test-01

上下は問題ありませんが、左右がカットされているのが解ります。

タブレット(iPad 横幅768px)で見てみる

ipad768pxでテスト

横幅は問題ないですが、上下がカットされています。

アメブロの仕様なので、なんとも出来ません。

スマートフォン及びタブレットで表示される範囲を確かめる

新たなテスト用画像(1120×256px)を作ってみた

表示有効範囲テスト

先程の画像の上に、910×256pxのマスクをかけた状態。

パソコンでの表示確認(一応)

表示有効範囲テストPC

一応の確認です。

タブレット(横幅768px)で確認

エリア表示テストiPad

切り取られる範囲が、解りやすくなってきました。

表示されている画像(領域)サイズは、768×104pxとなっています。

スマートフォン(iPhone8 横幅375px)で確認

表示範囲テストiPhone8

かなり明確になってきましたが、注意が必要です。

スマートフォン表示を意識した画像作成の注意点

スマートフォンの機種によって表示範囲が変わります。

左右の切り取られる範囲の違いをご覧ください。

横幅414pxのスマホ(iPhone 6・6s・7・8 Plus・XR など)の場合

横幅414pxスマホ表示

横幅375pxのスマホ(iPhone6・6s・7・8・X・XS)の場合

横幅375pxのスマホ表示

横幅320pxのスマホ(iPhone5・5S・SE)の場合

横幅320pxのスマホ表示

上記の通り、端末によって表示範囲が変わります。

これが皆様を悩ませる要因ではないでしょうか^^;

では、どれを基準に画像を作成すれば良いか。

多くの方が利用されているスマホ画面サイズとは?

※判らないので、私が運営する あるサイトのデータを参考までにご紹介いたします。

2019年1月1日~5月26日までのアクセス状況

ユーザー数

ユーザー属性

ある程度アクセスがあり、ユーザー層もスマートフォンを所有している方が多いので、参考になるかと思います。

モバイル端末情報

sp-pixel-data

画面解像度(数字)を検索すると、機種を特定できます。

例えば、1位の「375×667 機種」と検索すると・・

iPhone 6、iPhone 6s、iPhone 7、iPhone 8 のどれか、という事になります。

ここを基準にしがちですが、第4位にご注目下さい。

「320×568」のディバイスからのアクセスもかなりあります。

こちらは、iPhone 5、iPhone 5s、iPhone 5c、iPhone SE のどれかになります。

つまり、上記のサイトにおいては、上記ユーザーへの配慮をするべきという事になります。

どこを基準とするかは、貴方のサイトに訪れるユーザーの端末次第という事になります。
※最小端末に合わせる事をおすすめします。

まとめ

適正な画像サイズは「1120×256px」

端末によって一部切り取られるので注意が必要。

端末画面が小さくなるほど、左右が多く切り取られる。

最小画面幅「320px」から見きれない様に作成するのがベスト。

タブレットも意識するなら、高さにも注意が必要。

iPad、iPad mini 縦画面で表示される画像領域は 768×104px

プレゼント

横幅375pxのスマホからアクセスされた時に表示される範囲の参考画像

クリックすると別窓で画像が開きます。

横幅320pxのスマホからアクセスされた時に表示される範囲の参考画像

横幅320px スマホ適切な画像

クリックすると別窓で画像が開きます。

iPad、iPadmini (縦画面 768px)からアクセスされた時に表示される範囲の参考画像

iPad mini768 から表示される範囲

クリックすると別窓で画像が開きます。

ダウンロードした画像を参考に、白枠内に表示したいテキストなどを納めてください。

上記の画像は「Illustrator」で作成しています。

お役に立てれば幸いです。

スポンサーリンク