理系学生の茶の間のちゃ

理系学生の茶の間のちゃ

理系の私が日々の少し役に立ちそうなそうでもない情報をお届けします!

理系学生の茶の間のちゃ

【ブログ】ブログの画像が美しく感じてしまうサイズって知ってる?

f:id:hyrasan:20180316150148p:plain

こんにちは、ウタです。

 

突然ですが、画像のサイズって気にしたことありますか?

 

サイズと言っても画像の容量の話では無く、縦横比の話です。
特に気にせずなんとなくで画像を貼り付けたり、加工している人も多いと思います。

 

しかし、画像のサイズにも"人が何となく美しく感じる"という比率があります。有名なのでは黄金比とか。

今回はそんな様々な比を紹介して、ブログに最適な画像のサイズを考えていきたいと思います!

 

 

様々な比

有名な比、美しいと言われる比にはそれぞれ名前がついています。有名なのは黄金比ですね。黄金比のように美しい比率には、それぞれの比が貴金属になぞられて名前がつけられています。

 

そんな貴金属比を紹介してい行きます!

各比率に応じて画像がついているので、なんとなく良いな...という比を見つけてみてください(このブログの都合で横は600pxで固定してあります!)

黄金比

f:id:hyrasan:20180316131716p:plain

まずは黄金比です

最も有名な比率ではないでしょうか?

比率は1:1.618で表されます。

 

貝の渦巻きだったり、葉っぱの様子など自然界に多く見られる比率ですね。自然界だけでなくこの黄金比はカードや名刺、建物に至るまで様々な所で見られます。

 

さすが黄金の名前をもらっている比率だけあって、これだけ知ってれば良いんじゃないのかレベル。迷ったらこの比率に合わせておけばOK

 

白銀比

f:id:hyrasan:20180316131726p:plain

続いては白銀比です。

黄金比の次によく知られる比率ですね。

日本人は黄金比よりもこの比率が好きな人が多いらしい。そのため、日本でよく用いられ大和比と呼ぶこともあります。

 

身近なところではA4、A5などの紙がこの白銀比になっています。

白銀比の特徴は半分にしてもその比率がそのままになるところです▼

f:id:hyrasan:20180316141256p:plain

この性質からA4を半分にした大きさがA5になるという風になってます。便利ですね。

 

黄金比同様迷ったらこれしとけばいい気がしますね。

 

青銅比、白金比

f:id:hyrasan:20180316131720p:plainf:id:hyrasan:20180316131733p:plain

続いては青銅比白金比です。

青銅比と白金比は馴染みがないと思います。上で紹介した黄金比白銀比よりも横長なのが特徴ですね。

 

青銅比なんかはブログとかのバナーとかサイドバーにつけるボタンとかにしたらしっくり来そうですね▼

f:id:hyrasan:20180316142033p:plain

こんな感じかな?

 

青銅比と白金比は使う機会がそんなにないと思いますが、横長の画像を使うときに思い出したら良いと思います。

 

じゃあ、有名なサイトの画像の比ってどうなってるの?

ここで知りたいのは、有名なサイトとかの画像比って今まで見てきた比のどれかになっているの?ってことですよね。

そこでYou Tubeとこのブログの運営のはてなブックマーク、あとサイトではないですが画像といえば!ということで写真のサイズを調べてみました。

 

You Tube

f:id:hyrasan:20180316131729p:plain

サムネと言えばYou Tubeですよね。トップページに並ぶサムネの画像たち。

You Tubeの場合はGoogleが推奨サイズを決定しています。そのサイズは「1280*720」です。比率に治すと1:1.777くらいですね。貴金属比のなかでは白金比が最も近いです。

 

イヤイヤ....。黄金比でも、白銀比でもないのかよ!って思いますよね

 

実はYou Tubeの場合は貴金属比に合わせているのではなく縦横比が「16:9」になるように比率が決定されています。

この16:9はモニターに多く採用されているサイズです。つまり、You Tubeの動画を全画面表示した時にぴったりなサイズが「1280*720」なわけです。You Tubeの動画は多くがこの「1280*720」で作成されています。

 

You Tubeの場合「サムネ=画像」という考えではなく、「サムネ=動画の表紙」という立ち位置なのでしょう。

じゃあ、どうして「16:9」が使われてるの?という疑問が出てきますがGIGAZINEさんが丁寧に紹介してくれています▼

16:9や4:3などの映像縦横比率が決まった本当の経緯と理由とは? - GIGAZINE

簡単に言うと、映画のフィルムなど、色々な要因をうまく表現できる妥協点が16:9らしいですよ

 

はてな

f:id:hyrasan:20180316131736p:plain

続いては、はてなブックマークです。

はてなの場合は「1:1.428」となっています。

これは白銀比に非常に近いです!

 

はてなブログをやっている人はサムネやアイキャッチ白銀比になるように調整しておけば、はてなブックマークに掲載されたときにほぼ違和感なく掲載されます!▼

f:id:hyrasan:20180317004006p:plain

※この記事が実際にはてなブックマークに掲載されました!

サムネ、アイキャッチとして上の画像を選択しています!

 

うん。気持ちいい。

ピッタリ収まっていますね!こうやってピッタリ収めたい方は上の比率にすると良いと思います!

 

写真

f:id:hyrasan:20180316131722p:plain

続いては写真ですが、これもほぼ白銀比に近い事がわかります。

 

しかも驚くことに、はてなに非常に近い大きさの比であることがわかります。

 

つまり、L版で取った写真をそのままブログのアイキャッチやサムネとして使えば、はてなでは完璧なサイズであるということです!わお!

 

レビューなどで取った写真がサムネに使えるし、トリミングとかも必要ないのはうれしいですね!

 

まとめ

紹介した金属比と各サイトの比をまとめました▼

f:id:hyrasan:20180316131742p:plain

アナタはどれが美しいと感じますか?

 

正直、これが正解の比率です!なんてものはありません。

しかし色々調べてみると、はてなでブログをやっている人は白銀比に合わせておけば、良い気がします▼

f:id:hyrasan:20180317140539p:plain

 

いままでなんとなくやっていた画像のサイズを今回紹介した金属比にしてみてはいかがでしょうか?

 

あと金属比をグリグリ出来るサイトがあったので紹介させていただきます▼

voidism.net

これをやってるだけで楽しいので遊んでみてください!

 

以上です!おわり!