ところがトリミングが上手くできなくて、どうしてもヘンテコな画像になってしまうんです💦 この悩みを解決したいので、何か良い方法があれば教えてください。
ぴっぴ（@hiyoko_no_pippi）です！
以前、ぴっぴも画像のトリミングが上手にできなくて困ったことがあります💦
それが画像の縦横比――アスペクト比て言います――が分かるようになってから画像の切り取りはスイスイです！
ということで今回の「ぴっぴのはてなブログでアフィリエイト」は画像のアスペクト比について書きました。
- 画像のアスペクト比
- ３Ｄペイントを使った実例
- アスペクト比計算ツールの紹介
画像の縦横比は、画像をきれいに見せるコツの１つ。つまり画像の縦横比を理解すれば、ブログ記事の見栄えを良くすることができるようになるんです！ なので最後まで読んで、ぜひ魅力的なブログ作りにお役に立てくださいね！
縦横比を考えたキレイな画像を使えば、読まれるブログ記事になるかも！
アスペクト比とは縦の長さと横の長さの比率
はい、アスペクト比は縦の長さと横の長さの比率です。
アスペクト比（アスペクトひ、 英語: aspect ratio）は、矩形における長辺と短辺の比率。
引用元：ウィキペディア「アスペクト比」
そしてアスペクト比は、いくつかの種類があって世の中の色んなものに使われています。
| 縦横比 | 使われているもの |
| 1:1 | アプリのアイコン、SNSのプロファイル画像、ファビコン |
| 2;3 | 32mmフィルム、写真 |
| 3:4 | パソコンのディスプレイ、デジタルカメラ |
| 9:16 | スライド、パソコンのディスプレイ、デジタルTV |
| 10:23.5 | 映画 |
| 10:14.14 | 日本建築、はがき、キティちゃん、ドラえもん |
| 10:16.18 | Appleやグーグルのロゴ、モナリザ |
1:1が使われているもの
はい、アスペクト比1:1は次のようなものに使われています。
- アプリのアイコン
- SNSのプロファイル画像
- ファビコン
ちなみにはてなのアイコンやデフォルトのサムネイルも1:1です。
2:3が使われているもの
アスペクト比2:3は次のようなものに使われています。
- 32mmフィルム
- 写真
3:4が使われているもの
3:4の比率は次のようなものに使われています。
- 古いテレビ
- デジタルカメラ
- パソコンのディスプレイ
9:16が使われているもの
9:16の比率は次のようなものに使われています。
- スライド（設定による）
- デジタルカメラ
- パソコンのディスプレイ
10:23.5が使われているもの
10:23.5の比率は映画で使われています。
あのびよよ～んと横に長い映画の映像が「10:23.5」です。
10:14.14
10:14.14の比率は白銀比と言い、次のようなものに使われています。
- 紙のサイズ
- 日本建築
- はがき
この他にキティちゃんやスヌーピー、トトロ、ドラえもんなどのキャラクターも10:1414の比率が使われています。
10:16.18
はい、10:16.18の比率は黄金比と言い、次のようなものに使われています。
- Appleのロゴ
- グーグルのロゴ
- ミロのビーナス
- モナリザ
- 凱旋門
確かオードリーヘップバーンさんのお顔も黄金比です。どおりで美人さんだと思いました。
ちなみにぴっぴのはてなブログでアフィリエイトで使っている画像は黄金比です（どやぁ）。
縦横比を意識して３Ｄペイントを使った実例
はい、それでは実際に縦横比を意識して画像の切り取りをしてみましょう。
今回はWindows10に内蔵されている「３Ｄペイント」を使いました。
手順は次のとおりです。
- 縦横比を固定する
- フレーミングを決定する
- トリミングする
- 位置調整をして完了ボタンを押す
1.縦横比を固定する
はい、まず縦横比を固定しましょう。これを固定しないで画像の切り取りをするのは、デザインに詳しい方や美術的センスのある方、編集ツールを使い慣れている方でないと難しいと思います。必ず縦横比を固定してください。
ところで３Ｄペイント以外のツールを使う場合も、事前に縦横比を固定してから画像のトリミングをしましょう。もしもツールに縦横比を設定する機能がないなら、後で紹介していますアスペクト比計算ツールを使うといいですよ。
2.フレーミングを決定する
はい、フレーミングを決定しましょう。３Ｄペイントの場合、決まった縦横比で画像を切り取ることができます。
ただしカスタムは使わないでください。カスタムは縦横を自由にトリミングできる便利な機能です。しかし自由度がある分、これを使ったトリミングは美術的センスが必要になります。
なのでフレーミングを決定するときはカスタムを選ばず他のものを選びましょう。おすすめは「16:9」です。この実例もフレーミングは「16:9」にしました。
3.トリミングする
フレーミングを決定したら、画像を切り取ります。今回の例の場合、棒線グラフ以外は使わないので上の画像のように切り取りました。ただ、左上の「アクセス解析」の文字が切れているので、この後位置を調整します。
4.位置調整をして完了ボタンを押す
はい、位置を調整したものが上の画像です。途切れて読みにくかったアクセス解析の文字が、枠内にきちんと収まりました。この状態で画像を切り取ることにします。
このように画像を切り取りたい位置の調整が終わったら「完了」ボタンを押してください。
多くの編集アプリは３Ｄペイントみたいに縦横比を設定したり、位置調整をしたりできますのでチャレンジしてみてくださいね。
アスペクト比計算ツール
縦横比を設定できても、普通のペイントみたいに縦横の数値を入力しないといけないものがあります。そのようなときは「アスペクト比計算ツール」を使うといいですよ。
アスペクト比計算ツールは縦横どちらかの数値を入力すると、もう一方の数値が自動で計算されるという便利なものです。
ぴっぴが実際に使ってみて一番いいと思ったアスペクト比計算ツールにリンクを貼っておきますので使ってみてください。
( ﾟдﾟ)ﾊｯ!
もちろん無料ですよ！ ご安心くださいね。
まとめ｜縦横比が分かると画像のトリミングが上手になりますよ！
このように縦横比を理解して、画像を上手にトリミングできるようになります。また白銀比や黄金比でトリミングした画像をブログに使えば「わー、このブログ記事の画像きれいで見やすいな」と思われるので大変お得ですよ。
この機会に次から縦横比を意識して画像のトリミングをしてみてください。そしたらブログ記事の見栄えが良くなりますよ！もしかするとブログの閲覧数が増えるかも！
- 1:1
- 2.3
- 3:4
- 9:16
- 10:23.5
- 10:14.14
- 10:16
以上ぴっぴでした！ ありがとうございます！
はい、ぴっぴからお知らせです💦
ぴっぴのはてなブログでアフィリエイトでは、主にはてなブログの使い方について説明しています。また今回のようなブログに関係のある記事やアフィリエイトに関係のあるものもありますので、ぜひお読みくださいね。
