なつレゴは、懐かしいレゴ ブロックの過去の製品レビューや作品の紹介を中心に行っているウェブサイトです。地方のおもちゃ屋さんで売れ残っている昔のレゴ ブロックを見ると、懐かしい気持ちになるという垣下氏自身が、そういった懐かしい気持ちを共感してもらおうと「なつレゴ」を立ち上げました。
2013 年 8 月、
垣下氏は高まるマルチスクリーン需要を受けて、「なつレゴ」をレスポンシブ ウェブ デザイン（以下、RWD）に再構築しました。垣下氏にマルチ スクリーンに対応した理由、方法、RWD に構築する際のヒントやその効果についてお話を伺いました。
いずれ 50 % を超えるのも時間の問題だと思い、
今すぐにでもマルチスクリーン対応しなければという状況でした。
2008 年にサイトを立ち上げてから 5 年間はずっと PC サイトのみで運営していました。しかし
モバイル ユーザーの割合は年々増加していき、「なつレゴ」をマルチ スクリーン対応した直前には、スマートフォンやタブレットなど
モバイル デバイスからのトラフィックは 40% を超えていました。
AdSense コミュニティでの企画「AdSense の夏休み」
にちょうどいいタイミングで出会いました。
そんな中、AdSense コミュニティ内での企画
「AdSense の夏休み」がちょうど良いタイミングで実施されました。「AdSense の夏休み」は、自分自身でテーマを見つけ一ヶ月の期間内で目標達成できるようなミッションを実行しましょう、という企画です。複数のサイトを運営していますが、まずは第 1 弾として
最もモバイルからのアクセスが多かったなつレゴをマルチ スクリーンに対応するミッションを設定しました。
マルチ スクリーンへの対応は、まとまった時間がないととりかかるのが難しいと感じており、いつかやろうと思いながらもなかなか実行に移せませんでした。しかし「AdSense の夏休み」で「やります」と手を挙げた以上は絶対に達成しなければいけなかったので、いい意味で頑張れたと思います。ちょうどいいタイミングで「AdSense の夏休み」に出会ったと思います。
 |
「なつレゴ」運営
垣下氏 |
作業効率がよく楽だと思ったので、
迷うことなくマルチ スクリーン対応するなら
レスポンシブ ウェブ デザインと決めていました。
マルチ スクリーン対応をするなら、初めから RWD にしようと決めていました。PC 用、スマートフォン用、タブレット用等、複数のウェブサイトを運用するにはシステム構築の手間もかかります。また、スマートフォンやタブレットといっても、解像度も様々です。そのような中、どの画面に対応するのか？等、様々なデバイスにいちいち対応していかなければいけないとう手間を考えると、
作業効率がよく、楽だと思ったので、RWD と決めていました。迷いもなかったです。
極力シンプルなデザインで行うことが必要だと思います。
レイアウトをデザインをする際には、様々な画面で表示される際にレイアウトが変わってしまうということを前提として考える必要があります。ゼロから考えたレイアウトは、
PC、スマートフォンやタブレット、それぞれのデバイスで表示される場合を計算しながら、自分が持っているデバイスでその都度確認しながら行いました。RWD では極力シンプルなデザインで行うことが必要だと思います。
自分自身で実際に確認しながら、
試行錯誤しながらデザインをしました。
以前までは、ページトップに製品のレビューがありその下に画像を置いていました。しかし、スマートフォンなど小さな画面サイズで見てみると、文字ばかりでスクロールしないと画像が見れず、ユーザーがどのようなサイトかわからないという懸念がありました。そこで、思い切ってレビューと画像の配置を逆にし、ファーストビューで画像を先に表示させました。
自分なりに考えた RWD の配置と、その配置を実際に自分自身でデバイスで確認してみるとではコンテンツのわかりやすさや、使いやすさという点から違いがあり、何度も試行錯誤したことが苦労した点かもしれません。
RWD への再構築は 1 週間程かかりました。
これまで使用していたサーバーの容量が一杯な状況だったため、早く移行する必要がありました。サーバーの移行には 2 週間かかりましたが、RWD への再構築も同時進行で 1 週間程かけて行いました。ちょうどお盆休みの時期で、集中して作業ができました。レイアウトはゼロからデザインしましたが、スタイルシートはレビューや体験談を見ながら、コードがシンプルな既存のフレーム ワークのものを使いました。CSS のコーディングにかける時間を節約して、
その分ページのレイアウトやユーザー エクスペリエンスを改善することに集中することができました。
また、コンテンツ（データ）とテンプレートを分けて管理しているので、基本的なテンプレートを構築すれば、あとはデータを流しこむだけでページが自動生成されます。全体的にページ数が多く見えますが、実際は 5, 6 パターンのテンプレートで出来ています。
ユーザーの動向や AdSense の収益にも大きな成果が。
やったかいがあったなと思っています。
RWD に再構築した前後の 8 月と 9 月で比較すると、
直帰率、離脱率、PV、収益などで大きな成果があったと思います。複数あった広告配信サービスも全て AdSense のレスポンシブ 広告ユニットと通常の AdSense 広告のみに変更しました。AdSense の広告が最も収益性が高かったので、広告を AdSense のみにしたことも収益の改善につながりました。
ユーザー エクスペリエンスに関しては RWD にし広告を AdSense のみにしてから、
離脱率が -19% に改善され、
1 訪問あたりの閲覧ページ数も +22% になりました。ユーザーが以前よりもサイトを居心地がよいと感じてくれているようです。AdSense 広告ユニットの収益性は
eCPM が 10 倍、
CTR も 62% 改善され、
収益も 10 倍になりました。
AdSense の RWD に対応した新しい広告ユニットの実装は
決して難しくなく、いつも通り貼付けるだけです。
AdSense 広告に関しては、難しくなく、いつも通りに広告枠を用意して貼付けるだけでした。しかし、画面の縦横が切り替わったときに広告のサイズは自動では変わらないというところを、今後改善してほしいと思います。
今後のマルチスクリーン対応も、
全て同じように RWD にしていきたいと思っています。
運営している他のサイトに関しては、モバイルからのトラフィックによって優先順位をつけながら、随時マルチ スクリーン対応をしていかなければいけないと思っております。今回初めてやってみて要領をつかめたという実感があるので、今後のマルチスクリーン対応も全て同じように RWD 対応にしていきたいと思っています。
※LEGO（レゴ）はレゴ グループの登録商標です。
【関連記事】
「マルチスクリーンへの対応」ブログ シリーズPosted by Eri Shikamura - Inside AdSense Team
2013 年 11 月 18 日
Zagat breaks through the clutter with accurate information and the trusted opinions of thousands of avid consumers so you can quickly and easily make informed decisions. Through our digital products, you can discover notable places, perfectly suited for any occasion.
.jpg)
