このページの本文へ

DESIGN 実践!iPhone&Androidサイト制作ガイド ― 第4回

スマートフォン対応サイトを設計するときのノウハウ

2010年08月18日 17時05分更新

たにぐちまこと/H2O Space.

  • この記事をはてなブックマークに追加
本文印刷
iphone-android

  Webサイトの制作は、一般的にサイト設計/構造設計→画面設計→デザイン制作→HTML/CSS制作→JavaScript開発といった手順で進めます。

一般的なサイト制作のフロー。スマートフォンサイトでも基本的な流れは変わらない

 スマートフォンサイトの場合も基本的な手順は同様で、各設計工程を経て制作していきますが、PCとも携帯電話とも違うスマートフォンの場合、サイト設計段階でも注意すべき点が多くあります。今回は、スマートフォンサイトを設計する際のポイントを解説します。

スマートフォンサイトの構造設計

 「構造設計」とは、Webサイト全体の各ページのつながりを考え、いわゆる「サイトマップ」を作成する作業です。

構造設計ではサイトマップを作成する

 トップページから連なるWebサイトにおいて、利用者に見てもらいたい情報を探しやすく整理し、Webサイトの目的に応じた「ゴール」への誘導を考えます。

入口は検索エンジン対策(SEO)重視で考える

 一般的な携帯電話ではカメラ機能と2次元バーコード(QRコード)が普及しているので、多くの携帯電話向けサイトは雑誌やポスターなどの紙媒体にQRコードを掲載してサイトへ誘導しています。

 一方、iPhoneやAndroid端末にもカメラ機能はありますが、QRコードを認識するソフトウェアが標準では搭載されていないため、誰もが手軽に利用できる手段とはいえません。

 そこで重要になるのが検索エンジン対策(SEO)です。PC向けのWebサイトでは、検索エンジン経由でのトップページ以外のページへのアクセスが増え、SEOの重要性はますます高まっていますが、スマートフォン向けのサイトも例外ではありません。むしろ、仮想キーボードや小さなキーボードしかないスマートフォンの場合、URLのような長い文字列を正確に打ち込むのは骨が折れることもあり、検索エンジンが主な誘導路になります。

携帯サイトではQRコードが重要な集客手段の1つだが、スマートフォンサイトでは検索エンジン対策が重要になる

 実際、スマートフォンはWeb検索が非常に利用しやすく作られています。たとえば、Android端末の多くには検索専用のボタンが配置されていてワンタッチで検索画面にアクセスできますし、iPhoneのSafariには検索窓が配置されていてすぐにWebサイトを探せます。

Android端末では検索ボタンが設置されている機種も多い
iPhoneではアドレスバーの右上に検索窓が表示されている

 PCサイトの場合、日本においてはYahoo! JAPANのシェアが高く、Yahoo! JAPAN向けのSEO対策がより重要視されますが、スマートフォンサイトのSEO対策ではGoogle対策が重要になります。Androidはもちろん、iPhoneもデフォルトの検索エンジンはGoogleに設定されています。検索エンジンの設定は変更もできますが、恐らく多くのユーザーはそのまま利用しているでしょうから、Googleを使って検索するユーザーが多いと考えられます。今後、Yahoo! JAPANも検索エンジン部分にGoogleを採用する予定ですし、Google対策の重要性がさらに高まるでしょう。

検索エンジンにはPCとみなされる

 携帯電話からGoogleやYahoo! JAPANを利用すると、検索結果には携帯サイトとPCサイトが別々に表示されます。

携帯電話で検索エンジンにアクセスすると、携帯電話向けとPCサイトが別々に表示される

 一方、スマートフォンサイトから検索エンジンにアクセスした場合は、PCサイトの検索結果が表示されます。現状では「スマートフォンサイト」という特別な分類はなく、PCサイトと扱いは同じです。

 同一のURLでPCとスマートフォンとで振り分けて表示するサイトの場合、検索エンジンは通常、PCサイトのみをクローリングします。そのため、スマートフォンサイトに情報を詰め込んでも、PCサイトの情報が充実していなければ検索結果の上位表示は難しくなります。この場合、PC向けにもスマートフォンと同様の情報を提供するか、検索エンジンのクローラーをスマートフォンサイトに誘導する必要があります(具体的な方法は今後の連載で解説します)。

書影

「まとめてじっくり読みたい!」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたっては構成を全面的に見直し、記事公開後の最新情報や現場で役立つ追加情報も多数盛り込んでいます。画面設計に便利な特製ノート付き。

iPhone+Android
スマートフォンサイト制作入門

本体 2,380円+税、B5変形判216ページ(オール4色刷)
ISBN:978-4-04-870218-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング