本日2014年10月10日現在、iPad（横幅768px）に満たない「手の平サイズ」であるスマホ＆ファブレット端末からウェブを見ている人は、StatCounterの統計によると日本で23%。全ウェブサイトの約4分の1が、この小さな画面で表示されているんですね。
これまでPCでの閲覧しか考慮していなかったBtoB企業のサイトでも、手の平サイズの画面で表示される機会が増えてきました。
私が制作を担当させてもらっているBtoB企業のクライアントさんで、横幅960pxのPCサイトのみだった自社サイトが、スマホからのアクセスが全体の3分の1を超えてきたところがあり、今回スマホ最適化を行いました。
レスポンシブではなく、ダイナミック・サービングを採用
既存のPCレイアウトはそのまま残し、スマホを新設することになりましたが、1ページ内の情報量が非常に多い状態だったので、Googleが最も推奨するレスポンシブではなく、2番目の「同じ URL で異なる HTML を動的に配信する」ダイナミック・サービングと呼ばれる手法で、ページの核となる部分のみスマホで表示することにしました。
https://developers.google.com/webmasters/smartphone-sites/details
PHPでユーザーエージェントを判別し、スマホとそれ以外（PC・タブレット）に分ける
ユーザーエージェントを見て判別する関数を用意し、分岐によってスマホ用CSS・HTMLを表示するか、それ以外のPC・タブレット用CSS・HTMLなどを読み込みます。
<?php
function is_mobile() {
return preg_match( '/android.+mobile/i', $_SERVER['HTTP_USER_AGENT'] ) ||
preg_match( '/iphone/i', $_SERVER['HTTP_USER_AGENT'] );
}
?>
<?php if (is_mobile()): ?>
<head>
<!-- 〜スマホ用CSS読み込み〜 -->
</head>
<body>
<!-- 〜スマホ向けページソース〜 -->
</body>
<?php else: ?>
<head>
<!-- 〜PC用CSS読み込み〜 -->
</head>
<body>
<!-- 〜PC向けページソース〜 -->
</body>
<?php endif; ?>
WordPressを使用している場合
上記サイトでも解説されている通り、
モバイルからのアクセスは、テンプレート名の末尾に「-sp」が付けたものを使用するように、
フィルターフックを設定します。
function.phpにユーザーエージェント判別を記述し、スマホからのアクセスは、「-sp」のテンプレートを優先して読み込むよう設定します。
function is_mobile() {
return preg_match( '/android.+mobile/i', $_SERVER['HTTP_USER_AGENT'] ) ||
preg_match( '/iphone/i', $_SERVER['HTTP_USER_AGENT'] );
}
add_filter( 'template_include', 'mytheme_template_include' );
function mytheme_template_include( $template ) {
if ( is_mobile() ) {
$template_sp = str_replace( '.php', '-sp.php', $template );
if ( file_exists( $template_sp ) )
$template = $template_sp;
}
return $template;
}
また、スマホからのアクセスはstyle.cssを読み込まず、スマホ用CSS「style-sp.css」を読むよう、アクションフックを設定します。
if (!is_admin()) {//管理画面を対象外に
function add_style() {
wp_deregister_style( 'twentyfourteen-style' ); //twentyfourteenテーマのstyle.cssを読み込まない
wp_enqueue_style( 'style-sp', get_bloginfo('template_url').'/style-sp.css', array( 'genericons' ) ); //style-sp.cssを読み込み
}
add_action('wp_print_styles', 'add_style');
}
仕上げに、Googleにダイナミック・サービングを使用したページであることを宣言
ダイナミック・サービングはPC版とモバイル版が同じURLのため、片方だけしかクロールされず、情報が欠落することもあるそうです。これを防ぐために、「HTTP Vary: User-Agent」ヘッダーを返す設定をお忘れずに。
参考：
http://www.suzukikenichi.com/blog/building-websites-optimized-for-smartphones-and-feature-phones/