簡単じゃない！スマートフォン向けホームページ 【経営MAGAZINE】

最近はPC向けホームページのお問い合わせの際に「ついでにスマートフォンもお願いします。」というおまけの感覚でご相談いただくケースが増えてきました。

以前は「ガラケー」と呼ばれていた時代の携帯電話用ホームページは見た目に明らかにPCと同じようにいかないので「オマケ」というのはその通りかもしれませんね。

最近ではPCと同じような感覚でホームページが見れるようになってきました。またアクセスの割合も業種によってはPCを上回るところもあります。

「PCと同じように見れるなら、ついでにスマートフォンもお願いします」という感覚はお客様だけでなくノウハウの少ないホームページ制作会社にあるのも事実です。

しかしながらいざ作ってみると様々な問題が生じ予算超過、品質の低下等失敗につながるケースも少なくありません。そこでスマートフォン向けホームページの代表的な特徴、問題点についてご紹介させていただきます。

特徴１：レイアウトが固定できない

機種ごとに画面サイズがバラバラでかつ、縦向き、横向きの違いがあるので例えば「画面右端から○○PX」というように固定しても左側がすごく余白がでたり、逆に詰まっていたりして見た目が全く同じというのは大変厳しいです。

また画面縦向きで見た目に適当なサイズの画像があった場合、それが幅の広い横向きになった時、いくつかパターンがでてくるかと思います。

1. 画像は常に中央ぞろえ
2. 画面に対して右または左寄せ
3. 縦向き、横向きいつでも画面に対して幅１００％で表示

3などの場合は幅の広い横向きを考慮して大きめの画像が必要となります。

特徴２：画面の単位がPCと異なる

画面デザインはPCで行うと思いますが、最近はiPhoneメインで横幅640pxが標準です。

しかしiPhoneなどでは320dpという単位となっています。つまり実際のイメージは横幅640pxで作って、半分の320pxで確認することになります。なので文字サイズや余白の感覚も一般のPCのWEBデザインと異なります。これはスマートフォンの画質がPCよりも高密度のためです。

PCではMacBook Retinaなどがスマートフォンと同等の画質になりますが一般のPCでくっきり画像が表示されていてもRetinaやスマートフォンではぼやけて見えたりします。

特徴３：マウスオーバーがない

マウスオーバーとはPCでボタンなどの上にマウスが重なると色が変わったりメッセージが変化したりするアクションの事です。

スマートフォンは直接ボタンに触れるのでPCのようにマウスオーバーで何か演出ということはできません。

特徴４：同じフォントがない、PCでは動くものが動かない

例えばAndroid2.3などの古い機種では日本語の太字フォントがないので太字が表現されません。またアニメーション等PCと同じプログラムで「あの機種で動かない、この機種では動く」という事例も多く見受けられます。

お問い合わせフォームやショッピングの購入画面でこのようなトラブルが発生するかもしれません。

特にAndroidの場合はメーカー毎にいろんなバージョンのものが存在します。Androidに関してはOSのシェアを考えると2.3でなく4.0以上を基準とされる方がいいかと思います。

他にも多くの特徴があるのですがこれらを事前に把握してしっかりとした設計で臨めば恐れることはありません。またスマートフォンとPCの連携も重要なポイントです。

詳しくは弊社まで気軽にお問い合わせくださいませ。

最近投稿された他のコラム

• 成功するホームページについて考える-2
• 成功するホームページについて考える-1
• 高い！安い？見積もりについてーその２