トリミングとは?画像・写真の切り抜き方とスマホ・PCでのやり方

トリミングの基本

まずは、トリミングとは何か、よく似た言葉の「切り抜き」とどう違うのか、トリミングすると画像の何が変わるのかを押さえましょう。

トリミングとは(写真・画像・動画での意味)

トリミングとは、写真や画像の周りを切り落として、見せたい部分だけを残すことです。

英語の「trimming(刈り込む・切りそろえる)」から来た言葉で、画像の外側を四角く切りそろえるイメージから、この名前で呼ばれています。

たとえば、旅行先で撮った写真の端に知らない人が写り込んでいたら、その端を切り落とせば、見せたい景色だけの写真になります。

動画の場合は少し意味が変わり、映像の最初や最後の不要な部分を切り落として、長さを短くすることを「トリミング」と呼ぶのが一般的です(MicrosoftのWindowsのフォトのヘルプでも、ビデオのトリミングは開始位置と終了位置を決める操作として説明されています)。

つまり、写真や画像では「画面の外側」を、動画では「時間の前後」を切り落とすのがトリミングです。

この記事では、主に写真や画像のトリミングを扱います。

トリミングと切り抜き(背景を消すこと)の違い

トリミングは画像を「四角く」切り落とすことで、人物や商品の形に沿って背景を消すこととは別の作業です。

形に沿って背景を消す作業は、デザインの現場では「切り抜き」や「背景の削除」と呼ばれ、使う機能も手間も大きく違うためです。

ややこしいのは、アプリによってトリミングの機能名が違うことです。

• iPhoneの写真アプリ・Macの写真アプリ・プレビュー:「切り取り」
• Googleフォト:「切り抜き」
• Windowsのフォト:「切り取り」(説明文では「トリミング」)
• Figma:「トリミング」(英語版では「Crop」)
• Photoshop:「切り抜きツール」

このように「切り抜き」という名前でも、中身は四角く切り落とすトリミングのことがあります。

機能名にまどわされず、「四角く外側を切り落とす」ならトリミング、「形に沿って背景を消す」なら背景の削除、と中身で見分けましょう。

トリミングで変わること(構図・比率・サイズ・解像度)

トリミングをすると、写真の見え方だけでなく、形やピクセル数(画像を作る点の数)も変わります。

画像の一部を捨てて残りを新しい画像にする作業なので、捨てた分だけ情報が減るためです。

次の見本は、同じ横長(4:3)の写真を、正方形(1:1)と、さらに横長の16:9にトリミングした例です。

この見本のように、トリミングで変わるのは次の4つです。

• 構図:何をどこに置くかという画面の組み立てが変わります。
  周りを削るほど、残した被写体が大きく目立ちます。
• アスペクト比:横と縦の長さの比率(画像の形)が変わります。
  4:3の写真を1:1にすれば正方形になります。
• ピクセル数(解像度):切り落とした分だけピクセルが減ります。
  横4000×縦3000ピクセルの写真を正方形にすると、最大でも3000×3000ピクセルになります。
• ファイルサイズ:ピクセルが減るので、多くの場合はファイルの容量も小さくなります。

特に気をつけたいのはピクセル数で、小さな部分だけを残すほどピクセルが少なくなり、大きく表示したときに粗く見えやすくなります。

解像度の意味や、用途ごとに必要なピクセル数の目安は解像度とは?で解説しています。

トリミングは「見せたいものを目立たせる代わりに、情報を捨てる作業」だと覚えておくと、切りすぎを防げます。

トリミングのやり方(スマホ・PC・デザインツール・CSS)

ここでは、スマホとパソコンに最初から入っているアプリ、デザインツール、Webサイトに表示するときのCSSの順に、写真をトリミングする手順を紹介します。

ボタンの名前や位置は、OSやアプリのバージョンによって変わることがあるので、見つからないときは各社の公式ヘルプも確かめてください。

iPhoneの写真アプリでトリミングする

