企業ウェブサイトの画像サイズには統一された基準はありませんが、適切なサイズを選ぶことでページの読み込みが速くなり、表示が鮮明になります。また、画像が大きすぎてサイト速度が低下したり、小さすぎてぼやけるのを防げます。簡単に言えば、画像サイズの実用的な原則は、ページ内での実際の表示サイズと用途に基づいて設定することであり、すべての場所で同じサイズを使用する必要はありません。以下に、いくつかの一般的なシナリオから具体的なアドバイスを提供します。
バナーとファーストビューの大画像
バナーは通常、ページ幅の100%で表示され、高さは400pxから600pxの間です。幅は1920pxで作成することをお勧めします。多くのディスプレイがワイドスクリーン比率であるため、両端に余白ができたり、引き伸ばされて歪むのを防げます。高さはコンテンツに応じて決定します。ファーストビューでより多くの情報を表示したい場合は、高さを500px程度に抑え、シンプルなスタイルの場合は300〜400pxでも構いません。ファイルサイズについては、バナー画像は200KB以内に抑え、画質が許せば100〜150KBに圧縮することを目指します。
製品紹介と事例画像
製品画像は通常、グリッド形式で並べられ、1行に2〜4枚表示されます。一般的な画像サイズは800x800pxまたは600x600pxで、拡大縮小時に正方形の比率を保ち、さまざまなデバイスで鮮明に表示できます。長方形の製品画像（ノートパソコンやスマートフォンなど）の場合は、幅600pxを推奨し、高さは比率に応じて自動調整します。複数の製品画像は統一された比率を保つ必要があります。そうしないと、リストページが不揃いに見えます。画像サイズは100KB以内に抑え、サムネイルはさらに小さく、50KB程度にします。
チーム紹介とアバター
チーム写真は通常、円形または正方形にトリミングされ、幅300〜400pxで十分です。バストショットやポートレートの場合は、アスペクト比4:3または3:2を推奨し、幅400〜500pxにします。アバター画像は大きくする必要はなく、200KB以下で通常十分です。すべてのチームメンバーの写真の比率とサイズはできるだけ統一し、ページがよりプロフェッショナルに見えるようにします。
記事の添え画像と本文の挿絵
本文中の挿絵は、通常、コンテンツ領域の幅の100%を超えず、800px以内に設定します。全幅のテキストと画像のレイアウトの場合は、画像の幅を1200pxに設定できますが、高さは800pxを超えないようにし、スクロール時に画像がスペースを取りすぎないようにします。ファイルサイズは80KB以下を推奨し、記事ページの読み込み速度を速く保ちます。グラフやスクリーンショットなど情報密度の高い画像については、鮮明度を適度に高めることができますが、200KB以内に抑えます。
アイコンと装飾要素
アイコンは通常SVG形式を使用し、固定ピクセルサイズは関係ありません。PNGを使用する必要がある場合は、実際の表示サイズの2倍で作成することをお勧めします。例えば、表示サイズが24x24pxの場合、48x48pxで作成し、Retinaディスプレイで鮮明に表示されるようにします。装飾的な背景画像やテクスチャは、サイズを大きくできますが、ファイルサイズは制御し、通常はJPEG形式を使用して80%の品質に圧縮します。
画像最適化の一般的なアドバイス
どの種類の画像でも、視覚品質を保証した上で圧縮することをお勧めします。オンラインツールや画像処理ソフトウェアを使用して、画像をWeb用形式でエクスポートできます。JPEGは写真に適し、PNGは透明な背景を持つアイコンやグラフィックに適し、WebP形式は互換性が良好な場合に使用でき、ファイルサイズをさらに削減できます。また、各画像に適切なalt属性を追加することで、検索エンジンが画像コンテンツを理解するのに役立ちますが、キーワードを詰め込みすぎないようにします。
要するに、企業ウェブサイトの画像サイズは複雑ではありません。核となるのは、実際の表示サイズに合わせ、ファイルサイズを制御し、比率を統一することです。ページレイアウトとデバイス適応に基づいて適切なサイズを選択すれば、美観とパフォーマンスを両立できます。現在リニューアル中または新しいサイトを構築中の場合は、まず各配置のデザイン案を確定し、上記の参考に従って画像サイズを設定することで、後で何度も調整する手間を省けます。
