ブログにスマホ画像を貼る場合のサイズや見せ方を改善する4つの方法！

今回はブログにスマホのキャプチャー画像を貼る場合にユーザーに不快感を起こさせないためのサイズや見せ方を紹介していきます。

いろんなブログでスマホのキャプチャー画像が使われていますが、ほとんどのブログが正直見にくいんですよね。

  理由としては以下のとおりです。

わたしがいろんなブログを見てて不快に感じるのは上のような状態でキャプチャー画像を貼っているのを見た時です。

わたしが一人だけ感じていることかもしれませんが、当ブログでは来ていただいた方が少しでも見やすいように試行錯誤した結果今の表示方法をとっています。

Ｇｏｏｇｌｅのキーワードプランナーで今回の記事についてｋｗを調べましたが、需要は正直あまりありませんでした。

ただ、この結果はブログを作成している側がユーザー目線で画像を貼り付けていないのではないか？とも考えられます。

運よくこの記事を見た方は、画像の貼り方で他のブログと差別化をはかってみましょう！

スマホから見にくい貼り方

まずはキャプチャー画像の悪い貼り方の例を紹介していきたいと思います。

当てはまっていたら要注意！訪問者の離脱率が高いかも。

悪い例①：そのまま貼付け

キャプチャー画像をそのまま貼り付けているパターン。

スマホから見ると画面一面にキャプチャー画像が映っていて見にくくないですか？

一枚だけなら我慢ができますが、説明するときは画像10枚以上使うので3枚目くらいから嫌になります。

もし圧縮もしていないならば表示されるまでに時間もかかるので、ユーザー離脱ポイントとなってしまいます。

枠が付いているのでなんとか見れなくもないレベルですが。。。

悪い例②：境界線なしの貼付け

悪い例の2つ目は境界線がないパターンです。

先ほどと異なり枠を削除してみました。境界線が無くてどこからどこまでが画像か見にくいですよね。

画像が2枚以上続くと目が痛くなってきます。

正直スマホからもパソコンからも見にくいもっとも悪い例です。

悪い例③：画像が小さすぎる貼付け

次は貼り付ける画像が小さすぎるパターンです。

パッと見た感じは見にくいですが、スマホの場合ピンチアウトすることができるので拡大すれば読み取ることは可能です。

ただブログを見に来られた方は、そこまでしてあなたのブログを見ようとはしてくれないので離脱ポイントとなってしまいます。

悪い例④：画質が荒い貼付け

次の悪い例は画質が異常に悪いパターンです。

文字がぼやけて読み取ることができないですね。

ピンチアウトして拡大しても文字がぼやけているので離脱ポイントとなってしまいます。

スマホから見やすい貼り方

それでは、ここからはキャプチャー画像を見やすくする貼り方を紹介していきます。

正方形にキャプチャー画像を2つ貼る

一つ目の方法が正方形に近いキャンバスにキャプチャー画像を2枚貼る方法です。

最近よく見かけるようになったキャプチャー画像の貼り方ですね。

スマホの画面いっぱいにキャプチャー画像が映らないので見やすく感じます。

タップして拡大できるようにする

これも昔からある方法ですが記事上は小さい画像にして、タップすると画面いっぱいにキャプチャー画像が表示される方法です。

これならばユーザーが拡大したい画像だけ自由に選べるのでユーザーにとっても使い勝手がよくなります。

モックアップに画像を貼り付ける

スマホのキャプチャー画像感を出すためモックアップ画像にキャプチャー画像を貼り付ける方法です。

これだとスマホのイメージがわきやすいのでしっくりきます。

イメージを紹介するため大きめの画像を使用していますが、ブログに貼る場合はもう少しサイズを小さくして貼り付けると見やすくなります。

すべてを兼ね備える

これまで紹介してきた3つの方法を兼ね備えたのが最近私が利用している貼り方です。

一つの一つの画像は小さくなりますが、元データを1200幅にしているため画質は良くなっています。小さくても文字が読めるレベルです。

さらに詳しく知りたい方はタップして拡大することができるようにしています。

ブログにスマホ画像を貼るサイズや見せ方：まとめ

今回は個人的にいつも気になっているスマホの画像（キャプチャー画像）の貼り方について紹介してみました。

まだまだ、改善の余地はあると思いますので『こんな貼り方が見やすいよ！』とか『このブログが見やすい』ってのがありましたら教えてください！

最後に今回の記事の内容をまとめておきます。