テンプレートを厳選！Adobe XD無料ワイヤーキット

昨日もデザインツールのプラグインについて説明しましたが、今日もデザインツールに関して書こうとしています。
昨日紹介したSketchと並ぶ勢いのAdobe XD。今日はそんなXDの無料で使えるワイヤーフレームをピックアップしてご紹介します。
ただ今回紹介するものは海外の作者さんが中心となるので、中身をよくみてダウンロードしてみてください！

簡易ワイヤーデザインツールとしては敷居の低いXDですが、公式のワイヤーフレームはみなさんご存知なのではないでしょうか。

ここからダウンロードページに飛べます

ただこれだと色が決まっているので（線も塗りつぶしもすべて青）すこし使いづらいんですよね…
それを解決する素敵なUIキットを厳選したので紹介していきます。

グラデーション・クールなデザインを知りたい！にぴったりなキット

UIデザイナーのDaumantas Banys氏によって作られたこちら。グラデーションを多く使っており非常にスタイリッシュなデザインフレームです。

www.behance.net

Behance

https://www.behance.net/gallery/64228123/Explord-FREE-UI-Kit-for-Adobe-XD

細部まで作り込まれているので非常にかっこいいです。

モバイル用ワイヤーキット

www.behance.net

Behance

https://www.behance.net/gallery/66495471/Free-wireframe-kits-for-Adobe-XD

こちらはモバイル用の簡易的なワイヤーフレームキットです。
「あんまり作り込みすぎるとデザインと間違えられる」とも言われるワイヤーフレーム。ここまで簡易的だと「一旦骨組みですよ」ということがクライアントにも伝わりやすくいいですよね。
そしてこのセットの凄いところは「ページが多く、コンテンツが幅広く用意されているところ」です。

コンテンツが多い

簡易的とはいえ、これを組み合わせてワイヤーが作れるのであればうれしいですよね。だいぶ時短になる気がします。

マップの作り込みが凄い！

マップを始め、各々細かい部分の作り込みはきちんとされているので、うまく組み合わせればそれなりにクオリティのあるワイヤーフレームが作れるのではないでしょうか。

適切なデザインツール選びで時短する

Sketchのプラグインは数が多くあって網羅できないなあ…とは感じていましたが、XDのワイヤーフレームも現段階でこんなにあるとは驚きでした。
Adobeのブランド力なのかもしれませんが、まだまだ発展途上のXDに対するユーザーの愛を感じますね。
最近ではnoteさんで「#できるぞAdobeXD」というタグが出るほど人気になってきたXD。
Sketchも使いやすいですが、入りやすさはまだXDの方が強い気がします。
とはいえまだSketchを中心に使っている会社さんなどは多いので、初学者さんは周辺の環境も加味しつつ剪定できるといいですね！

本当ならアイコンから全部自分で作れた方がいいのかもしれませんが、多忙なデザイナーであればあるほどショートカットをうまく使っていくことは大切です。
見本も入っているので、デザインの参考にもできる、まさに一石二鳥のコンテンツなのでみなさんぜひ使ってみてください。
賢く使って上手に時短して、その分力を入れたい部分のクオリティをあげていけたらいいですね！