RoughDraft.jsはモックアップ構築中のデザインを高速化するためのライブラリです。

Webサイトのデザインをしていて、同じ表現を繰り返し入力するのはとても面倒です。そこでRoughDraft.jsを使って楽をしましょう。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.32.25_thumb.1359514552.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.32.25.1359514552.png)
例です。繰り返し部分の処理が簡単になります。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.32.39_thumb.1359514556.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.32.39.1359514556.png)
JavaScriptの記述もいらず簡単に使えます。

data-draft-repeatで繰り返す回数が指定できます。さらにdata-draft-imageでplacehold.itの画像を埋め込めます。その他data-draft-textで適当な文字、data-draft-dateで適当な日付を埋め込んでくれます。一つのブロックを作れば良いだけなので変更も簡単で便利に使えるでしょう。

RoughDraft.jsはJavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

Webデザインの世界においてもライブラリを組み合わせて手早く組み立てようとする動きが盛んになってきています。RoughDraft.jsはテンプレートとして切り出してしまう訳ではないので、オーサリングツールで大枠を作って後は要素を埋め込むだけという手軽さが良いです。

Webデザインは創造性とデジタルなコーディングという二つの作業がミックスされた作業です。全てを創造性に任せてしまうと効率的な作業は望めません。創造性を損なわないようにしつつも、ライブラリやテンプレートを組み合わせることでいかに効率的に作業するかを考える必要があるでしょう。

RoughDraft.js

ndreckshage/roughdraft.js · GitHub