iPhoneでは、最初から入っている写真アプリの「切り取り」でトリミングできます。

別のアプリを入れなくても、比率を選んで切り取る機能までそろっているためです。

手順は次のとおりです(Appleのサポートページをもとにしています)。

1. 写真アプリで写真を開き、編集のボタンをタップします。
2. 切り取りのボタンをタップします。
3. 四角い枠の角をドラッグして、残したい範囲を囲みます。
   写真を2本の指で広げたり縮めたりして調整することもできます。
4. 決まった比率にしたいときは、比率のボタンから「スクエア」「9:16」などを選びます。
5. 「完了」をタップして保存します。

角をドラッグしたときは元の写真の比率が保たれるので、自由な形にしたいときは、写真の右上にあるロックをタップして比率の固定を外します。

保存したあとでも、写真を開いて編集のボタンから「元に戻す」を選べば、トリミング前の写真に戻せます。

Android(Googleフォト)でトリミングする

Androidでは、Googleフォトの「切り抜き」でトリミングできます。

Googleフォトは多くのAndroidスマホで使える写真アプリで、名前は「切り抜き」ですが、中身は四角く切り落とすトリミングの機能です。

手順は次のとおりです(Googleフォトのヘルプをもとにしています)。

1. Googleフォトで写真を開きます。
2. 下部の「編集」から「切り抜き」をタップします。
3. 四隅のハンドルを長押しして、残したい範囲までドラッグします。
   正方形などにしたいときは「アスペクト比」をタップして比率を選びます。
4. 「保存」をタップします。

保存するときに「コピーとして保存」を選ぶと、元の写真はそのまま残り、トリミングした写真が別に作られます。

元の写真も残しておきたいなら、「コピーとして保存」を選ぶと安心です。

Windowsのフォトでトリミングする

Windowsのパソコンでは、最初から入っている「フォト」アプリでトリミングできます。

フォトには、手動で範囲を決める方法と、決まった比率(プリセットの縦横比)を選ぶ方法の両方が用意されているためです。

手順は次のとおりです(Microsoftのサポートページをもとにしています)。

1. フォトで写真を開きます。
2. 画面上部の「画像の編集」を選びます(キーボードのCtrl+Eでも開けます)。
3. 「切り取り」で、枠をドラッグして残したい範囲を決めます。
   比率を決めたいときは、プリセットの縦横比から選びます。
4. 保存のボタンで保存します。

編集をやり直したいときは、画面の左上にある「リセット」で、その写真に加えた編集をまとめて取り消せます。

Macの写真アプリ・プレビューでトリミングする

Macでは、写真ライブラリの写真なら「写真」アプリ、デスクトップなどに保存した画像ファイルなら「プレビュー」でトリミングするのが手軽です。

どちらもMacに最初から入っているアプリで、写真アプリは比率の指定、プレビューは範囲を選んで切り取る操作が得意です。

写真アプリでは、写真をダブルクリックしてツールバーの「編集」をクリックし、「切り取り」から範囲をドラッグするか、サイドバーで「スクエア」「16:9」などの比率を選びます(写真アプリのユーザガイド)。

写真アプリで切り取ると、アルバムなどアプリ内のすべての場所で見た目が変わるので、元のまま残したいときは、先に写真を複製してから複製のほうを編集します。

プレビューでは、マークアップツールバーの長方形の選択で残したい範囲を囲み、マークアップツールバーの切り取りのボタンをクリックします(プレビューのユーザガイド)。

プレビューで切り取った直後なら「編集」メニューの取り消しで戻せ、時間がたってからでも「ファイル」メニューの「バージョンを戻す」から以前の状態を探せます。

写真の整理も兼ねるなら写真アプリ、Web用の画像ファイルをさっと整えるならプレビュー、と使い分けると便利です。

Figma・Photoshopでトリミングする

デザインツールのFigmaとPhotoshopでは、あとから範囲を調整し直せる形でトリミングしておくのが基本です。

