今月のデザイン変更点

昨年8月に「記事ページのアクセス通信簿」と題して記事ページのデザインの変更の意図とその効果について解説しました。その後、いろいろ機能を追加して模索をしているのですが今月が大きな機能が幾つか追加されたのでその紹介も含め、効果と課題について紹介していきます。

次に繋げるための工夫

まとめ系記事を除いて、記事は非常に高い割合で最後まで読まれている場合が多く、滞在時間も長いです。コンテンツの質も月ごとで若干異なるのでなんともいえないですが、今月は直帰率も低かったので読者が滞在してくれた月といえるかもしれません。

しかし、このサイトは検索やソーシャルメディアなどを通じてサイトにアクセスする方が多いこともあり、一期一会の関係で終わってしまう場合が多々あります。平均ページビューを増やすにはどうにかしたらいいのか、どのサイトも頭を悩ませているかと思います。たくさん選択肢を与えればクリックするわけでもありませんし、メインコンテンツ (記事) の邪魔をしていたら逆効果です。

そこで今回追加した機能が「ランダム」と「ガイド」です。ランダムはその名のとおり、クリックするとランダムで別の記事を読むことが出来ます。特に目的はないけど、何かおもしろいものが見つかるかもしれないという楽しみを与えてくれると考えました。Random Post Linkというプラグインを使えば簡単に導入できます。

「ガイド」はこのサイトに訪れた方に読んでもらいたい旬な記事を集めています。以前からあった人気記事リストはこちらに移動し、新たに一押し記事のエリアも追加。こちらは WordPress の the_post_thumbnail を活用。CMS 側でどの記事を特集にしておきたいかもすぐに切り替えることが出来ます。以前から記事の概要をきちんと書くように心がけていましたが、こういうところで役にたっています。

重要な機能な見えるべき

このサイトには記事を補助するための機能が幾つかあるわけですが、すっきり見せるためにアイコンを並べて必要なときにクリックして表示させる UI を採用していました。しかし、アイコンは小さい上何を意味しているのかも分かり難いこともあり利用数は少ないものでした。特に重要な機能は隠さない方が良いということが今回の模索で分かりましたね。

他にも見えなくなっていた機能を見えるようにしたわけですが、ボタンは画像にせず CSS ベースでラベルもテキストにしました。今後高解像度のモニターを実装した機器が続々登場しますし、タッチインターフェイスでどこまで拡大されるか分かりません。どういった状態でもハッキリ・クッキリ見せたいと考えるとテキストにするのが無難だと考えました。

まず9月に導入したのが、読み終わったタイミングで共有ボタンを表示させる UI。９月導入直後にすくえあさんに紹介してもらって以来、各所で紹介をいただいております。以前から共有ボタンを並べるだけというのはエレガントではないなと思っていましたし、読者の邪魔のような気がしていました。ヘビーユーザーやブックマーカーであればだいたいプラグインか Bookmarklet 使ってそうですし、シックリ来なかったので見えないようにしたというのが元々の経緯でした。文脈に合わせて UI を自動的に表示させるといったことが JavaScript で手軽に出来るから便利な世の中です。実際これはかなりの効果が出ています。

このようにいろいろ機能を追加しり見た目を若干調整してみましたが、結果は今のところ何でも言えない状態です。

平均ページビュー数

「ガイド」や「ランダム」を設置し他の記事を見る機会を増やしましたが、こちらも今のところ大きな違いが見えませんでした。とはいうものの「ガイド」は多少クリックされているみたいですし、ガイドほどではありませんがランダムもクリックされている模様。見られているけど次に繋がっていないのかもしれません

特集にした記事のアクセス

ここ１ヶ月の間「ガイド」にはサムネイル画像付きで「Year in Review 2010」を掲載。それなりに読まれた記事でも3週間くらい経てば一桁になる場合があるのに対し、この記事は常に二桁台以上を保っていました

読みモードの利用数

レイアウトも何もない読書に最適な「 読みモード」。作ったのはいいですが、機能を隠していたこともあり知る人ぞ知る機能でした。利用率はわずか 1% とわずか低い割合。今回の変更で 2% に上がりました。大きな違いといえるかどうかは微妙ですが、知るきっかけが増えたかと思います

サイト内検索

これも見えるようにしたのですが、他の月とほとんど変わらない結果になりました。Googleから検索したほうが早いからというのもあるかもしれませんね

レビューページの見た目変更

TVドラマシリーズ「Rubicon」のレビューで気付いた方がいるかもしれませんが、全レビューページのデザインが変わりました。記事ページは大幅にデザインが変更出来るような設計にしてあるのに対し、レビューのほうは hReview を基に構成 (ただし白・黒背景の２タイプを用意しています)。デザインを変更する前は hReview をわざわざコードとして記述するという面倒な方法をとっていたのに対し、今回はテンプレート化してあるので以前より手軽にレビューが書けるようになりました。

現状、検索結果にこのように表示されないのが残念ですが、Google Rich Snippets Testing Tool を使うと正しく表示されています。

記事の下にはアマゾンから製品製品を取得。こちらは自動生成型にしてしまうと検討違いが製品がリストされてしまう場合があるので、キーワードを記入して自分が出しておきたい関連製品が表示されやすいように調整してあります。

hReview のテンプレート化を目指した結果、カスタムフィールドが多いタイプになったのは多少懸念ではありますが、記事ではないレビューのあり方としてひとつ作れたと思います。通常の記事は書くのに相当の時間を費やすので、結果的に更新頻度が減ってしまいます。記事よりかは気軽に書けるレビューを追加することによって、更新頻度を落とすことなく読者にコンテンツを提供できるようになると思います（実はこのリデザインを待っていたせいでレビュー執筆に踏み切れなかったという経緯もアリ）。

おまけ： Year in Review 2010 の仕掛け

「Year in Review 2010」は Safari (iPad含）で観覧すると記事のサムネイルがカードのように表示されます。クリックするとカードのようにフリップ。CSS3 の 3D Transforms を活用しました。他のブラウザではカード表示ではなく、サムネイルと記事概要が見れるシンプルな見た目になっていますが、アクセス出来る情報はまったく同じです。

多くのブラウザで見た目を合わせることを考えがちですが、ブラウザの特徴を活かした見た目を設計し特定のブラウザを使う体験を高めることが出来ると思います。それぞれのブラウザには個性があるわけですから、個性を失った同一の見た目ではなく、それぞれに最適化することが今後の Web デザインのひとつの価値になるかもしれません。まぁ今回の見せ方の違いは少々極端ですけどね・・・。