フラットデザインでリニューアルしたので施策と工程さらしてみる。

By@mtoksuyOn 2013年06月10日

Tag To
リニューアル
フラットデザイン
webデザイン

この一週間、黙々とサイトのリニューアルを行っていました。最初は少しだけ変えよっかなって感じだったのですが、少しいじったら雰囲気変わってしまいますからね。同じトーンにしなきゃいけないから次々と変更していきました。そう、このリニューアルは計画的にデザインを決めてリニューアルしていないんですよね。そうゆう所にも着眼点を置きつつ、どんな施策をしたかと最後に工程も書いていきたいと思います。

●どんなデザインにしたかったか ●インブラウザ・デザインでリニューアルする ●アナリティクスから見えるポイント ●カテゴリー機能を独自実装において気をつけた事 ●新しいFBのlikeboxカスタマイズ法発見 ●目次スクロールの仕様変更とその理由 ●フォームのレスポンシブ実装によるバグを回避 ●box-shadowによるブラウザのスクロールが遅くなる点について ●細かい仕様変更のポイント ●まとめ

どんなデザインにしたかったか

2011年の冬あたりからフラットデザインを施しているサイトが現れていき僕はそれらを恍惚を視線で見つめていました。本当にこんなクールでワクワクさせるデザインがあったのかと当時の僕は思いながらいつか僕もこんなデザインやりたいと思いつつプログラムに勤しむ日々でした。そこで今回、プログラマーの僕がフラットデザイン風な感じのデザインにするべくがんばってみました。あくまで風です。これでフラットデザインです!と掲げたら本物のデザイナーさんに怒られてしまいますので。

インブラウザ・デザインでリニューアルする

最近この手法が取り上げられる事が多くなったような気がします。・・・ですがこれは僕のいつものスタイルでしたので、そうだったんだー。程度でした。まー手法に名前があるという事は説明しやすくていいですね。 インブラウザ・デザインとは何かという細かい説明はこのブログの記事を読んで下さい。 Photoshop時代の終焉？インブラウザ・デザインでWebサイトを作ってみて感じたこと

アナリティクスから見えるポイント

リニューアル前はIE対策を全くやっていませんでした。言い訳を書かせて頂きますと単純にIEの事が・・・IEの事が・・!!なわけでした。ですがアナリティクスを見ればそんな事も言っていられません。という事でブラウザ別で訪問別ページビューはどうなっていたかを見ましょう。

	ブラウザ	訪問別ページビュー	全体に対する割合
1.	Firefox	2.33	21.16%
2.	Safari (in-app)	1.44	3.06%
3.	Safari	1.43	20.48%
4.	Chrome	1.41	41.17%
5.	Mozilla Compatible Agent	1.36	0.62%
6.	Opera	1.31	0.66%
7.	Internet Explorer	1.25	10.59%

ひっく!全体的にひっく!!

そして、あきらかにIEの訪問別ページビューが低いですね・・

次はIEの内訳を見てみましょう。

	IEのバージョン	訪問数	全体に対する割合
1.	9.0	1.27	47.46%
2.	8.0	1.24	30.42%
3.	10.0	1.23	16.97%
4.	7.0	1.22	2.99%
5.	6.0	1.21	2.17%

もう6,7は対応しなくていいんじゃないでしょうか?全体から見ても0.1〜0.3%でした。

ところで9,10は対応しているハズなのに6,7,8とそんなに変わらないってどうゆう事でしょう・・。

とっとりあえずIE8にも対応させるべく施策を行います!!

IE8まで対応する為の施策方法

HTML5の記述を適応させる

HTML

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

とりあえずこのjsを読み込めば新しいHTML5のタグにも対応しCSSが効くようになります。

詳しくはこちらのアーチweb制作様の記事を

IE8でも簡単にHTML5とCSS3に対応させる方法

CSS3の記述をIE8が実装している範囲で記述していく

これに関しては一つ一つ確認しつつCSS3を使っていくのが望ましいです。全部わかりきったつもりで制作して最後に気付いたのではシャレになりませんので。

