こんばんは。久々にサイトをリニューアルしました。というか、それ以前に大変ご無沙汰してしまいました。なかなか更新できず気づけば3月。

というわけで、閲覧するデバイスが劇的に変化している昨今、それに合わせてWebサイトも変化していかねばなりませんですね、はい。Webをとりまく環境が異常なスピードで変化していく中で、今回のリニューアル敢行についての雑記を書いてみました。

見やすくしたかったので。

とにかく見やすくしたいと思いました。見やすくってのは、ページにアクセスした瞬間から読み終えるまで、極力ストレスのないユーザー体験の提供、ということになりますね。

まずサイドバーをなくして1カラムに。これは、自分がiPadやMacでブログを閲覧する際に、2カラムのサイトの場合、結局記事部分を拡大して1カラムみたいに表示させて読むため、もう最初から1カラムにしようというわけです。。きっとそうしてる方も多いのでは?

ちなみに、本文の最大横幅48文字分になってます。iPadを縦にした時の横幅程度にしか広がらないようにしてます。このくらいがすっきり見やすいなぁ。

シンプルにしたかったので。

見た目的なものも、内側のコード的なものも、可能な限りミニマルなものにしたかったというのがあります。思い切ってグローバルナビゲーションも削除。なんか、なくてもいいかと。その他、必要最低限のもの以外一掃したというあんばいです。

コンテンツファーストしたかったので。

モバイルファースト。突き詰めていけばコンテンツファースト、と言うべきでしょうか。設計にあたり、下記のザーボンもといBourbonさんが大変チカラになってくれました。

「どんな画面サイズでも読みやすく、を1ソースで」行うためには、もうpx決め打ち指定とか装飾的画像とかが足かせにしかならないことを悟りました。

もちろん、見た目的なものだけでなく、表示速度にもだいぶ気を遣ってみました。

悲しいのは、ソーシャルメディア系のスクリプトとかが変なもんガンガン読み込ませてくるため、httpリクエストが劇的に増えてしまうことですね。もう、ソーシャルボタンみたいのは全部ブラウザ側で標準実装してくれればいいのに。いや、されてるんだけど。

対応ブラウザ

Chrome, Safari, Firefox等の一般的なブラウザと、IE8以上(9以上推奨)(IEはまだ実機テストしてないんで不十分な可能性絶大)

製作期間

2日くらい。うちWordPressテーマ用Gruntfile.jsの作成に1日費やした模様。

技術的なことを少し。

開発環境やツールについて。Macbook Air 2012mid 8GBRAM 13インチにHomebrewでNodeとかnpmとかGruntとか自家醸造な環境です。エディタはCodaですが、Atomに浮気がちな昨今。

WordPressテーマは、基本的に都度イチから作成します。よく使う機能はPHPのClassとかにしといてfunctions.phpにincludeして使うパターンにしてます。プラグイン化は管理が面倒なんで今はあんまりしません。

CSSに関しては、かつてはGUIのSass/Compass系アプリ + 自作CSSフレームワークでやっとりました。Bootstrap的なものはどれもしっくり来なかったです。しかし、前述のBourbon & Bourbon Neatに出会って以来、僕のCSS事情は一変。界王拳が20倍までできるようになりました。

Bourbonさんは SassのMixinライブラリ。NeatはBourbonベースのグリッドフレームワークです。まさに自分が求めていたもの、いやそれをはるか上回るものとの出会い。なぜ今までこのBourbonさんに出会えなかったのか。いや、出会ってはいたけど見る目がなくてスルーしていたのだろうか。まるで人生のs略

という訳で、Bourbon & Neat でゴリゴリSassったものをGruntさんにBuildしてもらうのが、最近のスタイルです。

既知の問題点

過去の記事のスタイルとかがおかしかったり、あえて見ないふりしたりしてますが、愛嬌ということでご勘弁下さい。セマンティックなコーディングをして来なかった罰ですね、はい。

というわけで以上です。

思えば、WordPressで作成したサイトはこのサイトが初めてでした。まだWebを本格的にやりはじめたばかりの頃だったんで訳も分からずやってましたが、このサイトの制作や運用を通じて、サイトとともにスキルアップしてきたような気がします、はい。

またぼちぼち記事を書いて行けたらと思います。ではさようなら!