写真素材のトリミング方法｜PC・スマホで人物が切れない構図の考え方

写真素材をトリミングするときは「使う場所の比率」から考える

トリミングとは、写真の不要な部分を切り取り、使用する範囲を決める加工です。写真を見ながら感覚的に切り取ることもできますが、Web制作や広告制作では、先に掲載場所の縦横比を確認してから作業した方が失敗を減らせます。

例えば、PCサイトのメインビジュアルは横長でも、スマートフォンでは表示領域が縦長になることがあります。同じ写真をそのまま拡大して表示すると、左右が大きく切られ、端にいる人物が見えなくなる場合があります。

特に人物写真では、「人物を中央に置けばよい」とは限りません。文字を左側に置くデザインなら人物を右寄りにするなど、最終的なレイアウトまで考えて残す範囲を決めます。

画像サイズやトリミング後のピクセル数については、写真素材のサイズとWeb・印刷に必要なピクセル数もあわせて確認してください。

PCで写真素材をトリミングする方法

PCでは、OSに標準で用意されている写真編集機能や画像編集ソフトを使ってトリミングできます。単純に不要部分を切り取るだけなら、専用のデザインソフトがなくても作業できます。

Windowsではフォトアプリなどで切り取る

Windowsのフォトアプリには、写真を切り抜いたり回転させたりする編集機能があります。写真を開いて編集画面へ進み、必要な範囲が残るように切り取り枠を調整します。

Webサイトやバナーへ配置する場合は、自由な比率で切るだけでなく、実際の掲載枠と同じ縦横比で確認することがポイントです。

Macでは「プレビュー」でもトリミングできる

Macの「プレビュー」では、画像を開き、長方形で残したい範囲を選択して切り取ることができます。簡単な切り抜きであれば、画像編集ソフトを起動せずに作業できます。

Web制作では掲載サイズの枠を先に作る

デザインソフトを使用する場合は、写真だけを先に切るよりも、バナーやメインビジュアルなど実際の掲載サイズと同じ枠を作り、その中で写真の位置を調整する方法が分かりやすくなります。

例えば、PC用の横長枠に写真を配置したあと、スマートフォン用の縦長枠にも同じ写真を配置します。両方を並べて確認すると、どの範囲まで切っても人物が成立するか判断しやすくなります。

スマートフォンで写真素材をトリミングする方法

スマートフォンでも、標準の写真アプリを使って基本的なトリミングができます。SNS投稿用の画像や簡単な確認画像であれば、スマートフォンだけで作業することも可能です。

iPhoneでは写真アプリの編集機能を使う

iPhoneでは「写真」アプリで画像を開き、編集画面からトリミング機能を選択できます。切り取り枠を動かして残す範囲を調整できるため、縦長や正方形など、使用先を想定しながら構図を確認できます。

AndroidではGoogleフォトなどで切り取る

Googleフォトでも、写真を開いて編集から切り抜きを選び、切り取り枠を調整できます。端末やアプリのバージョンによって画面表示は異なるため、操作項目の名称は実際の編集画面で確認してください。

スマートフォンでは「画面に収まった」だけで判断しない

スマートフォン上で写真全体がきれいに見えていても、実際のWebサイトでは画像枠の比率によってさらに左右や上下が切られることがあります。

Web掲載用の画像を作る場合は、スマートフォンの写真アプリでの見え方だけではなく、最終的に掲載するサイトや広告のプレビューでも確認します。

人物が切れないトリミングは「残す部分」を先に決める

人物写真のトリミングで大切なのは、切ってはいけない場所を機械的に覚えることではありません。「この写真で何を伝えたいのか」を決め、必要な人物、表情、動作、道具を残すことです。

顔の周囲には余白を残す

人物の頭頂部や顔が画像の端に近すぎると、別の縦横比へ変更したときに切れやすくなります。PCとスマートフォンの両方で使用する可能性がある写真では、頭や顔の周囲にある程度背景が残っている素材の方が調整しやすくなります。

特に採用サイトのメインビジュアルでは、デザイン段階で見出しの位置や画像枠の高さが変更されることがあります。最初から人物を画面いっぱいに拡大しすぎない方が、後から調整できる範囲を確保できます。

手や仕事道具を残す

職業写真では、顔だけでなく「何をしているか」が重要になる場面があります。パソコンを操作する手、工具、図面、タブレット、荷物、医療器具などを大きく切ってしまうと、仕事内容が分かりにくくなる場合があります。

人物を大きく見せることよりも、その写真で必要な行動まで残っているかを確認してください。

肘や膝などを画像の端ぎりぎりに置かない

腕や脚の一部を切ること自体が必ず不自然になるわけではありません。ただし、肘、膝、指先などが画像の端ぎりぎりで偶然切れたように見えると、窮屈な印象になることがあります。

全身を見せるのか、上半身を中心に見せるのかを先に決め、その中途半端な位置で切れていないか確認すると構図を整えやすくなります。

視線や動作の先にも余白を残す

人物が横を向いている写真では、視線の先をすぐ画像端にすると詰まって見えることがあります。会話している人物、歩いている人物、物を渡している人物なども、動作の方向に余白があると場面を読み取りやすくなります。

PCとスマホで同じ写真を使うと人物が切れる理由

レスポンシブWebデザインでは、画面幅に合わせてページのレイアウトが変化します。そのため、PCとスマートフォンで画像ファイルが同じでも、実際に見える範囲が同じになるとは限りません。

Web制作でよく使われるCSSの「object-fit: cover」は、写真の縦横比を維持しながら画像枠全体を埋める表示方法です。枠と写真の縦横比が違えば、枠からはみ出す部分が見えなくなります。

