こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回はmakeshopでよくあるご質問から
スマートフォンショップで表示する画像サイズについてご紹介します！

こんなお悩みありませんか？

・PC用の画像をスマホで見たら画像だけ大きくてページ幅からはみ出ている・・
・見るスマホによって画像が小さくなってしまいます・・
・スマホ幅に合わせた画像作りたいけど、どんなサイズで作ればいいの？

[難易度 ★☆☆ ]
スマホショップでも最適に見える画像サイズとその表示方法とは！

解決方法

（1）大きい画像をつかう！

スマホでは何ピクセルで画像を作ったらいいかの明確な規定はありません。
現在普及しているデバイスの画面サイズを考慮して大きい画像を用意しましょう！

具体的には外部の参考サイトを参照してみます！

・外部サイト：iPhone画面サイズ早見表
・外部サイト：Android主な画面サイズ

→例えば
画面サイズ「横幅640px × 高さ960px」のスマホに合わせる場合は、横幅960px程度の画像を用意しておくと安心です！

・なぜ大きい画像？
　→スマホ幅より小さい画像を画面いっぱいに表示しようとすると、画像が拡大され引き
　伸ばされ荒くなってしまいます。
　大きい画像を使えば、引き伸ばされずにキレイに見えます！
・データ量は重すぎない程度の画像にしておくことも大切です！
　（どれだけ大きくても1MB以下におさめましょう）

（2）画像をページ幅に自動で拡大・縮小させる！

【ショップデザイン（スマホ）】> 【スマホデザインの設定】
　適用中のスマホテンプレートの「編集」をクリック
「共通CSS管理」へ

「共通CSSページ編集」のエディターエリア内へ下記のスタイル指定を追記してください。

・max-width:100% ←は、画像を画面幅に合わせて自動で幅を調節します。
・height:auto; ←は、widthの拡大と縮小に合わせて、縦横比を保持したまま調節します。

・必ず適用中の「共通CSSページ編集」のエディターエリアになっているか確認しましょう！
・現在のmakeshopの【スマホデザインの設定】のスマホテンプレートでは、スタイルの指定が入力済みなので便利です。困ったときは、新しくテンプレートを作成してみましょう！

（3）調整完了！

→できあがり！
かんたんですね。

いかがでしたでしょうか。
ぜひお試しください！それではまた！