Adobe XDで簡単にプロトタイプを作れる！おすすめの無料テンプレート15選

ホームページやECサイトなどを構築する際、全体のデザインや表示などを決めるためにプロトタイプを作成することがあります。
プロトタイプの作成は主にUI/UXデザイナーが行いますが、ゼロから作るのは時間も体力も必要です。

今回は、プロトタイプを作成できるAdobe XDで使える、おすすめの無料テンプレート15選を紹介します。
テンプレートを応用できる部分は有効活用することで、整ったデザインを少しでも短時間で作成することができますので、ぜひ参考にしてみましょう。

Adobe XDとは

Adobe XD CC

Adobe XDとは、Adobe社が提供しているプロトタイピングツールです。

UI/UXデザイナー向けのオールインワンツールで、日本語にも対応しています。
スピード感と直感的な操作が特徴で、コーディングなどの知識のない方でも簡単にホームページやモバイルアプリのデザインとプロトタイプの作成が可能です。

ページレイアウトそのもののテンプレートや、ボタンやアイコンなどの種類を複数揃えたキットなど、Adobe XDで使用できるテンプレートも数多くあります。好みのテンプレートを組み合わせて配置すれば、手軽にオリジナリティのあるプロトタイプを作成できます。

Adobe XDでワイヤーフレーム制作するなら知っておくべき機能｜ferret [フェレット]

Adobe XDで使えるおすすめ無料テンプレート15選

1.iOS 10 GUI

iOS 10のUIを完全再現したテンプレートです。
Adobe XDだけでなく、Photoshop、Illustrator、Sketchなどにも対応しています。

2.Sliders templates made with XD

Sliders templates made with XD - XDGuru.com

画像を中心としたランディングページのテンプレートです。
企業の写真と企業理念やアピールしたい項目を付け加えるだけで一気に雰囲気のあるページに仕上げることができます。

3.Colorful login page

Colorful login page - XDGuru.com

ログインページのテンプレートです。
入力項目は3つで、メールアドレス、パスワード、規約への同意となっています。
堅苦しさのないデザインですので、一般向けのサービスを展開している企業や個人の方におすすめです。

4.Travely XD landing page template

Travely XD landing page template - XDGuru.com

ランディングページのテンプレートです。
波状のデザインが目に入りやすく、インパクトのあるデザインとなっています。

5.Pricing landing page template

Pricing landing page template - XDGuru.com

値段の記載に特化したランディングページのテンプレートです。
ベーシックなデザインで、どんなジャンルのホームページにも合わせやすい構成になっています。

6.Photostock App Concept

Photostock App Concept - Adobe XD - Freebie Supply

インスタグラムのようなSNSを模したテンプレートです。
写真や動画を見やすく配置できるので、ファッション関連をはじめとしたビジュアルをメインにしたホームページにおすすめです。

7.Bullex

Bullex - Cryptocurrency Website made with Adobe XD - Freebie Supply

曲線のデザインが独特なテンプレートです。
ブルーを貴重とした爽やかなデザインで、かつ遊び心も感じられるので、企業のホームページとして使用してみてはいかがでしょうか。

8.A foodie ui kit

A foodie ui kit freebie for Adobe Xd. on Behance

食べ物の写真をアップロードすることに特化したSNSを想定したテンプレートです。
写真や動画のほかレシピなどの情報を掲載でき、そのままレシピを保存することも可能です。
もちろんブログとしての使用もおすすめです。

9.Free iWatch Product Card

Free iWatch Product Card - XDGuru.com

時計を例にあげた商品ページのテンプレートです。
モノトーンで洗練されたデザインとなっています。
色を変更して自社のホームページの雰囲気に合わせた調整をすることもできます。

10.8pt Grid for Web by Bogdan Slomchinskiy - Dribbble

8pt Grid for Web by Bogdan Slomchinskiy

8ポイントのグリッドを表示するテンプレートです。
Adobe XDではスピードが重視されるため、グリッドが表示されません。
グリッドをつけて作業したい方におすすめです。

11.Tablet Wireframes

Tablet Wireframes - Adobe XD by Ben Mettler - Dribbble

タブレット用のワイヤーフレームを2種類搭載したテンプレートです。
縦と横の2パターンがありますので、各種ホームページに応用可能です。

12.Wireframing Kit for Adobe XD

Wireframing Kit for Adobe XD – Jaison Justus – Medium

豊富なパターンのワイヤーフレームを、白黒で提供しているテンプレートです。
シンプルなデザインのワイヤーフレームで、高い汎用性がおすすめです。

13.Wires, free wireframe kits for Adobe XD

Wires, free wireframe kits for Adobe XD on Behance

青色のグラデーションで構成されたテンプレート＆素材集です。
600種類以上の素材が入っていますので、たくさんの素材を用意しておきたい方におすすめです。

14.Adobe XD Mobile Wireflows

Adobe XD Mobile Wireflows on Behance

スマートフォン向けのワイヤーフレームがケース別にまとめられたテンプレート集です。
用途ごとに整理されていますので、必要なものだけ選んで利用できます。

15.Minimal Chic

Minimal Chic (iOS UI Kit Freebie) on Behance

スマートフォン向けのECサイト用のテンプレートです。
16パターン用意されており、このテンプレートひとつでECサイトを開設することも可能です。

まとめ：テンプレートを活用してプロトタイピング

Adobe XDはチュートリアルも配布されているため、初心者でも比較的取り組みやすいツールです。
テンプレートは、初心者の方にとってデザインの参考にもなります。

ベテランデザイナーの方はもちろんですが、UI/UXデザインやワイヤーフレーム制作を任されるようになったばかりのWebディレクターや、今後やってみたいと考えている方は、まずはテンプレートを使ってプロトタイプを1つ仕上げてみることからはじめましょう。