はじめに
○○のやり方、みたいな記事を集めるnanapiというサイトをやっているのですが、このサイトのリニューアルを行いました。3回目のバージョンアップなので、ver3.0と呼んでいたりします。
オシャレキッズである株式会社ロケットスタートのメンバーは、モダンさを追求したいという欲求が大きくあり、今回はそのモダンな感じが前面にでた、モダンリニューアルといえる内容になっています。
今回はどのあたりがモダンなのかを詳しく説明したいと思います。
モダンその1：Facebook連携を中心にしたリニューアル
まだ検索からの流入が多い日本のWebサイトですが、海外だとソーシャルサイト、特にFacebookからの流入が増えてきています。
簡単に言うと友だちから紹介されたコンテンツって気になるよねってことだと思います。
そこで、モダンnanapiでは、インターフェイスをソーシャルに振り切ろうと考えてリニューアルをしました、具体的には、コメント欄をFacebookに完全依存、かつトップページのタブ部分でFacebookでのコメントを一覧で見れるようにしてみました。
本当はFacebook Connectで、友達がいいね！したものやコメントしたものを見れるようにしようと思ったのですが、まだ人数が少ないので、とりあえず全体を見せています。近いうちに友達だけに限定して見れるモードもつける予定です。
Facebookとは世界的に見ても非常にモダンなサイトとして知られており、モダン界のエースです。そのFacebookにのっかることによってnanapiもモダンだな、と思われることを目指してつけてみました。
モダンその2：全面的にHTML5にした
中身のはなしになってしましますが、HTMLを全面的にHTML5にしてみました。
HTMLとは、サイトを作るなんか言語みたいなもんですが、HTML5とはHTMLの中でも特にモダンなHTMLだと思ってください。
モダンその3：全体的にシンプルに
サイトがごちゃごちゃしてたのでいろいろとシンプルにしました。シンプルかつ、してもらいたい行動だけをさせるのがモダンじゃないかと思っています。
たとえば、トップページは「なんかおもしろそうな記事をひたすら見る」ことだけをさせるインターフェイスにしています。もっと読むを押してもらうことで、ガンガンと次に進むことができます。
また記事ページもシンプルにしてみました。画像を少なくし、要素も減らしていっています。いらないものは捨てちゃうのがモダンです。
モダンその4：ヘッダーをシンプルに
また、ヘッダー（サイトの上の部分のこと）が小さく固定になりました。検索もここにいれてみました。
内容部分を動かしても、このヘッダー部分がついてきます。なんとなくTwitterぽくてモダンだなあ、と思っています。
ティッカーもついています。ティッカーにはお知らせみたいなものやおすすめのレシピを一行でさくっと教えようと思っています。
なんとなくアメブロぽくてモダンじゃないかと思っています。
モダンその5：導線によって変わるビローン枠
ビローンと枠がでるところを追加してみました。ビローン枠と呼んでいます。ここは、「どのサイトから来たか」などを判別して、コンテンツをだし分けています。
今までは「いろいろなところからサイトにくるのに、みんなに同じデザインを見せてた」のですが、なんかモダンじゃないので、「Facebookから来た人にはいいね！を押させる」「検索から来た人には検索への動線を見せる」みたいなことができるようにしました。
どういうユーザーさんかを考えて上の枠を作るのが、2011年ぽいと考えています。
モダンその6：ローディング画面のgifアニメ
ローディング画面の画像ですが、せっかくなのでnanapiのロゴ（七ロゴ）をローディングのものにしてみました。
かわいいです(^^)v
モダンその7：
トップページのタブをうまくアレするために、URLが
「http://nanapi.jp/#!/recent」
とかになったりします。なんかモダンですね。
参考：TwitterやFacebookのURLには、なぜ#!が含まれるのか (SEOとAjaxのおいしい関係) - kazuhoのメモ置き場
というわけで
モダンになったnanapiもぜひともよろしくお願いたします！
nanapi [ナナピ] | みんなで作る暮らしのレシピ
