ウェブサイトのスマートフォン対応

更新：2015-05-14

スマートフォンで見やすいようにウェブサイトを改良する。

モバイルフレンドリー

Google がモバイルフレンドリーなどと言いはじめて仕方なく当サイトもスマートフォンで見やすいように修正した。
モバイルフレンドリーとは、モバイル端末で見やすいページかどうかという話で、これが検索結果に影響する模様。
モバイル端末といってもたくさん種類があり、解像度もまちまち。
大画面・高解像度端末も多くなってきた今、PCのページをそのまま見ても良いのではと考えていたが、重い腰をあげてサイトに手を加えた。
当サイトは WordPress のようなプログラムを使っておらず、自作のプログラムなので独自に対応した。
いい機会なので、コードやデザインも見直した。

スタイルシート

スタイルシート（CSS）はPC用とスマホ用を用意し、機種を判別してそれぞれのCSSを読み込むようにした。

機種判別

CSSを出し分けるために PHP で機種判別を行う。
ユーザーエージェントに iPhone、iPod、Android の文字列がある場合はスマホ、それ以外はPCとする。
Android はタブレットもあるが、当サイトはAndroidタブレットからのアクセスは少ないので無視。
一応うちにあるAndroidタブレットで確認したが、見にくいとは感じなかった。

viewport

スマートフォンの画面サイズに合わせてページを表示するにも書いたが、viewport が便利。
width は指定せず端末任せ。

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />

また、このviewportを使用するためページ全体や段落などは基本的にwidthを指定しない。
なるべくシンプルなページ構成にし、どの端末でもそれなりに見えるようにする。
スマホ用のページの幅は、少し古いiPhoneが横320pxなので、320～400pxくらいを基準にした。

画像・地図の縮小化

ページに表示する画像はPCを想定して640×480pxくらいを使っていたが、スマホは前述のように320pxくらいを目安とし、画像サイズを縦横半分に縮小する処理をプログラムに加えた。
画像のサイズをCSSで指定していればCSSだけで対応できたが、仕方なくプログラムで処理。
いくつかのページでGoogleマップも使っており、これもPCは横640px、スマホは横320pxで表示させた。
マップは該当箇所が少なかったため、該当ページのデータを少し手直ししてCSSにて対応。

table（表）の表示

当サイトではtable（表）をよく使っており、これをどのように表示させるか悩んだ。
PCを基準として作った表はスマホでは表示領域に入りきらないものもある。
案としては Wikipedia もやっているように表を横にスクロールさせる方法がある。

<div style="overflow:auto;">
<table style="width:500px;">
（中略）
</table>
</div>

overflowを使えば、表の領域だけスライド（スクロール）させてスマホで見ることができる。
ただ、この方法だと私のサイトの場合、該当ページのデータの表の部分を少し修正するか、プログラムで無理やり overflow を埋め込む必要がある。
また、スクロールさせる場合、表全体を見渡すことができない。
表は部分的にではなく全体を見たいこともあるので、表に overflow を使うのをやめた。
現状、table には width を指定しておらず、td のみ width を指定している。
この場合、PCでの表示を想定した横幅でもスマホ（のブラウザ）が適当に縮小してくれるようなので、端末任せで表示させるようにした。
セルの途中で折り返してほしくない箇所は一部 white-space:nowrap を追加。
多少見にくい部分もあるが、表全体を見渡せるのでこれでよしとした。

メニュー

今までページ上部にあった別のカテゴリへ移動するためのメニューもどのように表示させるか悩んだ。
スマホだと、今までの方法ではメニューが1行に収まらない場合がある。
文字を小さくするとスマホでタップしにくい。
そこで、上記table（表）で採用しなかった overflow を使い、スクロールさせる仕様にした。

ページの先頭へ

今までページ下部にページの先頭（上部）へ戻るためのアンカーはなかったが、これを追加した。
1ページのスクロール量が多くても、PCではあまり必要性を感じなかったため使っていなかったが、スマホだと結構便利なので追加した。

<a href="#">ページの先頭へ</a>

SNSボタン

今まで Facebook、Twitter、Google、はてなのボタンを使用していたが、はてなのボタンは削除した。
私のサイトははてブ利用者が少なくなってきたことや、はてなユーザーが興味ありそうな記事が少なくなってきたため削除した。