当ブログは1ヶ月前のGWにデザインを一新した。
スマホユーザーをターゲットにしたデザインカスタマイズで、下の画像のように、ヘッダーのカテゴリメニューや記事下の関連記事一覧をリデザインした。
今回のカスタマイズのこだわったポイント、設計意図を以下にまとめた。
カスタマイズのターゲット
- スマホユーザー
- 検索からのユーザー
今回はこの2点をカスタイズターゲットに絞った。
当ブログのアクセスは約97％が自然検索によるもので、全体の7割はモバイルユーザーという状況なので、スマホ表示のカスタマイズを優先した。
もちろんPC表示もカスタイズしたいが、まだ途中で投げ出したままになっている。本文下の関連記事一覧はスマホ表示と共通のデザインを採用しているけれど。
スマホユーザーの特性（PCユーザーとの比較）
まずスマホユーザーの特性を整理しておこう。以下の3点を頭に入れつつカスタマイズに臨んだ。
ページの滞在時間はPCユーザーより長い
意外かもしれないが、PCユーザーよりモバイルユーザーの方が1ページに長く滞在してくれる（※サイトの滞在時間ではない）。
下の表は当ブログのあるページのデバイス別の滞在時間。同じ記事を読んでいるのにモバイルユーザーの方が1分程度滞在時間が長い。このページだけでなく、全てのページに同じ傾向がある。
この傾向は当ブログに限ったことでない。有名な「沈黙のWebライティング（246p）」にもそう書かれているので一般的な特性だ。
読み応えのある記事を提供できていればきちんと読んでもらえる、ということが言えるだろう。
ページ遷移はしてくれない
上の通り1ページの滞在時間は長いけれど、もう1ページ見てくれる割合はPCユーザーに比べ低い。1ページだけ読んで帰る人が多い（直帰率が高い）。
PC表示ならヘッダーメニューやサイドメニュー、運営者プロフィールなども目に入りやすいので、ページ遷移してくれる可能性が高いがモバイル表示ではそうではない。
すぐ離脱する
スマホユーザーはスキマ時間や暇つぶしに気軽にアクセスしてくる人が多いので、離脱するときも気軽だ。サイト内で不快な思いをさせるとすぐに「戻る」。
カスタマイズ実例：こだわったポイント
ユーザーは自分のキーワードに対する答えがほしくてアクセスしてきているのだから、まず「自分の見せたいものを先に見せるのではなく、ユーザーが見たいものを先に見せる」こと、これを最優先に考えた。
ファーストビュー
目的：読者には記事を読んでもらうことを最優先
上の画像の通り、ファーストビューはとにかくシンプル。
広告他、余計なものを入れず、読者がすぐに記事を読み出せるよう配慮した。まずユーザー満たしてあげないと何もリターンは期待できないだろう。
カテゴリーメニュー（ヘッダー固定）
「メニュー」ってよくあるけれど、カテゴリ名の羅列だけでユーザーはクリックしてくれるかな？という疑問があったので、ちゃんと装飾してみようと思った。
目的：もう1ページ読んでもらうための動線
「ハンバーガーメニュー」といわれる右上の三本線のアイコン（）をタップするとメニューがスライドしてくる仕様なのだけれど、このハンバーガーメニュー誰も開いてくれない。
ハンバーガーメニューの評判の悪さはWeb界隈で有名だが、設置しないわけにもいかないのでせめて読者に「それが何か」を認識してもらえるよう「MENU」とテキストを添えた。
各カテゴリ表示もカテゴリ名のリストじゃなく、円形のサムネイルと短い説明文をいれて、ユーザーに「そのカテゴリにはどういう記事があるか」がわかるようして興味を惹き、クリックしてもらえるよう考えた。
カテゴリーメニューは上図のような感じで、デフォルトでは画面左に隠れていてメニューボタンを押すとスライドインしてくる。もう一度タップするとスライドアウトする。
この部分はJSを使わずCSSだけで簡易的に実装した。特にこだわりはないけれど、CSSでできることはCSSで処理したい派なので。
この部分は、少しHTMLをいじれる人なら下の記事を参考にすればすんなり導入できるだろう。コードも公開されている。
固定ヘッダー
上部のブログタイトルと「MENU」がある黒い部分のこと。
目的：メニューが常に目に入るように
固定ヘッダーはできるだけ縦幅を小さくして、ユーザーの可読スペースを確保した。とにかく邪魔にならないようにと考えた。
ヘッダー（またはフッター）を固定するとユーザーはスクロールしても動かせないので、固定範囲を大きすぎるとユーザーはイライラする。
たまにそういうサイトを見るけれど、不快感が先に立ってコンテンツが頭に入ってこなくなるので、ユーザーの操作領域を侵さないよう配慮した。
またiPhone5のように液晶画面サイズの小さいモデル（320x586）だと、さらに操作領域が狭いので、こちらも入念に表示チェックした。
もちろん固定ヘッダー＆フッターメニューだけでなく、「上に戻る」ボタンを常時表示させる場合、オーバーレイ広告を設置する場合も同じで気をつけたいところ。
以前は固定フッターも付けていたのだけれど効果がなかったので外した。
CTA（本文下のエリア）
CTA（コール・トゥ・アクション）とは記事下のスペースのこと。読了後は次へのアクションをユーザーに促進させやすいタイミングなので、CTAはPRスペースとして最も重要視される場所。企業サイトなどでは、お問い合わせや資料請求などへの誘導に使われる。
CTAでは「こちらが見せたいもの、クリックしてもらいもの」を表示している。今回のカスタマイズのハイライトの一つで関連記事への誘導を強化した。
目的：スマホユーザーに「もう1ページ」を促す
CTAはユーザーが見てくれる場所なので「目が止まるデザイン」を心がけた。本文は白背景なので境界がハッキリわかるよう黒背景にして、強調部分は紅色にしてポイントを際立たせた。
CTAは以下の順で設計している。
- カテゴリの関連記事（※表示しないカテゴリもある）
- 当ブログの人気記事
- 著者プロフィール
関連記事の表示もカテゴリメニューと同様に、単なる羅列ではなく、カテゴリ毎にサムネイルと簡単な説明を加えて「そのカテゴリにはどんな記事があるか」を記載し興味を惹くようにした。
カテゴリによって表示される内容（説明文＆おすすめ記事）も変化するようにしてある。例えば、「Webデザイン」の記事を読んでいる人には「Webデザイン」の関連記事が表示されているし、「英語」の記事内では英語の関連記事が表示されている（ハズ）。
基本的に検索からくるユーザーは他のカテゴリには全く興味がないので、余計なものは目に入らない方がいいだろう。
カスタマイズに対する評価
ここまでつらつらと書いてきたので、最後に「これだけ数字が改善されました！」と胸を張りたかったけれど、1ヶ月データを追った結果、残念ながら今回のカスタマイズの目的は達成できなかった。
直帰率、ページ滞在時間といったユーザーエクスペリエンスに関連する数字は、悪化こそしていないけれど横ばいのまま。改悪にもなっていないので元に戻すこともないけれど残念。
まぁ、また色々と試していきたいと思います。
