特別企画
無料診断でImpress Watchのスマホサイトをプチリニューアルしてみた（後編）
“漏れている水”を止めるためにどこをどう直したか
（2014/3/5 06:00）
- 【お知らせ】記事中でご紹介したドコモ・ドットコムの無料診断サービスは、2014年3月20日に提供を終了いたしました。（編集部）
「うちのサイトはスマホ用サイトとしてどうなのか!?」そんな疑問を発端に、ドコモ・ドットコムの無料診断サービスを受けたら、衝撃の全項目平均点以下だったImpress Watch Headlineのトップページ。レクチャー内容をもとに、プチリニューアルしてみよう！ というのが前編。後編となる本編では、その具体的な変更ポイントと、リニューアル後の反応についてお届けする。
なお、指摘された問題点は前編でご紹介している。未読の方は、前編から目を通していただければ、問題点とその理由をより把握しやすいだろう。
◇無料診断でImpress Watchのスマホサイトをプチリニューアルしてみた（前編）
http://internet.watch.impress.co.jp/docs/special/20140224_635932.html
無料診断＆トップページだけなのに、学んだことは多かった
レクチャーは非常に丁寧で勉強になった。具体的な説明を受けたのは25箇所中の8箇所だったが、「言われて初めて気づいた」というのが一同共通の感想である。これまでは真上からしか見ていなかったため、水が漏れていることにすら気づいていなかった状態といっていいだろう。
バケツに穴があることが“明確に”なり、一部だが穴の場所もわかった。となれば速やかに塞がねばならない。同席したImpress Watchの担当者2名が具体的な修正箇所の洗い出しと、さっそく修正に取りかかった。
いざリニューアル！ こんな部分を変えました
デザイン変更を伴う修正は、始めるとあれもこれもと気になる部分が次々とでてくるもの。しかし、今回は全面リニューアルではなく、指摘された問題をつぶすために行う。そのため、既存のデザインを生かしながら、「スペースの整理」「見やすさの向上」「操作性の向上」「流れを止めない」の4点に重点を置くことに決定。
修正箇所は下記の7項目となった。
（1）ファーストビューレイアウトの調整、インデックスタイトルの調整
（2）「新着記事」のレイアウト変更
（3）「Extra」のレイアウト変更
（4）「いま話題の記事」のレイアウト変更
（5）「News Headline」のレイアウト変更
（6）リンクのブロック対応
（7）ページ下部にナビゲーション機能追加
それでは具体的に見てみよう。
（1）見せるべきものを見せ、無駄な空間を排除した「ファーストビュー」
まず、（1）のファーストビューレイアウトの調整について。「重要な情報やリンクを隠してしまっている」「ユーザーが真っ先に目にするスペースが活かし切れておらず、肝心の媒体も訴求できていない」という指摘を受けた。
広告の下でタイアップリンクだけだった部分に、媒体のアイコンが追加された。筆者が確認したGalaxy Note 2では、左からPC Watchに始まり、右はCar Watchまで表示されているが、画面幅が拡大すれば、さらに表示される仕組みだ。また、画面右上にあった「メニュー」は「媒体一覧」となり、媒体アイコンの右隣に移動。それにともなって最上段の検索ボックスが広くなった。
従来のタイアップサイトのリンクは2段で、しかも無駄な余白を残していたが、1段に収まるよう変更された。画面幅に合わせてアイコンの横幅が画面にフィットするよう、JavaScriptにより自動調整される仕組みも加わっている。これは「画面が非常に狭い端末はもう存在しない」という前提で実装したそうだ。
「トップ記事」は、コーナーの見出しがかなりのスペースを占めており、活用できない余白を生んでいた。目立たせたいという気持ちからだが、コーナーの見出しが目立っても仕方がない。そこで無駄な余白を取り除き、見出しの横幅を画面いっぱいに広げることで、境界線としての存在感を出せるように意識した。「Extra」や「いま話題の記事」といった見出しも、「トップ記事」に合わせて横幅を広げる変更を施している。
「閉じるボタンがない」「各媒体の特徴や説明が足りない」と指摘された「媒体一覧」では、News hHeadlineで使われている媒体別のタイトルバナーが集められた。アイコンだけだったときに比べ、媒体の概要がつかみやすくなったのではないだろうか。また閉じるボタン「X」もしっかり追加されている。
（2）「新着記事」は区切り線で記事をスッキリ見やすく
「新着記事」のコーナーに代表される記事リンクは、まとまった長文に見えて量の多さに圧倒されてしまうことが懸念されていた。またコーナーが「新着記事」であることが見通しにくいとも指摘されていた。
そこで、記事を分離するための罫線を追加し、記事の頭に赤い「■」を入れることで記事の見出しであることを強調。また「新着記事」というタイトルも左側に移動し、視線が下がってきたとき、すぐ分かるように配慮した。全体がスッキリ見え、タイトルも目に入りやすくなったように思う。
（3）テキストの回り込みを止め、アイコンを目立たせた「Extra」
よくある表現がマイナスに作用していたと思われるのが、Impress Watchの増刊コーナー「Extra」。これまでアイキャッチ用の画像にテキストを回り込ませていた。パソコンで見るWebページなどでは当たり前に思える見せ方だ。しかし、タイトルの長さによっては、文末に中途半端なスペースが生じる。これが数件重なると、コーナーの左半分だけが混雑し、肝心のアイキャッチが文字に埋もれやすいというデメリットに気づいた。
そこでテキストの回り込みを止め、アイコンとテキストを分離。ごちゃごちゃした雰囲気が一掃されてアイキャッチが引き立ち、訴求力が出てきたのではないかと思う。現在は「iPhone Lounge」のみだが、複数集まると、その効果はより強く表れるのではないだろうか。
（4）レイアウト変更でコンパクトにまとめられた「いま話題の記事」
画像にテキストを回り込ませていた「Extra」に対して、回り込みを一切させず、かなりクラシックな雰囲気を漂わせていたのが「いま話題の記事」である。サムネイル画像とタイトルテキストが縦に積み上がっているためかなりのスペースを占めており、余白も多い。
こちらも他のコーナーに合わせたレイアウトに修正した。サムネイルのサイズが統一されていないためまだ不自然さは残るものの、かなり省スペース化されて情報表示量が増えた。
ちなみに、なぜここだけWeb1.0的なテイストなのか筆者も疑問だったのだが、前回のリニューアルの際、時間がなかったとのこと。ネットの反響を吹き出しで表示するなど他とは違った装飾もあり、その見せ方に工夫は必要だっただろう。しかし、納期が優先された結果切り捨てられてしまったようだ。ここは次の修正で……と考えているうちに時間が経過してしまうというのは、どこにでもありそうなパターンではないだろうか。
（5）見た目、操作、誘導、すべての要素を意識した「News Headline」
改善テーマが多かったのが「News Headline」である。
サラッとシンプルな記事一覧で、特に問題はないと思っていた。しかし、レクチャーを受けてから改めて見ると問題だらけ。記事タイトルは1つの長文に見えるし、隙間だらけでもある。しかもテキストリンクのみのため、タイトルによっては隙間をタップしてしまい誤操作も誘発。また、媒体へのアクセスが可能かどうかも判別しにくい。もし気づかれない場合、ここでは記事リンクしか媒体に誘導できないということになる。出ている記事に興味がなければ通り過ぎてしまうわけだ。
そこで、記事は既出の箇所同様に区切り線を入れた。修正前後の画面を比較していただけば、個々の記事タイトルが見やすくなったのがお分かりいただけると思う。さらに媒体ごとに「全ての記事を読む」というボタンを追加した。このボタンが入ったことで、次の媒体との間に設けていた余白の有効活用にもなっている。
（6）リンクはすべてブロック対応
無料診断結果の総評で「操作においては、混乱したり、操作ミスが発生しうる部分がありました」と指摘されていた。その中には既出の「媒体一覧」の閉じるボタンも含まれるが、最大の問題はパソコン用のままのリンク方法といえるだろう。
どこをどう間違うのか。ページの中で、誤操作を誘発しやすい典型例が「トップ記事」だ。記事タイトルと画像にはリンクが張られているが、概要部分はただのテキストなのでタップしても何も起こらない。しかも、大きな余白もある。1度テキストや余白をタップして反応がなくても、他はどうかと再度触ってくれるだろうか？ Impress Watchの読者ならわかって当然だろうか？ そのまま通り過ぎてしまう可能性はないだろうか。筆者自身も一ライターとして、アクセスしてもらう機会がわずかでも上がるほうがありがたい。
そこでページ全体の修正点として、リンクのブロック対応を行った。タップした際ブロック全体に色もつけ、反応していることがわかるようにした。大きなボタンのようになったことで、どこでもタップできるようになり、非常に“気楽になった”と感じる。リンクのブロック化はユーザーの慣れやリテラシーに関係なく、誰にとっても親切なようだ。
（7）ページ下部に新たなナビゲーション機能を追加
「ページの上に戻れない」といった問題の改善のために新たに加わったのが、画面下の2つのナビゲーションボタンである。「TOP」はページTOPに戻り、「OPEN」は媒体一覧が開く。スクロールに追従するので、画面の途中でも特定の媒体にすぐ移動できる。
ただ、「OPEN」を見た瞬間、何が出てくるのだろうと疑問を抱いたのは正直なところ。半透明にしてあるが、文字の上に重なっていることに違和感を感じないとは言い難い。ボタンそのものを消したいという要望も出てきそうという新たな問題も浮上してきた。流れを止めない施策ではあるが、考える余地は大いにありそうである。
結果はいかに!? しっかり取り組むなら本格的なコンサルティングがおすすめ
以上がプチリニューアルの修正点である。そのほか、リンク数としては2つ程度だが、リンク先にパソコン用のページしかないコンテンツや、内容がスマホメインの訪問者には縁が薄そうなコンテンツは削除された。
リニューアル後は、デザインは変わっていないものの、スペースの使い方を意識したことで見やすくなり、統一感も生まれたような気がする。
作業担当氏によれば、JavaScriptやスタイルシートの修正がメインで、実質的な作業から確認まで、要した時間はおよそ1週間程度。もっとも苦労した点といえば、スタイルシート内の問題の洗い出しだったそうである。問題箇所と対応すべき理由を明確に指摘されたことで、作業自体は効率的だったという。特に「モダンブラウザだけ意識すればよいのは嬉しい」とのこと。
プチリニューアルは、テストサーバーでチェックした後、2月27日に公開サーバーに適用された。あまり適用から日がないため、長期のデータは取れていないが、効果の実測を行った数字が出たのでご報告しよう。
計測にはGoogle Analyticsを使い、リニューアル前後のHeadlineおよび各媒体のアクセスを解析した。その結果、リニューアルによって訪問別ページビューは1.6から2.0に向上。直帰率は67.02％から64.26％となり、2.76％の改善が見られた。
直帰率では、Cookieの有無でリピーターと新規に分けた数字も出してみたが、リピーターでは2.69％、新規では3.49％の改善が見られた（直帰率が減った）。Impress Watchのスマホサイトに慣れたユーザーでも、以前のUIでは使いにくさから直帰したケースがあったと推測される。
また、各媒体のリファラー付きアクセスを解析したところ、リニューアル後はHeadlineから各媒体ページへの流入が106％に増加。リファラー付きアクセス全体も増加しているものの、リニューアル前の102％だったことから、Healineからの流入の伸びの方が大きいことがわかる。
| リニューアル前（％） | リニューアル後（％） | 改善（＝直帰率の減少割合）（％） | |
| 直帰率（全体） | 67.02 | 64.26 | 2.76 |
| リピーター直帰率 | 66.29 | 63.60 | 2.69 |
| 新規直帰率 | 72.79 | 69.30 | 3.49 |
| リニューアル後のリファラー付き訪問者数の伸び（％） | |
| 全体 | 102 |
| Healineから | 106 |
今回はすぐに実装可能な範囲でのプチリニューアルとなったが、それでもやはりUIの悪さから、とりこぼしていたアクセスがあったことを実感させられる数字だ。使いにくいことから離れていってしまうユーザーは数字には出てこないが確実にいるであろうことを考えると、改善した直帰率の数％という数字以上の効果があったのではないかと思われる。
周辺のスタッフへの聞き込みでも、使いやすくなったという声が多かった。
リニューアル後のページを改めてチェックした営業K氏は、「第三者の視点があるのとないのでは全然違う。弊社のスマホサイトは、パソコンの読者がスマホでも見られたらきっと便利でいいよね、という発想から始まっている。まだまだパソコンが優勢だが、初めて訪れるユーザーも意識して、気持ちよく見てもらえる配慮は大事だとわかった」としみじみ語っていた。
「ドコモ・ドットコム」の無料診断サービスで診てもらったのは、わずか1ページ、しかもデザインやインターフェイス部分だけ。他の診断項目も含め、サイト全体でならどんな結果になるのか興味深い。
今回はプチリニューアルになるが、デザイン全体を刷新するような場合は、改めてコンテンツの並びや見せ方などをすべて見直すことになる。そういった時に、しっかりコンサルティングを受けていれば、このように推測で手を加えることはなく、最適解が見つけやすいだろう。
外部にモバイルサイト開発を依頼するケースでは、どういったサイトにしたいかというサイト設計や開発要件があいまいで、結局開発が頓挫することもよくあるという。開発が仕切り直しになれば、開発コストも倍かさむということになる。
また、技術部門を持たない企業の場合は、打ち合わせをしても知識がないために、結局Web制作会社が作りやすいサイトにされてしまうこともあると聞く。
今回無料診断を受けて、すべてが平均点以下という結果に凹みもしたが、第三者診断の重要性と、モバイル専門に培われた経験をもとにした知見の有用性を改めて実感した――というのが担当者一同の感想だった。
今回とは違い、担当者は改変の必要性を痛感していても、コストがかかるため社内でなかなかOKが出ないような場合もあるだろう。第三者の診断結果を資料として添付することで、説得力が上がり、稟議が通るというケースもあるという。そういう場合、今回利用した無料診断は心強い味方になりそうだ。
御社のサイトは今どのような状況だろうか。もしかしたら、バケツの底のみならず側面からも水が漏れ、シャワーさながらの状態ではないだろうか。第三者視点を取り入れて、これからの“スマホファースト”時代に備えてはいかがだろうか。
すずまり
プログラマからISPの営業企画、ウェブデザイナーを経て、現在はIT系から家電関連まで、 全身を駆使してレポートする雑食性のフリーライターに。主な著書に「Facebook仕事便利帳」「iPhone 4 仕事便利帳」（ソフトバンククリエイティブ）など。 睡眠改善インストラクター、睡眠環境診断士（初級）。