STUDIOでホームページの写真を差し替えたところ、人物が横に伸びた、上下が切れた、スマートフォンだけ不自然に拡大された。このような変化は、写真データそのものではなく、画像ボックスの表示方法や幅・高さの設定が原因になっていることがあります。
新しい写真を加工し直す前に、画像ボックスのモード、サイズ単位、画面幅ごとの設定を確認します。
最初に崩れ方を分けて確認する
同じ「画像が崩れた」状態でも、原因は一つではありません。公開ページを見て、どの症状が出ているかを分けます。
| 表示されている症状 | 主に確認する箇所 |
|---|---|
| 写真が縦または横に伸びている | 横幅、高さ、autoの設定 |
| 人物や商品が途中で切れている | Boxモード、画像の配置位置 |
| 画像の上下左右に余白ができる | 元画像の比率、表示モード |
| 写真がぼやけている | 元画像の解像度 |
| スマートフォンだけ崩れる | モバイル側のサイズ設定 |
| 画像を替えると周囲の文字も動く | 親ボックスと画像の高さ |
縦横に伸びている場合と、必要な部分が切れている場合では直し方が異なります。先に症状を分ければ、関係のない余白や親ボックスまで変更せずに済みます。
BoxモードとImgモードの違い
STUDIOの画像ボックスには、BoxモードとImgモードがあります。
Imgモードは、元画像の縦横比を保ったまま表示したい場面に向いています。企業ロゴ、商品写真、集合写真など、画像全体を見せたいときに使用します。
Boxモードは、決められた枠の中へ画像を配置する使い方です。枠の比率と写真の比率が違う場合、枠からはみ出す部分が見切れることがあります。
たとえば、横長の枠へ縦長の人物写真を入れると、人物の頭や足元が切れやすくなります。これは画像ファイルの破損ではなく、枠へ合わせて表示した結果です。
差し替え前の画像が横長で、新しい画像が縦長なら、同じボックスへ入れただけでも見え方は変わります。
Imgモードでも縦横比が崩れる原因
Imgモードにすれば必ず正常になるとは限りません。横幅と高さの両方が固定されていると、元画像とは違う比率で引き伸ばされることがあります。
確認するのは、画像ボックスの横幅と高さです。
- 横幅を基準にするなら、高さをautoにする
- 高さを基準にするなら、横幅をautoにする
- 親ボックスの幅に合わせる場合は、画像だけ固定幅になっていないか確認する
- PC、タブレット、モバイルで別の値が残っていないか確認する
画像ボックスの辺を動かしたり、対象の辺をダブルクリックしたりすると、反対側のサイズをautoへ変更できる場合があります。
ただし、サイト内の画像を一括して変更する必要はありません。崩れている画像ボックスだけを選び、設定を確認します。
写真を加工し直すべきケース
STUDIO側の設定を直すだけでは、意図した構図にならないこともあります。
横長のメインビジュアルへ縦長の人物写真を入れ、顔から足元まで全部表示するのは困難です。枠の比率と被写体の配置が合っていないためです。
次のケースでは、掲載場所に合わせた画像を用意します。
- 人物が写真の端に寄りすぎている
- 商品の周囲に余白がない
- 横長の枠へ縦長写真を入れたい
- 画像内に文字が入っている
- PCとスマートフォンで必要な構図が違う
- 元画像の解像度が足りず、拡大するとぼやける
元画像を無理に引き伸ばすのではなく、トリミング位置を変えた画像や、余白を追加した画像を用意します。
差し替え前の画像と比率を比較する
差し替え前の画像が残っているなら、新しい画像とピクセル数を比較します。
たとえば、以前の画像が横1200px・縦600pxなら比率は2対1です。新しい画像が横800px・縦1200pxなら縦長です。同じ表示枠へ入れた場合、以前と同じ見え方にはなりません。
確認する項目は次のとおりです。
- 差し替え前の画像サイズ
- 新しい画像サイズ
- 縦横比
- 被写体の位置
- 被写体の周囲にある余白
- 画像内の文字やロゴの位置
元画像の比率が違うことを把握せずにボックスの高さだけを変更すると、その下にある文章やボタンまで移動します。
スマートフォンだけ画像が崩れる場合
PCでは正常でも、スマートフォンで人物が切れたり画像が大きく伸びたりする場合は、モバイル側の設定を確認します。
よくあるのは、PC側で画像を差し替えた後、モバイル側に以前の幅や高さが残っているケースです。
次の順番で確認します。
- PC表示で画像ボックスのモードとサイズを見る
- タブレット表示へ切り替える
- モバイル表示へ切り替える
- 各画面幅で横幅と高さを確認する
- プレビューで途中の画面幅も確認する
- 公開後に実際のスマートフォンで開く
エディタ上のモバイル表示だけでなく、ライブプレビューと実機でも確認します。ブレイクポイントの境界付近で急に比率が変わる場合は、その画面幅に適用されている設定を見直します。
画像だけ直したつもりで周囲が崩れる理由
画像ボックスの高さを変えると、同じ親ボックスに入っている見出し、文章、ボタンの位置も変わることがあります。
特に確認したいのは次の3点です。
- 画像と文章が同じ親ボックスに入っている
- 親ボックスの高さが固定されている
- 画像の変更後も上下の余白が以前の値になっている
画像だけを直したい場合でも、親ボックスとの関係は確認します。ただし、周囲の位置を手作業で一つずつ動かす前に、画像の高さと親ボックスの設定を先に直します。
修正前に残しておくもの
設定を変更する前に、現在の状態を記録します。
- 公開中ページのスクリーンショット
- エディタ上の画像ボックス設定
- 差し替え前の画像
- 新しく使いたい画像
- PCとスマートフォンで崩れている状態
- 正常に表示されている別ページの画像設定
複数の設定を同時に変更すると、どの操作で直ったのか分からなくなります。画像ボックスのモード、横幅、高さの順に一つずつ確認します。
STUDIOの画像修正を依頼するときに伝える内容
画像の差し替えと表示調整を依頼する場合は、「画像が変になった」だけでなく、対象ページと正常な完成イメージを伝えます。
用意する内容は次のとおりです。
- 修正するページのURL
- 画像が置かれている場所
- 差し替え前と差し替え後の画像
- 崩れが出る端末
- 全体表示とトリミングのどちらを優先するか
- 人物や商品をどこまで見せたいか
- PCとスマートフォンで同じ画像を使うか
- 周囲の文章やボタンは変更しないこと
スクリーンショットへ修正箇所を囲み、「スマートフォンでも顔が切れない位置にする」などと書くと、作業範囲が明確になります。
まとめ
STUDIOで画像を差し替えた後に縦横比が崩れたら、写真を作り直す前に画像ボックスのモードと横幅・高さを確認します。
Boxモードでは枠に合わせて一部が見切れることがあり、Imgモードでは元画像の比率を保持できます。ただし、幅と高さの両方が固定されている場合は、Imgモードでも画像が伸びることがあります。
差し替え前後の比率を比較し、PC、タブレット、スマートフォンの順に確認すれば、画像データを直すべきか、STUDIO側の設定を直すべきかを切り分けられます。
