祝12周年! ネタフルのリニューアル担当として書いておくアレやコレ
2015年7月1日、あの「ネタフル」が12周年を迎えました。
12年ですよ、12年。13年目に突入ですよ。すげーなー。
さて、そんなネタフルは周年記念を迎えるとともに、新たな装いも公開されました。そのリニューアル担当として、いろいろとまとめておきます。
3年ぶりの新デザイン
ネタフルのデザインに関わるようになったのは6年前。
フィーチャーフォン向けサイト「ネタフルズ」のデザインからでした。コグレさん(kogure)とはその前から知り合いでしたが、当時は自分ごときがネタフルに手を入れることになるとは、よもや思いもしなかったわけです。
その後、2012年にコグレさんから「リニューアルしたいんだよねー」という話を受け、PC向けデザインにも関わることになりました。それが前回のリニューアルです。
あれから3年。デザイン的にも今見ると古くなり、そして僕自身の腕が足りていなかったことを痛感します。。最近までのネタフルデザインは、コグレさんがひとりでいじるから原型なくなった感もありますがね･･･。
実を言えば、リニューアルの話はだいぶ前から打診を受けてました。昨年くらいかな。ちょうど僕自身、拙著の出版も控えている頃で、他にもいろいろ動いていたこともあり、全然手を付けられなかったんですよね。
で、それから頭のなかでいろいろ新デザインを思い描くことを繰り返していたのですが、なかなかこうしっくりとくるものがなく、はや半年ほど経過。
なんとしてでも12周年には間に合わせたいということもあり、やっと1週間ほど前に本格的にマークアップしはじめました。
シングルカラムでレスポンシブに
今回のリニューアルでは、“とにかく今の時代に合わせる”ということに眼目が置かれました。スマホからの閲覧率が高まる中、ネタフルのスマホ版は正直見難いというのが僕自身の率直なところだったので、どうせリニューアルするなら、スマホ版も含めて最適化しよう、モバイルファーストなネタフルにしようと決心。
ちょうどコグレさんからは
コグレさん
と言われていたので、思い切ってサイドバーを削り、従来のネタフルで頑なに守り続けていたダブルカラム・トリプルカラムのレイアウトから脱却することに。
シングルカラムにする怖さ
とは言っても、ネタフルという長年多くの人から読み続けられているブログを、それまでとは打って変わって、どシンプルなシングルカラムにするというのは、はっきり言って怖いものがあったのも事実。
何より、コグレさんはいわゆるプロブロガーとして、ブログの収益でメシを食ってる人なわけです。言ってみればネタフルは、多くの人にネタを提供する店舗のようなもの。その店舗の外観から内装まで劇的ビフォーアフターすることで、客入りが落ちてしまったら? 収益が落ちてしまったら? という怖さがあるわけです。
もちろん、そんなことのないようにしなきゃいけないし、逆に伸びるようデザインしなきゃいけません。
しかし、ぶっちゃけるとネタフルのデザインは、別にお仕事としてやっているわけではないボランティアなので、そこまで考えるのもどうかという向きもあるんですが、もう職業的に仕方ないんですね。
でも、そんなことをコグレさんに話していたら、
コグレさん
と言われまして。なにその軽さ･･･とも思ったんですが、こう言ってもらえたおかげで、今回の方向性を確定することができました。
デバイスを問わないデザインへ
レスポンシブデザインというのは端末への最適化ではなく、あくまで異なる画面サイズに対して汎用化させるデザイン手法です。
Googleさまが推奨する方法ということもありますが、ネタフルのCMSがMovable Typeであることからも、多数のテンプレートを使うと負荷が高いと考え、今回は汎用化させるレスポンシブデザインを採用しました。
別にシングルカラムでなくてもレスポンシブにすることは可能なんですが、やっぱりシングルカラムのほうが、どの端末から見ても印象をほとんど変えずに見せやすいちゃ見せやすい。
ネタフルPC向け(w:1280px)
ネタフルタブレット向け(w:768px)
ネタフルスマホ向け(w:320px)
解りやすくPC向け、タブレット向け、スマホ向けの幅サイズでキャプチャしてみましたが、さほど大きく印象は変わらないのではないでしょうか?
ちなみに、Adsenseは今のところ全枠レスポンシブユニットに切り替えました。これかなり優秀すぎてビビりますよね。。
これまでにない機能を追加
今回は上記のレイアウト変更に加え、従来のネタフルにはなかった機能を実装することにも注力しました。
大きな実装としては、以下の2つ。
- ページング
- 自前の関連記事
「は? そんなもの?」と思われそうですが、実はこれまでのネタフルには実装されていなかったんですね。
各記事の下に前後記事へのページングはあったんですが、インデックスやカテゴリーインデックスでのページングがなかったのです。
関連記事的なものは、外部のブログパーツ頼みになっていたので、それらに頼らず自前で実装することにしました。
ページングの実装について
ページングを実装しましたが、ネタフルを見ても、おそらくそんなページングリンクを見つけることはできないと思います。
それもそのはずで、今回実装しているのは、厳密に言えばページングではなく、無限スクロール機能なんですね。
先日、ネタフルは「Movable Type Cloud」へ移転しましたが、それまではMT4を利用していました。そのため、新たに登場したData APIを組み込むことができなかったんです。
移転したおかげでData APIの使用も可能になり、これを使ってページングを実装しようということになりました。
なったんですが、困ったことに僕自身がしっかりとData APIの実装方法を把握できてないということもあって、もうこれは先人の知恵に与るしかないなと。
そこで利用したのが、和洋風KAIのするぷくん(@isloop)が公開している「InfiniteLoading」というスクリプトです。
これによって、インデックスとカテゴリーインデックスで無限スクロールを実現することができました。
本番実装時には、作成したするぷくんにも大いに助けてもらいました。感謝。
自前関連記事の実装について
記事の下の方に設置した「こちらの記事もいかがですか?」というのがそれです。
これは特に小難しいことはしていなくて、わりとWordPressでもよくやるやつなんですが、メインの記事のカテゴリーとタグを見て、それぞれの最新記事(表示している記事を除く)を抜き出して表示させているだけです。
ネタフルではタグを利用していないので、実質同一カテゴリーの最新記事が表示されるような感じ。タグを利用するようになると、また違った並びになって、より関連記事らしくなると思いますが、そこはコグレさんに頑張っていただきたいところです。
ただ、これはこれで処理に時間が掛かるところなので、そのうちData APIでの実装に切り替えたいところでもあります。
そのためにもData APIを勉強しないといけないですね。頑張ろう。
徹底的な内部改善
この他にもかなり改善したのが内部的なマークアップです。
3年前にリニューアルした際、HTML5を採用したのですが、今見ると書き方がだいぶひどかったんですよね。で、それを現在の知識を総動員して書き換えました。また、サイト全体のアウトラインの改善や、構造化データへの対応といったところもガッツリやりこんだ次第。
これによってどう変わるかは今後見ていかなければならないところですが、いい方向に働いてくれるのではないかと思っています。
今回のリニューアルではシックス・アパートの柳下さん(@yagishita)にも、かなりアドバイスを頂いており、それ自体、僕にとってかなり大きな学びにつながりました。ホントありがとうございます。
ネタフルのリニューアルはこれからだ!
なんだかんだで新デザインの公開はされましたが、実をいえばこれはまだリニューアルのスタートラインに立ったに過ぎません。
ぶっちゃけわずか1週間未満で作業してますから、ところどころバグもありますし、それらの修正はこれからずんずんやっていきます。
また、リニューアルしたことによって、アクセス数はもとより検索順位、収益状況なども変化が出るでしょうから、それらをウォッチしつつ改善、A/Bテストなども実施していかなければいけないでしょう。
機能的なところでも、これから実装を考えているものもあるので、それらも含めて、ずんずんマイナーアップデートをかけて行きたいと思っています。
僕とコグレさんだけではカバーしきれない部分もあるので、ぜひネタフルの読者さまには気づいた点などをバッシバシとお知らせいただければ幸いです。
@cazuki ネタフル、新デザインかっこいいっす！！！
— まお (@spring_mao) July 1, 2015
こんな感じの感想もお待ちしておりますw
僕が言うのもおこがましいですが、13年目に突入した新デザインのネタフルを、ついでにうちのブログもどうぞよろしくお願いいたします。