スマートフォンサイト制作のポイント

多くの機種・単末に対応する

現在のスマートフォンはiPhoneとandoroidが2大OSとなっています。その中で、iPhoneはApple社のみが開発していますが、andoroidはGoogleが開発したOSで、様々なメーカーからandroidOSを搭載したスマートフォンが発表されてます。
現在はまだまだiPhoneの人気が高いのが現状ですが、WindowsとMacのように、いずれは多くのメーカーで開発が可能なandroidがシェアの大半を占めていくと予想されています。
しかし、Windowsと同様、androidは多くのメーカーがスマートフォンを開発しており、独自の仕様や端末によって仕様が大きく異なる場合があります。その中で、今後も次々と発表されていくスマートフォンに対応するサイトを作るためには、「どの機種でも問題なく閲覧出来る」ように構築していく必要があります。
例えば、サイトの横幅を機種によって自動的に適切な横幅に対応するリキッド（可変）のデザインにする事により、機種による違いに対応する事が可能です。

画像は極力使わずhtmlとCSSで

スマートフォンは主に、外出中や移動中に使われるため、3G回線というパソコン用の回線よりも遅い回線が利用されます。
そのため、html・CSSに比べてサイズの重い画像を多用したサイトはスマートフォンで閲覧すると重く感じてしまいます。
スマートフォンで採用された、html5とCSS3という言語は従来のhtml言語に比べて、グラデーションやシャドウなどデザインに関して表現出来る事が増えました。そのため、今までは画像で表現しなければならなかったデザインをhtmlとCSSのみで表現が可能になりました。
3G回線でもストレス無く閲覧が可能なように、画像は極力使用せず、htmlとCSSでの表現にする事が快適にに閲覧可能にするポイントです。

サイトの構造をシンプルに

スマートフォンでのサイトの閲覧では、サイトの構造を出来るだけシンプルにし、ユーザーが迷わないようなナビゲーションが必要です。
スマートフォンではページの遷移がパソコンよりも時間がかかるため、あまり深い階層の場合はユーザーが 目的のページに辿り着く前に離脱してしまう可能性があります。そのため、出来るだけ階層は浅く（2階層程度まで）しておき、メニューも多すぎず分かりやすいナビゲーションにする事が快適に閲覧できるポイントです。

必要な情報を絞り込む

PCサイトでは、SEO対策なども含め、「情報量を出来るだけ多くする」という手法が採られていますが、スマホサイトの場合は、「必要な情報を絞り込む事」が大切です。ユーザにストレスを与えず、出来るだけ早くユーザーの知りたい情報を見せるような構成が望ましいです。
そのため、スマホサイトではPCサイトの内容をそのまま転載するのではなく、「スマホからアクセスする人が必要としている情報」に重点を置いて情報を載せるべきです。例えば、お店のサイトであれば、「お店の歴史」や「商品の細かい説明」についてよりも、「お店のアクセス」「キャンペーン情報」「メニュー」などの方が、より優先順位が高くなります。
このように出来るだけ情報を絞り込む事により、よりユーザビリティの高いスマホサイトとなっていきます。

FLASHを使用しない

PCサイトでは、動きのあるリッチなコンテンツを見せるために多用されているFLASHですが、iPhoneではFLASHを閲覧出来ません。Andoidでは閲覧可能ですが、機種によって仕様がバラバラであるというのが現状です。また、FLASHはスマートフォンに負荷が掛り、動画と同様閲覧に時間が掛ってしまいます。
スマートフォン市場において、iPhoneはそのブランド力を生かして大きなシェアを獲得しており、iPhoneを無視してFLASHを使用したスマホサイトを作ることは、スマートフォンユーザーの約半数近くが正常に閲覧出来ないサイトとなってしまいます。
スマートフォンで採用されているhtml5という言語は、従来のhtmlに近い形でFLASHのようなリッチなコンテンツを表現可能になりました。そのため、FLASHの代用としてhtml5を利用し、幅広いスマートフォンに対応していく事が大切です。

地図アプリなどの機能を活用する

スマートフォンの特徴として、GPS機能を使った地図アプリが標準でインストールされています。そのため、地図上で自分の現在地が簡単に把握出来たり、目的地までの道案内なども可能になります。店舗を持つようなサイトでは、この地図機能と積極的に連携していく事で、ユーザーの来店をスムーズに導く事が可能です。
また、ワンタッチで電話を発信する事も可能なので、電話でのコンバージョンへの誘導もスムーズに出来ます。

タッチパネルの機能・操作性を生かす

PCはマウスとキーボードでの操作ですが、スマートフォンはタッチパネルでの操作となります。その際、気をつけなければいけないのは、「指による操作のため、マウスとは感覚が異なる」という事です。例えば、マウスなら「テキストのリンク」でも問題なくクリック可能ですが、スマートフォンだと「リンクが小さくてクリックしづらい」などという使いづらさを感じてしまう場合があります。
そのため、タッチパネルに配慮した「タッチしやすいボタン」デザインにしていきます。また、フリックや拡大など指で行う操作もスマートフォンの特徴のため、そうした機能を生かしたサイト構築をしていく事がスマートフォンサイトの特徴と言えるでしょう。

PCサイトを見れる用にしておく

スマートフォンサイトを制作した場合、大前提には「スマホで見てもらう」という事がありますが、ユーザーの中にはスマートフォンでもPCサイトが見たいというユーザーもいます。例えば、「いつもPCサイトを見ているので、PCサイトの方が見やすい」などというユーザーです。
スマートフォンでPCサイトは見づらいですが、PCサイトも閲覧出来るように設計されているため、閲覧自体は可能です。そういったユーザーのために、PCサイトへのリンクを用意しておくことにより、よりユーザービリティへの高いサイトになっていきます。また、トップページを閲覧した際に、「PCサイトを見るかスマートフォンサイトを見るか」ユーザーに選んでもらう事も可能なので、このような機能を活用していく事も考えて制作していきます。

横向きにした時にも対応出来るように

スマートフォンは基本的には縦での閲覧となりますが、横向きにした場合でも覧可能なのようにサイトを構築していきます。例えば、縦の場合しか対応しておらず、横向きにしたときに余白が出来てしまったり、レイアウトが崩れてしまうとユーザーにストレスを感じさせてしまいます。縦横どちらでも対応可能なリキッド（可変）のデザインでサイトを構築する事がスマートフォンサイトのスタンダードであると言えるでしょう。

CMSで一元管理する

スマホサイトを作った後、静的なHTMLで制作した場合は、お知らせなどがある場合、PCサイトとスマホサイトの両方を修正する必要があり、メンテナンスの手間が掛り、サイトの更新性が落ちてしまいます。CMSを使って一元管理すれば、PCサイトを更新すればスマホサイトも自動的に更新されるようになり、管理・更新の効率が上がり、なおかつどのユーザーに対しても最新の情報を見せる事が可能です。
当サービスでは、ワードプレスというCMSを使用した「連動するスマホサイト制作」を行っています。ワードプレスは世界中で一番使われているブログツールで、CMSとしても高機能です。