あやね
レスポンシブな画像のトリミングでは、横長のバナー、カード、狭い画面へ表示が変わっても、重要な被写体を残します。最初に画像で何を伝えるかを決め、表示する枠の形を選びましょう。同じ構図で対応できるなら注目させたい位置をそろえ、構図そのものを変える必要がある場合は、別のトリミングを用意します。
画像は、それを使う見出しや本文と並べて判断します。PixsoでのレスポンシブWebデザインでは、広い画面と狭い画面を並べ、被写体、見出し、操作ボタンの関係を比較できます。ページを完成させてから画像ファイルを縮小しても、レイアウトによって切れてしまった被写体は戻りません。
トリミングしても残す要素を決める
コーヒー教室を紹介するページを考えます。元の写真には、左側にケトルを持つ手、中央に注ぐお湯、右側にドリッパーが写っています。重要なのは、それらの関係です。コーヒーの淹れ方を学ぶ場面なので、手やドリッパーだけを切り出すと、伝えたい動作の一部が失われます。
動作を伝えるために必要な最小範囲を確認します。ケトルの注ぎ口、流れるお湯、ドリッパーの開口部を含めましょう。腕全体や周囲のカフェも状況を伝えますが、小さなカードでは優先度が下がります。こうしておくと、単に被写体を中央へ置くのではなく、何を残すための切り取りかを説明できます。
残すべき範囲は、ページの目的によって変わります。商品の形を伝える詳細ページでは、全体を見せる必要があるかもしれません。操作説明のスクリーンショットなら、説明対象のコントロールが必要です。人物写真を大きく切り取る場合も、顔を認識できることが前提になります。注目位置を設定する前に、読者が画像から何を理解する必要があるかを決めます。
書き出す前に、画像を置く枠を決める
用途ごとに、表示する枠の形を書き出します。コーヒー教室の例では、横長バナーを1200 × 480、正方形カードを480 × 480、モバイルの見出し上に置く画像を360 × 240とします。これは設計上の寸法例であり、すべての端末に共通するサイズではありません。縦横比によって、元の写真のどこまでが見えるかが変わります。
| 配置 | 縦横比 | 構図で優先すること |
|---|---|---|
| 教室の横長バナー | 5:2 | お湯を注ぐ動作を残す。見出しを重ねる場合は、文字を読みやすい領域も確保する |
| 教室のカード | 1:1 | 注ぎ口、お湯、ドリッパーを一緒に残し、タイトルは画像の外に置く |
| モバイルの詳細ページ | 3:2 | 教室の内容が分かる範囲を残し、小さな文字を画像に重ねずに済むようにする |
3:2の写真を、変形させずに5:2の枠いっぱいへ表示すると、上下の一部が見えなくなります。たとえば1800 × 1200の写真を横1200pxに縮小すると、1200 × 800になります。それを1200 × 480の枠へ入れると、縮小後の高さのうち320pxが隠れます。中央に配置すれば上下160pxずつが隠れ、配置位置を変えると隠れる範囲も変わります。
元画像に十分な余裕があるように見えても、うまく収まらない理由はここにあります。欠ける範囲は枠の縦横比で決まるもので、書き出し画質の問題ではありません。写真を無理に引き伸ばすと被写体が変形するため、解決にはなりません。
注目位置の調整だけで対応できるか判断する
フォーカルポイントとは、見える範囲が変わっても重視したい画像内の位置です。重要な内容が狭い範囲にまとまり、周囲を省いてもよい写真なら機能します。一方、重要な要素が離れている場合や、見出しのために別の側へ余白が必要な場合は、位置調整だけでは対応しにくくなります。
コーヒーの写真を正方形にするなら、ドリッパーだけを中央にするのではなく、注ぎ口との間を中心にする必要があるかもしれません。両方を入れると動作が小さくなりすぎるなら、より近くで撮った写真や、カード向けの別の構図を使います。トリミングを工夫しても、元の写真にない余白は作れません。
MDNでは、アートディレクションと解像度の切り替えを区別しています（英語）。アートディレクションはレイアウトに応じて構図を変えること、解像度の切り替えは同じ構図を異なる画素数で用意することです。モバイル用に切り取った画像と、デスクトップ用の写真を小さく書き出した画像は、同じ成果物ではありません。
完成ページでトリミングをどのように制御するかも、実装担当者に確認します。CMSの注目位置の設定、CSSによる配置、別に書き出したモバイル用画像は、必ずしも同じ表示になりません。一つの位置指定でどの枠にも対応できると決め付けず、実際に見せたい範囲を共有します。
見出しやボタンが画像と競合しないようにする
短い英語の見出しを重ねられる写真でも、翻訳後の見出しが3行になるとうまく収まらないことがあります。実際のタイトル、ボタン、長くなりそうな翻訳を入れて確認しましょう。文字のための余白は、元の写真だけでなく、画面全体の構図として考える必要があります。
横長バナーで見出しを左の3分の1に置く場合は、ケトルや手と重ならないことが条件です。注ぐ動作がすでにその範囲を占めているなら、見出しを画像の横や下へ移します。写真を何度も暗くするより、文字の位置を変えるほうが効果的な場合があります。
モバイルでは、「ハンドドリップを学ぶ」という見出しと予約ボタンを写真の下へ置きます。画像では動作全体を見せ、文字は通常の読みやすい大きさで表示できます。後からタイトルを変えるたびに、画像を切り直す必要も減らせます。
文字を重ねる必要がある場合は、グラデーションや単色の下地が役立ちます。ただし、切り取った範囲全体で、実際の文字と背景の組み合わせを確認してください。枠の幅が変わると、コントラストの低い部分が文字の後ろへ移動することがあります。写真に埋め込まれた文字は、通常のページテキストよりも折り返しや多言語化に対応しにくくなります。
Pixsoで3つの構図を並べて作る
Pixsoで、元の写真と横長・正方形・モバイルのフレームを並べます。後の変更で、すでに切り取った書き出し画像を使い回さずに済むよう、トリミング前の写真も残しておきます。画像の枠の周囲に、実際のページ見出しやカードのタイトルを入れてから判断します。
各フレームで、ケトルの注ぎ口、流れるお湯、ドリッパーの開口部という同じ3点を比べます。一つでも消えていたら、表示範囲や構図を変えます。別の写真を意図的に選ぶ場合を除き、ドリッパーの左右の位置はそろえます。写真を反転すると、左右非対称の商品、文字、操作部分などを実物と違う形で伝えてしまうことがあります。
フレームには「教室のメイン画像・横長」「教室カード・正方形」「教室の詳細・モバイル」のように用途で名前を付けます。それぞれのそばに、残す被写体やレイアウト上の条件を記します。書き出し画像をすべて開かなくても、見え方の違いが意図したものか分かる状態にしましょう。
表示される実際の大きさでも確認します。拡大するときれいに見えるカードでも、一覧の大きさでは流れるお湯がぼやけた細い線になるかもしれません。その要素が重要なら、解像度だけを上げるのではなく、より近い構図や分かりやすい写真を選びます。
構図と画像サイズを分けて引き継ぐ
構図が決まってから、適切な書き出し寸法と配信形式を選びます。たとえば横360 CSS pxの枠では、2倍密度の表示用に横720pxのラスター画像を候補にできます。これは計画上の例です。必要な種類は、実装時の枠のサイズや対応する表示密度によって決まります。
構図ごとに名前を分け、その中で解像度の異なるファイルを区別します。正方形カードとモバイルの詳細画像を、どちらも「small」のような曖昧な名前にしないようにします。実装担当者には、内容が違う画像なのか、同じ内容で画素数が多いだけなのかを伝える必要があります。
表示比率、残す被写体、書き出し寸法、使用箇所を記録します。代替テキストも、その場所で画像が伝える内容に合わせます。近くのタイトルですべての情報が分かり、写真が装飾である場合は、実装時に空の代替テキストを指定することもあります。お湯の注ぎ方が重要なら、その情報を簡潔に説明します。
Webデザイン向け画像形式のガイド（英語）では、ベクターとラスターの選択や圧縮の比較を解説しています。ただし、それらは構図が決まった後の判断です。鮮明で軽い画像でも、伝える内容が違えば目的を果たせません。
完成サイズの中間でも表示を確認する
デスクトップとモバイルのデザインは、変化するレイアウトの2地点を示しているだけです。見出しの行数やカードの列数が変わる付近を中心に、その間の幅でも実装を確認します。両端ではうまく見えても、デスクトップの少し狭い列では構図が崩れることがあります。
コーヒー教室の例なら、一覧カードから詳細画面までたどります。カードで注ぐ動作を十分に見せ、教室の内容を伝えたうえで、詳細でも同じ被写体を認識できるようにします。公開ページに届いているのが意図した画像か、CMSによる自動的な中央トリミングに変わっていないかも確認します。
うまくいかないときは、被写体そのもの、被写体同士の関係、文字に必要な余白のうち、何が失われたかを特定します。その原因に応じて、枠、構図、文字の配置を変えましょう。レイアウトが変わっても画像の意味が伝わることが、レスポンシブなトリミングの目的です。
