ブログデザインを修正、タップ ターゲットを適切なサイズに
当ブログHinemosuの画面デザインを修正しました。今回の修正テーマはタップターゲットのサイズ最適化です。
タップターゲットのサイズ最適化とは
「タップターゲットのサイズ最適化」とか難しそうなコトを言いましたが、噛み砕いて言うとスマホでも操作しやすいようタップが必要な要素を大きめデザインにしたと言うことです。
たとえばスマホでFacebookやTwitterのブログパーツをタップするのって針の穴を通すような難しさでしょ？それを誰でも簡単にタップできそうな大きめサイズのテキストリンクに置き換えました。
こういうデザインにしたのには明確な理由がありまして。当ブログ直近1ヶ月のアクセス数を見ますと、モバイルが52%に対してPCは44%でした。そう、すでにPCは少数派だったんです。
そもそもウチのブログはマルチスクリーン対応を念頭に置いておりまして、どんなデバイスからでもそれなりのデザインに見えるよう工夫していました。今回そこから更に一歩進め、「スマホが1番、PCは2番」のスマホファーストなデザインに切り替えるタイミングだと思い至った次第です。
その他の雑多な変更
主となる変更は上記に示しましたが、その他も細々と変更しております。覚えてる限りに変更内容とその意味を記したいと思います。
- お年寄りでも読みやすいサイトを目指して文字は大きく
- 画面上部をできる限りスッキリと。スマホで見やすく、操作しやすく。
- マルチスクリーン対応。現世代のデバイスからなら、それなりのデザインで表示。
- クラシックなブラウザは無視。
- なるべくカクカクしたデザインで統一。
- なんか流行りっぽいのでHTML5のfigureをそれっぽく対応。
- 前後記事へのリンクを復活。
- 関連記事表示を強化。記事に付けられたタグ毎に最新4件を表示する。
- 関連記事表示を強化。ページ内で重複する関連記事表示を行わないよう制限した。
- 関連記事表示を強化。関連記事一覧を示すタグリンクを分かりやすく表示した。
- Facebookコメントの復活。
- スマホ時代のRSSとなるであろう、Facebookページと公式Twitterの整備／拡充。
覚えてる内容はこんな感じ。下記に現時点でのブログデザイン概要を示すスクリーンショットを貼り付けておきます。