デザインの途中では、レイアウトに合わせて見せる範囲を何度も変えることが多く、切り落とした部分を消してしまうと元に戻せなくなるためです。

Figma(ブラウザで使えるデザインツール)では、画像のレイヤーを選んで右サイドバーの「塗り」から画像モードを「トリミング」にするか、画像をダブルクリックし、周りの青いハンドルをドラッグして範囲を決めます(Figmaのヘルプ「画像のトリミング」)。

Figmaのトリミングは、切り落とした部分を削除せずに隠しているだけなので、もう一度トリミングを開けば範囲を変えられます。

Photoshop(Adobeの画像編集ソフト)では、ツールバーの「切り抜きツール」を選び、画像の角や辺のハンドルをドラッグして範囲を決め、確定します。

このとき、オプションバー(画面上部の設定欄)の「切り抜いたピクセルを削除」をオフにしておくと、切り落とした部分が残り、あとから範囲を変えられます。

どちらのツールでも、「消さずに隠す」設定でトリミングしておけば、デザインを直すときに困りません。

CSSで画像をトリミングして表示する

Webサイトでは、画像ファイルそのものを切らなくても、CSSで決まった形の枠に収めて、はみ出した部分を隠す「見た目のトリミング」ができます。

CSSはWebページの見た目を指定する言語で、aspect-ratio(枠の比率を決める)とobject-fit(画像を枠にどう収めるかを決める)を組み合わせると、形の違う写真でも同じ形にそろえて表示できるためです。

次のCSSは、画像を横幅いっぱい・16:9の枠に収め、はみ出した部分を切り落として表示する例です。

.thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

object-fit: coverは、画像の比率を保ったまま枠をすき間なく埋め、はみ出した部分を表示しない指定です(MDNのobject-fitの解説)。

何も指定しないと、画像は枠の中央を基準に切り取られるので、上の方を残したいときはobject-positionで基準の位置を変えます(MDNのobject-positionの解説)。

.thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
}

この指定では、横は中央、縦は上端を基準にして切り取られるので、人物の顔が上の方にある写真でも頭が切れにくくなります。

CSSでのトリミングは見た目だけの処理で、画像ファイルの大きさ(容量)は変わらないので、大きすぎる写真はあらかじめ画像ファイル自体をトリミングしておきましょう。

object-fitのほかの値や、画像のサイズをそろえる応用はCSSで画像サイズを合わせる方法で紹介しています。

きれいにトリミングするコツ

トリミングの操作は簡単ですが、どこで切るかで写真の印象は大きく変わります。

ここでは、比率の選び方、被写体の置き方、円形や図形に合わせる方法、失敗したときに備える方法を紹介します。

使い道に合う比率を選ぶ(比率の早見表)

トリミングするときは、範囲を決める前に、まず使い道に合う比率を選びましょう。

先に比率を決めておけば、あとは枠の位置と大きさを調整するだけで済み、投稿先や印刷で端が切れるといった失敗も防げるためです。

次の表は、よく使われる比率と主な使い道、横4000×縦3000ピクセル(4:3)の写真からトリミングしたときに残せる最大のピクセル数をまとめたものです。

比率	形	主な使い道	4000×3000の写真から残せる最大サイズ
1:1	正方形	SNSのアイコン・プロフィール写真、正方形の投稿	3000×3000
4:5	やや縦長	縦長の写真の投稿、人物写真	2400×3000
4:3	やや横長	スマホのカメラの標準の比率	4000×3000(元のまま)
3:2	横長	デジタル一眼カメラ、L判プリントに近い比率	4000×2666
16:9	ワイド	動画、テレビ・パソコンの画面、プレゼン資料	4000×2250
9:16	縦長	縦長の動画、スマホの壁紙	1687×3000

表を見ると分かるとおり、元の写真と形が離れた比率ほど、残せるピクセル数は少なくなります。