詳しくはこちらのWebpark様の記事を

CSS3を使うにあたって知っておきたいIE対策のまとめ

カテゴリー機能を独自実装において気をつけた事

このブログにもカテゴリー機能が欲しいな(SEO的に)と思いまして実装してみました。最初はちょとめんどくせーなって思っていたのですが実装してみれば2時間くらいで完成しました。

※このブログはワードプレスを使っていなくてPHPでシステムを構築してワードプレスみたいな事を一つ一つ実装して作られています。

メインカテゴリーとサブカテゴリーに分けまして記事数が多いカテゴリーが上に行くように実装したのですが、一番心配だったのがページング機能とどう摺り合わせていくかが一番のネックだと思います。そこでディレクトリ名と紐付けてDBを参照してそのカテゴリーの記事数を引っ張ってきています。まぁ、文章にするとたったこれだけなのですが少しだけややこしかったので(メインとサブの振り分けとか)

新しいFBのlikeboxカスタマイズ法発見

色々とごにょごにょしていたら僕、発見しました。FBの仕様変更で色んなサイトでスタマイズしていたlikeboxが崩れていたのですが、僕を手法を使えばどんなデザインでも出来るようになりました。これは別記事で書こうかと思います。

目次スクロールの仕様変更とその理由

一番速く変えたかったのがこの目次スクロールでした。理由はリニューアル前の目次スクロールはスクロールするとURLに#が付いてしまいました。 はてブを重要視するブログでは致命的です。実際に他記事で#が付いたまま、はてブされている記事がありましたので優先度は高い変更点だったと思います。

フォームのレスポンシブ実装によるバグを回避

前のデザインではフッダーにフォームがありました。あるだけならいいんですがレスポンシブでバグがあるのです。WebKitで縦で読み込み横にしてから縦にすると横のサイズが戻らないバグです。誰にも気付かれないレベルだったのですが何か気持悪いのでお問い合わせはお問い合わせのページを作成し、フッダーからはフォームを外しました。

box-shadowによるブラウザのスクロールが遅くなる点について

話題に触れる人が少ないのは何故でしょう。CSS3のbox-shadowはかなりCPUに負担をかけます。そしてブラウザのスクロールが遅くなります。今回はブラウザがどんどんアップデートして最適化されてきているなと感じましたのでbox-shadowをふんだんに使いました。ただ、UXの面を気にする方だったり、商業的のサイトではbox-shadowはまだ使わない方がいいです。さくさくスクロールする人からするとイラっとくるカクツキが出ます。普通にborderを使った方がいいですね。

細かい仕様変更のポイント

その他は特段変更はありませんが見出しとか変えました。後はaboutページの文章足したくらいですねー。あ、後はカテゴリー毎に色を振り分けた category_band はお気に入りです。

まとめ

工程について一切語っていませんでしたので、少しだけここで説明させて頂きます。最初で述べた通りデザインはインブラウザ・デザインで行いました。先ず、初めにグリッドを引きます。(でっかいグリッドの画像をabsoluteで表示してopacty:0.7にする) そして、どんなサイズが良いかを初めに決めて空間を作っていきます。次にそのボックスをどんなデザインにするかを決めます。このボックスのデザインが決まればその流れに沿ってデザインを決めていくだけになります。ただ、今回は記事の上にcategory_bandを表示したかったので空間規則はここで破っています。破ってもそれ以上にメリットがあると考え不規則な空間規則になりました。ここではまだカラーについては決めていません、大体イメージで付けていますが。全てのデザインが完成したらバックカラーを決めてその上に表示するボックスの色を決めます。その次にcategory_bandの色を。最後に文字の色の調整をして完成です。かなり大雑把に説明しましたが僕はいつもこんな感じでサイトを作ってます。今回はリニューアルの記事を書かせて頂いたのですが3ヶ月後とかにリニューアル前とリニューアル後のアナリティクスでの比較記事も書ければなと思っています。ということでではではー。