廣升健生の頭の中を発信するメディア

升メディア-廣升健生のオウンドメディア

左サイドバーメニュー下テキスト

左サイドバーメニュー下テキスト左サイドバーメニュー下テキスト左サイドバーメニュー下テキスト左サイドバーメニュー下テキスト左サイドバーメニュー下テキスト左サイドバーメニュー下テキスト左サイドバーメニュー下テキスト

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

 
この記事を書いている人 - WRITER -
廣升健生(ひろますたけお)
プロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィール

クラウド税理士 ブログ論19

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

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

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

画像は長方形で作る

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

クラウド税理士 ブログ論2
5:8という比率は黄金比と言い、人間が最も美しいと感じる比率とされているらしいのでそれ以上は特に強いこだわりがあるわけではないのですが、比率云々よりも、

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

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

スマホファースト

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

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

クラウド税理士 ブログ論7対して、スマホで見るとこうなります。

クラウド税理士 ブログ論8

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

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

クラウド税理士 ブログ論9

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

クラウド税理士 ブログ論10

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

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

クラウド税理士 ブログ論11

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

スマホはこう

クラウド税理士 ブログ論12

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

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

余白を作る

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

税理士試験の所長本音05
でも、これ実は正方形の画像ではないのです。正方形の画像に余白を入れて長方形にしているのです。

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

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

あえて縦長方形を使う

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

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

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

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

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

例えばこの画像

左から右の時系列の図解

クラウド税理士 ブログ論16
同じ、大きさのフォントで作った縦の時系列の図解

クラウド税理士 ブログ論17
パソコンでみれば、どちらでも大差ないですが。スマホで閲覧するとこんなに違います。

クラウド税理士 ブログ論18

この記事を書いている人 - WRITER -
廣升健生(ひろますたけお)
プロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィールプロフィール

Copyright© 升メディア-廣升健生のオウンドメディア , 2018 All Rights Reserved.