メニュー 閉じる

画像サイズについて

Last Updated on

スマホ対応時代の画像準備

出来る限り大きいサイズの画像をご準備ください。

サイトレイアウト

ホームページでよく見かけるページデザインは、右側にサイドバーを配した2カラム構成のもの。ヘッダー(上部のメニューがある部分)下に大きくカバー画像があって、下部がメインコンテンツエリアとサイドバーに分割された配置です。弊社のサイトも記事ページはこのレイアウトとなります。今お読みになっている部分がメインコンテンツエリア(コンテンツエリア)、このエリアの右部分がサイドバーです。

適正サイズ

このサイトの場合、ヘッダー下のトップ画像(カバー画像)は『横 2,000ピクセル(px)程度』必要。コンテンツエリアいっぱいに1枚で表示される画像は『横 1,000px』あれば画質の良い状態で表示されます。コンテンツエリアに数個並んで表示される画像は長方形の物なら『800px × 600px』、正方形なら『800px×800px』くらいの画像であれば問題ありません。
今お読みになっているページは、『横 1,000px』のアイキャッチ画像がカバー画像としても自動表示されているので、少し大きさ(ピクセル)が足りないことがわかると思います。

画像の形

画像の説明|レカム名古屋

フリーの画像を探す場合、使用するエリアの画像の形に近いものをお探しください。トップ画像の場合『2,000px × 500px』くらいの画像を使っていますので、対象物が横に広がって写った画像をご用意ください。
例えばワンちゃんがおすわりしている画像をトップ画像に使うと首から上だけを使う形になります。説明画像の場合、正方形や正方形に近い長方形には使えますが、かなりの横長で使う画像としては不適切だとわかります。

フリー画像

サイトで見つけたフリー画像を使用する場合は、見つけた画像をダウンロードせず、その画像がダウンロードできるURLをお知らせください。画像のみではフリーかどうかの判断が付きにくいため、弊社にてダウンロードいたします。またログインが必要な会員制のサイトからダウンロードした際はその旨お知らせください。下に弊社でも利用するフリー画像のサイトをリンクします。

  • Pexels 海外のフリー画像サイトです。画像検索には英語力が必要なので英語の勉強にもなります(笑)
  • ぱくたそ 日本人画像の検索などに役立ちます。

写真撮影

電話機の写真|レカム名古屋

最近のスマホは十分な画質を持っているので、構図だけ気を付ければ良いと思います。カバー画像用の画像の場合は上記のワンちゃんの画像説明を参考に横に広く撮影してください。説明画像は iPhone X を横にして、ポートレートモードで撮影しました。
ポートレートモードは2つのレンズを利用して背景をぼかす機能です。元の画像サイズは『2,049px × 1,537px』ありましたが、『1,000px × 800px』に切り取ってあります。この画像をカバー画像に使用するならもう少し引きで撮った方が良いかもしれません。

以上、画像準備についてのご説明でした。

関連記事