2026年~新ブログに移行しました。以前のブログ記事は、サイトデザインが崩れていますが、徐々に修正中です
PR

スマホ用デザインの難しさ

WordPress

久しぶりにブログのカスタマイズをしてみたんだけど、その際、スマホ用のデザインを確認してみたら色々と大変な状況になってた。

スポンサーリンク

記事がはみ出す

自分の使っているスマホは、これ
sh07e_5

NTTドコモ AQUOS PHONE si SH-07E
キャリア NTTドコモ
製造 シャープ
発売日 2013年6月21日
概要
OS Android 4.2
CPU Qualcomm
Snapdragon 600
APQ8064T 1.7GHz
(クアッドコア)
サイズ 126 × 59 × 10.7(最厚部11) mm
質量 約131 g
連続通話時間 約630分(3G)
約610分(GSM)
連続待受時間 約460時間(3G)
約400時間(LTE)
約400時間(GSM)
充電時間 約170分
バッテリー 2,100mAh
内部メモリ RAM:2GB
ROM:32GB
外部メモリ microSD
(2GBまで・ドコモ発表)
microSDHC
(32GBまで・ドコモ発表)
microSDXC
(64GBまで・ドコモ発表)

なんだけど、すでに4年前の機種。
アップデートは2回くらいあったけど、androidのバージョンは最初のまま。

当然ながら、元から入ってるブラウザも古いものなんだけど その古いブラウザでこのブログみて見たら 恐ろしいほど表示が崩れてた 😯

なんというか・・・CSSがうまく反映されてなかったり、画像がうまく縮小されてなかったりでトップページからすでにぐちゃぐちゃ。
hen_Screenshot_2017-06-20-02-27-22

これを丁寧に直す知識はない。
ブラウザが古いせいであってくれ!と「chrome」を入れて見てみると
hen2_Screenshot_2017-06-20-02-35-26

よかった、一応まともに表示されるようだ。
しかし、表のあるページはサイズ指定してるとはみ出すみたい。
hen3_Screenshot_2017-06-20-02-41-51

今までまったく意識してなかったんだけど、スマホ表示を考えるなら 上のような表の場合は縦長な形式で作るべきなんだろうけど、なかなか難しいんだよねぇ。

だがしかし、
アクセス解析をみてみると、
toukei20170620
のように、すでにモバイル端末が70%と多数を占めているんだよね。

PCで見てる人って少数派なのね・・・
使いやすいように、右側にウィジェットでカテゴリーやタブなどを並べる配置にしてあるのがもしかしたらあまり役にたってないのかも?とちょっと不安になる。

ちなみにPCで表示するとこうなってます。
20170620_pc_ss001

使用端末で特に多いのはやはり「iPhone」で、モバイル端末の50%以上を占めている。
もしかしたら「iPhone」なら解像度が高いので、PCタイプで表示されているのかなぁとも思ってるんですが、どうなんだろ?
一番アクセスが多いのが「iPhone」なのに、確認する手段がないんだよね。

まとめ

結局なにが言いたかったかというと、
今回のカスタマイズで、モバイルのみ表示される部分にも追加を加えたんだけど、どうやってもモバイル用デザインでは、PC表示のように使い勝手の良い形にはできなかったので、

モバイル端末でみていてページがひどく崩れてる人!いたら、「chrome」を入れてみてください!

モバイル端末で表などがみづらい場合、「PC表示」でみてください!

コメント

タイトルとURLをコピーしました