気づけば当ブログも丸4年。仕事の都合で止まっていた記事更新も再開したので久々にリニューアルしてみました。リニューアルのポイントと参考にした記事などをまとめてみました。
デザインについて
以前ガラッとデザインリニューアルした際にブログをやめてしまったのかという声も聞いたので今回は基本的なトンマナは以前のものを踏襲。読みやすさを重視して基本の文字サイズを大きくしました。
そういえば「トンマナ」って意外と意味を聞かれることが多いので念のため捕捉…
トンマナ（とんまな）は、トーン&マナーの略で、もともとは広告におけるデザインやコミュニケーションに一貫性を持たせること。要するに、全体の雰囲気に合わせましょうってこと。
ちなみにこちらが旧デザイン
変えなすぎもつまらないのでサイトロゴをプチリニューアル。
レスポンシブ対応について
以前はスマホからの閲覧はhtaccessを用いてスマホ用のページへ転送していましたが、タブレットでのレイアウトが調整できていなかったこともありレスポンシブを採用。
ブレイクポイントは1024pxと640pxの2か所で以下のようにレイアウトを切り替えてます。
ちなみに旧型ブラウザは非対応としました。あとで簡易的にCSSで整形しようかと思っています。
レスポンシブ時に意外と見落としがちな外部モジュールによるレイアウト崩れは以下で解決しました。
YouTubeなどはこちらで回避。
サイトの高速化
レスポンシブにしたこともあり、表示速度をあげるように最低限必要な画像のみCSSスプライトにし、極力WebフォントやCSSで完結させました。主な施策と参考記事は以下です。
Webフォント
WebフォントはGoogle Fontsを利用。日本語はどうしようかと悩んでのですが、ひとまずデバイスとしました。
CSS3の利用
装飾は基本的にCSS３で実現しました。面倒なグラデーションやシャドウの数値は以下を利用して取得。
アイコンもWebフォントで利用してみました。
CSSスプライトのRetina対応にちょっと手間取ったのですがこちらで解決。
ソーシャルメディア
これを気にソーシャルメディアも少し整理。
今まで利用していなかったGoogle＋ページを作成。
最近はログインすらしていなかったmixiページは廃止しました。ちなみにソーシャルメディアはhoot suiteで管理を集約しています。
JavaScriptについて
今回は極力控えようと思っていたので必要最低限の利用にしました。アコーディオンやスクロールはあまり凝らずにjQueryを利用した軽めのもので実装。
どうしても入れたかったスマートホン版のスライド式のメニューはこちらのプラグインで実装しました。
こちらでかなり簡単にスライドメニューを実装できました。
制作の際に利用したプラグインや便利ツールなどはあとで詳しく紹介したいと思います。
リニューアルはできましたがちょうどこんなニュースも飛び込んできて、これからも記事の質をあげていきたいなと思いますのでこれからもご愛読よろしくお願いします。
この記事を読んだ人はこんな記事も読んでいます
2014年12月20日 Web Designing 2015年1月号に執筆させてもらいました。- 2012年7月20日 Web Designing 2012年8月号に執筆させてもらいました。
- 2014年4月22日 Web Designing 2014年5月号に執筆させてもらいました。
- 2011年11月8日 大迫力なアートオペラ「Bregenz Festival」
