2014年05月10日

スマホ対応に最適なレイアウト構成

自サイトもそろそろスマートフォーンに対応しよう思っておりまして、先週あたりからちまちまとサイトの修正作業に追われております。

ただ、やり始めてわかったことですが、グローバルナビゲーションの扱いで困ることが多いです。もしくは、コンテンツよりも上部にサイドバーを設定していたりして、CSSのみでうまくあれこれやっていたサイトの場合、スタイルシートのみの修正では対応できなくなっております。

やはり、スマホで閲覧した際、上部にメニューがずらりと並んでいると、ファーストインプレッションの部分にコンテンツが出現してこないので、ちまちまと下までスワイプしなくてはいけなくなってしまいます。

また、アドセンスなどを配置している場合、アクセスした際に広告のみが表示されてしまい、NGになってしまうケースもあるかと思います。

なので、コンテンツよりも下にサイドバーなどを配置しなくてはいけないわけですが、そうなるとCSSのみの修正では足りず、HTMLの修正まで対応しなくてはいけなくなってしまうわけです。

そう思って、ネット上の大手のサイトをちらほらと閲覧してみたのですが、サイドバーがコンテンツよりも上部に表示されてしまう場合、あえてスマホには対応していないケースが多いようです。

もしくは、javascriptを駆使しながら、スマホで閲覧したときだけメニューを折りたたむように設定して、思いっきり省略する手法をとっているみたいです。

サイドバーの部分を絶対指定して、無理やりフッターに飛ばしてしまうような方法もあるかと思いますが、この辺は技術的にボクには無理なんで、やはり、HMTLを含めて修正するしかないなと思い、ちまちま対応しております。

今後、新しくサイトを作成する際には、スマートフォンへの対応も考え、コンテンツの部分が上にくるようにした方がいいかもしれませんね。
ニックネーム ブログアフィリエイター at 11:08 | ブログアフィリエイト