スマホで写真やロゴが切れる・伸びるときは？元画像と表示枠を確かめる

切れているのか、形が変わったのかを先に分ける

「写真がおかしい」を、次の3つに分けて見てください。

• 端が見えない：形は自然でも、枠の外にある部分が表示されていない状態です。顔、手元、設備など、説明に必要な箇所が残るかを見ます。
• 縦長・横長になる：元画像と違う比率に伸びています。丸い部分、人物の顔、文字の形などを元画像と比べます。
• 小さくて読めない：全体が入っていても、会社表記や図の文字を読めるとは限りません。実際の小さい表示で確かめます。

枠を埋めることと、必要な情報を伝えることは別の確認です。写真の余白をなくした結果、点検対象の設備が見えなくなるなら、その枠や表示方法を選び直す理由があります。

実際に、Adobeの公式コミュニティには、広い画面では正しかったロゴが狭い画面で縦に伸びるという利用者の質問が、2021年11月1日に投稿されています。ここでは具体的な困りごとの存在を確認するために参照しています。当時の製品の設定手順を、現在の自社サイトの直し方に当てはめるものではありません。日本の検索量や、すべての会社の需要を示す調査でもありません。

原本の版と、写真で伝えたいことをそろえる

表示を比べる前に、使う元画像を一つ決めます。似たファイル名でも、差し替え前と差し替え後の画像が混ざると、枠の違いを比べられません。ファイルの場所、更新した版、画像の横と縦の寸法を記録します。

この架空例の素材は、点検の写真（初版）・会社表記の文字見本（初版）・点検案内の図（初版）です。写真は点検担当と設備の関係、会社表記は文字の形、案内図は「相談→準備→点検」の順と条件を残します。

横と縦の比率は、画像の形のことです。横3に対して縦2なら3:2、横4に対して縦1なら4:1です。ここで示す3:2や4:1は、架空の素材条件・展示条件です。実際に採用した写真の寸法は、原画の記録を別に示します。すべての写真や会社表記に同じ比率を求めるものではありません。

使用できる場所、会社表記の余白、背景や別版の条件が決められている場合は、その資料を先に確認します。資料が見つからない欄は「未確認」のままにし、管理担当へ確認します。表示の見た目だけで使用許可を出さないでください。

PC用の原画を開く ／ スマホ用の原画を開く

同じ写真を、4つの表示で見比べる

掲載枠の寸法と、画像自体の寸法を分けて見ます。600×400pxは横600・縦400の枠、320×320pxは正方形の枠です。これはこの記事の比較用の寸法で、スマホや特定のサービスの推奨サイズではありません。狭い画面では展示全体を同じ倍率で小さくし、枠の形を保ちます。

1. 3:2の枠に全体を入れる：3:2の写真を600×400pxの枠へ入れる比較です。元と枠の形が同じなら、自然な形で全体が入ります。
2. 正方形に全体を入れる：同じ写真を320×320pxの枠へ入れます。形を保って全体を見せると、上下に余白ができます。余白があることだけを失敗とせず、残したい箇所が見えるかを確かめます。
3. 正方形をいっぱいにする：同じ写真で320×320pxの枠を埋めます。写真の形は保たれますが、左右の一部が枠から隠れます。設備や点検担当の必要な箇所が欠けるなら、全体表示や枠の変更を比べます。
4. 正方形へ縦横を伸ばす：同じ写真を枠に合わせて変形させる、不適切な比較例です。全体が入っても、人物や設備の形が変わります。この例を掲載候補として自動採用しません。

Web担当へ渡すときは、「全体を入れる」「枠を埋めて一部を隠す」「縦横を伸ばす」という見せ方を先に伝えます。実装ではそれぞれ contain・cover・fill と呼ばれる指定があります。ここでコードを変更する必要はありません。MDNの説明でも、前二つは比率を保ち、枠を埋める場合には一部が隠れ、縦横を伸ばす指定では元と枠の形が違うと変形すると区別されています。

中央を見せる方法でも、端にある設備が残るとは限りません。寄せる位置を変える、枠を変える、使用条件に合う別素材を選ぶ、という案を担当と比べます。画像を加工してよいか不明なら、原本を上書きせずに確認します。

全体が入る3:2枠

比較枠：横600×縦400px。比較に使う元の比率：3:2。

この展示の入れ方：全体を表示。必要な情報が残るか、枠と元画像を見比べます。

正方形枠へ全体を入れる

比較枠：横320×縦320px。比較に使う元の比率：3:2。

この展示の入れ方：全体を表示。必要な情報が残るか、枠と元画像を見比べます。

