もうタイトル通りなのですが、このブログのデザインを流行りのマテリアルデザインに寄せるようにしてみました！
まだ一部分しか変えてないですが、どのあたりを変えたのかを備忘録がてら書いていきたいと思います。
（変更したのはタブレット・スマホ版のみですが、PCでもブラウザサイズを縮めるとなります）
なぜ変えようと思ったか
このブログでは今までもデザインの変更をしてきたりしましたが、何のためにやってきたのかと言うと、それらはブログ内の回遊率を高めたかったからという一言につきます。
どんどん記事かけよというツッコミは無しにして、せっかく見ていただいたのにその記事だけだともったいないなあと思っていました。
しかしぶっちゃけますと、ここまでいろいろカスタムしてきたのですがどれも決定的に回遊率が高まるものはありませんでしたw。
タブメニューとか、トグルメニューとか、本当にいろいろやってきたんですが、結局一番効果があるのは記事の中に関連したものを自分で入れることであって、その他はあんまり見られないです。クリック率も低い。
そこでスマホ版の回遊率を高めるために、記事上に目立つメニューボタンを表示させようと思い、それなら最近良く聞くマテリアルデザインというやつのフローティングボタンを入れたらどうか？と思ったので変えてみました。
マテリアルデザインとは？？
全然詳しくないので他の方を参考にさせていただきました。下の記事が本当に分かりやすいです。
とりあえずデザイン的には重ねたような立体感をイメージしていきます。Googleのアプリなんかを例にとると分かりやすいかもしれません。
上の図はGoogleカレンダーですが、図の中に書いた部分が特徴だと思います。
右下のボタンがものすごく目立っていますよね。このボタンならいけるかも！ということで変えてみました。
変えたとこ
PC版はほとんど変えていませんが、タブレットとスマホのデザインを変えてみました。
ヘッダー
一番変えたとこはここです。というりより、ここ以外は全然変えてないです。
上の図に書いたように、立体感が出るように影をつけて、ボタンも目立つように明るめの水色でフローティングアクションボタンにしてみました。
これでクリック率上がると良いな。どうなんだろ実際。
スライドメニュー
メニューも今までは上下にトグルするようにしていましたが、Googleのアプリによくあるように、横からスライドするようにしてみました。
Googleカレンダー
Yukihy Life
図に書いたように、立体的になることと、スマホで片手で操作できるようにしました。
ついでなので検索バーも上に設置。（スクショして気付きましたがsearchのスペルが間違ってますね^^;）
横からスライドで出てくるメニューは、作り方を記事にしようと思っています！
難しかった点・不満な点
難しかった点
作ってみてやっぱり横からスライドさせて綺麗にメニューにするjQueryが苦労しました。最初はリサイズしたときの対応を書いていなくて、メニューが消えたりして「何でだ？」ってオロオロしてました。
あとは全体的に何の上に何がこなければいけないのかが混乱したので、紙に書きながら一つづつ作りました。
不満な点
一応形にはなりましたが、不満な点もいくつかあります。
- メニューが固定されてしまい、スクロールできない
- ボタンを押したときにマテリアルデザインによくあるアニメーションをつけてみたい
などなど、今後少しずつ直していきたいと思います。
参考ブログ
http://creatorclip.info/2015/09/blog-renewal-material-design-ver2/creatorclip.info
参考にさせていただいたのは上の、同じくリニューアル記事。最初はこのブログみたいに３カラムにしてみたいなあと思いましたが断念しました。いずれやってみたい！
まとめ
今までの経験上、回遊率は２・３日は上がってまた元に戻ることが多いですが、今後がどうなるかが気になります。
もうブログデザインを変えるのが趣味なのでまたちょくちょく変わると思いますが、よろしくお願いします^^。
