Ver.3.0 なのです。Ver.2.1にしたのが2007年だったようなので、実に8年ぶりの改装となります。これだけ長いと流行り廃りも激しくて面白い。

解りやすいのがモバイル事情で、iPhone3Gが出たのが2008年7月。
日本初のAndroid携帯(HT-03A)が出たのが2009年7月。
jQuery mobile 1.0.0 RC1 が出たのが2011年9月。
貴サイトのモバイル・ユーザビリティに問題がありますよー、とウェブマスターツールから警告のメールが来たのが、この2月末。

あとはSassが使われ出してから3年以上経ってるとか、CSS3の接頭字もだいぶ外れてきたよなーとか、非プログラマがGulpとかGitみたく黒い画面を使うシーンにも慣れてきたとか、AngularJSまわりみたいなJS事情の複雑化。Vim使いが目立つこともなくなって、Sublime Textの本書いてた人がいつのまにかAtomについて書いてたとかいろいろですね。まあ俺はVimmer(ゆるふわ)ですが。

指針

コンセプトは「38em」。1行が読みやすいといわれる文字数を基準にした。やはり記事を書き続けるためには、記事が読みやすくなければならぬ。可変サイズは画像を置くのに面倒だ。左右のカラムも不要。もともとないけど。

サイト高速化という名目でサイトデザインから画像を排除。まあPSD弄るのが面倒だからなんですが、HTMLとCSSだけでレイアウト弄る方が性に合っています。文字サイズはもっと大きくても良かったかもしれない。

旧デザインで高評価を頂いていた、左上の十字ナビゲーションは削除。当時はいろいろ考えていたけども、ふわっとスクロールがたいして珍しくなくなったというのも大きい。前へ/次へリンクも読み切った後にあった方が自然かなと。

厨二病黒背景をやめた。黒背景だとアンダー寄りの写真が映えるのだけど、登山メモが増えるとハイキーな写真も増えそうだったので決断した。あとは何かしら嗜好の変化が起きたのか、黒背景で文字を追うのが辛くなった、てのもあり。

関連技術

アクセシビリティ関連。WAI-ARIAをいまどら氏の和訳を読んで、ざっと原文も見てみた程度。基本的にはHTMLのセマンティクスを使えということで、あまり利用するシーンはなかった。まあ動的UIもない個人ブログに多用する技術でもないのかなって印象。使っていきそうなのはrole="note"くらいだろか。アイコンフォント用に aria-hidden="true" も使った。アクセシビリティ関連はマークアップに気をつけてたくらいなので、そろそろどこぞの勉強会に参加してみようかなと思ってる。

• WAI-ARIA 1.0 Authoring Practices
• Using WAI-ARIA in HTML
• ARIA Techniques for WCAG 2.0
• Using WAI-ARIA in HTML (日本語訳)
• ARIA Techniques for WCAG 2.0 (日本語訳)

Note: WAI-ARIA = Accessible Rich Internet Applications

SEO関連。Schema.org対応は割とテキトー。Article か BlogPosting かで悩んで BlogPosting にした。でもimage必須とか、意図はわかるけど難しいね。

• Structured Data Testing Tool
• Enabling Rich Snippets for Articles
• Full Hierarchy - schema.org
• Microdata + schema.org を実際に使ってみる - terkel.jp
• Microdata を使ってみよう。サンプルソースで学ぶ Microdata - WWW Watch

今後の課題

モバイル対策とかてきとーもいいとこなので、なんとかせねばならぬ！ いちおモバイルフレンドリーテストには合格しているので、当初の目的は達成してはいる。あと検索ボックスだな...