ワイヤーフレームっつうと、デザインの前にページ内の構成要素を明確にするもので、作成に使うツールはイラレやフォトショップ、エクセルやパワーポイントなど、人によって違うのかもしれない。そんなワイヤーフレームをブラウザ上で簡単に作れるウルトラ ライトウェイトな 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 的に不親切な部分がある、などなど。まぁ、ここら辺は機能追加していく予定らしい。とりあえずは、パッと作成したい時には重宝するかも。今後に期待。
Comments
これは面白いですね!
作らなければいけない図がたくさんあるので、早速使ってみようかしら。
でしょでしょ？
あと、イラレみたいな整列とか出来たら良いのにとか思ったり。
図って例のやつっすか？
例のです! (ｳｯｼｯｼ
パートがパートなだけに数が多くて、ラフ製作に使おうかなーなんて思って今日いぢってたんですけど、ちょっと難しそうですね。
でも、学校のプロジェクタとかでレイアウト説明するときとか重宝しそうです!
ですよねぇ、確かにあのパートはそこら辺が大変そう。
Frametastic は、作ったものが html とかに書き出せれば色々と応用できそうなんですけどね。
って、今確認したらバージョンが 0.2 に上がって、作ったワイヤーフレームのソースが V キーで表示できるようになってますね。
あの、Mac ユーザーなのですが、ウェブプランニングに必要な図は全部Omni graffle で作っています。まわりにつこてる人が少ないのですが、自由度が高く、各オブジェクトのスタイル設定が簡単＆大変便利です。これで作った資料は仕上がりが美しく、代理店の人などにもよく褒められます。
ユーザーが少なくなって無くなってしまうと悲しいので、布教してみました。
そういえば、マックには Omnigraffle がありましたね。
すんごい昔にちょっと使ったことありました。
随分と進化したんでしょうね。体験版でも試してみようかなぁ。