ワイヤーフレーム作成に使えるツール・素材をまとめてみました～。
ワイヤーフレームの素材 ———————————————————————-
- 成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
- Adobe XD で編集可能なワイヤーフレーム素材。
- C.ROWE – Wireframe Kit
- フォーマットは EPS なので、Illustrator で編集できます。
- 個人でも商用でも無料で利用可能。
- Foundation 3 Stencil Sets
- CSS フレームワークの Foundation が配布している UI キット。
- フォーマットは PDF なので、Illustrator で編集できます。
- Webpage Wireframe Stencil
- フォーマットは AI なので、Illustrator で編集できます。
- iPhone Sketch Elements AI
- フォーマットは AI なので、Illustrator で編集できます。
- App Wireframes Kit
- フォーマットは AI なので、Illustrator で編集できます。
- 個人でも商用でも無料で利用可能。
ワイヤーフレーム作成ツール ———————————————————————-
ワイヤーフレームを作成するのに便利なツールをまとめました。
- Pencil Project
- ローカルマシンインストール型。
- 無料で使えます。
- 使用感レビュー 書きました。
- Justinmind: Interactive wireframes for web and mobile
- 無料版で使えるのは、各パーツのウィジェット、PDF・画像書き出し、リンク機能のみです。
- Prott – Rapid prototyping tool. Now gets an app.
- 有料プランじゃないとワイヤーフレームは描けない。
ワイヤーフレームを書くツールをまとめているページ
– 22 Good Prototype and Wireframe Tools for Mobile and Web Design
プロトタイプ作成ツール ———————————————————————-
プロトタイプを作成するのに便利なツールをまとめました。基本的に画像を読み込んでインタラクションを付けるツールです。
- POP – ペーパープロトタイピング | Mobile App Prototyping Made Easy
- 紙に書いたワイヤーフレームを読み込んで、ホットスポットを設定できるツール。
- Free Web & Mobile Prototyping (Web, iOS, Android) and UI Mockup Tool | InVision
- デザイン画像を読み込んでインタラクションを設定できる。
他にも見つけたら追記します！
