Style Guideから始めるウェブデザイン

Start with a Style Guide

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

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

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