クラウド税理士がこだわるブログの画像の縦横比について

前回の【クラウド税理士がこだわるブログの画像の使い方】は画像の使い方でした。
今回も画像のこだわり関連の話で連投なのですが、今回は画像の縦横比についてです。

今は自分の中で決まったルールがあるのですが、そこにたどり着くまではかなり試行錯誤をしたので、コンテンツにしてみました。そんな話を少々。

画像は長方形で作る

まず結論からですが、自分は画像は必ず長方形で作ります。
縦横比を厳密に作っているわけではないですが、おおよそ5：8程度を基本にしています。

5：8という比率は黄金比と言い、人間が最も美しいと感じる比率とされているらしいのでそれ以上は特に強いこだわりがあるわけではないのですが、比率云々よりも、

縦よりも横の比率が大きい

と言うことにはこだわっています。
なので、基本的には正方形の画像は使わない。長方形の画像を縦には使わないようにしています。

スマホファースト

その理由は、スマホです。
自分が、コンテンツを作る際には常にスマホでどう見えるか？を意識しています。
で、スマホでは画像が画面の半分以上を占拠しない事を心がけています。

例えば、下記の5：8の画像をパソコンで閲覧するとこうなります。※画像は横700pixel縦438pixelで作成

対して、スマホで見るとこうなります。

PCもスマホも全体の画面の3分の1程度を画像が占めている感じです。

これが、正方形の画像の場合パソコンなら、特に印象が変わらないです（画像は横438pixel縦438pixelで作成）が

スマホで閲覧するとこうなります。

5：8の画像に比べると画面の占拠率が高くなります。画面の半分以上は画像ですよね。

さらに、縦長の画像縦8：横5の画像だとパソコンはこう。※画像は横400pixel縦640pixelで作成

パソコンならなんとか、1画面の中に画像とテキストが入っていますが。

スマホはこう

完全にスマホの画面を独占する事になります。

自分のサイトの場合画像はメインではなく、あくまでテキストを補完するための情報という位置付けなので、画像がスマホの画面を独占してしまうのは嫌なのです。

余白を作る

最近再更新をしている税理士試験の勉強コンテンツのトップ画像は、正方形なのです。

でも、これ実は正方形の画像ではないのです。正方形の画像に余白を入れて長方形にしているのです。

下記の【余白あり】と【余白なし】を比べると余白ありは、本文が半分くらい表示されていますが、余白なしは本文は2行ほどしか表示されません。

そのため、トップ画像はアイキャッチ画像と本文のトップ画像は、一見同じ画像ですが、正方形版と、長方形の余白あり版を2つ作っているいます。
本文中の画像についても同じやり方で、正方形や縦長方形の写真などを使う場合には、余白を挿入する事で、スマホで見える画面を調整をすることが可能です。

あえて縦長方形を使う

このスマホで見える事を前提に画像を作る事を頭に入れると、あえて縦長方形画像を用意して効果的に見せるという事も可能です。
例えば【人工知能時代を生き抜くために、ブログは○年続けたほうが良い理由】では、あえて長方形の腕の画像で【自信】としています。※本文ではブログを1年続けたら自信がつくことが大きな財産だという意味合いで使っています。

これだと、スマホの画面を占拠して、インパクト大ですよね。こういう場合はあえて、縦長で画像を作っています。

ちなみに、自分はパソコンとスマホやタブレットなど、どの端末で閲覧しても、自分が意図した表現がそのまま伝わる画像のサイズを模索しています。

フローチャートや図解は注意

画像を作る際にスマホファーストで考えると、横長方形でという結論なのですが、図解やフローチャートを作るときには注意してくださいね。
税理士のコンテンツでよくあるのは時系列の図解。
これ、セミナー用の資料と同じ感覚で左から右の時系列のフローチャートを作ると、スマホだと字が小さくで逆に見づらい画像になってしまいます。

例えばこの画像

左から右の時系列の図解

同じ、大きさのフォントで作った縦の時系列の図解

パソコンでみれば、どちらでも大差ないですが。スマホで閲覧するとこんなに違います。