初めてスマートフォン専用ページを作成する際に知っておきたいポイント
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。

ちなみに、今回は基本的にiPhone4を使って確認していますのでご了承ください。
目次
1. スマートフォンに対応させるには?
ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。
PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。
1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。
Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。
例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。

Media Queriesについては後で簡単に紹介します。
2つ目のスマートフォン専用ページは、PCのことは気にせずスマートフォンに最適化されたページです。
ヤフーもスマートフォンでアクセスすると、専用ページに移動しますね。

といことでスマートフォン対応にするには2つのパターンがあるわけですが、作成方法には共通点がたくさんあります。
今回は、スマートフォン専用のページを作成する際に注意しておきたいポイントを紹介します。
PCでもスマートフォンでもという方には、Webデザインレシピさんの「CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き」が非常に参考になりますね。
2. Viewportについて
iPhoneでパソコン用のウェブサイトを見るとなんか小さく見えますよね。
このように小さく見えるのは、iPhoneの画面の横幅がデフォルトで980pxに表示されるようになっているからです。
実際の画面サイズは320pxですが、一般的なウェブサイトの横幅は800px以上が多いので、うまく全体を表示できるよう擬似的に画面サイズが980pxになっています。
あの小さな画面を、横幅980pxにしてサイトを見るとさすがに小さいですよね。

そんなときに活躍するのがViewportです。
Viewportを使うと、画面サイズや拡大に関することを操作することができます。
このように使い、head内に挿入します。各プロパティの内容については以下のとおりです。
width
- 画面サイズの横幅
- 初期値は980pxで、200px ~ 10,000px で指定可能
- 値に「device-width」を指定すると、デバイスの横幅に合わせます(iPhone縦持ちの場合 320px)
- 「device-width」を指定しているサイトが多いです
height
- 画面サイズの縦幅
- 初期値はwidthの値とデバイスのアスペクト比で計算されます
- widthを指定すると、自動的に計算されますので、特に指定する必要はないと思います
minimum-scale
- 拡大率の最小値
- デフォルトは0.25で、0~10.0の間の数値を指定することができます
- 数値が小さくなるほど遠ざかることができ、一般的に「1」以下の数値が入ります。
- 100%のリキッドレイアウトだと、それ以上遠ざかることはできないので、あまり意味がありません
maximum-scale
- 拡大率の最大値
- デフォルトは1.6で、0~10.0の間の数値を指定することができます
- 数値が大きくなるほど近づくことができ、一般的に「1」以上の数値が入ります
- 拡大させたくないときは、「1」を指定します
initial-scale
- ページが最初に読み込まれた時の拡大率
- 初期値は「1」で、minimum-scaleとmaximum-scaleの間の値を指定することができます
- 「1」以外の値を指定しているサイトを見たことがないです
user-scalable
- 拡大縮小ができるかどうかの設定
- yes(拡大縮小ができる)、no(拡大縮小ができない)
で、実際に色んなサイトを見ていると、横幅についてはほとんどがwidth=device-width に設定されています。
無駄なくスペースを使いたいので、デバイスによって、それに合った横幅にしているのだと思います。
この場合、「横幅はデバイスに合わす」、「読み込んだときは等倍」、「等倍以上拡大はできない」、という設定になります。
3. 1カラムのリキッドレイアウトで
スマートフォンはパソコンに比べ画面も小さいですので、無駄なく表示させたいものです。
スマートフォンには様々な画面サイズがありますが、どの端末で見ても無駄なく表示されるようにするにはどうすればいいか?
横幅が100%のリキッドレイアウトですね。
リキッドレイアウトは、各列の幅をパーセンテージ(%)で指定し、それによってWebページの幅を相対的・可変的にすることを主とした手法である。リキッドレイアウトにすると、ウィンドウ幅に合わせて自動的に幅が調整されるので、多様な環境でユーザビリティが損なわれないWebページを作成することができる。
実際スマートフォン用のサイトを見てみると1カラムのリキッドレイアウトが多いですね。

