当ブログサイトはPCからの流入が多かったのでCSSの大半をスマートフォンに最適化していませんでした.しかし,最近少しずつモバイルユーザの流入が増えてきていることに加えて,さすがにデザインについて語るサイトなのに流用は微妙かな,と思っていたので調整しました.今回の調整において主にユーザビリティの観点から気をつけたのは,表示するコンテンツの削減,フォントサイズ,padding,およびmargineです.これらを抑えておけば,モバイルサイトにおける可読性は著しく向上させられます.

まず表示コンテンツです.モバイルは基本的に表示面積が限られてしまうので,今回の調整でいくつか表示するコンテンツを削除しました.例えば,タグの表示とソーシャル拡散ボタンを排除しました.ソーシャル拡散ボタンは運営者側かからするとあまり削除したくないのですが,モバイルだとどうしても可読性が著しく下がるので削除しました.もしさらに手を加えるなら,最近はブログに直接コメントするよりもソーシャルでの拡散がメインなのでコメント欄を削除して,ソーシャル拡散のプラグインを配置した方が良いと考えます.

次に,フォントサイズは少し小さくしました.最近のスマートフォンは基本的に解像度が非常に高いので,小さめのフォントでも問題なく読めると判断しました.文字は大きめの方が視認性はあがるのですが,あまり改行が多いとそれはそれで可読性が落ちるので,この辺はバランスが難しいですね.また,paddingやmargineについては大幅に削減しました.普通のウェブブラウザの場合,ブログコンテンツはかなり粗ですので意識的に空白を多めに使って配置のバランスを取ります.しかし,スマートフォンサイトの場合,上述の通り空間がかなり限られるので,空白は最低限にします.空白を最低限にすることで,コンテンツの一覧性をかなり向上させられます.加えて,borderなどの装飾も最低限にすることでコンテンツに視線が集中するようにしています.ぱっと見た感じでは貧相にも見えますが,ブログは内容が勝負なので特に問題ないと考えます.

これらの大した調整ではありませんが,かなり可読性が向上しました.自分やウェブサイトを取り巻く環境は少しずつ変わっていくので,それに合わせて定期的に少しずつメンテナンスすることは重要ですね.とはいえ,こだわりが無ければテンプレが沢山公開・更新されているので,それらから丁度良いものを選んで使うだけでも十分だと思います.

多少のコストは掛かりますが,ウェブサイトの調整に関わらずこういった営みは大事にしたいものです.