テキストと画像で構成する記事での写真のサイズ調整と配置方法

写真の役割から始める

写真を移動したりサイズを変更したりする前に、読者にそこから何を得てほしいのかを決めましょう。詳しく観察すべき証拠なのか、文章をイメージしやすくする例なのか、あるいは単なる装飾なのか。あらかじめ決められた画像幅から考え始めるよりも、この違いを見極めることのほうが役立ちます。

文章に含まれていない情報を写真が持っている場合は、関連する細部が判読できるよう十分なスペースを与えます。文書、物体、プロセスの小さな画像は、読者が観察できなければ本来の役割を果たせません。写真が文章ですでに説明されている要点を単に図解しているだけなら、より小さいサイズで十分かもしれませんし、そもそも画像が不要な場合もあります。これは写真の目的に基づいて導き出される実践的なデザインルールであり、万能なサイズ基準ではありません。GOV.UK Design Systemの画像ガイダンスでも同様に、画像は実際のユーザーニーズを満たし視覚的な補助として機能すべきであり、必要な情報は文章でも読める状態にしておくべきだと述べられています。同ガイドラインの推奨事項は政府のオンラインサービス向けに書かれたものであるため、あらゆる種類の記事に対する絶対的なルールではなく、有用な参考情報として捉えてください。

判断に役立つ方法として、各写真に「観察」「図解」「装飾」という3つの役割のいずれかを割り当てることが挙げられます。「観察」は通常、より大きな表示を必要とし、関連する細部へ注意を向ける説明やキャプションが求められます。「図解」は多くの場合、補足する段落の近くに適度なサイズで配置できます。「装飾」には情報提供の役割がないため、省略するか、視覚的に控えめにしておくことを検討しましょう。これらの分類は実践的な編集ツールであり、情報源で規定された専門用語ではありません。

重要度と利用可能なスペースに応じてサイズを選ぶ

記事のテキストカラムを開始基準として使用します。カラム幅いっぱいに広がる写真は目にとまりやすく、細かな内容を伝える余白を生み出します。そのような扱いは、視線の一時停止を正当化できるほど重要な画像のために取っておきましょう。カラム内に収まる小さめの写真は、見出しや本文と競合することなく、近くのポイントを補足できます。元のファイルが大きいという理由だけでサイズを選ぶのは避けてください。表示サイズはレイアウトや読者が見る必要のある情報に合わせるべきです。

検証済みのテンプレートではなく、判断の一例を挙げます。幅700ピクセルのコンテンツカラムに、文章の核心となる違いを持つ2つのパーツからなる物体を写した写真があるとします。カラム幅に近いサイズで表示すれば、比較が容易になるでしょう。同じ写真が単なる大まかな場面設定にすぎず、段落内に説明がある場合は、表示幅を狭くしたほうが文章の強調を維持できるかもしれません。なお、700ピクセルという数値はカラム幅の単なる例であり、推奨される標準値ではありません。

幅の広い画面で写真がテキストの横に表示される場合は、その2つを対になるユニットとして扱います。画像には被写体を見せるのに十分な幅を与え、テキストには快適に読み続けられる十分な余白を確保してください。どちらかが窮屈になる場合は、写真を縮小して文章を狭い帯状に押し込むのではなく、縦に並べます（スタックします）。より小さい画面では、テキスト、関連する写真、次の文章という1カラムの並びが最も分かりやすい配置になることがよくあります。W3CによるWCAG 2.2「リフロー（Reflow）」の解説では、多くの記事ページが1カラムに適応できる仕組みと、通常の閲覧コンテンツで二方向スクロールを避けるという目標が説明されています。また、意味や用途の面で二次元レイアウトが必要なコンテンツの例外についても触れられています。記事レイアウトにおける要点は、画像とテキストの組み合わせによって、読者がテキストを追うために横スクロールを強いられないようにすることです。

関連性が明確な場所に各写真を配置する

写真がある理由を説明している文や段落の近くに写真を配置します。画像を見つけるために読者が無関係な段落をいくつもスクロールしなければならない場合、そのつながりは不明瞭になります。同様に、文の論理展開の途中に大きな写真を挿入すると、文脈が途切れてしまうことがあります。すっきりとした配置は通常、被写体を初めて導入する文章の後、または画像が必要とされるステップの直前です。

