実例に見る　スマートフォン対応サイトの６つのポイント

2012年 - スマートフォンの「スタンダード化」の年

会社の中でも、街を歩いていても、スマートフォンを使う人が珍しくなくなりました。

既に出荷台数はいわゆる「ガラケー」を追い抜いており、
2015年にはスマートフォンからのネット利用がパソコンを上回るとの
予測もなされています。

そんな中、事業を営まれている方なら誰もが気になるのが、
ホームページのスマートフォン対応ではないでしょうか。

「スマートフォンって、パソコンのサイトも見れるんじゃないの？」

間違いではありません。一部のサイトを除き、概ね見ることはできます。
しかし、「見れる」ことと、「読んでもらえる」「興味を持たれる」
「活用される」こととは、別次元の問題です。

では、スマートフォン対応とは具体的に何をすれば良いのでしょうか。

実例に見るスマートフォン対応サイトのポイント

大阪のとある法律事務所様のホームページを例に挙げて、
スマートフォン対応サイト制作の具体的なポイントをご紹介します。

（図解版はこちら： http://kansai.mrfusion.co.jp/topic01.html ）

こちらのホームページは、既にスマートフォンからの訪問者が全体の15％を超えています。
しかし、従来のホームページでは、これらの層から全く反応が取れていませんでした。
そこで、新たにスマートフォンサイトを制作し、
スマートフォンからアクセスされた場合には、自動的に転送されるようにしました。

１．必要十分な情報を集約

PCサイトのページ内容をそのまま移植すると、非常に長く見づらくなってしまいます。
情報量を絞り込み、スマートフォンの小さな画面でも読みやすいようなレイアウトにすることが必要です。

本サイトの例では、
・重要度の高いコンテンツだけに絞り込む
・見出しをクリック（タップ）すると詳細説明が開くアコーディオン式にする
など、訪問者が探している情報を最短で見れるように工夫しました。

２．リンクを全てボタン化

文字に下線を引いただけのリンクは指で押しづらいため、全てボタンにします。

プルダウンメニューや入力フォームなどの操作のしやすさも大切です。

３．電話発信や地図表示など、独自の機能を活用

電話番号が書かれていても、スマートフォン自体が電話なので、番号を覚えないと電話をかけられません。
ボタンひとつで電話を発信できるようにします。

また、スマートフォンに内蔵されている地図アプリを利用して場所を案内するなど、独自の機能を活用します。

４．最短ステップで目的ページへ

スマートフォンの通信はパソコンより遅いため、何度もリンクを辿るのはストレスです。

本サイトの例では、よく見られるページへのリンクをアイコンにしてまとめるとともに、
２段階に開くアコーディオンメニューで全ページへ直接飛べるようになっています。

５．ファイルサイズの圧縮

画像を減らし、最新技術であるCSS3を活用することにより、
ページ全体のファイルサイズを300KBから60KB程度まで圧縮しました。

通信速度の遅い3G回線でも、スムーズにページを表示できます。

６．画面幅の変化に対応

スマートフォンは縦向きか横向きかによって画面幅がかわるため、
画面幅が変わってもレイアウトを維持できる可変デザインにします。

PCサイトの内容をそのままコピーしても、
スマートフォンサイトでは使い勝手が悪くなってしまうことが殆どです。

上記のポイントをひとつひとつ押さえながら、
スマートフォンに「最適化」することが、2012年の必須課題といえます。

（図解版はこちら： http://kansai.mrfusion.co.jp/topic01.html ）