ITエンジニア/デザイナ向けにオープンソースを毎日紹介

手早く、かついい感じにワイヤーフレームが作れそうですよ!

Webサイトやスマートフォンアプリを作成する際にはワイヤーフレームを作ることが多くなってきました。そこで一旦アイディアをまとめて、それから実際に形にしていく訳です。そのためのツールもたくさんあります。

しかしそういったワイヤーフレームツールの多くが画像を四角とバツ印で表示します。その他のパーツも四角や線ばかりで何となくイメージがわきづらいというケースも多いようです。そこで使ってみたいのがWireframe & UI Kitです。

Wireframe & UI Kitの使い方

Wireframe & UI KitはEPSファイルで配布されていますので、Wireframe & UI Kitを素材として画像編集ソフトウェアやドローツールを使ってワイヤーフレームを作っていくのが良いようです。

何と言ってもそのビジュアルの汎用性の高さが利点です。

ナビゲーションメニュー。パン屑、ロゴ、カルーセルのマークなど多彩に揃っています。
ナビゲーションメニュー。パン屑、ロゴ、カルーセルのマークなど多彩に揃っています。

ページエレメント。こちらも画像はちゃんと画像とし、動画もプレーヤがついていて分かりやすくなっています。
ページエレメント。こちらも画像はちゃんと画像とし、動画もプレーヤがついていて分かりやすくなっています。

フォームエレメント。パーツがたくさん用意されています。ドロップダウンが開いたときもあって便利そうです。
フォームエレメント。パーツがたくさん用意されています。ドロップダウンが開いたときもあって便利そうです。

インタフェース系。グラフやカレンダー、地図などこれまた色々使いどころがありそうです。
インタフェース系。グラフやカレンダー、地図などこれまた色々使いどころがありそうです。

がっつり作り込むと時間を要してしまってワイヤーフレームの意味がありませんが、あまり漠然としているとイメージが掴みづらいのも実情です。その中間をとってくれるようなUIキットとしてWireframe & UI Kitは利便性が高そうですね。

Wireframe & UI KitはEPS製のソフトウェア(個人、企業ユース可。販売不可)です。

C.ROWE – Wireframe Kit

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2