ようやく正式にリリースにこぎ着けました
Googleの検索順位が何故が激落ちしてしまって途方に暮れていたとき、こういうときだからこそブログの改造をしよう！と心に決めたのが丁度一ヶ月前。
スマホの流入が意外と多いことが分かり、しかも離脱時間が非常に早い(PCの1/3しか滞留していない)ことが判明し、今後さらにスマホ用ページの需要が高まることを考え、下した決断がレスポンシブWeb対応。
スマホページを専用に作り、ユーザエージェントで振り分ける方法もありますが、そうするとPCとスマホの両方のコードが必要になるのでいろいろとめんどそうだったので、未知のレスポンシブWebデザインに足を踏み入れました。
それから、一ヶ月試行錯誤でやってきました。
先週の水曜日に突発的に有給を取れたので、そのときに一気にコードを書き上げ、微調整を行い、昨日思い切ってリリースしてしまいました。
土曜日で、日曜日も出かける用事が無かったので、何か起きたときにすぐに対処できるであろうと考えてのことです。
気をつけたこと
レスポンシブWeb対応で決めたこと、気をつけたことは以下の通り
- スマホ・タブレット・PC各それぞれに対応すること
- 基本的なデザインは今までのものを踏襲すること
- ただし、記事一覧のデザインはスマホフレンドリーに設計すること
- 重要な部分にマウスオーバーのCSSを書いてはならない(スマホだと無意味だから)
- コーディング中に通常のブログを吹っ飛ばすことも止めることも許されない
です。
まずは、デザインについてですが、レスポンシブWebデザインとやらが実装できるか否かが最優先事項だったので、基本的な構成は変更しませんでした。スマホで見たときに、サイドバーが下に回り込むぐらいで、そのほかのデザインは、レスポンシブ対応前のデザインと大幅に変更していません。
トップのナビゲーションが大きくなったぐらいです。
しかし、今までのデザインのままだとスマホ表示したときに非常に操作しづらいであろう部分がありました。
それが、記事一覧画面です。
スマホの場合、指でタップするので、基本的に44px*44px以上広い領域でないとタップし辛いと言われています。
そのため、記事へのリンク領域を広く取り、何処をタップしても記事に飛ぶようにデザインを変更しました。
iPhoneのアプリをいろいろとみて、どんな形をしているとタップしやすいのか研究してデザインを決定しました。
デザイン決定まで二転三転して、ここが結構大変でした…
苦労したところ
デザイン意外で苦労したところはあんまりありませんでした…ｗ
1度メディアクエリーの挙動を把握してしまえば、それに合わせてhtml部分とCSS部分(大半はCSS部分ですが)を書くだけなので、ここからはほとんど機械的作業です。
あとは、今までPCファーストで画面構成を決めていたのを、モバイルファーストの概念に切り替えたので、その辺の調整に手間取ったぐらいです。
今後やりたいこと
基本的なデザインはこれで良いのか？という部分を、スマホ、PCの両面から考えていきたいです。
本当に「人気のある記事欄は10記事も掲載する必要があるのか？」
本当にスマホに見やすい画面になっているのか？
などなどです。
日々精進ですね。
これでスマホの滞留時間も向上してくれると良いのだけれど…
