スマートフォンサイト構築時に押さえるべきポイント

スマートフォンサイト構築時のポイントと、「レスポンシブWEBデザイン」についてご紹介します。

株式会社マイクロウェーブ 2012/10/30 15:11 モバイル | コラム

11 17 27

※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

スマートフォン市場の急伸に伴い、Webサイトのスマートフォン対応のニーズも日増しに増えています。
そこで本コラムでは、改めてスマートフォンサイト構築時に押さえるべきポイントをご紹介します。

スマートフォンサイト構築時の確認事項

スマートフォンサイトを作ろうと思っても、何を検討し、何に注意して制作すればよいのかが分からないという方向けに、確認事項をまとめました。

＜制作前の検討事項＞

標準対応端末の検討

端末の画面解像度が多様化しており、端末によっては表示が崩れたり画質が粗くなる可能性があるため、市場のシェアや全端末内の標準規格を踏まえて、実装時に標準的に対応する端末（標準仕様）を設定します。

PC、スマートフォン端末での振り分け設定

PCサイトがある場合は、様々な端末でアクセスしてくるユーザーのストレスや混乱を軽減させるため、PCからアクセスした場合はPCサイトを、スマートフォンからアクセスした場合はスマートフォンサイトを表示させるように、ユーザーの閲覧環境によって振り分ける必要があります。
これにはリダイレクト処理や後述するレスポンシブWEBデザインなどいくつかの設定方法がありますので、貴社の状況に最も適したものを選択します。

＜制作時のポイント＞

情報設計

ページ遷移や情報量
PCとは異なりスマートフォンユーザーは様々なシーン・状況でサイトを閲覧しています。
平均的に、スマートフォンユーザーの方がPV数（ページを閲覧した回数）が少ない傾向があるため、できるだけ少ないアクション、ページ遷移や情報量で目的の情報にたどり着けるように設計することが重要です。
フォーム作成時において
ユーザーに入力の手間を要するフォームに関しては、より一層の配慮が必要になります。
具体的には、入力方法はテキスト入力・チェックボックス・プルダウンなどユーザーが入力しやすく、また、目的に合った方法を採用したり、入力枠に標準値をデフォルトで表示しておくなどでユーザーの入力の負担を軽減させたり、テキスト入力の際は、表示されるキーボードを適切な種類にデフォルト設定しておく（ひらがな、アルファベット、数字など）などが考えられます。

デザイン

デザイン作成パターン
貴社のターゲットユーザーの閲覧環境に合わせるため、事前に設定した標準端末の解像度に合わせてデザインを作成します。
端末の横向きにも対応したデザインを用意するのか、また他の端末にも最適化したデザインを作成するのかなど、用意するべきデザインパターンを明確にしたうえで制作を行います。
画像の使用を控える
スマートフォンはPCよりは通信速度が遅くなる場合が多いために画像データの使用を抑えてページ容量を落とす必要があるため、極力CSSで実装可能な表現にて作成します。
ボタンなどのリンク領域の表現
ユーザーがタップしやすいように、矢印などのアイコンを使ってリンクであることを明確に表現し、適切な大きさで作成します。（iOSでは高さと幅は44px以上が推奨されています）
ユーザーのアクションへのフィードバック
ユーザーがタップなどのアクションをした際に、それが有効になっていることを明確にするため、タップ時に切り替えるデザインやローディング画面のデザインを用意します。
使用するテキストフォント
フォントは、基本的にiPhoneに標準インストールされているヒラギノ角ゴPro W3（W6）を使用します。（Androidでは、標準インストールされているDroid Fontに加え、端末によって様々なフォントが入っています）
またBold（太字）の表現はAndroidに対応していないために使用は控えます。

コーディング

画像の使用を控える
上記デザインの項目でも触れましたが、極力画像の使用を抑えてCSSにて実装します。
ユーザーのアクションへのフィードバック
こちらも上記で触れましたが、タップ時にデザインを切り替えたり、ローディング中のアニメーションを表示させます。
アドレスバーを隠す
ファーストビューでの表示範囲を少しでも広く取るため、アクセス時にアドレスバーを隠す設定を行うことも可能です。

その他仕様

汎用的な技術を採用
iPhoneだけでなくAndrodでも最近の機種で対応しておらず、非対応機種が多いFlashは極力使用せず、Html5やJavascriptなどで実装を行います。
ローカルアプリや他機能との連動時
地図などのローカルアプリやYoutubeなどの他サービスと連動する際は、ユーザーの混乱を防ぐため、説明を付けるなどで他のアプリへ遷移することを明確にし、また可能であれば途中で停止・戻れる導線を用意します。

細かいポイントを挙げればまだまだあるかと思いますが、まずは上記の点について、制作スタッフで摺合せを行ったうえで実装を進めて頂くことを推奨します。

新たな手法「レスポンシブWEBデザイン」について

スマートフォンやタブレットは様々な端末がどんどん発売され、ユーザーの閲覧環境が複雑化していますので、その環境に順応したサイトを設計し、構築することが重要になってきています。

ただし、各デバイス毎にファイルを構築していると、コストもかかりますしコンテンツ管理も複雑になってしまいます。

そこで、レスポンシブWEBデザインという新しい手法が以前より注目を集めています。

レスポンシブWEBデザインとは、デバイスの横幅ではなくブラウザの横幅サイズをwebサイト表示の判断基準とし、横幅サイズに合わせてページのレイアウトデザインを柔軟に調整できる、という手法です。

この手法は2012年6月には、Googleが公式に推奨しており、使用することで以下の利点があるとしています。

PC 用のページとモバイル用のページを単一の（同一の） URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。
ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。

また同月に、レスポンシブWEBデザインの手法であるCSS3のMediaQueriesがW3C勧告となり、Dreamweaver CS6では可変グリッドレイアウト機能も追加されています。

レスポンシブWEBデザインを使用した際の主なメリットとしては以下3点になります。

サイトのマルチデバイス化が容易に
一つのhtmlソースで様々なデバイスのブラウザサイズに適したレイアウトでサイトを表示することができるため、PC・スマートフォン・タブレットなど様々な閲覧環境への対応が可能になります。
単一URL
上記のとおり、Googleにインデックスされやすくなります。また、URLが統一されるため、リダイレクト処理が不要になり、さらにSNSでURLをシェアした際にも、PCとスマホでURLが異なるなどの混乱を防ぐことができます。
htmlソースを一括管理
テキストなどhmtlの更新については1回で済むため、更新がよりスムーズになります。（※CSSの変更が可能な場合は全デバイス向けの調整が必要です。）

ただ、レスポンシブWEBデザインを使用すると、細かい表現にこだわるにはPCとスマートフォンでどのようにレイアウトを変えて表示させるか、またどう組むかなど初期実装時に検討する点が多く負担も多くなりますし、デザイン・機能に制限ができるためにリッチな表現やスマートフォン独自の機能を使うことは難しくなります。

このように、必ずしもレスポンシブWEBデザインにするのが良いとは限りませんので、メリットデメリットを踏まえた上で検討する必要があると思います。

ユーザーもまだまだ慣れない中でスマートフォンを使うことが多くなっています。

そんななかで制作者としては、少しでもユーザーのストレスを軽減し、使いやすいサイトを提供することが必要になります。

スマートフォンサイトの構築を行う際には、以上の内容を踏まえて再度内容の検討を行いユーザーライクなサイト構築を行うことを推奨します。

■本コラムの元記事はこちら
スマートフォンサイト構築時に押さえるべきポイント