ただ、私もそうですが、あまりリキッドレイアウトを作ったことがない、という方も多いのではないでしょうか?
pやh1といったブロック要素(HTML5からブロック要素という定義はなくなりましたが、イメージしやすいと思うのでここでは使わせていただきます)の場合は、特にwidthを指定しなければ横幅いっぱいに表示されます。
ここで注意したいのはこんな場合です。 ※ 関係ない部分のコードは省略しています。
h2 { width:100%; border-left:20px solid red; padding-left:20px }
このようにすると要素全体の幅が、横幅100%(320px) + ボーダー20px + パディング20pxとなり40px分はみ出してしまいます。

横いっぱいに表示したいと、ついついwidth:100%;に設定してしまいがちですが、こんな場合もありますので気をつけましょう。
横いっぱいに表示したいときは、何も指定しないか、width:auto;(初期値)と指定しておきましょう。
4. box-sizingプロパティ
1カラムの場合は、何も指定しないか、width:auto;(初期値)でいいのですが、2カラムなど横並びに2つの要素を並べる場合は、widthをちゃんと指定する必要があります。
実際スマートフォンの場合、画面サイズも小さいですので、2カラムはあまり実用的でないですが、横に並んだメニューなんかだと結構便利ですね。
以下のような2列になったメニューを作るときに、「box-sizing」というプロパティが結構便利です。

2列ですので幅を50%にするわけですが、横に線やパディングを入れるとその分50%より広くなってしまいます。
入れ子にしてもいいのですが、せっかくですしbox-sizingを使ってみます。