キャプションは、被写体を特定する、細部を指摘する、その画像が重要な理由を説明するなど、具体的な内容を追加できる場合に使用します。周囲の文章を一語一語そのまま繰り返すためにキャプションを使ってはいけません。写真を詳しく観察する必要がある場合は、キャプションだけでなく近くのテキストでもどこを見るべきかを述べておきます。配置だけで意図を汲み取ることを読者に求めてはいけません。

写真とそのテキストの関係は、視覚を用いない閲覧においても重要です。W3Cの「Images Tutorial」では、情報提供を目的とする画像には本質的な情報を伝える代替テキストが必要であり、装飾的な画像には支援技術がスキップできるよう空の代替テキストを使用できると述べられています。また、W3Cの情報画像に関するガイダンスでは、代替テキストは目に見える物体を単に列挙するのではなく、文脈における画像の意味を表現すべきであると強調されています。実践的な確認として、「もしこの写真が見えなかったら、どのような情報が得られないだろうか？」と自問してみてください。重要な情報は記事本文に記載し、画像には適切な代替テキストを提供します。画像が隣接するテキスト以上の情報を何も追加していないなら、その説明を繰り返す必要はないかもしれません。

写真の有用な形状を維持する

写真のアスペクト比（幅と高さの比率）は、占有するスペースや目に見える範囲に影響を与えます。まずは写真全体を選択した領域内に収めることから始めましょう。トリミングは、被写体が明瞭なままであり、読者が必要とする細部が切り取られない場合にのみ行います。横長（ランドスケープ）のトリミングは幅の広いリード画像に適している場合があり、縦長（ポートレート）の画像はカラム内の狭い幅で配置したほうがうまく機能することがあります。これらは構図上の選択であり、決まり切った規定ではありません。

トリミングによって文脈が失われたり、見た目の意味が変わったり、記事内で言及されている細部が隠れてしまったりする場合は、別のトリミングを試すか、元の比率のまま表示します。図表、ラベル、文書などの場合は、最終的な表示サイズを確認してください。写真内の埋め込みテキストが小さすぎて読めなくなることがあります。GOV.UKの画像ガイダンスでは、画像内にテキストを含めると読みにくく、コピーやサイズ変更が難しく、スクリーンリーダーでのアクセスも困難になるため、一般的には推奨していません。画像にテキストが不可欠な場合は、その意味を近くの文章コンテンツでも提供してください。

読者が利用するサイズでレイアウトを確認する

広いデスクトップ幅と狭いモバイル幅で記事をプレビューします。写真がテキストカラムからはみ出していないか、コンテンツを覆い隠していないか、テキストが写真の横で窮屈に押し込められていないかを確認してください。見出し、段落、写真へと続く閲覧順序を追っていきます。レイアウトが縦積みになったときでも、画像は説明対象の文章の近くに表示される必要があります。また、キャプションや画像内の重要な細部も、実際の表示サイズで確認しましょう。

Webページにおいて、表示サイズとファイルサイズは別個の判断事項です。大きな表示には高解像度の元ファイルが必要になる場合がありますが、小さな画面に不必要に大きな画像ファイルを送信するとデータ通信量を浪費する可能性があります。Googleのweb.devにあるレスポンシブ画像ガイドでは、異なる表示条件に応じてブラウザが画像サイズを選択する方法が解説されており、画像バージョンの数に唯一の正解はないと記されています。これはWeb公開における実装のガイダンスであり、記事内のどこに画像を配置すべきかを決めるものではありません。

簡単な判断手順

役割を明確にする。その写真はじっくり観察するためのものか、テキストを図解するものか、あるいはページを飾るためだけのものか。

アンカー（拠り所）を見つける。その写真を導入している、またはその写真に依存している文章を特定し、その文章の横に写真を配置する。

表示幅を設定する。重要な証拠には十分なスペースを与え、細部が不可欠でない補足写真には少ないスペースを割り当てる。

トリミングを確認する。被写体と関連する文脈のすべてが見えた状態を維持する。

レイアウトを順番に声に出して読んでみる。狭い画面で、テキストと写真が自然な順序で表示され、テキストの読みやすさが保たれていることを確認する。

情報を言葉で説明する。役に立つ場合はキャプションを追加し、画像の役割に応じた代替テキストを提供する。

実践的なルールはシンプルです。重要性によって目立たせ方を決め、関連するテキストによって配置を決め、狭い画面のプレビューによってレイアウトが機能しているかを確かめること。選んだサイズで写真が理解しにくい場合は、拡大するか、トリミングをシンプルにするか、関連する細部をテキストで説明しましょう。

このテーマをさらに見る