【作り方の参考にも】WEB・アプリ制作に便利なワイヤーフレーム無料ツール11選【サンプル多数/テンプレート】

サイト制作で非常に重要なのがワイヤーフレーム。

色やデザインももちろん大切ですが、ワイヤーフレームがきちんとしていない場合、いくら他が良くても違和感が出ますよね。

そこで本日はWEBディレクター、WEBデザイナーの方必見のワイヤーフレームキット/ワイヤフレームツールをご紹介させていただきます。

比較的新しく公開されたものを掲載していますので、流行りの形になっているかと思います。

ぜひお仕事で活用してみてください。

Jolly UI

f:id:mamegoro:20180419144148j:plain

ナビゲーションメニューやスライダー、ボタンなど一般的なページ要素が揃っているワイヤーフレームキットです。

またこちらに関しては全て手書き風のデザインとなっているため、普段手書きでワイヤーを書いている方には親しみやすいかもしれません。

Jolly UIキットは有料版と無料版がありますが、基本的なものは無料版で全て補えるため、もし無料版を試して気に入ったら有料版をぜひ購入しましょう。

PSDとAIの形式でダウンロード出来ます。

Basiliq

f:id:mamegoro:20180419144327j:plain

PSD形式のワイヤーフレームキット。

手書き風のワイヤーフレームとなっており、全ての要素が紙の上に書かれたようなイメージになっています。

モバイルの画面に合うものも多いため、iPhoneやAndroidのモックアップと合わせて使うと真価が発揮できそうです。

Responsive Wireframes

f:id:mamegoro:20180419144344j:plain

PSD形式のワイヤーフレームキット。

筆者個人的にはこのキットが一番シンプルで実務的に使用できるので気に入っています。

全体的に単純かつシンプルな形になっているため、どんなサイトのワイヤーフレームを作る際にも活用でき、かつ細部まで拘ってあるので非常に精巧なワイヤーフレームが作成出来ます。

BeTheme Free UI Kit

f:id:mamegoro:20180419144353j:plain

BeThemeというWordPressの有料テーマをワイヤーフレームキットにしてPSDファイルで配布されています。

他の人が作ったワイヤーフレームは中々触る機会が少ないと思います。ぜひ一度ダウンロードして中身を確認してみてください。

The Ultimate Wireframe UI Kit

f:id:mamegoro:20180419144337j:plain

PSD形式のワイヤーフレームキット。
有料版と無料版がありますが、普通にサイトを制作する場合は無料版で十分。

元サイトのMediaLootは有料素材を数多く配信していますが、このワイヤフレームキットは無料で提供されており非常に精度が高いです。

このキットが1つあればほぼ事足ります。

App Mockup UI

f:id:mamegoro:20180419144409j:plain

iPhoneのサイズに特化したPSD形式のワイヤーフレームキット。
各要素は全てベクター画像になっているため、サイズの変更などが容易です。

iPhoneやiOSデバイス用にワイヤーを作りたい方にはコレ一択。

Bootflat UI Kit

f:id:mamegoro:20180419144417j:plain

PSD形式のワイヤーフレームキット。

カラフルなワイヤーフレームが特徴。
要望に合わせて使用するカラーを決めるだけで、イメージが伝わりやすいためオススメです。

使用できる要素も今回紹介した中では多い部類に入る為、このワイヤーフレームキットがあれば大抵のものは制作出来てしまいます。

別のワイヤーフレームなどと組み合わせれば、モックアップとしての活用もできそうです。

Basic Wireframe Kit

f:id:mamegoro:20180419144159j:plain

最近流行りのsketch用ワイヤーフレームキット。
UIデザイナーの方は使用されている方が増えてきているのではないでしょうか。

テンプレート自体は非常にシンプルで使いやすいです。

すべての要素が分かりやすく設計されているので、どんなサイトの構成やスタイルでも上手く使用することが出来ます。

Teracy

f:id:mamegoro:20180419144217j:plain

こちらもsketch用ワイヤーフレームキット。

ドロップダウン、入力ふxーづロ、パンくずリスト、スライドショーなどウェブサイトで基本の物は全て揃っています。

また、テラシーはモバイルアプリの要素も充実しているため、アプリのUIを作る方にもオススメです。

Blue Wireframes

f:id:mamegoro:20180419144308j:plain

こちらもsketch用ワイヤーフレームキット。

青と白で構成されたワイヤーになっています。

全ての要素がベクター画像で構成されているため、拡大縮小をした場合でも画質の低下なくキレイに使用が出来ます。

Savvy Sketch iOS Wireframe Kit

f:id:mamegoro:20180419144318j:plain

ウェブサイトやアプリでも勿論使用する事が出来ますが、このワイヤーフレームキットは特にiOSに特化しています。

iOSの新しい機能や細部まできちんと再現されているため、アプリのワイヤーフレームを考えたい人には必須のキットとなっています。

まとめ

いかがでしたでしょうか。
UI,UXのワイヤーフレーム、海外ではsketchに移行が進んでいるようで昨年や一昨年に比べ大分sketch形式での展開が増えたように感じます。

まだ日本では主流とまではいきませんが、今後増えてくるのは間違いないです。

ぜひ気になった方は今からお試し版を触ってみるのをオススメします。


※詳しい利用規約は各サイトでご確認ください。