せっかくコンテンツに力を入れているのに、相変わらず検索順位が悪く、閲覧数もコンバージョン率も低いことに気づいていませんか?実はこれらの問題はサイトの画像サイズのせいである可能性が高いことを知っていますか?実際、サイトの画像サイズは、サイトの読み込み速度や検索エンジンの結果ページからの飛び出し率、ランキングに大きく影響します。多くのサイト構築者にとって適切な画像をサイトに載せるのは大変な作業です。大きすぎる画像(最適化されていない、元の画像が5000pxの大きさの画像)は、ウェブサイトのコンテンツの読み込み速度を低下させ、ユーザー体験に影響を与えるだけでなく、SEO戦略にも悪影響を及ぼしますが、小さすぎる画像は見た目にも良くありません。ご心配なく、この記事では、ウェブサイトの画像サイズのガイドラインをお届けします。
記事の概要：
1.なぜウェブサイトの画像サイズを選ぶのか?
2.よく使われるウェブサイトの画像サイズ
3.どのように最適なウェブサイトの画像サイズを選ぶのか？
4.まとめ
1. なぜウェブサイトの画像サイズを選ぶのか?
最適化されていない画像は、サイトがロードするのに時間がかかります。ユーザーの体験に直接影響を与えるだけでなく、ウェブサイトの検索エンジンでのランキングも悪くなり、トラフィックやコンバージョン率も当然悪くなります。逆に、状況に応じて適切な割合で写真を最適化してからサイトに入れると、次のようなメリットが得られます。
読み込み速度アップ
Googleの研究によると、ウェブページの読み込み時間が5秒を超えると、訪問者はそのページの閲覧を放棄する可能性が90%高くなるという。訪問者の流出を防ぐには、画像のサイズを小さくしたりすることで、ウェブサイトのページの読み込み速度を向上させることができます。
ユーザー体験
高品質で適切なサイズの画像を使用すれば、訪問者はウェブサイトを閲覧する際により良い体験を得ることができます。ですから、ウェブサイトの画像サイズを細かく計画して、ウェブサイトが煩雑に見えないようにしましょう。最適化された画像の読み込み速度も速くなります。訪問者にスムーズな閲覧体験を提供し、ウェブサイトでより多くの時間を費やし、コンテンツに集中することを促すことができます。
検索エンジンの最適化
ウェブサイトの読み込みがスムーズであればあるほど、検索エンジンでのランクが上がります。覚えておいて!デスクトップやスマートフォンの検索結果ページでも、最適化された画像を持つウェブページは、最適化されていないものよりもずっと高速で読み込み可能です。
アクティブユーザー数と転化率
より速いウェブサイトのローディング速度は、ウェブサイトへの検索エンジンの関心を高め、より多くの訪問者をウェブサイトに呼び込み、ウェブサイトの露出とコンバージョン率を増加させます。
2.よく使われるウェブサイトの画像サイズ
背景画像
Strikinglyの背景写真の編集ツールは、ウェブサイトにさまざまな画面サイズに合わせた画像を追加することを目的としています。背景画像をすべてのデバイスの画面に最適な状態で表示するために、1600 × 900ピクセルの画像を使用することをお勧めします。背景画像を調整または揃えたい場合は、画面全体を塗り替えるようにストレッチすることができます(これはシステムのデフォルト設定でもあり、背景画像を調整するのに最適です)。背景画像のコンテンツが左右の枠に近づきすぎないことを確認して、画像内の重要なコンテンツがアクションセグメントのユーザのデバイスに完全に表示されないようにしてください。次に、平積みを選択することもできます。つまり、絵全体を表示しますが、部分を切り取らなく、絵をブロックの中心に配置します。注意すべきは、絵の周りに余白ができることです。
背景画像以外にも、サイトに合った画像サイズがたくさんありますので、一緒に見てみましょう。
Strikinglyの商品から受けた画像
全幅の写真
最適な効果を得るために、幅は少なくとも700画素で、高さは影響しません。
幅半写真
ヘッドラインに配置する半幅の写真は少なくとも700画素で、最高品質を得るために、高さは影響しません。
1/3幅の写真
最適な品質の1/3幅の画像を得るためには、高さに影響のない少なくとも480画素を使用することが推奨されています。
1/4幅の写真
最適な品質の1/4幅の画像を得るためには、その幅は少なくとも360画素であり、高さは影響を与えません。
Strikinglyの商品から受けた画像
小さなアイコンまたはロゴ
幅は少なくとも100画素。
ギャラリー写真
どのサイズもギャラリー画像に対応しており,訪問者はギャラリーをクリックするだけで全画像を見ることができます。
3.どのように最適なウェブサイトの画像サイズを選ぶのか？
ページレイアウトに応じてウェブサイトの画像サイズを選択しましょう。多くの場合、画像は最適なウェブサイトの性能を得るためにフレームサイズに可能な限り適応する必要があります。例えば、背景画像は通常、より大きいになります。ブログ写真は中ぐらいの大きさ;サムネイルがもっと小さくなるなどです。
まず写真を置くためのウェブサイトの幅を確認してください。マウスの右ボタンをクリックして「ページスケール(Inspect)」ブラウザの拡張プログラムを使って関連情報を取得してください。
次に、ポップアップツールバーで左上の要素選択器をクリックして、興味のあるウェブサイトの画像やコンテンツ部分にマウスを止めて、表示された情報ボックスに画像やコンテンツのサイズが表示されます。
Strikinglyのユーザーのサイトから受けた画像
注意:ウェブサイトの最高品質の視覚効果を得るには、ウェブサイトでワイド画像の表示幅は2560画素(27''および30''ディスプレイの一般的な解像度の幅)をお勧めします。縦横の高さを希望の高さに合わせることができます。例えば、ブライダル写真サイトでよく見られる全幅の画像は、写真の元のアスペクト比のままですが、他のサイトでは、ページ全体を覆う幅が小さいが高さが小さい画像(アスペクト比は約3:1)を使用するのが一般的です。以上が撮影サイトからの「パノラマ」の画像例です。
Strikinglyのユーザーのサイトから受けた画像
背景と全モデルの画像を除いて,ウェブサイトの画像サイズはページの全幅を占める必要はありません。ブログサイトの画像サイズはどうすればいいのか気になるかもしれませんが、他のサイトと同じような選び方なのでしょうか?ご心配なく、ブログの記事に適した画像サイズをお勧めします。
Strikinglyのユーザーのサイトから受けた画像
ブログコンテンツをユーザーが手動でスケーリングする必要がない場合は、列またはコンテンツ領域の幅に応じて画像のサイズを調整しましょう。コンテンツ領域の実際の幅は、上記の「ページスケール(Inspect)」手法を使用してテキストの段落を測定することで決定することができます。
Strikinglyのユーザーのサイトから受けた画像
これらの情報(例えば568画素)があれば、今ではRetinaディスプレイ(568画素×2=1650画素)に合わせてサイズを2倍にすることができます。そして、ウェブサイトのトピックと盗難のリスクに応じて、この数を、より合理的な最も長い辺の1200画素まで減らすことができます(したがって、水平画像は1200画素の幅が広く、垂直画像は1200画素の高さになります。）サムネイルとして使用されるより小さい写真(展開する必要はない)も、同じ調整プロセスに従います。
4.まとめ
PhotoShelterやSmugMugなどの写真アーカイブサービスには、このウェブサイトの画像サイズガイドが必ずしも適しているわけではありません。なぜなら、サイトの必要に応じて元の高解像度ファイルを低解像度サムネイルにする設定や対策が組み込まれているからです。しかし、Strikinglyのような画像編集ツールを内蔵した専門のウェブホスティングプラットフォームがあれば、このウェブページサイズのガイドラインに従ってウェブページサイズの編集を行うことができます。適切な画像を選択することは、魅力的なサイトを立ち上げるための重要な要素の一つです。この記事が関連する知識と助けを提供できることを願っています。
Strikinglyは、豊富で精巧なテンプレートを提供しています。今すぐStrikinglyに登録して、14日間の有料コースを無料でお試しいただけます!
ご質問などございましたら、support@strikingly.comの方までお問い合わせください。
