個別記事

前後の記事

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

この記事が属するカテゴリー
web&blog

ワイヤーフレームっつうと、デザインの前にページ内の構成要素を明確にするもので、作成に使うツールはイラレやフォトショップ、エクセルやパワーポイントなど、人によって違うのかもしれない。そんなワイヤーフレームをブラウザ上で簡単に作れるウルトラ ライトウェイトな 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 的に不親切な部分がある、などなど。まぁ、ここら辺は機能追加していく予定らしい。とりあえずは、パッと作成したい時には重宝するかも。今後に期待。

2006-09-30T17:14:37+09:00 | コメント (6) | トラックバック (1) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/392

このリストは、次のエントリーを参照しています: ブラウザ上でワイヤーフレームが作れるFrametastic:

SITE159 さんからのトラックバック
Lucky bag::blog: ブラウザ上でワイヤーフレームが作れるFrametastic
Lucky bag::blog: ブラウザ上でワイヤーフレームが作れるFrame... [続きを読む]
2006年10月04日 12:05

コメント

wu さんからのコメント

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

2006年10月03日 12:27
e-luck さんからのコメント [TypeKey Profile Page]

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

2006年10月03日 18:38
wu さんからのコメント

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

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

2006年10月03日 20:46
e-luck さんからのコメント [TypeKey Profile Page]

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

2006年10月03日 22:32
通りすがりです。 さんからのコメント

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

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

2006年10月12日 15:12
e-luck さんからのコメント [TypeKey Profile Page]

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

2006年10月13日 19:24

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)