Start with a Style Guide。

Matt Steeleという人のウェブサイトのリデザインについての記事を読んだ。海外では中々の人気を誇るExpression EngineからDB不要のフラットファイルなCMSであるStatamicに乗り換えたというのもイマドキだなーと思ったけど、まずStyle Guideを書いてそれを元に作っていったというのが、自分の作り方と重なる部分が多くて印象的だった。

実際にはSketchInkscape等のベクター画像編集ソフトウェアでデザイン・カンプと想定されるコンテンツをマークアップしただけのスタイル・ガイドを作成をまず作成し、適宜クラスやどうしても必要なdiv要素を追加しつつCSSを書くという作業フローなんだと思う。もちろんSketchの前に紙でのプロトタイピングとかがあっても良い。デザイン・カンプをHTMLで再現するというこれまでにもあった作業フローとは似て非なるものである、というあたりをうまく説明できれば広まりそうだなと思っている。

元記事の筆者はこうすることにより「骨がしっかりとする」と表現していて、セマンティクスがどうとか言うよりうまい表現だなと思った。