viewportによる画面全体のサイズ指定

viewportとは、表示領域のことです。HTMLにMETA要素としてviewportを指定することにより、Webページの幅、高さ、拡大倍率等を訪問者にどのように表示するかを指定することが可能になります。

META要素に下記を追加します。

<meta name="viewport" content="XXX,XXX">

viewportには下記の値が設定できます。

指定要素	意味	デフォルト値	選択値
width	横幅	980px	200px~10000px
height	縦幅	自動	233px~10000px
initial-scale	初期状態の拡大率	1.0	minimum-scale~maximum-scaleの範囲内
user-scalable	ユーザー操作による拡縮の許可	yes	yes,no
minimum-scale	最小縮小比率	0.25	0~10.0
maximum-scale	最小拡大比率	1.6	0~10.0

例を挙げると「横幅はデバイスに準拠、ズームはさせない」設定は下記になります。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

数字の電話番号置換機能停止

Apple系統のデバイスは、数字の羅列が存在すると電話番号に置き換えてしまう機能が存在します。
その機能を停止させるために、下記をMETA要素に追加する必要があります。

<meta name="format-detection" content="telephone=no">

レイアウト幅

スマートフォンサイトのレイアウト幅は、端末毎に画面サイズが様々であるため、リキッド(可変幅)で作成しましょう。
サイト作成時の標準レイアウトは、横320px、縦480pxで作成します。
スマートフォンをお持ちの方は、横画面にした際にどのように表示されるかも合わせて確認しながら作成すると良いです。

サブドメイン、サブディレクトリどちらで作成するのが良いか

現在、検索エンジンはPC用、スマートフォン用で分かれていません。
スマートフォンで検索をした場合も、PCサイトと混在して結果表示されます。
基本的にPCサイトのほうが情報量、SEO的にも勝っていることが多く、上位表示され易い傾向にあります。
検索結果は、PCサイトを利用して、そこからスマートフォンサイトに誘導するのが効果的です。

そこで、サブドメイン、サブディレクトリのどちらのスマートフォンサイトに誘導するのが良いのかというと、基本的にサブディレクトリで作成することをお勧めします。

サブドメインで作成した場合は、PCサイトで築き上げたもの(情報、SEO等)を無視して、ほぼ1から作り上げることと同じになります。
PCサイトとまったく異なる内容を表示する(PCサイトの情報資源を利用しない)、対外的にドメインを取得する必要がある(企業等のドメイン知名度向上)等の理由がない限りは、サブディレクトリで作成しましょう。

PCサイトから誘導方法

PCサイトからの誘導方法ですが、大きく2パターン存在します。
ユーザエージェントを判定して指定アドレスに飛ばす方法になります。
「iPhone」、「iPod」、「Andoroid」、「BlackBerry」に対応しています。

javascriptのサンプルを下記に示します。

• 自動振り分け

PCサイトにアクセスしてきたスマートフォンユーザを自動的に指定サイトに振り分ける方法です。

<script type=”text/javascript”>
if(navigator.userAgent.indexOf('iPhone') > 0
  || navigator.userAgent.indexOf('iPod') > 0
  || navigator.userAgent.indexOf('Android') > 0
  || navigator.userAgent.indexOf('BlackBerry') > 0)
{
location.href = 'スマートフォンサイトアドレス指定 ※変更';
}
</script>



• 任意振り分け

PCサイトにアクセスしてきたスマートフォンユーザに指定サイトへの移動可否を確認してから振り分ける方法です。
記述HTMLが呼び出されるたびに表示されるのを防ぐために、リファラー(記述HTMLに訪れる前のアドレス)を判定して「自サイトドメイン」だった場合、表示しない仕様となってます。
スマートフォンユーザの中には、PCサイトのレイアウトで見たい方がいらっしゃるのでこちらをお勧めします。

<script type="text/javascript">
if (document.referrer.indexOf('自サイトドメイン ※変更')== -1 &&
  ((navigator.userAgent.indexOf('iPhone') > 0
  || navigator.userAgent.indexOf('iPod') > 0
  || navigator.userAgent.indexOf('Android') > 0
  || navigator.userAgent.indexOf('BlackBerry') > 0
  )))
{
if(confirm('スマートフォン用のサイト表示しますか？\n（キャンセルの場合はPCサイトを表示します。)')) {
location.href = 'スマートフォンサイトアドレス指定 ※変更';
}}
</script>

QRコードを作成しよう

PCで閲覧している人にもスマートフォンサイトを作成した事を告知するためQRコードを作成し、サイトで宣伝しましょう。
管理人は、こちらのQRコード作成【無料】を利用させて頂きました。
QRコードって何？って方は、よくある質問をご覧ください。

フォントサイズは14px以上

只でさえ画面がPCと比べ小さいため、文字サイズはPCの120%ほどを保つサイズにするようにしましょう。
読みにくいサイトは、訪問者に好かれにくいです。
管理人は、14px以上を推奨します。

リンク幅は44px以上

Appleでは「アプリケーション内のタップ可能要素には、44px*44pxの領域を割り当てる」というガイドラインを設けていることもありますが、スマートフォンは指で操作するため、ある程度幅がないと誤クリックが増加し、操作がし難くなります。
リンクボタンは、44px以上で大きめのサイズを心がけましょう。

リンクだと分かり易くする

PCサイトと違い、マウスポインタが表示されないスマートフォンでは、リンクかどうかタップするまで分からないため、ユーザインタフェースの観点からリンクだと明示的に分かるようにリンク領域を作成してください。
例えば、リンク領域を枠で囲む、リンク領域横にマーク(矢印のような）を付与する等が挙げられます。

横スクロールは発生させない

スマートフォンでネットサーフィンをしたことがある方は、すぐ分かると思いますが、スマートフォンは基本縦にスクロールさせてページを閲覧します。
その際、横スクロールがあると縦スクロール操作がし難いページになるため気をつけましょう。

情報を詰め込みすぎない

冒頭でも述べましたが、PCと比べ、情報処理、通信速度、画面領域でスマートフォンは劣るため、同じ情報量をスマートフォンサイトで表示させると閲覧が困難になり、せっかく作成したページが見てもらえないという事態が起こらないとも限りません。
情報量はPCサイトからピックアップして作成しましょう。

広告もスマートフォン対応させる

スマートフォンで閲覧しているのにも関わらず、広告がPC向けだと収益率が大きく下がります。
使用する広告が、スマートフォン対応しているかどうか確認してから使用するようにしてください。