Today: Yesterday: Total: Online:
カテゴリー
その他
  • RSS1.0
  • RSS2.0
  • atom0.3
  • valid XHTML1.0
  • valid CSS2
  • Credit
RSSリーダーで購読する | この日記のはてなブックマーク数 | プロフィール
コメントが一番多い記事(233コメント):人の心理の裏をかくホームページ集客術:リピータになってもらうためには
ツイートが一番多い記事(94ツイート):ちょっと待て!twitterやfacebookに子供の写真を掲載する親達への警告
いいねが一番多い記事(574いいね):facebookスパムに要注意。なりすましの見分け方とアカウント乗っ取りの手口(2013年度版)

カテゴリー » フリーソフト October 17, 2013

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


・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/
— posted by midilin @ 01:36PM | Comment(0)

コメントをどうぞ。名前(ペンネーム)は必須です。URLはオプションです。

Comment Form
名前(ペンネーム): 文字色:
リンク作成 »
スパム対策画像認証(右に表示されている画像の番号を入れてください):
下のアイコンをクリックするとテキストエリアに挿入できます
:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~ (QQ)

←メールアドレスを入力しておくと midilin がレスをした際に通知します: