記載するサイズは、あくまで推奨ですので、厳密に守る必要はありません。
但しその場合、画像が見切れる、荒くなる、サイトの読み込みが遅くなるなどの問題が生じる可能性があります。
サイトの見え方は閲覧する端末によって異なるため、実際に画像を当てはめた上でご確認ください。
目次
解像度について
画像データの画質は、解像度（dpi）とピクセル（pixel、px）によって決定されます。
WEBにおける解像度は、72dpi～96dpiが推奨されております。
印刷物に使用する画像には高解像度が求められますが、PCやスマートフォンなどのディスプレイは解像度96dpi程度までしか再現できないため、それ以上の解像度であっても肉眼で変化がありません。
さらに、上記以上の解像度ではファイル容量が大きくなり、データの読み込みに時間が掛かるため、サイトの利便性を損なう可能性があります。
画像が荒い場合に改善させる方法
画像サイズで「オリジナル」を選択してください。
ロゴ画像について
ロゴ画像サイズの目安は幅300以内×高さ50pixelです。
幅については任意で設定していただいて構いませんが、ナビゲーションメニューの幅によって意図しない表示がされる可能性があります。あらかじめご了承ください。
ファビコンについて
ファビコンの表示は、端末やブラウザによって推奨サイズが異なるため、一概には申し上げられませんが、推奨サイズは152×152pixelです。
ウェブクリップアイコンについて
ウェブクリップアイコンの表示は、端末やブラウザによって推奨サイズが異なるため、一概には申し上げられませんが、推奨サイズは180 × 180pixelです。
メインビジュアルについて
メインビジュアルの画像サイズの目安は幅1920×高さ500～800pixelです。
ferret Oneでは、パソコン用のメインビジュアルの高さの最低サイズは500px、スマートフォン・タブレット用サイトで300pxに設定しております。そのため、画像やイラスト自体のデザイン、ブラウザやPCのサイズによって意図しない表示がされる可能性があります。
【SP推奨サイズ】
幅768×高さ400〜600pixel
※TABを加味した数字になり、SP表示時は両サイドが切れます。キャッチコピーなど重要なものは中央375px内に入れるようにしてください。
■レスポンシブについての詳細はこちら
＞レスポンシブの仕様について
背景画像について
プリセット画像（弊社にて最初からセットしている画像）は「800×320px」です。
背景画像として表示される領域に関しましては、閲覧しているデバイスのディスプレイ（画面）によって異なります。
高精細に見せたい場合は「1280×960px」程度の画像を用意して頂きますようお願いいたします。
コンテンツエリアについて
コンテンツエリアでは、イメージパーツ、カルーセルパーツ、ギャラリーパーツ、記事リスト、セクション背景で画像が使用できます。
最低サイズは、イメージパーツ、カルーセルパーツ、ギャラリーパーツ、記事リストが幅750pixelです。それ以上をご用意ください。
セクション背景で使用する場合の画像サイズの目安は幅1920×高さ400～800pixelです。
ただし、画像やイラスト自体のデザインによって意図しない表示がされる可能性があります。
記事リストで表示される画像は、OGPに設定された画像が表示されます。
OGPについての詳細は以下 OGP画像について をご覧ください。
OGP画像について
推奨サイズは1200×630pxです。最低でも600×315pxで設定してください。
※OGP画像シミュレータを使って、タイムライン上でどう見えるかシミュレートしてみましょう。
■OGP画像の設定について詳細は以下をご覧ください。
＞タイトル・ディスクリプション・OGP（画像）を設定する方法
＞【画面説明】サイト／OGP一括編集
※OGP画像サイズ変更後は、Facebook側にキャッシュが残っていますのでこちらを参考にFacebook側のキャッシュの削除もお願いいたします。
ブログについて
ブログエリアでは、アイキャッチ、本文中で画像を使用できます。
アイキャッチに設定された画像が、デフォルトで記事リストに表示されます。
記事リストのレイアウトが崩れてしまう場合は、記事で設定しているアイキャッチ画像のサイズを統一してください。
アイキャッチとOGP画像を別に設定する場合は、ブログ編集画面の「この記事のSEO設定」＞「og:image」から、もしくは、「ブログ」＞「OGP一括編集」から設定できます。
■詳しくはこちら
＞【画面説明】サイト／OGP一括編集
スマートフォン用サイトの場合
画像サイズの目安は最低サイズとして幅750pixelです。それ以上をご用意ください。
パソコン用のサイトと、スマートフォン用のサイトで違う画像を使用したい場合は、「ヘッダーをカスタマイズ」「スマートフォン用の背景画像を設定」にチェックを入れることで設定することが可能です。
■詳細はこちら
＞ヘッダーでメインビジュアルを設定する方法
サイト内に配置する画像について
サイト内にイメージパーツで配置する画像は、カラム数によってPCの表示サイズが異なり、スマートフォンの端末によっても異なるため、一概には申し上げられませんが、PC・スマートフォン双方を考慮した推奨サイズは下記の通りです。
1カラムの場合、画像の推奨サイズは幅1040pixelです。
2カラムの場合、画像の推奨サイズは幅510pixelです。
3カラムの場合、画像の推奨サイズは幅330pixelです。
4カラムの場合、画像の推奨サイズは幅244pixelです。
＞【機能詳細】ページ編集（LP編集）／デザインパーツ イメージパーツ