Front-end Style Guides

2014年1月14日 著

Five Simple Stepsの『Front-end Style Guides』を読みました。Five Simple Stepsのシリーズは、A Book Apartのそれほど内容的に濃くはないけれど、さらっと1〜2時間で読み終えられる程度の文字量なので、概要をつかむのにはもってこい。お値段もそれなりで本書は2ユーロ、自分が買ったときは日本円で331円だったかな。まぁとにかく買いやすいし、直接My Kindleに送れるのが地味に便利だなぁと。

本書を執筆したのはAnna Debenham氏。Clearleftでインターンした際に初めてWeb向けにつくられたスタイルガイドと接したのだそう。個人的にレスポンシブWebデザインが出始めた頃から？この手のドキュメントというかリソースが注目され始めたように思っていて、最近だとBrad Frost氏が盛んに言うAtomic Designもそうだけど、そういうのって10年くらい前にテーブルレイアウトからCSSレイアウトに移行した時から誰しも多かれ少なかれ実践してきたことじゃないのかな？さておき、一言でスタイルガイドと言っても結構種類があるものだということを本書で実感：

• Content and editorial style guides（例：Welcome | Voice and Tone）
• Branding and identity style guides（例：Firefox branding -- Mozilla Style Guide -- Mozilla）
• Development style guides and coding standards（例：CSS · Styleguide · GitHub）
• Human interface guidelines（例：iOS Human Interface Guidelines: Designing for iOS 7）
• Front-end style guides（例：mezzoblue § Markup Guide）

そしてWeb向けのフォーマットとして本書で類別されているものには、

• Style tiles（解説：Style Tiles）
• Element collages（解説："Reading Is Fundamental Element Collages," an article by Dan Mall）
• Style prototypes（解説：Our New Responsive Design Deliverable: The Style Prototype | Sparkbox）
• Pattern portfolio
• Pattern primer（解説：Adactio: Journal--Pattern primer）
• Pattern lab（解説：Pattern Lab | Build Atomic Design Systems）
• Interface inventory（解説：Interface Inventory | Brad Frost Web）

......といったものがある、と。それぞれがどういう特長をもっているかが具体例と共に示されているのでまぁ分かるんですけど、なんかもう全部まとめて一つにできないものか？って思ってしまうのも事実。微妙にプロジェクトの進行と絡む部分があるから、一元化するというのは若干、乱暴かもしれませんけど。