パソコンでは店舗の看板まで写っているのに、スマートフォンでホームページを開くと、最初の写真には壁しか写っていない。写真を拡大すれば直ると思って画像を差し替えても、同じ部分が欠けることがあります。最初に調べたいのは、掲載している写真のどこまでが残っているかと、その写真を表示する枠が端末によってどう変わるかです。
島田市周辺で店舗や事務所のホームページを管理する方へ、トップで使う表紙写真を例に、欠け方を確かめ、焦点を調整するか、写真の構図やレイアウトを見直すかを選ぶ手順を紹介します。制作担当へ修正を頼むときには、表示したい部分と画面ごとの合格条件を一緒に渡せるようにします。
写真の何が見えなくなったかを一つ選ぶ
「スマートフォンで写真が切れる」と聞いたら、ページのどの写真かを確認し、訪問者がその写真を見て何を知る予定だったかを聞きます。店の雰囲気を伝える写真なら空や路面が欠けても目的は果たせます。入口の外観を伝える写真なら、建物が大きく見えていても、店名と入口の位置関係が分からなければ役に立ちません。社員が並んで写る写真で全員を紹介したい場合は、中央の人物だけを残す修正では目的が変わります。
表紙に重ねた営業時間やサービス名が欠けた場合は、まずその文字を指して、写真に焼き込まれた文字か、ページの見出しとして載っている文字かを確かめます。写真の中にある文字は写真と一緒に切れます。ページに置いた文字は、枠の高さや改行、背景との明るさの組み合わせで読めなくなることがあります。片方を直してももう片方が残るため、写真の欠けと文字の欠けを別の行に記録します。
実際の相談でも、Cocoonの公開フォーラムに、全幅のカバーを使って背景画像に文字を載せたところ、スマートフォンでは写真が切れたという投稿があります。縦横比の設定を試したあと、今度はパソコンでもスマートフォンでも枠の高さが極端に狭くなったと追記されています。WordPress.orgの別の相談では、先頭のカバー写真の全体がモバイルで見えないと投稿されました。個々の設定と修正結果はサイトごとに異なります。全幅にできたか、写真をどこまで残せたか、重ねた文章が読めたかを分けて確かめるための手がかりになります。
公開画面と実際に配信される写真を並べる
最初は編集画面を開く前に、ログインしていない状態で公開URLを開きます。トップページとサービス案内に同じ写真を使っているなら、欠けると聞いた方から始めます。パソコンの通常の幅とスマートフォンの縦向きで、同じ写真を表示した直後に見える範囲を記録します。困った端末が分かる場合は、機種名と使ったブラウザー、縦向きか横向きかを聞きます。比較する画像はナビゲーションや写真の枠ごと記録すると、後から枠の高さや見出しの改行を読み取れます。画像を渡すときには、編集者の表示名や未公開情報が写っていないかも確認します。
「右が切れる」だけでは、修正後に何が戻ればよいかが伝わりません。「画面上で看板は右端に半分見えるが、引き戸は完全に見えない」「入口は見えるが、二行に折り返した店名の下に予約ボタンが重なっている」のように、見えるものと見えないものをそれぞれ書きます。最初の表示で見えないだけで、少し下へ移動すると写真全体が現れる場合もあります。その場合は画像内の切り取りと、最初の画面の高さによる見え方を分けます。スクロール後に現れる要素のために画像を差し替える必要があるかは、最初の画面に何を見せたいかで判断します。
次は使われている画像の元を、編集担当がメディアライブラリや制作元の素材で確認します。元の写真に看板があるのに表示の枠の中だけで消えるなら、枠の比率や焦点を見直す候補です。素材を単体で開いても看板がなければ、すでに切り取られた素材が登録されているか、意図した写真と別の写真を選んでいる可能性があります。焦点を動かして表示範囲をずらせても、登録された画像に含まれないものは現れません。
編集画面で見つけた素材と公開画面に配信されている画像が違うこともあります。パソコンとスマートフォンで別の素材を出す作りや、写真の縮小版を選ぶ設定があり得るためです。確認を頼むときは「この画像があるか」に加え、「このURLの狭い幅のとき、実際にどの画像を出しているか」と伝えます。背景として実装されていると、利用者のブラウザーで画像だけを開くメニューが使えないこともあります。その場合は、編集画面で参照する素材のファイル名と制作担当が確認した配信側の情報を照らし合わせます。
別の症状として、見せたい場所は残っているのに輪郭がぼけている場合があります。WordPress.orgには、横長の素材を画面全高に表示したとき、小さな配信用画像が縦に拡大されてぼけるという個別の投稿があります。切れた範囲を調整する作業と、配信画像の細部が荒れる作業は別に記録してください。大きい画像へ無条件に戻すと、見える範囲が変わらないまま読み込みだけ重くなる可能性があります。
横長の写真を縦に近い枠で表示すると何が起きるか
背景写真を枠いっぱいに表示する設定では、写真の縦横の比率を保ち、空白が出ない大きさまで画像を拡大または縮小します。画像と枠の比率が違えば、どこかが枠の外に出ます。たとえば、幅1800・高さ900ピクセルの写真を、ブラウザー上の幅360・高さ400 CSSピクセルの枠いっぱいに置く場合を単純化して考えます。高さを400に合わせると、比率が2対1なので幅は800になります。枠で見えるのは幅360の範囲です。中央を基準にすれば、左右それぞれ220に相当する表示領域が枠から外れます。数値は仕組みを説明する架空の例で、表示枠の実寸はサイトごとに確認します。
同じ写真を今度は枠の中に全体が入る大きさで表示すると、幅が360のとき高さは180です。高さ400の枠を使い続けるなら縦方向に余白ができます。余白を取らず写真に合わせて枠を低くする設計なら、写真全体を見せられます。文字を写真の上に重ねる場合は、使える高さも減るので、見出しとボタンが収まるかを確認します。写真を全部見せたいのか、枠いっぱいに敷きたいのかを先に選ぶと、同じ画像設定を何度も変える時間を減らせます。見せたい人物や物が一か所に集まる写真なら、多少切れても枠を埋める選択ができます。両端が必要な写真では、写真を枠に合わせる工夫が要ります。
この違いは、W3Cの画像表示仕様の cover と contain でも説明されています。実際のサイトでは背景画像の設定やテーマ独自の実装もあるので、設定名がそのまま見えるとは限りません。制作担当との打ち合わせでは、「はみ出してもよいので枠を埋める」「余白が出ても全体を見せる」のどちらを優先するかを日本語で渡せば、使われている仕組みに合わせて対応してもらえます。
写真の縦横比だけで結果は決まりません。同じスマートフォンでも、上に重ねた見出しが一行から三行になったり、案内ボタンが下へ折り返されたりすると、内容に合わせて枠が高くなる作りがあります。全高表示では、ブラウザーの表示領域や縦横の向きによって枠の高さも変わります。使う原稿が仮の一行だけの状態で合格にすると、本番の長い見出しで被写体が切れることがあります。直す際は、公開予定の原稿とボタンも入れた状態で比べてください。
残したい範囲に合わせて直し方を選ぶ
残したいものが一か所に集まるなら、焦点を動かす方法を試します。 たとえば写真の右寄りに入口が一つある場合、枠の中でその近くが残るように画像の位置を調整します。WordPressのカバーブロックの公式文書では、固定背景がオフのとき、写真の注目点を指定する焦点の選択が表示されます。重ねた文字の位置を変える操作とは別です。実際にコアのカバーブロックを使用しているかをリスト表示などで確認し、テーマ専用のメイン画像ならその設定を制作担当へ尋ねます。設定の見え方や変更権限は運用環境により異なります。
焦点を触る前に、今の位置と枠の高さ、対象の画像名を控えます。確認用の下書きや複製で一度に一つの設定だけを変更し、スマートフォンとパソコンを見比べます。入口を右へ寄せた結果、パソコンで重ねた見出しの真下に入口が隠れる場合は不合格です。狭い画面でどこまで残るかを主役の輪郭で判定し、余白の中央へ機械的に点を置くことは避けます。焦点を極端に寄せても入口と看板を同時に見せられなければ、写真の左右に必要な範囲が広すぎる可能性があります。
主役同士が離れているなら、別の構図を候補にします。 入口と右端の看板の両方を見せたい場合、手元の利用できる写真から両方が近くに入った一枚を選べるか確認します。元の写真のうち不要な空や床を整理して掲載用の別画像を用意する選択肢もあります。切り出す段階で、看板の端や人物の手元が欠けていないかを先に確認します。元写真は残し、掲載用の差し替え候補を名前で区別すると、後からパソコンとスマートフォンにどのファイルを出したかたどれます。
パソコン向けとスマートフォン向けに異なる構図を使う案は、表示する素材を画面幅に応じて切り替えられる仕組みがある場合に検討します。大きい画像と小さい画像を選ぶ配信機能だけでは、必ずしも別の構図へ切り替えられません。制作担当には、切り替える範囲と境界付近に使う素材、どちらの画像にも残す要素を確認します。写真を更新するたびに二つの素材が必要なら、片方だけ古い写真になる運用上の負担もあります。素材の管理を増やさずに一枚で成立するなら、その案と費用や手間を比べられます。
写真の全体に意味があるなら、写真と案内を分けます。 たとえば入口と受け付けの両方を示す一枚で、店名も写真の中に含まれている場合、画像を横幅に合わせて全体表示し、見出しとボタンを写真の上か下へ置く方法があります。短い画面でボタンを見つけることが大事なら、写真の下まで進まなくても次の操作が分かる順にします。写真を見てから読む方が自然なら、写真の直下に説明を置いて関連付けます。掲載する情報の順番も制作担当と合わせると、構図の改善と引き換えに大切な行動が遠くなる事態を防げます。
判断に迷うときは、同じ素材で「焦点を動かした案」と「写真全体を見せて見出しを分けた案」を一画面ずつ用意して比べます。見出しを読んだ人が何の店か言えるか、写真で入口を確認できるか、問い合わせに進めるかを尋ねます。好みの投票にすると写真の印象だけで決まりやすいため、先に定めた目的を果たした方を候補にします。見せたい要素が同時に入らないと分かった時点で、数値の微調整を続ける作業を止めて構成案の比較へ進めます。
制作担当に写真の残す範囲と判定条件を渡す
架空例として、サービスページの表紙に工房の写真を掲載するケースを考えます。元画像では中央より左に機械、右に作業台があり、スマートフォンでは作業台の端が消えます。訪問前に作業内容を理解してもらうことが目的で、見せたいのは機械と手作業を行う場所の両方です。「スマホに合わせて縮めて」と依頼する代わりに、元画像の複製に二か所を囲って示し、切れてもよいのは外側の床と棚だと記録します。重ねているサービス名は文字として残し、写真の表示結果に左右されず読めることも依頼に含めます。
| 依頼欄 | 架空例で渡す記録 |
|---|---|
| 対象 | 公開サービスページの最初の写真。対象URLと、編集画面で見える画像名を別々に添付する。 |
| 現象 | 狭い縦画面では機械が残るが、作業台は端しか見えない。パソコン幅では両方見える。 |
| 残す範囲 | 機械の操作部と作業台の天板。床や奥の棚は切れてよい。 |
| 試したい順序 | 焦点だけを調整して両方残るか確認。難しければ掲載用の別構図か全体表示案を提示。 |
| 画面での合格 | 狭い幅でも二つの目印を同じ写真で判別できる。見出しと相談ボタンが読めて押せる。 |
| 引き継ぎ | 採用した写真名、設定箇所と元の値、テストした幅と日付を一緒に残す。 |
制作担当に任せるのは枠の寸法やテーマ内の設定、複数画像を出す条件などの実装です。店や会社の担当者が決めるのは、写真が何を伝えるかと、失われると困る部分です。誰かが記憶しているだけだと、別の担当者が差し替えたときに同じ問題が起きます。依頼票に文章で残すと、素材を入れ替えるたびに同じ基準で見直せます。画像を切ってアップロードし直す際には、別の公開ページが同じ画像を使っていないかも確認し、共通素材への影響を調べます。
公開前は狭い幅と切り替わる幅で確かめる
修正の確認は、表示が崩れた実機を起点にします。手元に同じ端末がなければ、まず画面幅を調整できる確認環境で近い幅を試し、実機の結果とは記録を分けます。続いて少し幅の違うスマートフォン、横向き、パソコンで比べます。画面幅で画像を切り替える場合は、その境目の少し狭い側と少し広い側を確認します。比較は「ブラウザー表示幅と向き／画像名／機械と作業台／見出し・ボタン／合否」の一行で記録できます。架空の例なら「幅360 CSSピクセル・縦／画像A／機械あり・作業台欠け／見出しとボタンは操作可／不合格」です。端末の画素数とブラウザー上の表示幅は別なので、画素数をこの欄に転記しません。代表的な二機種で整っていても、中間で狭い枠にパソコン向けの写真が出ることがあります。見え方だけで選択された画像を判断できない場合には、制作担当に境界の両側で使われる画像を特定してもらいます。
判定は、写真の主役、見出しの読みやすさ、次のボタンの三つを同じ画面で行います。ページを最初に開いた状態だけでなく、少し下へ移動し、戻ってからも表示の関係が崩れないかを見ます。端末の文字を大きくして閲覧する人を想定するなら、その設定の結果を別に記録します。写真のために固定の高さを設定すると、長い文章が枠に収まらないことがあります。ボタンを試す際は遷移先まで開き、意図した相談先へ着くか確認すると、見た目を整えたあとに行動が途切れるのを見つけられます。
別の画面にも同じ変更を使う場合は、写真の位置を一括で変更する前に、対象を一ページに絞って試します。たとえばトップと採用案内で同じ写真を使っていても、トップでは建物、採用案内では働く人を見せたいことがあります。画像ファイルの登録内容を上書きして全ページへ反映する変更と、今回のページの焦点だけを変える変更では影響が違います。一ページで合格した設定を横展開する際は、ページごとに残す対象と見出しの長さを確認し、同じ素材でも合格条件を個別に書きます。
本番へ反映したら、公開URLを開き直し、変更前に撮った条件で写真と見出しを比較します。古い画像が見える場合は、記録した画像名と表示条件を照らし合わせ、公開の反映状況を制作担当に確認します。公開画面で結果を確認できるまでは、編集画面で整っていることを最終判定にしません。今後の差し替えでは、古い画像と新しい画像のどちらでも残すべき範囲が同じかを先に話し合い、元の設定に戻せる情報を残します。
写真の選び直しや文字との配置を含めて相談したい場合は、LIFESEEDSのホームページ制作サービスをご覧ください。対象ページと欠ける場面が分かると修正の範囲を相談しやすくなります。既存サイトの表示については、お問い合わせからお知らせください。
コメント