ワイヤーフレームなど、ラフに作りたいという時は手書きなどが向いています。それをドローのソフトウェアなどできっちりと書き始めてしまうと、些細な部分にこだわってしまって目的であるプロトタイプがなかなか作れなかったりします。 そこで使ってみたいのがWired Elementsです。Web上でラフなデザインを再現できるWebコンポーネント集です。

Wired Elementsの使い方

こちらがデモです。枠などがラフですね。

デモです。スライダーなどを使ってスタイルを変えられます。

色を変えたりもできます。

リストボックスの例。

プログレスバー。

ラジオボタン。

テキストエリア。

カード。

Wired Elementsは <wired- ではじまるカスタムタグを定義しています。あらかじめ用意されているコンポーネントを組み合わせてデザインを作っていきます。元々良い感じに乱れたデザインになっているので、細かいことを気にせずワイヤーフレームが作れるでしょう。

Wired ElementsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Wired Elements wiredjs/wired-elements: Collection of elements that appear hand drawn. Great for wireframes.