スマートフォンが一般に普及し、スマートフォン向けのウェブサイトを用意する必要性が高まってきており、スマートフォン等のモバイル端末からのアクセスも増えてきており、モバイル対応の有無でGoogle検索結果への順位に影響されるようになりました。
今回は、スマートフォン用のウェブサイトを作る時のポイントをお伝えします。
縦方向にスクロールできるレイアウトにすること
従来のパソコン向けウェブサイトは、大きな画面で利用することが想定されていることから、横方向にも広がるレイアウトで作られていることが多いです。さらに、最近のパソコンや液晶モニターはワイド液晶が一般的になってきていることから、ウェブサイトのレイアウトもワイド液晶に合わせられる様に作り込まれていることも多いです。
一方で、スマートフォン向けウェブサイトは、多くのユーザーは縦画面で利用するケースが多いです。そのため、パソコン向けのウェブサイトとはことなり、縦方向に利用することを想定し最適化する必要があります。
スマートフォンが一般的に普及した当初は、パソコン向けウェブサイトがそのままスマートフォンでもフルに閲覧できる状況が一般的でしたが、全画面で表示した際に表示されている文字が小さく、ピンチ操作で拡大縮小を行う必要があることや、横にスクロールするなど閲覧するための操作が増えてしまう傾向にありました。
パソコンでウェブサイトを利用する場合は、時間をかけてじっくりと必要な情報を入手するという使い方になりますが、スマートフォンでウェブサイトを利用するケースとしては、短時間でサクッと必要な情報を入手できるという点を重視する必要があります。そのため、できるだけウェブサイトを閲覧する際に無駄な操作を省き、画面1つで必要な情報にたどり着くことができるのがベストです。
情報が1つの画面で表示することが難しい場合は、縦方向にスクロール操作して情報にたどり着けるようにすると良いでしょう。
指で操作しやすい大きさのリンクやアイコンを用いること
スマートフォン向けウェブサイトは、パソコンでマウスを使う操作とは異なり、指でタッチして操作することが一般的です。
そのため、リンクやアイコンなどは指で操作できる大きさにすることが重要です。スマートフォンに最適化しても、リンクが小さく指で押しづらい、リンクとリンクの距離が近く操作がしづらいなどがあれば、ユーザーに拡大縮小など他の操作を求めることになりますので、スマートフォンに最適化した意味がなくなってしまいます。
また、近年パソコン向けのウェブサイトでも採用が見られるようになりましたが、各リンクにアイコンを使用することで、ユーザーが見ただけで直感的に操作できることも重要なポイントです。
スマートフォンは短時間で利用することが多いため、直感的に操作できることにより、必要なリンクを探す手間を省くことができれば、ユーザーにとって、短時間で効率的に必要な情報が入手できることにつながります。
画像やFlashなどは極力使わないこと
近年では、LTEなど高速通信回線に対応したスマートフォンが増えてきたことやスマートフォンの性能も向上したことで、高速で快適なインターネット環境が整ってきていますが、高速通信の対応や性能については、端末によってばらつきがあるのが現状です。
スマートフォン向けウェブサイトを作る時は、あらゆる端末からアクセスされることを想定して制作する必要があります。そのため、高速通信が利用できない端末や性能が低い端末からもアクセスされることを考え極力、データ容量が大きい画像データや動画データ、Flashなど特定のプラグインを使用することは避けることが無難です。
2008年にiPhone 3Gが日本で発売された時、ウェブブラウザであるSafariがFlashに対応していないことでインターネット上を中心に議論が行われていましたが、HTML5の普及で次第にFlashプラグインを使用するウェブサイトは減ってきているのが現状です。HTML5とCSS3を組み合わせることで、従来のHTMLに比べると、グラデーション等などより表現豊かなウェブサイトの制作が可能になっています。
どうしてもアニメーションなどの動きをサイトに取り入れたいという場合は、HTML5を利用してスマートフォン向けウェブサイトを構築することが重要です。
情報を絞り込み、必要に応じてPCサイトも見れるようにする
スマートフォンでウェブサイトを見る時は、何度も述べているように短時間で必要な情報にたどり着くことが重要になります。そのため、従来のパソコン向けウェブサイトで情報量が多いといった場合は、スマートフォンに最適化する際に必要な情報を絞り込む必要があります。
例えば、お店のウェブサイトを作る場合、外出先でお店へのアクセスやキャンペーン情報、商品の価格などを調べることが多くなりますので、キャンペーン情報や商品の価格、アクセスといった情報を優先的に載せます。一方で、お店の会社概要や沿革といった内容は、外出先でスマートフォンを使って閲覧するニーズは低いため、詳しい情報はパソコン向けサイトに切り替えて閲覧してもらうなどします。
また、スマートフォン向けサイトとパソコン向けサイトはできるだけリンクの場所などの位置や順序などは変えることなく、普段パソコンを利用している方がスマートフォンで緊急でアクセスした場合でも馴染めるようなレイアウトにすることがベストです。スマートフォンサイトを作ったが、普段パソコンで閲覧していたため、ユーザーが操作性に戸惑うことも少なくありません。
また、ユーザーにとっては、スマートフォンサイトよりパソコン向けサイトで閲覧したいというニーズもありますので、スマートフォンサイトを閲覧するかパソコン向けサイトを閲覧するか選択できるようにしておくと良いでしょう。
