スマホサイトの基本的なデザイン方法

サイト仕様

スマホサイトを運用する際にどのような形でサイトを作ればよいか、その方法を見ていきます。

PCとスマホの両デザインを用意する

この方法は以前から取り入れられていた制作方法で、PC用とスマートフォン用にそれぞれHTMLファイルを用意して、PCとスマホで別々のURLを設置して表示させる方法です。この場合、PCでスマホ用サイトが表示されてしまったり、逆にスマホでPC用サイトが表示されてしまったりする可能性があります。例としては、自然検索でアクセスしてきたときに、そのような事態が起こる可能性があります。なので、しっかりと正しくリダイレクトの処理などをする必要があります。

リダイレクト方法

よく使われるリダイレクト方法は.htaccessを使用する方法です。これはUA（ユーザーエージェント）を判別してアクセスしてきたデバイスごとに表示させるURLを振り分けます。

検索エンジンへの通知

URLの振り分けと同時に行いたいのは、検索エンジンへの通知です。簡単に言うと、PCとスマホの正しいURLがどれかを検索エンジンに知らせるものです。

PCサイトに記述
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.example.com/sp/">

スマホサイトに記述
<link rel="canonical" href="http://www.example.com/">

レスポンシブデザインで作成する

レスポンシブデザインとは、1つHTMLファイルを使用して、あらゆるデバイスに対応させる手法です。この方法はCSSのメディアクエリーを利用してPC表示用やスマホ表示用などのスタイルを切り分けて作っていきます。この場合、URLは1つで済み、わざわざUA判定でURLを振り分ける必要もありません。
レスポンシブデザインの場合、HTMLがワンソースなので、サイトを更新する時なども1ファイル変更するだけですべてのデバイスに反映され、管理もしやすいというメリットがあります。また、将来的に新しいデバイスが出てきても柔軟に対応することができるといった利点もあります。URLが1つでHTMLの情報とも一致し、SEO面でも有利になるメリットもあります。
一方で、設計するのに時間と手間がかかるといったデメリットもあります。また、同じHTMLを読み込んでいくので、PC以上にスマホでは表示速度に負荷がかかり、表示が遅くなる可能性もあります。

動的に出し分ける

これは、URL自体は1つであるが、HTMLファイルをデバイスごとに用意してサーバー側でUAを判定して出し分ける方法です。この場合、デバイスごとに出し分けるので、それぞれに合ったものを作ることができ、個別対応が容易にできるというメリットがあります。
逆にデバイスごとにHTMLが存在するので更新などをする際にはその分、手間がかかり運用コストなどに影響が出る可能性はあります。また、新しいデバイスが出る度に振り分ける設定が必要になったりするというデメリットもあります。

参考：Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法

HTML・CSSソース

スマホサイトを構築する際によく使用されるコードをいくつか挙げておきます。

viewportの設定

スマートフォンでは、縦向きと横向きでスクリーンサイズが変わってきますので、それに応じて表示幅も変わるように設計しなければなりません。そこで、metaタグで以下のような設定をしておきます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

「width=device-width」と設定することで、各デバイスのサイズに合わせて表示されるようになります。「initial-scale=1.0」はページが表示さるときの表示倍率をいくつにするかの設定になります。

電話番号制御

iPhoneの機能として電話番号のような文字列があった場合、自動でリンクがつくという機能があります。意図しない箇所にリンクがついてしまうことを防ぐ方法として、以下のような設定をします。

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

文字サイズ自動調整

縦向きと横向きで文字サイズを自動で調整する機能がiPhoneにあります。表示する向きによって文字サイズを変えたくない場合はCSSに以下のような設定をします。

body {
  -webkit-text-size-adjust: 100%;
}

横スクロールを消す

端末を横向きから縦向きに戻したときに横にスクロールが出てしまう場合は、1番外側の大枠に以下のような設定をすると回避できます。

#wrap {
  overflow: hidden;
}

画面からのはみ出しを防ぐ

画像やiframe、URLなどの長い英数字の文字列などは、モバイル画面だとはみ出してしまうことがあります。その場合は以下を設定します。

img,iframe {
  max-width: 100%;
}

p {
  word-break: break-all;
}

タップしたときのカラーを設定

リンクをタップしたきのハイライトカラーを指定したり、非表示にしたい場合は以下のようにします。

//色を指定する場合
a {
  -webkit-tap-highlight-color: #f00;
}

//ハイライトを非表示にする場合
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}