ブログやYouTube用にフォトショップなどでサムネイルを作成して、いざアップロードしてみると勝手に拡大表示になり文字が途中で切れてしまう。こんなの印象が悪いので作り直し…なんてあるあるですよね…
今回はブログ運営やYouTube動画などでCTR（クリック率）に影響するサムネイルに関して、横幅と縦幅の縦横比率をぴったり収まるように作成して、サムネイル内の文書や画像をズラさずにアップロードする方法を紹介します。
（ついでにYouTubeのサムネイル縦横比も紹介します。）
- ブログ内のサムネイルがはみ出ちゃう
- サムネイルの縦横比を知りたい
- YouTubeのサムネイル縦横比を知りたい
- サムネイルの縦横比の合わせ方を知りたい
まずはアップする場所の縦横比を調べよう
美しいサムネイルを作成するには、サムネイルとなる部分の画像サイズと縦横比を調べなくてはいけません。
当ブログのトップページの縦横比は約3:2です。PC表示でのトップページのサムネイルは約301×170pixelで、スマホ表示のサムネイルは170×120pixelです。この縦横比を維持する事でPC、スマホの両方で美しいサムネイルを作成出来ます。まずは自分のブログ（YouTube）の画像サイズと縦横比調べましょう。
このような縦横比の事を『アスペクト比』というので覚えておこう。
画面アスペクト比（がめんアスペクトひ）とは映画・テレビジョンなどにおける画面のアスペクト比である。誤解の可能性がないときは単にアスペクト比、アスペクトレシオともいい、Display Aspect Ratio（あるいはScreen Aspect Ratio）を略してDAR（SAR）ともいう。 アスペクト比は、テレビやデジタル動画では横縦の整数比（例：4:3）で表されることが多く、映画界では伝統的に、縦を1とした縦横比（例：1:1.33）で表されることが多いが、ここでは順序は横縦比（例：4:3、1.33:1）で統一する。
https://ja.wikipedia.org/wiki/画面アスペクト比
サムネイルのアスペクト比の調べ方
では実際にサムネイルのアスペクト比を調べる方法について説明致します。今回の方法はウェブブラウザのデベロッパーツールを使用して調べる方法です。
デベロッパーツールについては下記の記事で紹介いたします。
今回はサムネイルの作成だけを考えてデベロッパーツールの使い方を紹介します。
まずは、GoogleもしくはSafariなどのウェブブラウザでサムネイル該当箇所にマウスオーバーし右クリックで『検証（要素の詳細を表示）』を選択して下さい。プログラミングコードがずらりと並んだものが出てきます。これが『デベロッパーツール』です。
マウスオーバーしたサムネイルの上に下記のように『img.thumbnail. ~~~ 301.33×170.05』の様にサイズが表示されます。これが現在使用しているディスプレイの画面幅に合わせた画像サイズです。
上記はあくまでも画面幅に合わせたサイズです。PC、スマホなど画面幅によりサイズは変わります。そのため上記のサイズでサムネイルを作れば良い訳ではありません。この縦横比を基準として作っていきます。
では上記の『301.33×170.05』のサムネイルを例にアスペクト比の比率を割り出します。計算方法は非常に単純で片方を÷2したらもう一方も÷2する。÷3÷,4,÷5といつでも両方を同じ値で割り続けて、割れなくなった際の数値がアスペクト比です。
『301.33×170.05』の場合は『151:85』がアスペクト比です。
計算が難しい場合、WEB上で「アスペクト比計算ツール」と調べれば下記のようなツールが出てくるので、そちらを使うと良いでしょう。
YouTubeのサムネイルの縦横比
YouTubeのサムネイルのアスペクト比は『16：9』で、推奨サイズは『1280×720』です。
これも「YouTube サムネイル アスペクト比」と調べればすぐに出てきます。
以下の画像はYouTubeの一覧ページです。
画像の幅高さを調べると幅276高さ155になっています。これは16:9の大きさです。
さらにこの画像をダウンロードしてみると720×404のサイズの画像が使用されていました。（これももちろん16:9の大きさです。）
アスペクト比に合わせてサイズを調整しよう
次に、上記のアスペクト比を維持して、テキストやデザインがはみ出ない美しいサムネイルの作り方を紹介いたします。
先ほどの、私の『301.33×170.05』のサムネイルを元に今回の記事のサムネイルを作っていきます。
今回はフリー素材で適当に持ってきた下記の写真をサムネイルにします。元サイズは902×420くらいの写真で『151:85』には該当しませんので、それに合わす様に編集していきます。
まずはPCの写真編集ソフトで幅だけを先ほどの『301.33×170.05』のサムネイルに合わせます。（今回はMACのプレビューソフトで編集します。Windowsの場合はペイントでOK）
写真編集ソフトにはアスペクト比を崩さずサイズ変更する設定がデフォルトでついているので、実際の作業はアスペクト比なんて調べなくても可能です。（ただ基本的な考え方として覚えておきましょう。）下写真
今回は、当ブログのサムネイルの横幅は301pixelだったので2倍の602pixelにサイズ変更します。（投稿ページのヘッダー画像にも使いたいので倍のサイズに設定します。）上記写真
次に縦幅の170pixelに合わせます。
ここで写真編集ソフトで『高さ』を170と直入力してアスペクト比を崩してしまい、写真を歪ませたり、いざアップしてみたらテキストがはみ出てるってのがやりがちなパターンです。絶対にこの比率は崩してはいけません!!
縦幅は比率を合わせなくてはいけないので、先ほど同様に2倍にして340pixelにします。この比率を合わせるには下記の様に340pixelのサイズでトリミングをしましょう。
これで『602×340』の画像の完成です。このサイズなら私のサイトのサムネイルでPC、スマホ共にぴったりと収まり文字がはみ出なくなります。
今回は結果をわかりやすく、編集時点で下記の様にテキストを幅ギリギリに配置しています。
上記の画像をこの記事のサムネイルとして設定しましたので、文字のはみ出しなどが無く綺麗に収まってるかと思います。是非、PCスマホ共に実際に確認してみて下さい。
最後に追記
またWordPressの投稿時に写真サイズを横幅いっぱいにする方法があります。サムネイル用に調整した写真を投稿で使おうとすると幅が足りない事もあるかと思います。
その場合、下記の様にメディア『配置を変更』の『幅広』に設定すれば幅が100%に（width: 100%）設定され投稿カラムの幅の最大値まで広がります。もちろんアスペクト比を保ちながらです。
またJSやCSSで画像のwidthとheightを細かく指定しているとその指示されたサイズに調整されるので、その場合は作ったサムネイル画像もズレてしまう場合もあります。
その場合はJSやCSSでどの様な指示がされているか調べて、width: 100%やwidth: autoなどに切り替えるか、もしくはheightを消すなど何かしら試してみて下さい。
以上が、「サムネイル用に縦横比率がピッタリの画像を作る方法」でした。
ブログもYouTubeもサムネイルによって大きく印象が変わりますし、ユーザーのクリック数に影響が出てくるのでサムネイル作成に関しての知識は非常に大事になってきます。
今回紹介した、美しいサムネイル作成の方法でよりユーザーの目に届くサムネイルを作成していきましょう！！
サイズ変更の作業量が多い方は一括で画像サイズを変更する方法を以下からどうぞ
丁寧かつサクッとサムネイルを作成したい場合はXDがおすすめです。詳しくは下記。
