スマホサイトのリリース前に
チェックしておきたい10のポイント

パソコン画像

スマートフォン対応サイトの
完成度高めるために

スマートフォン対応サイト(以下スマホサイト)のデザインやコーディングも完了し、いざリリースという前にいくつかチェックしておきたい項目があります。
ここではスマホサイトを正式リリースする前にチェックしておきたい重要な項目を簡単な説明とともに紹介しています。
忘れがちな項目を見直して修正することは、ユーザーエクスペリエンスの向上につながり
いらないコストの削減にもつながります。
スマホサイトをリリースする前にぜひ10のポイントをチェックしてみてください。

1.画面サイズをチェック

スマートフォンやタブレットの種類もかなり増えてきており、画面サイズもバラバラです。あるスマートフォンでデザインやピクセル調整を細かく調整して、違うスマートフォンで確認するとレイアウトが崩れているということもあります。
そんな事があるので、正しく表示されているか複数のデバイスでタテ・ヨコ表示を確認することをおすすめします。
各デバイスの画面表示をチェックすることができる、無料のツールやブラウザで使用できる無料のプラグインがあるので、使用してみてください。

チェックポイント

  • ・主要機種のデバイスサイズに対応しているか

ツールリンク

(Web上でチェックできる)
(Chromeのプラグイン)
(Firefoxのプラグイン)

■主要機種の画面サイズ例(解像度)
Phone4 / 4S 960×640
iPhone5 1024×768
iPad / iPad2 1024×768
iPad3 / iPad4 2048×1536
GALAXY S4 SC-04E 1920×1080
Xperia A SO-04E 1280×720
Xperia Tablet Z SO-03E 1920×1200

デバイスの画面サイズはこちらも参照してください

http://www.find-job.net/startup/iphone-android-size-2013-summer

ページトップ

2.クロスブラウザチェック

デザインやピクセル調整も細かく設定し、いざ他のブラウザで見ると文字が切れていたり、レイアウトが崩れていたりと正しく表示されていないことがあります。主要な複数のブラウザに対応しているか、正しく表示されるかを確認することはとても重要です。
リリース前にブラウザチェックは欠かせませんが、ローカル環境に各種ブラウザの各種バージョンを揃えてインストールすることは困難です。そんな中各種ブラウザ、各種バージョンでチェックできる無料のブラウザチェックツールがあります。これを使用することにより、容易にクロスブラウザのチェックができるようになります。各ツールによって対応ブラウザや表示の仕方などが違うので、用途や好みに合わせて使い分けてください。

ブラウザ各種

チェックポイント

  • ・主要ブラウザで正しく表示されるか(文字切れ、文字化け、画像のずれ、レイアウト崩れなど)

ツールリンク

(WindowsやMacなどで動作する60以上のブラウザに対応/WebからPNGファイルをダウンロード)

(スマートフォン用のブラウザチェックツール/Web上でチェック)

ページトップ

3.ユーザビリティの検証

スマホサイトはPCサイトとは違い、小さな画面の中で情報やナビゲーションを詰め込んでいかなければいけません。限られたスペースなので、ボタンの大きさや配置、分かりやすさが重要です。一つ一つ操作して、問題点を修正することで、ユーザビリティが向上し離脱率の低いサイトを構築することができます。PCサイトとは表現手法が変わるため、スマホ専用サイトを制作する手法、もしくはPCとスマホ両方に対応したレスポンシブデザインのサイトを制作する手法がございます。

チェックポイント

  • ・ボタンが押しやすいサイズになっているか
  • ・アイコンを使用するなど、ボタンが分かりやすくできているか
  • ・操作しやすいレイアウトになっているか
  • ・選択しているボタンのアクションをつけているか
  • ・テキストサイズは適切か
  • ・縦横のスクロールが混在していないか
  • ・バルーン表示で操作性が失われていないか

ページトップ

4.最適化

スマホサイトは使用する回線スピードやスペックの問題で、PCサイト以上によいパフォーマンスを出すたの最適化作業は欠かせません。URLや画像、そして階層を含めた構造などがユーザーにとって、また検索エンジンにとっても最適化されたサイトになっているかを見直すことで、表示速度(軽量化)やアクセシビリティ、ユーザビリティの向上、SEO対策につながります。最適化作業はリリース後もやっていく作業ですが、リリース前にも必ずチェックしてください。
各種特徴のある無料ツールがあるので、適宜利用してみてください。

チェックポイント

  • ・HTTPリクエストを減らす
  • ・画像イメージを最適化
  • ・CSSスプライトを使って、画像を一元管理
  • ・cssとJavaScriptは外部から読み込む
  • ・階層は浅く

ツールリンク

(Google DevelopersのWebサイト解析ツール)
(Webサイトの表示速度計測ツール)
(Webサイトのパフォーマンス解析ツール)

ページトップ

5.スマホサイトへの振り分け

スマートフォンやタブレットなどに最適なデザインやコーディングができた後は、PCでアクセスした場合はPCサイトを、スマートフォンなどでアクセスした場合はスマホサイトを表示させなければいけません。レスポンシブデザインを使っていない場合は、ユーザーエージェントによる振り分け設定をしてスマホサイトへ誘導する方法があります。
振り分け方法はPHP、JavaScript、.htaccessを使って自動的に振り分けする方法があります。振り分け設定をすることで、スマートフォンからアクセスした場合に操作しづらいPCサイトではなく、スマホサイトへ誘導されユーザーエクスペリエンスの向上につながります。また、スマホサイトの情報をPCサイトより制限している場合、PCサイトへのリンクを用意することをおすすめします。

チェックポイント

  • ・PC、スマートフォン、タブレットがそれぞれ正しく振り分けられるか

ツールリンク

ページトップ

6.リンク切れをチェック

リンク切れやリンク間違いを全てチェックしていても、1つや2つリンク切れやリンク間違いを起こすことがあります。
リンク切れが起きていると、ユーザーの利便性が低下するだけでなく、ユーザーの印象そのものが悪くなり、離脱率の上昇にもつながります。ですので、必ず全てのリンクをチェックしていきましょう。
またリンク切れをチェックする無料ツールがあるので、必要に応じて使用してみてください。ただし、リンク間違いについてはチェックできないのでご注意ください。

チェックポイント

  • ・ページリンクや画像のリンク先が間違っていないか(想定のリンク先が存在するか)
  • ・リンクのURLに“http://"を付け忘れていないか
  • ・SSLページでは、リンク先を“http://"ではなく“https://"に設定しているか
  • ・ユーザーにとってリンクであることがすぐ分かるか
  • ・リンクではないものに下線をつけていないか

ツールリンク

(W3C公式のリンク切れチェッカーツール)

ページトップ

7.タイトルとメタデータ

タイトルやメタデータはSEO上最も重要なポイントの1つであり、ユーザーがページの内容を知るのにも重要な項目です。
タイトルはページごとに適切なキーワードを含め、わかりやすい言葉で表現することでアクセス数の向上にもつながります。

<title>スマホサイトのリリース前にチェックしておきたい10のポイント</title>

メタデータもSEOでは重要です。ページごとに説明文をかえることで、Google検索結果に表示される説明が変わり、ユーザーにどういった内容のページであるかをより伝えることができるので、サイトへのアクセスにつなげることができます。

<meta name="classification" content="World, Japanese, コンピュータ, インターネット, ウェブデザイン・開発" />
<meta name="Description" content="スマホサイト制作者必見!スマホサイトの完成度を高めるために、リリース前にチェックしておきたい10のポイントをご紹介" />
<meta name="Keywords" content="スマホサイトのリリース, スマートフォン,ブラウザチェック, リリース前チェック, 脆弱性診断, バリデーション, エラーページ" />

チェックポイント

  • ・タイトルは他ページと重複していないか
  • ・タイトルは全角35文字以内で簡潔に
  • ・メタディスクリプションは全角120文字以内で簡潔に
  • ・メタキーワードは10個以内

ページトップ

8.サイトマップの作成

各ページがGoogleやYahoo!などの検索エンジンにインデックスされるには、各ページを検索エンジンのクローラーにクロールしてもらわなければなりません。サイトマップを作成することで、検索エンジンのクローラーがページを効率よくクロールできるようになります。
またリンク先のページをクローラーが認識できないAjaxなどを用いたリンクや、どこからもリンクのはられていない単独ページについても、サイトマップを作成することで検索エンジンのクローラーにクロールを行なってもらうことができます。
サイトマップを作成するための便利な無料ツールがあるので、必要に応じて使用してみてください。

※PCサイトと同等に扱われるので、PC向けのXMLサイトマップを設置・登録していれば必要ありません。

チェックポイント

  • ・ルートディレクトリに sitemap.xml を置いているか
  • ・Google Webmaster Toolsにサイトマップを登録

ツールリンク

ページトップ

9.バリデーション

バリデーションとは制作したサイトのhtmlやcssについて、W3Cが求める正しい記述や構築ができているかを検証する作業です。バリデーションを行うことは、きれいな構文を記述できるだけでなく、検索エンジンのクローラーが円滑にクロールすることができるようになり、SEOにとても有効です。
無料のチェックツールを使用して、より正確できれいな記述を心がけましょう。

チェックポイント

  • ・&を&ampで記述できているか
  • ・タグはきちんと閉じているか
  • ・id属性が重複していないか

ツールリンク

(W3C公式のhtmlやxhtmlの構文チェックツール)
(W3C公式のcssの構文チェックツール)

ページトップ

10. 脆弱性診断(セキュリティテスト)

攻撃者が脆弱性につけ込み、ホームページの改ざんやなりすまし、マルウェアの埋め込み、また最悪の場合は情報漏洩などのセキュリティ事件・事故が増えてきています。元々、大手企業や官公庁のWebサイトを狙うケースが多かったのですが、最近では中小企業のWebサイトやショッピングサイト、キャンペーンサイトなどを狙うケースも報告されています。
年々増加するセキュリティリスクの対策のためにも、脆弱性診断を実施されることをおすすめします。

ページトップ

VALTES

ソフトウェアテスト・品質のトータルソリューション

VALTES

バルテス株式会社は、品質向上のトータルサポート企業として、ソフトウェアテストをはじめ、Webサイトテスト、スマフォアプリテスト、ソーシャルゲームテスト、脆弱性診断など、ソフトウェアの品質に関するサービスを数多く提供しております。
バルテスのWebサイトテストは、約300サイトのテスト実績を基に、大規模システムから小規模サイトまで幅広く対応します。

〈テスト実績〉

  • ・ショッピングサイト
  • ・Web広告システム
  • ・オークションサイト
  • ・宿泊予約サイト
  • ・アンケートシステム
  • ・会員登録システム
  • ・ゴルフ予約システム
  • ・ポータルサイト
  • ・クーポンサイト  など

脆弱性診断Webサイトテスト