ワイヤーフレームとは
WEBサイト構築に欠かせないレイアウト設計図のことです。
制作現場では単に略して「ワイヤー」と言うこともあります。
デザイン・細かな内容は決めずに、ページ全体のレイアウト・コンテンツの配置を把握することが目的です。
Adobe XDとは
一言で説明するとデザインツールです。
操作がシンプルでかつ分かりやすくなっており、搭載機能がWEB制作に特化したものになっており、昨今ではUI・UXが重要視されている中でデザインのみではどのように動くかが伝わりません。
XDではプロトタイプ機能が備わっており、動的にデザインを見せることが出来ます。
公式URL
https://www.adobe.com/jp/products/xd.html
無料ダウンロード可能な高品質なXDテンプレート実用性ランキング!
第5位 Wireframing Kit for AdobeXD
とにかくシンプルでデザインを邪魔しないワイヤーフレームが描けます。
フォームのUIが他のテンプレートよりも数が多いです。
ダウンロードURL
https://medium.com/@jaisonjustus/wireframing-kit-for-adobe-xd-b8da95a82553
第4位 Adobe XD Desktop Wireflows
パーツがデフォルメされており、柔らかいイメージです。
ページごとのサイズがコンパクトで、サイトフロー図にも活用出来ます。
ダウンロードURL
https://www.behance.net/gallery/51863763/Adobe-XD-Wireflows-v1
第3位 Bootstrap 4 UI
人気No.1のWEBフレームワーク用のテンプレートです。
案件がBootstrap仕様であれば、このテンプレートが一番オススメです。
ダウンロードURL
https://xdresources.co/resources/bootstrap-4-ui
第2位 Wires
この記事で紹介するテンプレートの中でもっともパーツが多く多種多様です。
WEBサイトからシステム管理画面のスマホUXに到るまで、ほとんどのWEBプロジェクトを網羅することが出来ます。
ダウンロードURL
https://www.behance.net/gallery/55462459/Wires-wireframe-kits-for-Adobe-XD.html
第1位 Wires jp
実用度No.1!今すぐにでも使えます。弊社案件での利用実績ありです。
日本サイトで用いられるシンプルなレイアウト要素は全て用意されていて、
レゴブロックを組み立てるような感覚でワイヤーフレームを作成することが出来ます。
XDワイヤーフレームテンプレートの探し方
いかがでしたでしょうか。お気に入りのワイヤーテンプレートはありましたか?
もし、この中に無かった場合はご自身で探すのも手です!
Adobeが運営している「behance.net」というサイトがあります。
こちらサイトで「XD wire template free」と入力し検索すると沢山の無料ワイヤーテンプレートが見つけられます。
ここであなたのお気に入りのテンプレートを探してみてはどうでしょうか?