こんにちは、ブログチームでlivedoor Blogポータルを担当している小出です。
最近、livedoor BlogのPC版ポータルはフルリニューアルを行い、大きく生まれ変わりました。私はディレクターとして担当したのですが、今回のサイトリニューアルを通して、技術的なトレンドやタスク管理ツールなどは日々進歩していると改めて感じています。今回はlivedoor Blogのリニューアルを通して感じた「ディレクターとしてのサイトリニューアルの心がけ」の要点をご紹介したいと思います。
同じサイトでもアクセスデバイス毎にユーザー層は異なる
リニューアルを行うにあたり、まず私が行ったのがサイトのアクセス解析等の各種調査でした。
その調査を通し、ライブドアブログのポータルには
- PC版はブログ作成者の訪問が多い
- スマホ/モバイル版はブログ閲覧者の訪問が多い
その結果を踏まえPC版リニューアルにあたっては「ブロガーが満足できるサイト設計」を意識してデザインやシステムを構築することとしました。
特にポータルサイトにおいては、同じページでも、デバイスによってアクセスしてくるユーザー層が異なることは多々あります。サイトリニューアルを行う際は、思い込みでいきなりサイト設計に入る前に綿密な調査をおすすめします。重点的に手をいれるべき部分が明確にして、サイト設計を行いましょう。
効果的なコミュニケーション
▼ 「7kai Tasks」
プロジェクトの進捗について、NHNJapanでは普段社内のチケット管理システムで管理していますが、今回は実験的に共有の備忘録システムとして「7kai Tasks」というwebアプリを導入してみました。リリース直前には大量の修正依頼や確認依頼がインスタントメッセンジャー上でやりとりされます。例えば文言修正やフォントサイズ変更のような細かい修正が多くなりますが「7kai Tasks」はそういった細かい案件登録や修正・確認依頼連絡などに相当な効果を発揮してくれました。
▼ MTGは月水金の週3回
開発中は、進捗確認の為のMTGを週3回30分ずつ行いました。作業時間が削られることもあり担当者には当初嫌がられましたが、結果的に、タスクの細かい問題点などを共有する良い場となりました。リニューアル後の反省会でも各担当者から「あのMTGは本当に良かった」と言われた事もあり、顔を合わせたコミュニケーションの効果を再認識しました。ベストデザインを生み出すために
デザインを一新するにあたって、２人のデザイナーに、通常のPCサイトの3倍近い量のサンプルを出してもらいました。リテイクも無数にあり、デザインが最終決定するまで1ヶ月を要しています。結果的に採用されなかったサンプルもいくつか公開してみます。
[サンプルその１]
[サンプルその２]
[サンプルその３]
デザインやUI構成のポイントとして、NAVERやKstyle、pickなど自社の他サイトはもちろんのこと、pinterest や apple、flipboardなど海外のサイト、国内だと無印良品のサイトなどを研究し一部参考にしました。
試行錯誤を経て、デザインは以下のように生まれ変わりました。
[リニューアル前]
[リニューアル直後]
なお、今回のリニューアルからライブドアブログポータルではグリッドデザインを使用しています。如何に、「ブロガーに情報を伝える」かということを第一に考え、整った安定感のあるレイアウトにすることを心がけました。
こういったアプローチはデザイナーと相談しながら進めていきましたが、ディレクターも前提知識として把握しておいた方が良いでしょう。打ち合わせ段階でよりスムースにプロジェクトを進捗させることができます。
(参考サイト)
960 Grid System
マークアップにおける、軽量化、作業効率化の為の工夫
ライブドアブログポータルでは、今回のリニューアルを機にIE6は対応しないことにしました。またIE7以降でもCSS3を使えるようにCSS3 PIEを採用しましたが、多用すると重すぎたため、デザイナと相談して必要最低限の範囲で使用。この施策により、リニューアル前と比較するとかなり軽量化されています。
また、ポータルPC版スマホ版ともにSassを導入することで運用の効率化を図っています。今回担当したマークアッパーは先日「Sass入門 〜より効率的なコーディング」という書籍を上梓している、Sassに精通した担当であった為、環境の導入もスムースにできました。この導入で、マークアップの工数をかなり削減することに成功しています。
リリース直後の修正も工数見積に入れておくことが大切
約2ヶ月間の準備期間を経て2012年4月16日にオープンした新生livedoor Blogポータルでしたが、実は約1ヶ月後に大幅改修が入りました。アクセス解析によるとリリース後１週間でPV、訪問者ともに約16%も減少してしまったのです。早急に対応が迫られました。
制作に1ヶ月以上を費やしたデザインでしたが、結果的には2012年5月28日で改修を行い、以下のようなデザインになりました。
[改修後の現デザイン]
大きな変更点は、当初はトップページに存在しなかった「ブログ速報」をトップページのファーストビューに配置することで、よりリアルタイムに人気ブログの更新情報を閲覧できる仕組みを導入したことです。
また、「ブログニュース」「ブログ速報」「編集部おすすめ」の３つのコンテンツをファーストビューに配置しことで直帰率が2%ほど改善。また第２階層、第３階層の回遊率を高めるチューニングを徹底的に実施した結果、PV・訪問数ともに回復。現在ではリニューアル前よりPV14%増、訪問数3.6%増で推移しています。
「数字が下がったから修正する」というのは日常茶飯事ですが、モバイルやスマホサイトと比較すると、PCサイトのデザイン修正は時間がかかります。ここまで数値が下がることは想定していなかったため、リソースの調整にはかなり苦労しました。事前に「修正ポイント」を想定しておき、予めリソースを少し多めに確保しておくことも念頭に置いた方が良いでしょう。
まとめ
PCスマホそれぞれで、ディレクターが押さえておくべきデザイン・技術トレンドは多くあります。もちろん自分から調べることも大事ですが、私は基本的に「知っている人に細かくヒアリングする」ことがプロジェクトを円滑に進める上では早く、確実だと考えています。今回の案件は特に私にとって馴染みのないトレンドが多かったのですが、プロジェクトメンバーに教えてもらいながら理解していくことで、結果的にプロジェクトを上手くディレクションすることができました。
NHN Japanでは、初めて対応する領域でも臆すること無くプロジェクトを進捗させられるディレクターを募集しています。
コメント