SNSの投稿画像の推奨サイズはサービスごとに違い、変わることもあるので、投稿先の公式ヘルプで最新の情報を確かめてください。

比率の考え方や、ピクセル数から比率を計算する方法はアスペクト比一覧と計算方法で詳しく解説しています。

三分割を意識して被写体の位置を決める

どこで切ればいいか迷ったら、画面を縦横に3等分する線を思い浮かべ、その線や交わる点に見せたいものを置くようにトリミングしてみましょう。

この置き方は「三分割法」と呼ばれる定番の構図で、被写体をど真ん中から少しずらすことで、写真に余白と動きが生まれやすくなるためです。

たとえば、人物を左の縦線に合わせ、人物が向いている右側を広く空けると、視線の先に空間ができて自然な写真になります。

トリミング中に枠の中へマス目の線が表示されるアプリもあるので、表示されたらそれを目安にするとよいでしょう。

一方で、商品写真やアイコンのように「これだけを見せたい」ときは、あえて中央に置く日の丸構図のほうが伝わりやすいこともあります。

三分割法・日の丸構図など構図の種類と選び方は構図とは?で図付きで紹介しています。

円形・図形に合わせてトリミングする

プロフィール写真のように丸く見せたいときは、まず正方形にトリミングしてから、円の形で表示するのが基本です。

画像ファイルは基本的に四角形なので、正方形の画像の角を丸く隠すことで円に見せているためです。

Webサイトでは、次のCSSで正方形の枠を作り、border-radius(角の丸み)を50%にすると円形になります(MDNのborder-radiusの解説)。

.avatar {
  width: 120px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}

aspect-ratio: 1 / 1で正方形の枠にし、object-fit: coverで写真をすき間なく収めてから角を丸めるので、横長の写真でもゆがまずに円形になります。

円形にすると正方形の四隅が見えなくなるので、見せたいものは端に寄せず、中央付近に収めておきましょう。

Figmaでは、画像のレイヤーの角の半径を大きくするか、円の図形でマスク(図形の形だけを見せる機能)を作ると、円や楕円にトリミングできます(Figmaのヘルプ「マスク」)。

PowerPointやWordでは、画像を選んで「図の形式」タブの「トリミング」の下の矢印から「図形に合わせてトリミング」を選ぶと、円・角丸の四角形・吹き出しなど、好きな図形の形にできます(Microsoftのサポートページ「図を図形に合わせてトリミングする」)。

どの方法でも、「正方形(または図形が収まる四角形)に整えてから形を当てる」と考えると、思いどおりの位置で丸く切り取れます。

元の画像を残しておく

トリミングする前の元の画像は、必ず残しておきましょう。

一度切り落として保存した部分は、元の画像がなければ取り戻せず、あとで別の比率が必要になったときに作り直せなくなるためです。

たとえば、SNSのアイコン用に正方形に切った画像しか残っていないと、あとからバナー用の横長の画像が必要になっても、左右の景色はもう足せません。

この記事で紹介した方法なら、Googleフォトの「コピーとして保存」、Macの写真アプリでの複製、Figmaのトリミング、Photoshopで「切り抜いたピクセルを削除」をオフにする設定が、元を残す方法にあたります。

画像ファイルを直接トリミングするときは、先にファイルを複製してから、複製のほうを編集する習慣をつけると安心です。

トリミングで失敗しないための注意点

最後に、トリミングでよくある失敗と、その避け方をまとめます。

切りすぎて画質が粗くならないようにする

写真の一部分だけを大きく切り出すときは、残るピクセル数が使い道に足りているかを確かめましょう。

トリミングでピクセルは増えないので、小さく切り出した画像を大きく表示すると、引き伸ばされてぼやけたり、ギザギザに見えたりするためです。

たとえば、横4000ピクセルの写真の中から横400ピクセル分だけを切り出すと、横幅は元の10分の1になり、パソコンの画面いっぱいに表示すると粗さが目立ちます。

