ワイヤーフレームをHTML出力できるソフト

・iPlotz
http://iplotz.com/index.php
説明ページ
http://www.webcreatorbox.com/tech/website-wireframe-tools/
出来上がったワイヤーフレームをHTMLで表示
jQueryを使ったアコーディオンやタブも実際に動作するとのこと
無料版は制限があり
無料版だと5つまで
http://penguinbox.net/web%E3%81%AE%E3%81%8A%E5%BD%B9%E7%AB%8B%E3%81%A1%E6%83%85%E5%A0%B1/99/
・Prototyper
http://www.justinmind.com/
説明ページ
http://www.find-job.net/startup/wireframetool10
インストールしてみたが、PDF出力はフリー版でもいける。
HTML出力は有料のPro版を使わないとダメなようだ。
・Pencil
http://pencil.evolus.vn/
FireFox のアドオンとして提供されている。
Windows、Mac、Linuxに対応しているワイヤーフレーム作成ツール
スマホのパーツ有り。
HTML、PDF、PNGのエクスポートなどが可能
HTMLはExport Document→Single web page→All pages in the document
でフォルダを指定すれば、HTML出力(画像出力+貼付けされたHTML)される
日本語フォント使用可能
使用例
「Pencil」を使って行う、皆が幸せになれるペーパープロトタイピング
http://annex-forkwell.heroku.com/2012/04/23/paper_prototyping
あとは、最近googleから公開された「Google Web Designer」を使うと
描写したものが、HTML5+CSS3で書き出せるので
Google Web Designerでワイヤーフレームを書くのもありかも。
Google Web Designer
https://www.google.com/webdesigner/
・その他ワイヤーフレームソフト
全部無料で試せる!厳選ワイヤーフレーム作成ツール10
http://www.find-job.net/startup/wireframetool10
楽しく作れる!スマホアプリ/サイトのワイヤーフレーム・モックアップ作成支援ツール7選
http://dev.classmethod.jp/smartphone/wireframe-tools-7/

タイトルとURLをコピーしました