正方形枠を埋める

比較枠：横320×縦320px。比較に使う元の比率：3:2。

この展示の入れ方：枠を埋める。必要な情報が残るか、枠と元画像を見比べます。

元比を変えて枠へ伸ばす

比較枠：横320×縦320px。比較に使う元の比率：3:2。

この展示の入れ方：形を変える。必要な情報が残るか、枠と元画像を見比べます。

横長の会社表記を、小さい正方形へ伸ばさない

4:1の形で作った単純な架空の文字見本を、120×30pxの枠へ入れる場合と、64×64pxの枠へ伸ばす場合を見比べます。文字見本は変形を確かめる展示で、新しい会社ロゴや使用許可済みの素材ではありません。

120×30pxの枠では元の形を保てます。ただし、小さい文字を読めるか、背景と見分けられるかは別に確かめます。64×64pxの枠へ縦横を伸ばすと、元の4:1と違う形になります。小さい欄だからといって、その変形を採用しません。

欄を横長にできるか、指針で認められた別版があるかを管理担当へ確認します。背景色、会社表記の色、周囲の余白にも自社の条件があれば従います。この記事の白や青、文字の寸法を、他社の会社表記にも通じる正解とは扱わないでください。

横長の会社表記を全体表示

比較枠：横120×縦30px。比較に使う元の比率：4:1。

この展示の入れ方：全体を表示。必要な情報が残るか、枠と元画像を見比べます。

横長表記を正方形へ伸ばす候補

比較枠：横64×縦64px。比較に使う元の比率：4:1。

この展示の入れ方：形を変える。必要な情報が残るか、枠と元画像を見比べます。

PC用の原画を開く ／ スマホ用の原画を開く

図の写真は表示条件を説明する模式イメージです。上の展示では、採用した同じ写真の原画を4つの枠で表示しています。

掲載する6つの場所を、確認表で整理する

写真や会社表記の問題を一つ確認したら、他の掲載場所へ同じ判断を自動で広げず、場所ごとに残す情報と確認担当を記録します。表では、PCとスマホの写真、提案書とWebの会社表記、スマホと提案書の案内図を分けています。

案内図は、手元の図と本文の順序・条件を照合します。小さくて条件を読めない場合は、全文が読める場所と、制作担当へ確認する内容を記録してください。図を作り直す必要があるときは、残したい情報をその担当へ渡します。

Web上で図の意味を確認できるように、図だけに説明を閉じ込めず、文章や表でも順序・条件を読めるようにします。今回の案内順は「相談→準備→点検」です。準備の内容は担当に確認し、点検日時が決まったとは扱いません。図を小さくしただけで、条件が読めることにはしません。

提案書は、PDFを画面で見た結果と、実際に紙へ印刷した結果を別に記録します。Webの展示で見やすかったことは、紙でも読めるという確認にはなりません。

観察と未確認を、次の担当へ渡す

対象の案内、参照する原本、利用条件の確認資料、共通に保つ見せ方、確認する環境と素材の版を、自社の共有文書に残しましょう。次に、上の掲載場所ごとに、素材と版、残す情報、枠と表示方法、観察と未確認、対応担当を書きます。分からないことは「未確認」のまま、何を誰に確かめるかを添えてください。

今日の一歩は、見え方が変わる写真か会社表記を一つ選び、元画像とスマホの実表示を並べることです。「端が隠れた」「形が変わった」「小さくて読めない」を分け、残したい箇所と未確認を記録すると、次の担当が確かめる場所を具体的に説明できます。

掲載枠や素材の管理担当が分からず調整が止まる場合は、元画像、問題が出る掲載場所、残したい情報を揃えて、DREEXYのマーケティング相談で状況を説明できます。架空例を書き写しても、自社の素材の使用許可や掲載を確認したことにはなりません。

PC用の原画を開く ／ スマホ用の原画を開く

参考にした一次資料

• Adobe Community：狭い画面でロゴが縦に伸びた利用者の質問（2021年11月1日）：実在する個別の作業課題の確認。現在の日本の市場需要や製品対処法には一般化しません。
• MDN：画像を枠へ入れる方法：全体表示・切り抜き・変形の違い。会社の採用条件はこの記事の独自例です。
• MDN：条件ごとに画像を選ぶ仕組み：異なる表示条件と代替画像の指定。今回の900px以下・901px以上という切替条件は、この記事の表示仕様です。
• W3C WAI：画像の目的に合わせた説明と複雑な図の情報を文章で示す方法：図の意味を本文でも読めるようにする参考です。使用許諾や全体の適合を認定するものではありません。