「ネタフル」のリニューアルをしたのでそこらへんのことをまとめておく【追記あり】

いやー、終わった終わった。ようやく終わった終わりました。
すでにネタフル読者の方は「おや? デザイン変わってるぞ」とお気づきの方もおられるでしょうが、昨日午後(夕方以後)、いつもお世話になっているコグレのアニィ( kogure )から放り込まれた「ネタフル」のリニューアルが完了となりました。そんなわけでコトの経緯やらリニューアルに際するポイントとかをまとめ。

リニューアルの経緯

えーっと、今回の件を最初に言われたのはいつだったかw

確かブタフルナイト2011の開催前だったと記憶しているので、およそ3ヶ月くらい前でしたかね。
Skypeで緊急コグレ速報により、多分まぁ何となく控えめに、

今度ロゴ変えるんだ。
→ ロゴ作ってもらってるんだ。
→ だからネタフルのリニューアルしてよ。

的な三段論法みたいな感じで放り投げられたといったところ。
経緯もへったくれもない話ではありますがw

最初は、ああケータイ版のリニューアルをしたいのねー、とか思ってたんですけど、よくよく話を聞けば思いっきり普通にPC版のリニューアル。
なんて工数の掛かる話を振ってきやがるんだろうとか思ったり思わなかったりでしたが、とりあえずMTを使った案件はあんまりやってないし、まぁ少しMT触っておきたいのもあったので、軽く引き受けてしまったのでした。

リニューアルにおけるデザイン要件と3ヶ月という期間

で、まぁ仕事が仕事ですから、当然デザインの要件定義は必要です。
が、ぶっちゃけ特になし。
「任せた! (ｷﾘｯ」くらいの勢いで要件もなくスタート。まぁ要するに自由にやってよとww

思うにこの自由にやってよってのが、3ヶ月も時間を要した大きな原因なんですよね。
何せこの時点でまだロゴなかったし。

で、なんだかんだでネタフルの新ロゴデザインができたよーってことで、たしか話が来てから1ヶ月以上経過したあたりで新ロゴを受け取り、ようやくなんとなくイメージをしはじめます。

しはじめますが、ちょうどこの頃からでかい案件が動き始めていて(現在も進行中)、いかんせんそちらに時間を割かざるを得ない状態。

「ネタフルのリニューアルだって仕事なんだからちゃんと回すべきなんじゃないか?」

ってなことを言いそうな人も世の中にはいるんでしょうけど、これ仕事じゃねーし。
むしろ遊びの範疇でやってることだったので、もうこればっかりは仕方ない。
仕事が忙しかったら遊びの時間は削るしかないですからねー。

で、なんだかんだでようやく年末くらいから微妙になんとなく素案みたいなものをつらつらスケッチしつつ。

しかし、今回のいちばんの悩みどころはレイアウトでしたね。

全面的に変えちゃろうかとも思ったんですが、一応レイアウトカラムは3カラムのままがいいっていう話をされていたので、基本的なレイアウト構成は以前のまんまにすることとしました。

で、とりあえずデザイン原型となるカンプを作って確認してもらって、Skypeを使ってリアルタイムでカンプの修正と再確認の繰り返し。
細かいちょっとしたことも含めると13〜14回くらいバージョンアップを重ねた感じ。

そうしたやりとりの中で「mbdbのデザインのこれっていいよねー入れたいなーsrd!」的な感じのことがありつつ、いろいろリテイクしていくうちに、なんだかだいぶうちのブログに近い感じのデザインになってしまったような。。フュージョンして「ネタデビ」になりました的というかなんというか。。

今回のリニューアルでやったこと

そんなわけで、結局最終的なデザインがこちらのキャプチャ。

レイアウト構成はほとんど変わりありませんが、だいぶ印象は変わったかなと思います。

ヘッダーは2012年のトレンドになるんじゃないか的なこともささやかれている固定ヘッダーに。
ナビゲーションとGoogleカスタム検索もここに入れておきました。

いつもの通りというか、まぁ最近個人的にデザインであんまり画像は多用しない方向にしているので、全体的に画像は少なめ。かなりCSS頼みになっています。
部分部分でCSS3を使っていますが、CSS3非対応ブラウザでもあんまり見た目は変わらず見えるはず。

HTMLコーディングは当たり前ですがHTML5で行っています。

それと、今回はどちらかと言えばテンプレート構成にだいぶ手を入れた感じですかね。
初めてネタフルのテンプレート構成を見たときにだいぶわかりにくいなぁという印象だったので、MTのモジュールテンプレートを活用して管理をしやすいようにしつつ、サイドバーのコンテンツはウィジェットでの管理を前提とするようにしました。

あと、もちろんOGPの対応もしてあります。今やOGP入れてないとかどうなんだそれは的なところもありますし。

ちょっと困ったのは、最前に上げた固定ヘッダー。

というのも固定ヘッダーはz-indexで重ねているんですが、AMNの広告バーがFLASHで表示されると、固定ヘッダーの上に表示されちゃうんですよね。。
解決方法としてはwmodeを記述することなんですが、外部スクリプトですからねぇ。このあたりどうにかしたい。

Movable Typeでのコーディングについて(※追記)

SAKKの関さん(@nseki)から要望があったので追記w
まぁ思えば書くべきコトでしたね。

普段はあんまりMT使ってません。このブログもWPですし、だいたい低予算案件でCMSを採用する場合はWPばかり使っています。

で、まぁ今回テンプレート作ってみてな感想としては、コーディングそのものはWPと比べるとやっぱりラクだなぁと。
MTタグのおかげで複雑なことを考えずにつらつら書き続けられましたし。

とは言え箇所によってはあんまり変わらん気もしますが、まぁそれでもPHPよりは理解しやすいはず。

たぶんHTMLにしか触れたことないって人には、MTタグは扱いやすいんじゃないでしょうかね。

ただ、今回の場合はバージョンが4系だったってことがあって、テンプレートによってプレビューできないバグがあったりしたのは地味に痛かった。
っていうかこれはコグレさんがバージョン上げてくれればいいだけの話か。

とんでもなくめんどかったのは、やっぱり再構築周りでしょうか。30000超あまりの記事数を誇るネタフルだったからってのもありますが、待ち時間が半端じゃなかった。これもバージョン上げれば速くなるんじゃ･･･っていう気がしないでもないw

そんなわけで

一応、リニューアル完成というわけです。

まだ、若干調整は必要だなと思っているので、あともう少しいろいろな環境でチェックしつつ手を入れていきます。
あくまでも可能な限り表示統一をしないといけませんので。

というわけで、ネタフルを読んでいて、「おや? 表示がおかしいぞ」なんていうことがあればご一報下さい。
まぁなるべく自分で問題点があればつぶしていきますけど、多くの人がさまざまな環境でデバッグしてくれているようなものなので、なにかあればぜひ知らせてくださいませ。