レスポンシブWebデザインにはもちろんしてません（笑）必要性もなく。

以下変更点や思った点です。

このブログのアウトラインアルゴリズム
このブログのHTML5バリデートチェック
→FacebookのインサイトタグとMTのプラグインが引っかかってしまいますが。

見出しと本文がないところにsectionは使用しないというルールは遵守しました。

<aside>は制作者側の意図に依存と参考書籍に買いてあったので、ちょっと悩ましかった感じ。

セマンテック上、ブログ記事と直接的に関係していないのであれば<article>から出して<aside>で囲むのが理想らしいですね。

が、そこは制作者の意図次第で、<article>の中に入れるのもありとのことだったので、今回は入れました。

<img>タグのtitleとaltの使い分けもHTML5でより厳密になり、altのフォールバックとしての役割が強まったということで、そこは意識しました。

altには画像のタイトルではなくて、イメージの代役になるものを入れなくてはいけないということで、最初よくわかりませんでしたが、本の参考例を見て理解しました。

今後使いたいもの
<form>関連
→placeholderが使えないのが特に残念

IEがすべてのバージョンで壊滅状態みたいなので、今回は取り入れませんでしたが、form関係は便利なものばかりなんですね。
 

あまり使い所がなくて、サイドナビの見出しにtext-shadowを使っただけ。見た目にはほとんどわからないレベル。

Webフォントがなぁ。ダウンロードっていうのが痛い。WinユーザーにもMacと同じ見え方になってくれたらいいのに。

マルチカラムは使ってみたいですね。
 

3カラム→2カラムに変更
●3カラムだと記事の部分の幅が狭くて、ソースコード載せたりするとき、窮屈だった。
●墨をモチーフにした背景がiPhoneなどの解像度が1000を切るものではサイドメニューに隠れてしまっていた。

という2点の問題があり、2カラムに変更。

ちなみにコンテンツ幅は926pxという自分の誕生日合わせ（笑）
 

サイドナビを左側に移動
右手でマウスを使うという前提上、サイドナビ的なものは右側に合った方がクリックしやすいというユーザビリティがありますね。

でもこのブログでは検索で単体ページを見にくる人が大半なので、サイドバーのクリック率は低い。

なので、クリックしてもらうべきは記事内の関連リンクや詳細ページへのリンクだったりするので、ナビは左側に追いやりました。

TwitterやFacebookのウィジェット
余計なテキスト情報が増えて、鬱陶しくなるので入れるのはやめておきました。

Facebookのコメントプラグインは入れました。
 

背景
今まで「戦う」イメージに合うように、右側に墨が飛び散るモチーフを入れていたけれど、取りました。

閲覧環境によって、見えなかったりサイドナビに隠れることがあったので。

代わりに日本を印象付けるものとして、背景に和紙の柄をうっすら入れてます。
 

文字
今まで文字と背景のコントラストが強く、長い文章を読むにはちょっときつい感じがあったので、そこを弱めて読みやすさを意識してます。

ReederというMac用RSSアプリのコントラスト感を参考にしました。とても読みやすかったんですよね。

今まで1行あたりの文字数を30文字程度とし、人間が読みやすいレベルを意識していました。

ただ、読みやすいことが読むスピードを上げるとは限らず、むしろ文字数が多い方が早く読めるという研究結果の話を「UIデザインの基礎知識」から知りました。

それを受けてMAXで40文字程度になるよう増やし、サイズも大きめにしてます。

ブログってポイントポイントでかいつまんで斜め読みしてもらう事の方が多いですしね。

50文字レベルもやってみたのですが、やっぱそれだと目が疲れすぎました。

フォントはすべて明朝・セリフ体に統一しました。ロゴのテイスト的にも揃えたくなったんですよね。

Windows環境で見ると、明朝体がダサいのが困りものですね。Win、Macで共にデフォルトで入っているフォントを選んでますが、やっぱWinで見るとなんともダサい。

ビル・ゲイツはセンスがないと言っているジョブズの言葉が思い出されます。

 

これからはもっと生産的な記事を更新していけるように努めていきたいと思います。

【参考図書】
徹底解説HTML5マークアップ ガイドブック
HTML5読本 ～ウェブの最先端を読み解く！
UIデザインの基礎知識
デザインの教室
デザイニング・インターフェース

【特にソースを参考にしたサイト】
HTML5.JP - 次世代HTML標準 HTML5情報サイト
W3C HTML5 Logo
Adobe HTML5 特設サイト