遠くのものを大きく見せたいときは、トリミングに頼るより、撮るときに近づいて大きく写しておくほうがきれいに仕上がります。

大事な部分を端ぎりぎりで切らない

人物の頭や手足、文字などの大事な部分は、枠の端ぎりぎりで切らないようにしましょう。

端に余裕がないと窮屈に見えるうえ、表示する場所によっては、さらに円形や別の比率で切り取られて見えなくなることがあるためです。

たとえば、正方形ぴったりに顔を収めたアイコンを丸く表示すると、四隅が隠れて耳や髪が切れてしまいます。

人物を切るときは、関節(首・手首・ひざなど)のちょうど位置を避け、頭の上には少しすき間を残すと自然に見えます。

引き伸ばして比率を合わせない

決まった比率に合わせたいときは、画像を縦や横に引き伸ばさず、トリミングするか、足りない部分に余白を足しましょう。

縦横の片方だけを伸ばすと、写っている人や物がゆがみ、見る人にすぐ気づかれてしまうためです。

Webサイトでも、widthとheightを両方決めただけでは画像が枠に合わせてゆがむので、先ほどのobject-fit: coverを使います。

「形を変えるときは、伸ばさずに切るか足す」と覚えておけば、ゆがんだ画像を使ってしまう失敗は防げます。

よくある質問

トリミングについて、よく聞かれる質問に答えます。

トリミングは英語で何と言う?

画像や写真のトリミングは、英語では一般に「crop(クロップ)」と言います。

英語の「trim」は端を切りそろえることや、動画の前後を短くすることに使われることが多く、写真の範囲を切り取る機能は多くのアプリで「Crop」と表示されます。

たとえば、Figmaの英語版ヘルプでも、画像のトリミングの記事名は「Crop an image」です。

トリミングした写真は元に戻せる?

アプリの標準機能で編集した写真なら、元に戻せることが多いです。

iPhoneの写真アプリは保存後でも「元に戻す」で戻せ、Googleフォトは編集から「最初に戻す」で戻せます。

Googleフォトで「コピーとして保存」した写真は「最初に戻す」が使えませんが、元の写真が別に残っているので、そちらを使えば問題ありません。

一方、別のアプリで切り取って新しいファイルとして書き出した画像は戻せないので、元の画像を残しておくことが何より大切です。

写真を正方形にトリミングするには?

トリミングの画面で、比率を「1:1」や「スクエア(正方形)」に固定してから範囲を決めます。

iPhoneは比率のボタンの「スクエア」、Googleフォトは「アスペクト比」、Macの写真アプリはサイドバーの「スクエア」から選べます。

比率を固定せずに目分量で囲むと、わずかに長方形になってしまうので、必ず比率を選んでから枠を動かしましょう。

トリミングするとファイルサイズは小さくなる?

画像ファイル自体をトリミングした場合は、ピクセルが減るので、多くの場合ファイルサイズも小さくなります。

ただし、CSSのobject-fitで見た目だけを切り取った場合は、元の画像をそのまま読み込んでいるので、ファイルサイズは変わりません。

Webサイトを軽くしたいときは、表示する大きさに合わせて画像ファイルそのものを切ったり縮めたりしておきましょう。

まとめ

トリミングとは、写真や画像の外側を四角く切り落として、見せたい部分だけを残す編集のことで、形に沿って背景を消す「切り抜き」とは別の作業です。

iPhoneやMacの写真アプリ、Googleフォト、Windowsのフォトなど、最初から入っているアプリでも、比率を選んで簡単にトリミングできます。

きれいに仕上げるには、使い道に合う比率を先に決め、三分割を目安に被写体の位置を整え、元の画像を残しておくことが大切です。

Webサイトでは、aspect-ratioとobject-fit: coverで、画像ファイルを切らずに見た目だけトリミングすることもできます。

まずはスマホの写真を1枚選び、「コピーとして保存」や複製で元を残したうえで、正方形と16:9の2通りにトリミングして、印象の違いを見比べてみましょう。