公開日：
おはようございます。SKYの児島です。
突然ですが、一昨日熱中症で倒れました。
昨日の夕方ごろまで寝込んでおり、そのせいでこんな時間（AM3：00）まで目がバチバチにさえています。
という訳でブログを書きたいと思います。
テーマはタイトルの通り、最近やっているモバイル対策です。（まあ、そんなに期待しないでください）
名付けて！
「ヘッダースキップ大作戦」(Header Skip Strategy) 訳してHSSです。
このページの目次
Header Skip Strategy （HSS）とは
たぶん、説明いらないと思いますが、要は端末がモバイルの場合にはヘッダー部分を見せず、いきなりコンテンツ（記事）部分を表示するという作戦です。
なぜそうするかと言うと、近頃のモバイルユーザーは、ページが表示されると即、半ページほどスクロールする傾向にあるようです。
実は私もそうします。
それもそのはず。
ファーストビューの上半分は、全ページ共通のタイトルとヘッダー広告と相場が決まってますからね！
早く記事が読みたいユーザーからしてみればスキップして当然です。
つまり、ユーザーにこのひと手間をかけさせないために、HSS（あ、ヘッダースキップ大作戦ね）であらかじめスキップしてあげよう！という訳です。
HSSの設定条件解説
いろいろ試行錯誤した結果以下のような条件でヘッダースキップを設定します。
・ヘッダーは表示しないのではなくスキップする。
モバイルだけヘッダー部分を表示させない、という方法もありますが、ヘッダーが無いのはサイトとして締りが無いような気がしますしSEO的にもあまり良いものではありません（たぶん）。
ですから、ヘッダー部分はあるがファーストビューに表示しないという方法を使います。
・ヘッダーをスキップするのはサイト内で移動した時のみ。
サイトに最初に訪問してきた際には、サイト名などを覚えてもらうためにもヘッダーを表示します。
サイト内で違うページに移動した時のみヘッダー部分をスキップします。
・ヘッダースキップにはページ内リンクを用います。
HTMLには同じページ内のHTMLタグに設定した、「name」や「ID」にリンクする方法が用意されていますので、今回はそれを用いてヘッダーをスキップします。
HSS用ソースコード
まずは、記事のタイトルとなる見出しタグ（h1やh2）にID属性を付加します。
既にID属性が付いている場合は、その属性値をそのまま用いる事も出来ます。
<h1 id="contents">記事のタイトル</h1>
次に、phpでモバイルかどうかの判別を行います。
今回は、使いやすいようにユーザー定義関数にします。
<?php
function is_mobile() {
if(preg_match('/android.+mobile|Nexus|iemobile|ip(hone|od)|opera m(ob|in)i|psp|windows (ce|phone)|mobile.+firefox/i',$_SERVER['HTTP_USER_AGENT']))
return true;
}
?>
もちろん、wordpressの wp_is_mobile()関数を使ってもOKですし、他の方法でモバイルを判別してもOKです。
モバイルの出し分けはレスポンシブ設計で役立つPC/モバイルの出し分け方法４つ！を参考にしてください。
次に先程の関数を使って、モバイルの場合のみページ内リンクを設定します。
<?php
if (is_mobile()) {
$header_skip = "#contents";
}
?>
最後に、内部リンクのURLの末尾に次のphpコードを追加します。
<?php echo $header_skip; ?>
記述例：
<a href="http://www.team-sky.com/<?php echo $header_skip; ?>">
これで完成です。
サイト表示が2秒遅いと直帰率が50％増加するという事例もあります。
もちろん、ページ全体の表示速度も大事ですが、記事までたどり着く時間も重要ではないかと私児島は考えます。
ユーザーの欲しいものを、１秒でも早く提供できてこそ真にサイト表示が早いと言えるのではないでしょうか！
タグ
