このブログを始めて2年半くらいそのままのデザインでしたので、
さすがに飽きてきました。そこで仕事の合間をみてリニューアルすることに。
リニューアルに重要視したのは3点
1.レスポンシブデザインにする
※1つのソース（HTML言語）でPCやタブレット、スマートフォンなど、どのデバイスから閲覧してもその端末のサイズに合わせて自動的に最適化されていること
2.インブラウザデザインで構築する
※ブラウザ上でデザインすること
3.iPhoneでもAndroidでもサクサク動くスライドメニューを設置する
※Facebookアプリなどで使用されているメニュー
レスポンシブデザイン
フレームワークでBootstrapを使用。
あらかじめ様々な要素のCSSがあるため、時間短縮したいときなどに最適です。
Bootstrapの使い方など勉強したい方はドットインストールがおすすめです。
Bootstrap 3.0入門 (全18回) – プログラミングならドットインストール
インブラウザデザイン
通常はPhotoshop等のアプリを使用してワイヤーフレーム→デザイン→画像等のスライス→コーディングという流れですが、「アプリでデザインの工程」をすっ飛ばし、ブラウザ上でデザインしました。
モバイルファーストの概念のもと、今回はさらにワイヤーフレーム（レイアウトの下書きみたいなもの）も作成せず、自分の頭のなかにあるものを直接ブラウザ上で具体化して調整しました。
Webサイトやソフトウェアの開発・運営方針の一つで、スマートフォンなどの携帯端末向けの版をパソコン向けなどより先に、あるいは同時に公開すること。また、サイトやソフトの機能や表示、操作方法を設計する際に、携帯端末での使いやすさを常に優先すること。
最初は慣れない分、手こずりましたが2時間くらい経つころには感覚も慣れていき、かなりスムーズに。しかしながら、やはり紙にでもある程度のイメージを書いていたほうがもっとスムーズになっていたかな。
スライドメニューの設置
今回、これが一番時間かかりました。iPhoneだけなら問題なかったのですが、Androidが少しやっかいで。。。
transition、transform系のCSS3アニメーションはまだ使用しないほうがいいのかもしれないです。
ですので、当初は横からニュルッと出てくるメニューにしていましたが、アニメーションを全てオフにしました。
下記のライブラリを少しカスタマイズして使用させていただきました。ありがとうございます。
Google Nexus Website Menu | Codrops
他に気をつけたこと
極力画像を使用せずにWebフォントを使用しました。TwitterやFacebookのアイコンは画像ではなくWebフォントを使用しています。
あとは、これまで使用していたWordPressのプラグインを減らしていき、、各デバイスに最適な画像を表示するように調整していきました。
また、ブログなのであまり派手にならないよう可読性を重視しています。
古いブラウザなど、対応しきれていない箇所もありますが、アクセス解析をもとにアクセスがあまりというか全然ないので、InternetExplorer6,7は完全対応はしていません。というか、InternetExplorer6,7使用している人は早くアップデートして、せめてInternetExplorer9か10にしてくださいm(_ _)m
レスポンシブデザインってどうなんだ？
Googleが推奨している手法ですが、個人的にはまだまだ疑問がある手法なので、実験的に自らのサイトを対応させていろいろ試してみたいと思います。
