文字と画像の並びの違うパターンをいくつか作り、パソコンとスマートフォンでどのパターンが見やすいかを、ツイッターアンケートで調査しました。
調査内容と結果と考察をまとめました（投票数が少ないので、あくまで参考レベルです）。
調査内容
調査内容とやり方は下記のとおりです。
目的とやり方
- 【目的】
パソコンとスマートフォンで文字と画像の並びは、下記のどのタイプが見やすいのか。ユーザビリティチェックをしたい。 - 【やり方】
下記のタブを切り替えて、どのタイプが一番見やすいかをツイッターで投票。
表示タイプは下記の3つのタイプを作成しました。
| タイプ1 | 文字と画像を縦に配置するタイプ。パソコンでみてもスマホでみても同じ表示です。 |
| タイプ2 | 文字と画像を左右に配置するタイプ。パソコンでみてもスマホで見ても同じ表示です。 |
| タイプ3 | タイプ3はパソコンでは左右ですが、スマホの場合は横スクロールになります。 |
アンケート結果
結果はタイプ1の縦長が一番見やすいという結果になりました。
パソコンとスマホで画像を表示する場合、どのタイプが見やすいかを調査したいので協力をお願いします🙇♀️
✅下記URLにアクセスしてタイプを確認https://t.co/coDhjvb5fz
確認後投票お願いします🙏
投票のメリットは、サイトを作る時の参考にできます👌よろしくお願いします。#いつもありがとう— 仮想つながり💊ブログも投資もコツコツ努力 (@icobitcoinxem) June 24, 2022
画像とテキストの配置（タイプ別）
調査で使ったタイプは下記の3つです。タブで表示を切り替えることができます。
パソコンからみている場合は、Chromeブラウザなら「CTRL+SHFT+I」でスマホ表示に切り替えられます。
※DimensionsでiPhone XRなどを指定できます。
上の人を見てたのしくなっちゃったのかもしれませんね。手を振りながらおどるっています。楽しい音楽が聞こえてきそうです！
「GO」と言いながら走り出す人。彼は先頭を走っているに違いありません。なぜならレッツゴーといって最後尾にいるなんて人なんて聞いたことがありません。
横走りする人。ちゃんと前をみないと危ないですよ。
今日買ったばかりの赤い靴に履き替えて、うれしくて垂直ジャンプ！！
愛犬のセバスチャンがスケートボードにのって100m進むスーパーチャレンジに見事成功して大喜びしている飼い主さん！
80歳のおばあちゃんがジャンプしてかかとタッチしたところ。
そのおばあちゃんをみてめちゃくちゃよろこんでる孫。
嬉しくて楽しくて脚も変な方に曲がっちゃう！ダンス最高！っていう感じの人。
嬉しくて楽しくて脚も変な方に曲がっちゃう！ダンス最高！っていう感じの人。
考察
タイプ別の考察です。
タイプ1
画像が増えれば増えるほど縦長になっていきます。
表示している画像と関連あるテキストが上なのか下なのか、ぱっと見分かりにくいのがデメリットです。
ただし、パソコンもスマホも縦スクロールが基本なので、操作でとまどうことがなく一番見やすいので今回のアンケートでもこれが選ばれた気がします。
サイト制作者側も「テキスト＞＞画像」の順に作っていけばいいので、HTMLやCSSの修正も不要です。
タイプ2
画像とテキストが横に並んでいるので、タイプ1よりも画像とテキストのつながりが分かりやすい、省スペースタイプです。
デメリットは、スマホ表示にすると画像が小さくなってしまい、画像に文字を書いてもスマホ表示だと見えない可能性があります。
また、テキスト量によって、画像とテキストの見た目のバランスが悪くなってしまいます（画像の半分くらいまでテキストがあると見た目のバランスがよい）。
サイト制作者側からすると、画像とテキストを左右に配置しないといけないのでHTMLとCSSの修正が必要です。
タイプ3
タイプ3は、PayPayの操作説明やAmazonなどのECサイトの商品一覧などでも使われています。
パソコンとスマホで表示が変わってしまいますが、省スペースというのが大きなメリットです。
パソコン表示では文字が少し小さくなってしまい読みにくくなります。スマホ表示の時はいくつかデメリットがあります。
スマホ表示では画像が大きすぎると、画面内に全ての要素がおさまらずに下の方がきれてしまう可能性があります（テキスト量が多い場合など）。スマホの画面サイズによって表示範囲が異なるので調整が大変です。
また、縦スクロールの中に横スクロールがはいってくるので、操作が煩雑になります。さらに1画像当たりの横スクロールの幅が短いと、横スクロールをとめるタイミングで微妙に指に不快感があります。
画像だけで商品を印象付けるような使い方の時にいいと思います。
サイト制作者側からすると、HTMLとCSSの修正が必要になります。
まとめ
アンケート結果からは、タイプ1が見る側も作る側もシンプルでよいという結果になりました。
ただし、ツイッターアンケートで「結果だけを見るボタン」を設置しなかったため、一番最初にあるタイプ1がクリックされた可能性もあるのであくまで参考の調査です。
さらに調査をすすめるのであれば、Googleオプティマイズを使って実際の利用シーンから判断するのもいいかもしれません。
