« 【完了】本日15時15分ごろより、一部のソーシャルボタンに不具合 | メイン | Zenback の年末年始のユーザサポート受付について »

2012年12月13日 (木)

幅狭の場所での表示レイアウトを自動で最適化し、スマホでも見やすくなりました!

こんにちは。@zenbackです。 この度対応したちょっと地味だけど、便利な新機能をご紹介します。

情報量が多い分、縦長なのがたまに傷のZenback。 このたび、横幅の狭いサイドバーや、スマホの縦画面で見た時も、コンパクトに読みやすく情報を表示できるようになりました。

しかもZenback表示エリアの横幅が320px未満の場合に自動で適用されますので、ユーザの皆さまは何の設定もいりません。

PCとスマホのテンプレートが別々の方は両方に同じスクリプトコードを入れていただければOKですし、レスポンシブデザインで作られている方は全く何もしなくてOKです。

PC で見た横幅が広い状態の画面

PCビュー
こちらがいつもご覧いただいているZenbackです。記事画像の下にタイトル、Twitterアイコンの右にコメント、というレイアウトになっています。

[NEW!!] スマホ縦画面で見たとき

■ 関連する記事

スマホ縦画面1
こんなふうに左右いっぱい使って、関連する記事を表示します。 ちなみに、今までのデザインだと、

|■   ■    |
|タイ タイ   |
|トル トル   |
|        |
|■   ■    |
|タイ タイ   |
|トル トル   |

みたいになって、110pxの画像サムネイルが2つ並んで右側に空間が・・・、ということになりがちだったのです。

■ Twitter での反応

スマホ縦画面2
こんなふうに回り込むので、狭いエリアをいっぱいに使って情報を表示します。

スマホの横画面ではPCと同じ表示

なお、横画面は十分な横幅があるので、PCのブラウザで見るのと同じ状態で閲覧できます。

■ 関連する記事

スマホ横画面1

■ Twitter での反応

スマホ横画面2

さいごに

この横幅が狭いとき用のデザインは、4種類のウィジェットデザインテーマ全てで既に適用されています。 ついでに、少し前にFacebookコメントの横幅もウィジェットの横幅にぴったり合うように調整いたしました。しずつですが、よりサイトに美しく収まり、良い感じの佇まいになるよう調整を続けております。

ぜひスマホからもZenbackをご覧いただいて、サイトへの収まりの良さ、読みやすさを実感してみてください。ずれているなど、気になることがあれば、ご報告いただけますと嬉しいです!