07/05 PowerNaviのサイトをスマフォ対応に

エルデでやっているPowerNaviのサイトだけど、最初に公開してから6年ぐらいになり、デザインも古くなったので全面リニューアルしてみた。ポイントはスマートフォンに対応させるということ。今のデザインだとスマフォで見た時に縮小されてしまい、いちいち拡大しないと読めない。

IMG_0063[1]
PCとスマフォに対応させるにはあらかじめ二つのHTMLを用意しておき、アクセスしてきたブラウザをチェックして振り分けるという方法もある。PowerNaviでもPC用と携帯電話用はこのやり方だ。携帯電話ではもともと画面が小さいので必要最小限の情報だけを出す専用サイトを作っておいた。でもスマフォだとそこまで画面が小さくないし、最近のようにスマフォでのアクセスがかなりの割合を占めるようになると、PCと同じ情報を提示するべきだろう。しかしPCとスマフォで異なるページを作るというのは手間がかかり過ぎる。

そこでブラウザの種類によって画面を切り替えるのではなく、アクセスしてきた端末の画面サイズに応じてレイアウトを自動的に変更するレスポンシブWebデザインが主流になっている。また、最初にスマフォでデザインを確認してからPC用に修正を加えていく「モバイルファースト」が提唱されている。

レスポンシブWebデザインを実現するには、アクセスしてきた端末の画面サイズによってCSSなどを切り替えるメディアクエリの機能を使う。また、スクラッチからHTMLやCSS、JavaScriptを書いてもいいのだけど、既存のレスポンシブWebデザイン用フレームワークを使うのが手っ取り早い。弊社の場合、デザイン重視ではないのでポピュラーなフレームワークであるbootstrapを使うことにした。

bootstrapも、自動的にPC用とスマフォ用のデザインを調節してくれる魔法のツールではない。基本的には画面を12列のグリッドに仕切り、メディアクエリに応じて2列構成にしたり、1列構成で表示してくれるというものだ。

というわけでPowerNaviのサイトをリニューアルしたのだけど、かなり手間がかかってしまった。全部で250ページぐらいあるうち、修正したのはトップから大きくリンクされている30ページぐらい。

それと、モバイルファーストということでスマフォによるチェックではそれなりに格好良く見えるページが、PCで見るとスカスカになってしまう。自社サイトで、コンテンツ重視だからいいけれど、これがお客様からの発注だったら相当もめそうだ。レスポンシブWebデザインで、PCサイトでもそれなりに見えるページを作る技術を身につけておかなければならない。
IMG_0061[2]
powernavi0705
Googleで検索すると「レスポンシブWebデザイン」対応サイトはそれなりの数がある。でも、ソフト会社、編集プロダクション、サプリメント、飲食店などはまだまだだ。「レスポンシブWebデザイン引き受けます」と掲げているWeb制作会社がスマフォ対応サイトを持っていないことも珍しくない。

PowerNaviでも、記事ページはとりあえず対応したけれど、まだ肝心な通販ページが非対応だ。これではせっかく訪問していただいたお客様に逃げられてしまう。通販サイト構築ソフトをバージョンアップすればいいのだけど、変にカスタマイズしているので、かなり面倒な作業になりそう。しばしお待ちを。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください