Lucky bag::blog: 2006年09月アーカイブ

月別アーカイブ 2006年09月

前後の月

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

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

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

In-Browser Wireframe Prototyping with Frametastic

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) |

斜線やストライプの背景画像を Photoshop とかで作ると、色を変えたくなった時にそのたび作り直しってのが面倒。便利で使ってる人も多いかもしれない secondlife さんの Background Image Maker でもそれは同じかな。んで、Photoshop とかで作る場合に、線に色を付けて作るんではなくて、色を付けたい部分を透過にして作っておいて CSS で background-color を指定するやり方にすれば、色を変えたくなった時はCSS で背景色を変更するだけで良いじゃんって、Super Stripes を見て目からうろこ状態。早速インスパイヤしてみた！

使ってみたい GIF 画像をダウンロードして、CSS で背景画像に。あとは、背景色で好みの色を指定するだけ。ちなみに、サンプルでは背景色を #fa0 と指定している。