読者です 読者をやめる 読者になる 読者になる

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

スマホ・タブレットのブログデザインをマテリアルデザイン風にしてみました!

Web制作
スポンサーリンク

もうタイトル通りなのですが、このブログのデザインを流行りのマテリアルデザインに寄せるようにしてみました!

まだ一部分しか変えてないですが、どのあたりを変えたのかを備忘録がてら書いていきたいと思います。

(変更したのはタブレット・スマホ版のみですが、PCでもブラウザサイズを縮めるとなります)

なぜ変えようと思ったか

このブログでは今までもデザインの変更をしてきたりしましたが、何のためにやってきたのかと言うと、それらはブログ内の回遊率を高めたかったからという一言につきます。

どんどん記事かけよというツッコミは無しにして、せっかく見ていただいたのにその記事だけだともったいないなあと思っていました。

しかしぶっちゃけますと、ここまでいろいろカスタムしてきたのですがどれも決定的に回遊率が高まるものはありませんでしたw

タブメニューとか、トグルメニューとか、本当にいろいろやってきたんですが、結局一番効果があるのは記事の中に関連したものを自分で入れることであって、その他はあんまり見られないです。クリック率も低い。

そこでスマホ版の回遊率を高めるために、記事上に目立つメニューボタンを表示させようと思い、それなら最近良く聞くマテリアルデザインというやつのフローティングボタンを入れたらどうか?と思ったので変えてみました。

マテリアルデザインとは??

全然詳しくないので他の方を参考にさせていただきました。下の記事が本当に分かりやすいです。

lab.sonicmoov.com

とりあえずデザイン的には重ねたような立体感をイメージしていきます。Googleのアプリなんかを例にとると分かりやすいかもしれません。

f:id:ftmaccho:20151125172525p:plain

上の図はGoogleカレンダーですが、図の中に書いた部分が特徴だと思います。

右下のボタンがものすごく目立っていますよね。このボタンならいけるかも!ということで変えてみました。

変えたとこ

PC版はほとんど変えていませんが、タブレットとスマホのデザインを変えてみました。

ヘッダー

一番変えたとこはここです。というりより、ここ以外は全然変えてないです。

f:id:ftmaccho:20151125170639p:plain

上の図に書いたように、立体感が出るように影をつけて、ボタンも目立つように明るめの水色でフローティングアクションボタンにしてみました。

これでクリック率上がると良いな。どうなんだろ実際。

スライドメニュー

メニューも今までは上下にトグルするようにしていましたが、Googleのアプリによくあるように、横からスライドするようにしてみました。

Googleカレンダー

f:id:ftmaccho:20151125173145p:plain

Yukihy Life

f:id:ftmaccho:20151125173338p:plain

図に書いたように、立体的になることと、スマホで片手で操作できるようにしました。

ついでなので検索バーも上に設置。(スクショして気付きましたがsearchのスペルが間違ってますね^^;)

横からスライドで出てくるメニューは、作り方を記事にしようと思っています!

難しかった点・不満な点

難しかった点

作ってみてやっぱり横からスライドさせて綺麗にメニューにするjQueryが苦労しました。最初はリサイズしたときの対応を書いていなくて、メニューが消えたりして「何でだ?」ってオロオロしてました。

あとは全体的に何の上に何がこなければいけないのかが混乱したので、紙に書きながら一つづつ作りました。

不満な点

一応形にはなりましたが、不満な点もいくつかあります。

  • メニューが固定されてしまい、スクロールできない
  • ボタンを押したときにマテリアルデザインによくあるアニメーションをつけてみたい

などなど、今後少しずつ直していきたいと思います。

参考ブログ

creatorclip.info

参考にさせていただいたのは上の、同じくリニューアル記事。最初はこのブログみたいに3カラムにしてみたいなあと思いましたが断念しました。いずれやってみたい!

まとめ

今までの経験上、回遊率は2・3日は上がってまた元に戻ることが多いですが、今後がどうなるかが気になります。

もうブログデザインを変えるのが趣味なのでまたちょくちょく変わると思いますが、よろしくお願いします^^。