例えば、横長の写真をPCの横長枠に入れたときはほぼ全体が見えていても、スマートフォンの細長い枠へ同じ方法で表示すると、左右が大きく切られる場合があります。

人物の位置はobject-positionで調整できる

CSSの「object-position」を利用すると、画像枠の中でどの位置を中心に表示するかを調整できます。人物が右側にいる写真なら、中央固定ではなく人物側へ表示位置を寄せることで、顔が切れる問題を抑えられる場合があります。

ただし、横長から縦長へ大きく比率が変わる場合は、位置の調整だけでは解決できません。その場合は、PC用とスマートフォン用で別のトリミング画像を用意する方が自然です。

PC用とスマホ用で別画像を用意する方法もある

HTMLでは「picture」要素などを利用し、画面条件に応じて異なる画像を提供できます。このように、重要な被写体を画面サイズごとに見せやすく切り直す考え方は「アートディレクション」と呼ばれます。

用途別にトリミングしやすい構図を考える

写真素材を選ぶ段階で使用先が分かっている場合は、完成後の比率へ切り抜けるかを確認しておきます。比率そのものに正解があるわけではなく、掲載先の仕様を優先してください。

複数媒体へ展開する予定がある場合は、最初から人物の周囲に余白がある写真を選ぶと、横長・正方形・縦長へ展開しやすくなります。

求人広告向けの写真そのものの選び方については、求人広告に使いやすい写真素材の選び方も参考にしてください。

写真素材のトリミングで起こりやすい失敗

PCだけ確認してスマートフォンを確認しない

制作画面がPC中心だと、横長の完成形だけを見て公開してしまうことがあります。レスポンシブサイトでは、公開前に少なくともPCとスマートフォンの両方で主要な画像を確認します。

人物を大きく見せようとして拡大しすぎる

人物を目立たせるために写真を大きく拡大すると、別の比率へ変更したときに調整できる余白がなくなります。特にメインビジュアルでは、最初から限界まで寄せず、レイアウト変更に使える背景を残しておくと扱いやすくなります。

顔だけ残して仕事の情報を切ってしまう

求人広告や企業サイトの職業写真では、人物の表情だけでなく、服装、職場、道具、作業内容も情報になります。何を伝えるための写真なのかを確認してから切り抜きましょう。

元画像を上書きしてしまう

一度小さくトリミングした画像だけを保存すると、後から別の比率へ変更したいときに使える範囲が不足します。元画像は残し、「PC用」「スマホ用」「バナー用」など用途ごとに書き出したデータを分けて管理すると再利用しやすくなります。

公開前に確認したい写真トリミングの手順

PCとスマートフォンの両方で使用する写真は、次の順番で確認すると構図の問題を見つけやすくなります。

特にファーストビューのような大きな画像では、ブラウザー幅を少し変えただけでも見える範囲が変わることがあります。特定の1サイズだけでなく、途中の画面幅でも人物が不自然に切れないか確認すると安心です。

写真素材をトリミングする前にライセンスも確認する

写真素材の加工可否は、素材を提供しているサービスのライセンスによって異なります。購入したからといって、すべての素材を自由に加工できるとは限りません。

PHOTO NOTEでは、購入した素材をライセンスの範囲内でトリミング、文字入れ、色調補正、合成、サイズ変更、背景加工などに利用できます。

一方で、素材データそのものの再配布や転売、素材を使用した商標登録、人物が特定の事実に関与しているように誤認させる利用などは禁止されています。具体的な使用条件は、加工前にPHOTO NOTEのライセンスをご確認ください。

写真素材のトリミングに関するよくある質問

人物の頭を少し切っても問題ありませんか？

構図として意図的に寄った写真であれば、頭の一部を切ること自体が必ず不自然になるわけではありません。ただし、PCでは問題なくてもスマートフォンでさらに切られる場合があります。複数の画面比率で使う写真は、頭の周囲に調整できる余白を残しておく方が扱いやすくなります。

PC用とスマホ用は別の写真にした方がよいですか？

必ず別写真にする必要はありません。同じ写真でも人物の位置を調整して対応できる場合があります。ただし、横長と縦長で残したい範囲が大きく異なる場合は、同じ元画像から別々のトリミングを作る方法が適しています。

人物を中央に置けばスマホでも切れませんか？

中央に置くと残りやすくなる場合はありますが、必ず切れないわけではありません。画像枠の縦横比、人物の大きさ、CSSの表示方法によって見える範囲は変わります。顔だけでなく、手元や仕事道具など必要な部分も含めて確認してください。

トリミングすると画像が粗くなるのはなぜですか？

小さな範囲だけを切り抜き、その画像を大きく表示すると、残ったピクセル数に対して表示サイズが大きくなり、粗さが目立つ場合があります。最終的なトリミング後の画像サイズで必要なピクセル数を確認してください。

まとめ

写真素材のトリミングでは、単に不要な部分を切るのではなく、最終的に表示されるPC・スマートフォンの縦横比から逆算して構図を決めることが大切です。

写真素材を選ぶ段階から「横長だけでなく縦長にも切り出せるか」を確認しておくと、採用サイト、求人LP、バナー、SNSなどへ展開するときにも調整しやすくなります。

参考資料

• WHATWG「HTML Standard：Images」
• W3C「CSS Images Module Level 4」
• Microsoft Support「Edit photos and videos in Windows」
• Apple「Crop, rotate, flip, or straighten photos and videos on iPhone」
• Apple「Macの『プレビュー』で画像を切り取る／サイズ変更する／回転する」
• Google Photos Help「Edit your photos」