ワイヤーフレーム作成に使えるツール・素材をまとめてみました~。
この記事の目次 非表示
ワイヤーフレームの素材
- 成功法則が詰まった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.
有料プランじゃないとワイヤーフレームは描けない。
ワイヤーフレームを書くツールをまとめているページ
プロトタイプ作成ツール
プロトタイプを作成するのに便利なツールをまとめました。基本的に画像を読み込んでインタラクションを付けるツールです。
- POP – ペーパープロトタイピング | Mobile App Prototyping Made Easy
紙に書いたワイヤーフレームを読み込んで、ホットスポットを設定できるツール。 - Free Web & Mobile Prototyping (Web, iOS, Android) and UI Mockup Tool | InVision
デザイン画像を読み込んでインタラクションを設定できる。 - Free mobile & web prototyping (iOS, iPhone, Android) for designers – Marvel
未試用
他にも見つけたら追記します!
現場からは以上です。それでは、またッ!!!


