一応ミニマム・シンプルを提唱しているブログですので、シンプルなWebデザインにしておりますが、ところどころ直したいところもあります。
先日、ブロガーさんの勉強会で色々な情報交換をし、Webデザインの様々なカスタマイズについて掲載しているサイトを教えてもらいました。
その中から、ボックス分けされたナビケーション（ボックスナビ）を、早速このブログに取り入れました。
今回はブログのWebデザインをどのように変わったかについて、その過程を簡単にまとめました。
きたかぐらのブログのWebデザインにボックスナビを追加しました
この「きたかぐらのブログ」はWordpressで作っており、様々なテーマを経て、現在はCocoonを利用しております。
Webデザインも今まで色々いじってきましたが、ようやくブログのコンセプトに合ったシンプルなものに作り上げることができました。
しかし、一部のユーザーインターフェース（いわゆる操作性）については不満があり、何か良い方法はないかと模索しておりました。
そんな時にボックス分けされたナビゲーションメニューをCocoonに設定するやり方を教えてもらいました。
具体的には、次のように変更しました。
| 変更前 |  |
| 変更後 |  |
（※画像をクリックすると拡大します）
これはWebサイトのとある個別記事ページの一部を切り取りしたものです。
サイドメニュー部分をご覧ください。
変更前の画面ではカテゴリーの箇所に文字がずらっと並んでおり、すごく見づらい印象を与えてしまいます。
でも、変更後の画面ではカテゴリーを集約し四角く区切り、さらにアイコンも入れてわかりやすくしました。
これでだいぶまとめられて、ブログをご覧いただいている方にもわかりやすく誘導できるようになりました。
モバイル画面でもこの通り。
このブログでは、カテゴリーを大別すると5つに集約できるので、このような形にすることで、好きなところへ飛んでもらえるようしました。
細かく見たい場合は、上のプルダウンをクリックしてもらえてれば、さらに細かく表示されますので、使いやすい方を選んでもらえればと思います。
きたかぐらのブログにボックスナビを設定する際に参考にしたサイト
本来であれば、ブログのテーマ「Cocoon」にボックスナビが設定できる項目があれば理想的なのですが、流石に無料で提供してくださるものに、そこまで求めるのは酷です。
ですが、Cocoonのページで今回のボックスナビを始め、様々なカスタマイズ方法を紹介している方が書いているブログを紹介しております。
この中で紹介されていた1つが「ぽんひろ.com」というブログです。
このブログでは数多くのWebデザインのカスタマイズ方法についてわかりやすく説明されており、HTMLとCSSの知識が少しあれば簡単に作ることができます。
今回私がカスタマイズしたCocoonでのボックスナビの設定方法については以下の記事で紹介されております。
具体的なやり方については、ここで書くよりも上記の記事をご覧いただいた方が間違い無いでしょう。
他にも当ブログで取り入れたいカスタマイズがあり、折を見て取り入れる予定です。
きたかぐらのブログで一度設定したもののボツにしたボックスナビデザイン
以上、当ブログのWebデザインにボックスナビを追加した件についてまとめました。
もし、ブログを運営されていて、多少はHTMLやCSSの操作ができるというのであれば試してみるのもいいかもしれません。
知識がなくても、ぽんひろさんのブログをじっくりと読めば結構できてしまうかもしれません。
実は一度別の箇所にもボックスナビを設定したのですが、いかがでしょう？
 |
トップページのロゴの下部分にボックスナビを設定してみました。
しかし、これだと逆にボックスが目立ちすぎてデザインがスッキリしません。
 |
結局、文字だけのカテゴリー表示に戻しました。
こちらの方がスッキリした印象を与えるような気がします。
ユーザーの操作性を重視すればボックスナビがあった方は良いのかもしれないのですが、やはりミニマム＆シンプルなデザインにこだわりました。
どちらの方が良いでしょうかね？
今回はサイドメニューだけで様子を見ることにします。
