本サイトにWordPressを導入してから2年、
気になる点が増えてきましたので、サイトを改修いたしました。
今回手を入れた点、これから手をいれようとしていることについて、まとめておきます。


(1)スマホ、タブレット対応
スマホ、タブレットが普及して、スマホ対応は必須だと良くいわれますが、
あらためて自分のサイトのアクセスデバイスをGoogle Analyticsでチェックすると
スマホ対応の必然性を痛感しました。
ちなみに本サイトは、30%以上が、スマホorタブレットからの訪問でした。
よって、今回はまずスマホありきで考え、PCはそれにあわせる形でレイアウトしています。
※そのためPCはやや間延びしており、むしろPC用に追加でレイアウトを考えようかと思っております。

スマホ対応は具体的に以下2点を行いました。

まずは、サイトを読みやすくするためのmetaとなる”viewport”設定です。
これによりブラウザによって意図せぬ拡大、縮小をふせぐことができます。
以下をheaderに入れればよいです。
viewportはいくつかプロパティ 1がありますので用途に応じて設定くださいませ。



次に、各ブラウザ用にcssを設定します。
PC、スマホ、タブレットの3つ用にcssを作成し、headerで読み込みます。
※読み込むcssは、wordpressのtheme配下となりますので、ftpなので絶対パスを確認しておくとよいかと思います。
各cssファイルには下記のように記述(max-widthの値を変更)しておけば、
ブラウザサイズごとに読み込むcssが切り替わります。





(2)ユーザ導線を見直し、Topからではなく中面からの流入でもサイト回遊しやすいサイト構成にする
どうしても最初はTopページから各コンテンツに遷移していくことを想定してサイトを作成しますが
実際にGoogle Analyticsを見てみると、自然検索経由で特定ページに流入するパターンが圧倒的に多くなっておりました。
そして自然検索で流入するユーザの多くは技術系ワードでの流入で、
当初の目的が果たされると直帰している状態でした。
よって、PV増加のためには、各コンテンツページに流入した場合でも、
できるだけ、他のページにも遷移してくれるような仕組みを作ることが必要かと思いました。

今回の改修では、「関連記事」を設置する、という施策をとりました。
WordPressでは、「Yet Another Related Posts Plugin」はじめいくつかの関連記事表示プラグインがありますので、
お好みのものを試してみるとよいかと思います。
関連記事のアルゴリズムや、表示記事数、表示形式などもある程度調整することが可能です。


(3)流入ワードからコンテンツを再整理
元々は、「データ取得」「データ可視化」「雑感」だったのですが、
流入ワードを見ると多くは「データ取得」に関連するものでした。
そのため、上部のコンテンツナビゲーションもアクセスが多い順にボタンを配置しました。
同時に、これまで「雑感」としてまとめていたカテゴリを「データ解析」と「雑感」に分けました。
こうすることで関連記事の精度を上げるとともに、上部のナビゲーションからも、
関連コンテンツを探しやすいようにしました。

コンテンツナビゲーション部分はheader.phpとしてまとめておき、
各カテゴリトップへのリンクを貼っております。


(4)記事を充実させる脚注、ソースコードハイライトプラグインの導入
自分自身でもソースコードあるいはエラーコードで検索することが多いのですが、
それに類似したワードでの流入もいくつか見られました。
それらの検索により多く対応し、かつ可読性も上げるために、
ソースコードを見やすくする“wp-syntax”を導入しました。
インストール後は、任意のソースコードを下記のように”pre”で挟んで記述すればよいだけとなります。
langは記述する言語でjavascript、python、rubyなど主要言語はおおむね対応しております。



また、本文中に書くと冗長になりがちなものについては脚注にまわすため、
“SimpleFootnotes”を入れました。
こちらも導入は簡単で、本文中の脚注にまわしたい箇所を”ref”で囲むだけとなります。



以上がメインの施策ですが、細かい点は随時バグとり含めて対応中です、。
なお、その他Google Analyticsを見ていて気になったのは下記です。

※海外からの流入もある程度あるが日本語ページのためほぼ直帰。英語対応すべきか。
(うまくいけば技術系ワードの自然検索からの流入、回遊を見込める)
※どのページのどの箇所をみているときでも他のページに回遊できるよう、サイドバー、あるいはスライドメニューの対応検討
※すべての記事にアイキャッチ画像対応(順次、、ですね。。)