おいちゃんと呼ばれています

ウェブ技術や日々考えたことなどを綴っていきます

エロサイトをマテリアルデザインで作り直した

デザイン Web サービス Rails

このあいだ、プライベートで運営しているエロサイトをマテリアルデザインで作り直したのですが、エロドメイン配下で記事を書いてもまったく拡散されなくて、身近にいる同僚にすら伝わっていなかったので改めてここに書きます。GW だし許してもらえるっしょ。

1. リニューアルで解決したかった問題

リニューアルにより、要はもっと流行らせたかったのだが、もう少し具体的にいうと下記の問題を解決したいと考えていた。

(1) スマホ・タブレットからあまり使われていない

周知のとおり、スマホ・タブレットの伸び率はすごくて、サイトでも PC からの利用数とスマホ・タブレットから利用数がほぼ同じくらいになったとか（ソースなし）。にもかかわらず、当該エロサイトではスマホ・タブレットからの利用数は伸び悩んでいて、下記のような状況だった。

スマホ・タブレットから使われないと先細りするなという危機感を抱きつつも、問題を細切れにしたかったので、今回のリニューアルで「スマホ・タブレットから訪問した人が使ってくれる率」を上げたいと考えていた。

(2) なんかデザイン（見た目）がイケてない

エロサイトのデザインがイケている必要があるのか？ということをたまに言われたりするんだけど、まあマストではないかもしれないが、イケてないよりイケてるほうが良いに決まってる！と考えている。あと単純に自分のプロダクトがイケてないのはイヤだ。

2. 指標

「スマホ・タブレットから訪問した人が使ってくれる率」を測るために下記を指標とした。いずれもスマホ及びタブレットの数値を Google アナリティクスで見る。

  • 直帰率
  • ページ / セッション
  • 平均セッション時間

3. やったこと

今回のリニューアルでやったことを列挙する。期間とコミット数は

  • 2015年1月11日 〜 2015年2月22日（33日間）
  • 670 コミット

という感じで、振り返ってみると結構なリソースを投入したんだなとしみじみ。

(1) マテリアルデザイン

Google が提唱するマテリアルデザインが話題になっていて、技術者としてどんなものか触れておきたい気持ちはもともとあったのでこれを機会に取り入れてみた。

ただこのマテリアルデザインの ガイドライン をみると、

単なる見た目の問題ではなくもっとユーザー体験に踏み込んだ内容だったのだけれど、今回そこまで踏み込めずに表面の見た目の部分だけ取り入れた感じは否めない（最初の一歩としてはそれで良い気がするが）

(2) Materialize

上記マテリアルデザインための CSS フレームワークで Materialize というものがあって、それまで使っていた Bootstrap から乗り換えた。気に入ってるし、いまとても開発が盛んで日に日に機能が追加されていくのを見るのも楽しい。

(3) スマホページからつくった

スマホファーストというコトバは耳にタコできるくらい聞いたけど、今回スマホページからつくった。

  • Chrome のデベロッパーツールでスマホ表示にして、それでデザインを調整し終わったら、デスクトップ表示は見ずにプルリクを一旦マージした
  • スマホ表示で全ページのデザインが一周終わったら、次はタブレット表示で一周。デスクトップ表示のデザインは最後の最後に行った
  • よく言われているが「スマホからつくると必要最小限の要素がわかる」というのを実感した

(4) 関連動画の表示・ページ構成

これまでは動画一覧ページで動画の再生も可能だったが、動画個別ページを設けて、動画の再生はそこで行うようにした。

  • 理由:「関連動画」を表示したかったから
  • 動画一覧から動画の個別ページへ行くことは、いわば動画を選ぶ行為なので、そこにユーザーの嗜好が反映されていて、選ばれた動画に近い動画を並べて表示することで回遊率が上がると考えた

(5) 動画配信元の絞り込み

動画配信元（XVIDEOS, Redtube, ...）で絞り込みができるようにした

  • スマホだと見られない動画配信元があるため（例: porncast の動画はスマホで開こうとすると広告ページへ飛ばされる）
  • 時間帯によっては見づらい動画配信元があるため（ストリーミングが途切れ途切れになる）

(6) 検索精度の改善

下記に書いたようなデバッグ＆チューニングをしまくって検索精度を上げた。

またあわせてライブラリを変更した（Searchkick -> elasticsearh-rails）

  • もともと elasticsearch-rails を使っていたが、お手軽便利ライブラリの Searchkick に乗り換えていた
  • しかし細かいことやろうとするとかえって面倒だったので elasticsearch-rails に出戻った

(7) 広告・ソーシャルボタンを削除

少しでも高い効果を上げたかったのでユーザーにとって不要だと思われるものはバッサリ削除した。一時的な収入の低下は我慢。

  • 広告を削除した
  • ソーシャルボタンを削除した。リリースしたときは 500 はてブくらい集まったけど、それ以降は悲しいくらいに使われてなかったため

4. 結果

リニューアル直前の31日間とリニューアル後の同日数を比較した。

(1) 直帰率

(2) ページ / セッション

(3) 平均セッション時間

(4) 参考

  • なお、新規セッション率はそれほど変化ないので、ユーザー層が 1か月でガラリと変わったとかそのようなことはなさそう

5. まとめ

数字が悪化したのでじゃあリニューアル前の状態に戻すかというと、さすがにそれは悔しくて戻す気にはならないんだなー（気持ちの問題）。これが仕事だったらどうなるんだろうか？戻すことになるのかな？戻さないのかな？とかぼんやり考えてみたり。

あとは、デスクトップの数字は好転したのが唯一の救いかな。狙いとは全然違ったけども。

リニューアルで結構使いやすくなったと思ったんだけどなー。これからどうすっかなー。というのがいまの気持ち（全然まとめになっていない）

よろしければ使っていただいて、感想などを聞かせてもらえたりすると感激です！

関連