ウェブサイトのスマホ対応

「スマホ対応したいんだけど…」
ウェブサイトを運営されているお客さまから、このような相談を受けることが多くなってきました。当社サイトでも、全セッション数の1~2割程度はスマホやタブレット端末からのアクセスです。スマホの契約数は伸びていますし、間違っても減ることはないでしょうからウェブサイトのスマホ対応を考え始めています。

弊社では、「ユーザーの機種(画面の幅)に合わせて、デザインが自動的に調整される」というレスポンシブデザインで、スマホ対応を進めています。


上の画像は左がPCで見たとき、右がスマホで見たときです。PCで見ると横に広がっていた上部のメニューがスマホで見るとたたまれて、タップすると展開します。PCのデザインのまま横幅が狭くなるとメニューが小さく、タップしづらくなってしまいます。タップするには拡大しなければならず、面倒です。
また、その他の要素も縦に並べるように変化しています。スマホでは縦スクロールは苦になりませんが、横スクロールは使いにくいからだと思います。
上の画像のサイトをご覧いただけますので、PCでアクセスしてみてください(http://trial.kyodo-net.jp/)。ブラウザのウインドウ幅を狭めていくと、スマホ用デザインに切り替わります。

さて、お客様にご説明する際、口頭で申し上げてもなかなか伝わりません。そこで、実際に見せることにしました。とはいっても、お客様のサイトはレスポンシブデザインで制作されているわけではないのでスマホでアクセスしてもPCのデザインが縮小して表示されるだけです。超アナログですが、このようなもので説明しています。


お客様のサイトがスマホではどのように見えるのかデザイン案を作成して、iPhoneの原寸大モデル(紙製)でお見せしています。AppleからiPhoneの寸法図がケースメーカー向けに公開されていますので、それを利用しています。お客様に好評で、お客様が内部で説明するのに使いたいからいただけないかという要望もありました。この超アナログiPhoneを作るためのPDFをリンクしました(写真をクリック)ので、スマホ対応提案をする機会がある方は、ぜひ使ってみてください。

Get Adobe Flash player