ピクセル単位など絶対値で横幅を指定する場合は、あまり必要ないですが、パーセントで指定する場合box-sizingはとても便利です。
横幅を50%と一緒にbox-sizing : border-box ;を指定すると、ボーダーがあろうとパディングがあろうと、要素全体の横幅は50%になります。
まさにIE6ですね。
2列になったメニューを作ってみる
では先ほどのメニューを作ってみます。
box-sizingとCSS3セレクタを使うと、htmlはこんなにシンプルになります。リストを使うべき、というツッコミもあるかもしれませんが。。
フィードやTwitterで最新情報をチェック@webpark2さんのツイート
貴重なご意見ありがとうございます。
ただ、スマホ用ページの方が見やすくて好きな人もいると思います。
どちらが多いか分かりませんが。
Yahooを例にすると、個人的にはスマホで見るには
スマホ用ページの方が見やすいと感じてます。
1人のユーザーとしてです。
フリックでのページ変遷は私も嫌いです。
独りよがりと仰る気持ちも何となく分かります。
ただ、スマホページを作ること自体独りよがりというのはちょっと。
ま、スマホ用ページがいいと感じるかは人それぞれですので、
いきなりリダイレクトさせるのはなく、スマホ用ページもありますよ
と知らせるのが親切なのでしょうか。
ありがとうございました。
今後のウェブ制作の参考にさせていただきます。
確かに色々な意見がありますが
スマホページの作り方として個人的にすごく為になりました。
おはようございます。
お役に立ててうれしいです。
励みになります。
人の好みは様々ですので難しいですが、
できるだけたくさんに人に合わせられるようにしたいものです。
またお立ち寄りください~
いったいどういうことでしょうか ^ ^;
ありがとうございます。
これからもよろしくお願いします。
わからなかった謎が、、、いろいろ解けました。
ありがとうございます!
これからも参考にさせてください。
コメントありがとうございます。
お役に立ててうれしいです。
またお立ち寄りください~
お陰で今からの既存サイトのSP用ページ作成がはかどります。
さて、
11番の項目ですが、
訪問時に一度だけユーザーエージェントで振り分けて
確認を取る方法は如何でしょうか?
PCからだと何も出ないけど、モバイルからのアクセスの際に
「このサイトにはスマートフォン用のサイトがあります。表示しますか?」
と問うものです。
<head>
<script type="text/javascript">
if (document.referrer.indexOf('http://***.net/') == -1 &&
((navigator.userAgent.indexOf('iPhone') > 0 &&
navigator.userAgent.indexOf('iPad') == -1) ||
navigator.userAgent.indexOf('iPod') > 0 ||
navigator.userAgent.indexOf('Android') > 0)) {
if(confirm('このサイトにはスマートフォン用のサイトがあります。\n表示しますか?')) {
location.href = 'http://***.net/sp/ndex.html';
}
}
</script>
</head>
*私もどっからか拾ってきたコピペ運用ですので、コレを載せて頂いていた方に敬意を示します。
いきなりリダイレクトさせるのは乱暴だという方もいますので、
スマートフォン用のページがあることを知らせてあげるは
非常に親切だと思います。
ヘッダーの上で知らせているサイトもよく見かけますね。
この辺はまだまだ分からないことが
多いので今後しっかり勉強したいです。
いつも参考にさせていただいてます
項目をみていて、ふと思ったのですが・・・
スマホ対応の際のSEO対策や読み込み速度などについては、どうお考えでしょう?
スマホ用ページとはいえ、検索エンジンからみるとPCページと変わりありませんよね
流入経路もQRコードなどからはマイナーという事を考えると、やはり検索で上位に出なければなりません・・・
まぁ、とりあえず対応させれば顧客は満足、という意見もありますが・・・笑
自分でも試行錯誤しているのですがコレ!といった答えや方法が見いだせていなく・・・
是非ご意見きいてみたいです
(って過去記事であったらスミマセン;)
興味深いコメントありがとうございます!
ここ数年、SEOは細かな技術よりも内容だと
言い聞かせていましたのであまり意識していませんでした。
スマホ用ページは、スマホで見たときに
専用ページにリダイレクトさせるかスマホ用ページが
あることを知らせることで誘導することが多いと思います。
で、スマホでいくつか検索したところ、スマホ専用ページが
ヒットすることがありませんでした。
スマホ専用ページはあくまでサブ的なもので
メインはあくまで通常用のページだと
検索エンジンは理解しているからだと思います。
私はそれくらい検索エンジンは賢いものだと考えています。
ですのでSEOについては通常のページで意識すべきであり
スマホ用ページに関しては特に意識する必要はないかと思います。
読み込み速度に関しては速いに越したことはないと思います。
ただ、スマホ用ページしかない場合は話が違ってきますね。
当然意識する必要があります。
ただスマホ用ページは1カラムが多くシンプルですので
見出しなど基本的なことを意識していれば十分かと思います。
今回のご質問、とても勉強になりました。
ありがとうございました。
javascriptのスクリプトコメントアウトですが、
javascriptからコマンドと認識されない為に、
<!--
スクリプト文
-->
となっているところを
<!--
スクリプト文
//-->
とした方がよろしいのではないでしょうか
ありがとうございます.
コメントありがとうございます。
確かに仰られているような
方法の方がよさそうですね。
このへん勉強不足でした。。
今後もよろしくお願いします!
>いきなりリダイレクトさせるのは乱暴だという方もいますので、
スマートフォン用のページがあることを知らせてあげるは
非常に親切だと思います。
これには大賛成です。私もスマートフォン版サイトは見にくいと思う方ですので、いきなりスマートフォン版にリダイレクトされると結構ストレスです。
ましてやスマートフォンからはスマートフォン版しか表示できないようなサイトはさいていかですね。
上記のような配慮がされたサイトがスタンダードになっていくといいと思います。
コメントありがとうございます。
個人的には、
・ 最初の訪問でスマホ用もあることを大きく表示
・ スマホ用を見た場合、その後はスマホ用サイトを表示
・ PC用へのリンクは下の方に乗せておく
というのが親切かなと思います。
今後もよろしくお願いします。
ひとつ質問したいのですが、
----------------------
この場合、普段のフォントカラーが「緑」でフォントサイズが「14px」に、画面サイズが480px以下の場合は「青」で「12px」に、320px以下の場合「赤」で「14px」になります。
画面サイズ320px以下の場合のフォントサイズは記述していませんが、480px以下の場合で定義されていますので、320pxの画面だとフォントサイズは12pxとなります。
----------------------
上の二つの文は矛盾していると思うのですが、どうでしょうか?
このたびはご指摘ありがとうございます。
仰るように矛盾していますね。。
320px以下の場合のフォントサイズは12pxになります。
ご迷惑をおかけしました。
今後もよろしくお願いします!
参考になってうれしいです。
今後もよろしくお願いします。
フリックでページ遷移とかもう…呆れますね。
情報量は少ない、縦に長くなりすぎる、画像は拡大できない。
iOSにタップズームがなぜあるのかよく考えてください。
1カラムのページは本当にありがた迷惑。