スマホサイトのデザイン制作時に便利なツール

スマホサイトを作る時に、PCでプレビューする方法を紹介します。

１）サファリを使う方法

①サファリは、Macでも、Windowsにインストールしたものでも可能です。

右上の工具のマークをクリックし、設定＞詳細タブ＞をクリックし、

メニューバーに開発メニューを表示する

②スマホデザインを確認したいサイトを出したら、右上のメニューから、

＞開発　＞ユーザーエージェント　＞iPhoneを選択すると

③このようにスマホでの表示になります。

この例は、WordPressについているプラグイン、WP-Touchで変換しているサイトです。

２）ブッックマークレットでサイズを変えて表示する方法

①（私が試したところGoogleChromeでうまくいきました）下記のサイトへ行って

http://lab.maltewassermann.com/viewport-resizer/

青いマークをブックマークバーへドラッグします。

②表示したいサイトを出して置いて、先ほどのブックマークをクリックします

下記の事例は、WordPressのサイトで、レスポンシブ・ウェブデザインにしている例です。

レスポンシブ・ウェブデザインとは、端末によりアクセスを振り分けているのではなく、ブラウザの幅を関知して、それにより、スタイルシートの表示を切り替える方法です。

たとえば、下記のサイトは、PC用のサイトとスマホ用のサイトとを別々に作っているので、シミュレーションで表示してもこのように小さく表示されるだけです。

このようにドメインの後ろに/m/

と入れるとスマホサイトが表示されます。

こういうサイトは、サイトにアクセスするブラウザや機種の情報を判別して、表示するアドレスを振り分けていることが多いです。

③こちらはネットショップの事例

おちゃのこネットで、スマートフォンプランをつけていると、PCサイトとスマホサイトの切り替えボタンが出ます。この方法はどちらで表示したいかを、ユーザーが選べるのでかなり親切だと思いました。

このようにiPhone表示との切り替えができます。

スマートフォンプランを選んだだけでは、とてもシンプルでつまらない表紙になってしまうので、スマートフォンプランを追加したら、ちゃんとスマホユーザーにメリットがあるようなデザインに作り替えないといけません。

３）スマホサイト、二通りの作り方

• スマートフォンサイトの制作方法には、①PC用の画面と、スマホ用の画面とを別々に作る方法と　②端末の情報を取得して、スタイルシートで表示を切り替える方法（レスポンシブ・ウェブデザイン）の２通りあります
• ①の別々に作る方法にした場合は、サイトの表紙にプログラムを埋め込み、ユーザーがアクセスした端末が何なのかを判別し、それぞれのアドレスに自動で振り分ける方法をとっているサイトが多いです。
  もしくは、表紙に「スマホサイトはこちら」のようなバナーを作り、クリックさせて誘導します。
• ①の別々に作る方法のメリットは、スマホのユーザーにとって本当に欲しい情報だけを取り出し、PCサイトの構成とはしっかりと切り分けして作れるということです。
  PCサイトに載っている多種多様な情報がスマホで検索してきたユーザーにとってすべて必要とは限らないですよね。
  （業種によりますが）スマホで検索してきた人は、すぐに電話をかけたいだけかもしれないですし、営業時間と定休日と地図が知りたいだけかもしれません。
• ②のレスポンシブ・ウェブデザインでのメリットは、更新するときに、１カ所だけ直せば両方に反映されることです。両方チェックしなくて良いので、メンテナンスがかなり楽になります。
  その変わり、基本的には表示される情報がPCサイトと共通になるので、順番を入れ替えたり、必要な情報だけを取り出したりということがかなり難しいです。
  （プログラムコードで、if文などで振り分ければ可能かもしれませんが・・・更新は煩雑になります）