Webサイトのデザインを行う際、最近では手でタグを書いてコーディングするケースが増えています。そんな時にはスタイルシートを書いて、ブラウザをリロードして…を繰り返すかと思います。 そんな作業をされている方に使ってみて欲しいのがBindです。エディタとプレビューが一体化したWebデザインツールです。

Bindの使い方

BindはHTML/スタイルシートの他に、GSSという記法に対応しています。GSSはGrid Style Sheetの略で、マルチデバイスに対応したグリッドデザインを容易にする記法です。

こんな感じで左側にGSS/HTML/CSSの記述を行い、右側でプレビューします。

DOMを選択すると、右側にプロパティが出ます。ここで編集も可能です。

自分でDOMエレメントを追加して設計もできます。

BindでGSSを記述すると自動的にマルチデバイスに対応したスタイルシートに展開してくれます。保存する際には.bindというファイルになり、それをGitなどで管理できるようになっています。デザインのプロトタイプを手早く作るのに良さそうです。

BindはMac OSX用のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

almonk/Bind