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

スマートフォンユーザーの一層の増加が予想される2012年、企業が取り組むべきスマートフォン対応の具体的なポイントを、実例をもとに紹介します。
※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

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

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

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

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

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

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

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

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

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

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

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

1.必要十分な情報を集約

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

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

2.リンクを全てボタン化

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

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

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

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

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

4.最短ステップで目的ページへ

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

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

5.ファイルサイズの圧縮

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

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

6.画面幅の変化に対応

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

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

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

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

tweet40このエントリーをはてなブックマークに追加
日本赤十字社 東日本大震災 義援金募集
Web担メルマガでラクラク情報ライフを
注目記事が毎週手もとに届いて見逃さない
要チェックのセミナー情報もゲットできる
編集長コラムを一足先に読める
―― 10万人が読んでいる、Web担必読メルマガです

今日の用語

APIA
アジア太平洋地域のISPやEC関連サービス会社、コンテンツプロバイダーなどのイン ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスHP Softwareトランスコスモス株式会社株式会社ハイパーボックスDomain Keeperアドビ システムズ 株式会社
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社SitecoreYahoo!プロモーション広告Oracle