スタイルガイド
スタイルガイドの存在は今となっては新しいものではなく,
- GitHubのStyleguide:社外にスタイルガイドを公開した,
はじめての会社だと考えているとのこと。 - スターバックスのStyle Guide:スターバックスのブランドを守るために作られている。完全に手作り。
- MailChimp's pattern library:細かいところまで設計されているのと,
MailChimpそのものがかなり優秀なデザイナーが集まっている会社なので, すごく参考になる資料。 - Website Style Guide Resources:Anna Debenham氏とBrad Frost氏によるスタイルガイドを含めたリソースサイト。ゲストも出演しているPodcastも参考になる。
スタイルガイドを書くためのツール
これらのスタイルガイドのような文書は最大の弱点を持っているとし,
スタイルガイドを生成するツールは,
斉藤氏は,
- Knyle Style Sheets
(KSS):元GitHubで働いていたKyle Neath氏が作ったもの。Rubyで書かれている。このおかげでこの後に続くツールがたくさん出てきたとのこと。 - kss-node:Node.
jsで書かれたKSS。 - Hologram:カスタマイズ性が高く,
様々なことを簡単に更新することができる。その代わりにコードもたくさん書く必要がある。Rubyで書かれている。
まだ導入していない人はどれか一つで構わないので,
また,
プロトタイプ
ブラウザ上でデザインする際,
そして,
プロトタイプの作成を加速させるツールも多く存在しています。斉藤氏はいろいろなツールを試したそうですが,
- BrowserSync:エディタで保存すると,
ブラウザ上でリロードしてくれる単純なツール。Node. jsで動作する。あるブラウザ上での操作を複数ブラウザに反映させることができる機能を持っていて, とても有用。 - JS Bin:HTML,
CSS, JSを記述できるエディタと, プレビュー機能がついているWebサービス (競合が多い中でJS Binを使っている理由として, 作者のRemy Sharpが好きなことを挙げていました)。思いつきな実験的な実装とか, ごく簡単なデモを行うために利用しているとのこと。 - Google Chrome Canary:開発者ツール上でファイルを直接編集しながら微調整することはよくある。
プログレッシブエンハンスメントとWebの連続性
斉藤氏が次に話題として挙げたのが,
このプログレッシブエンハンスメントの本質については,
Webという大きい視点でも似たようなことが起こってきたと話します。
「ブラウザやデバイス,
これはJeremy Keith氏が言った通り,
プログレッシブエンハンスメントのための戦略
斉藤氏は,
1つは,
if('querySelector' in document
&& 'localStorage' in window
&& 'addEventListener' in window) {
// モダンブラウザ
}
斉藤氏曰く,
もう1つは,
例えば,
- [地図を見る]
ボタンをクリックして, 外部サイトで地図を見てもらう。 - [地図を見る]
ボタン自体は削除して, Ajaxを使ってコンポーネント内にインタラクティブマップ (Google Mapsなど) を配置する。 - CSS Transformsも使えるのであれば,
[地図を見る] ボタンををクリックした時に, コンテンツサイズを変えずに全域にインタラクティブマップを表示する。
このようにコンポーネントごとに体験レイヤーを評価していきます。
斉藤氏は,