PCだけでなくスマホやタブレットからでも見やすくなるように試行錯誤した結果。

こんにちは!毎日1人で平均5個前後のコンビニ商品を紹介しているコンビニ商品の専門家のたくまさんです。(takumasan11)

今回はコンビニの商品とは関係のない記事です。商品自体には関係ないですが、コンビニ商品の記事に対しては直接関係のある記事になります。

最近、セブンイレブンとローソンのまとめ記事をせっせと10時間以上かけて書いたのですが、この記事には致命的な弱点があったんですよね。それは、スマホやタブレットからではとても見づらい。見れたものではない。ということです。

書いている時は、目の前のことに夢中でそういったことには気にも留めていなかったんですが、後から気付いた時に、これはあまりに酷すぎる。早急にどうにかしないと。と思ったんですね。しかも、私のサイトに訪れてくれる人の9割弱はスマートフォンということですから、スマホ表示を最優先にしても良いくらいなのです。

PCだけでなく、スマホやタブレットからでもどうやったら見やすくなるのか?私なりに試行錯誤した結果を紹介していきたいと思います。

施策前はどうだったか

いきなりですが、問題の記事が施策前にどんな感じで表示されていたのかをお見せしていきたいと思います。PC、スマホ、タブレットの表示の全てをお見せします。

PC

最初にPCから。こうしてみるとすっごく綺麗で文句なしなんですけど、残念ながら画面が大きいからそう見えるだけです。

iPhone X

次に、私が愛用しているiPhone X。縦表示だとこんな感じ。控えめにいって酷いですね。もはやガタガタと言ってもいいくらいレイアウトが崩れてしまっています。

これでは見る気が起きないですよね。今まで私以外にもこの記事を上の表示で見ていた人がいたと思うと本当に申し訳ない気持ちになります、、すみません;

そんなiPhone Xも横表示にすれば、まずまず綺麗になりますが、スマートフォンは横より縦で見る人の方が圧倒的に多いですよね。横表示は手間ですし。

iPad

縦表示。相変わらず汚いです。iPhone Xより画面の大きいiPadでもこのありさまです。

横表示にするとかなりマシにはなります。

iPad Pro

iPadより画面の大きいiPad Proではどうでしょうか。いや、これも酷いですね。見づらいことこの上ないです。解像度の関係か分かりませんが、iPadの時より見づらくなってます。

横表示にすると小さすぎて見えません。老眼の人に優しくないどころか、普通にメガネをかけている状態の私でもよく見えません。

iPhone5/SE

iPhone XよりグッとコンパクトなiPhone5とSEだと想像していた通りの酷さでした。SEは画面が小さいiPhoneが好きな人には愛用されていますし、軽視できない存在です。

横表示にするとかなり改善されますが、iPhone Xと同じように、スマホを横にしてみる人は少数だと思います。動画やゲームなら横にする人が多いですけどね

施策後はどうなったか

ここまで読んでいただけた方なら、以前の状態がいかに酷かったかよく分かったんじゃないかな、と思います。この状態を改善するために、歩いている時も、ご飯を食べている時も、歯を磨いている時も、色んな場所でどうしたら良いのか自分なりに考えていました。

その結果、PCだけでなくスマホやタブレットからでも、さらにスマホやタブレットを縦画面にしても横画面にしても見やすくなりましたので、ここで紹介したいと思います。

PC

まずPC表示です。とても綺麗です。基本は上の写真のように横に2つ商品が並ぶレイアウトになっています。

iPhone X

次にiPhone Xの縦画面表示。

縦画面でも全く問題なくなりました。スクロールは沢山しなければならなくなりましたが、目次などのリンクも追加しておいたので、大きな問題はないかと思います。何と言ってもあのごちゃごちゃ感から解放されたのは大きいですね。

横画面にしても全く問題なしです。PCのように商品が2つ横並びで表示されるようになります。

iPad

iPadの縦画面も綺麗です。一気に4つの商品を見ることができますし、写真が大きくなったことでどんな商品か一目で分かるようになったかなと。

横でも問題ないですが、縦の方が沢山表示されるのかなと。

iPad Pro

iPad ProはiPadよりさらに画面が大きいので、一度に多くの商品が確認できます。レイアウト崩れも全くありません。

横画面にしてもこの通り問題なしです。

最後に

かなり綺麗になって気持ち的にもスッキリしました。これでストレスなく見れる人が増えてくれると私としては嬉しいです。また、今回紹介した記事が気になる方は、以下のリンクから是非チェックしてみてくださいね。

全部で450商品以上!セブンイレブンで販売しているお弁当、おにぎり、パン、スイーツなどの値段、カロリー、賞味期限の一覧表。