ブラウザ上でワイヤーフレームが作れるFrametastic

ワイヤーフレームっつうと、デザインの前にページ内の構成要素を明確にするもので、作成に使うツールはイラレやフォトショップ、エクセルやパワーポイントなど、人によって違うのかもしれない。そんなワイヤーフレームをブラウザ上で簡単に作れるウルトラ ライトウェイトな Frametastic なんてのを見つけた。ちなみに、今のところは Firefox のみでしか使えないみたい。

What I’ve really longed for is an ultra-lightweight, simple tool for producing wireframes right inside the browser. No flash, no java, darn it - no server even - just a pure HTML / CSS / Javascript solution.

作成例

ローカルにダウンロードして index.html をブラウザで開き、おもむろにドラッグしてボックスを作成、クリックでタイトルを入力、キーボードの R キーを押してサイズを入力ってな感じ。ボックスに色を付けたい場合は下部右の Swatches からドラッグ & ドロップするか、もしくは対応する数字キーを押下。Swatches をダブルクリックして好みの色を Hex 値で指定することもできる。

ただ、まだまだ発展途上なんで、色々と歯がゆいところもある。マウスでボックスのリサイズができないことや、セーブやロードは出来るけどリロードやウィンドウを閉じてしまうと全て消えてしまうこと、UI 的に不親切な部分がある、などなど。まぁ、ここら辺は機能追加していく予定らしい。とりあえずは、パッと作成したい時には重宝するかも。今後に期待。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/19

SITE159 - Lucky bag::blog: ブラウザ上でワイヤーフレームが作れるFrametastic (2006年10月 4日 12:05)

Lucky bag::blog: ブラウザ上でワイヤーフレームが作れるFrame... 続きを読む

Comments

wu said:

これは面白いですね!
作らなければいけない図がたくさんあるので、早速使ってみようかしら。

e-luck said:

でしょでしょ?
あと、イラレみたいな整列とか出来たら良いのにとか思ったり。
図って例のやつっすか?

wu said:

例のです! (ウッシッシ
パートがパートなだけに数が多くて、ラフ製作に使おうかなーなんて思って今日いぢってたんですけど、ちょっと難しそうですね。

でも、学校のプロジェクタとかでレイアウト説明するときとか重宝しそうです!

e-luck said:

ですよねぇ、確かにあのパートはそこら辺が大変そう。
Frametastic は、作ったものが html とかに書き出せれば色々と応用できそうなんですけどね。
って、今確認したらバージョンが 0.2 に上がって、作ったワイヤーフレームのソースが V キーで表示できるようになってますね。

通りすがりです。 said:

あの、Mac ユーザーなのですが、ウェブプランニングに必要な図は全部Omni graffle で作っています。まわりにつこてる人が少ないのですが、自由度が高く、各オブジェクトのスタイル設定が簡単&大変便利です。これで作った資料は仕上がりが美しく、代理店の人などにもよく褒められます。

ユーザーが少なくなって無くなってしまうと悲しいので、布教してみました。

e-luck said:

そういえば、マックには Omnigraffle がありましたね。
すんごい昔にちょっと使ったことありました。
随分と進化したんでしょうね。体験版でも試してみようかなぁ。