Adobe XDで簡単にプロトタイプを作れる！おすすめの無料テンプレート15選
ホームページや
EC
サイトなどを構築する際、全体のデザインや表示などを決めるためにプロトタイプを作成することがあります。
プロトタイプの作成は主に
UI
/
UX
デザイナーが行いますが、ゼロから作るのは時間も体力も必要です。
今回は、プロトタイプを作成できるAdobe XDで使える、おすすめの無料テンプレート15選を紹介します。
テンプレートを応用できる部分は有効活用することで、整ったデザインを少しでも短時間で作成することができますので、ぜひ参考にしてみましょう。
Adobe XDとは
Adobe XDとは、Adobe社が提供しているプロトタイピングツールです。
UI
/
UX
デザイナー向けのオールインワン
ツール
で、日本語にも対応しています。
スピード感と直感的な操作が特徴で、コーディングなどの知識のない方でも簡単にホームページやモバイル
アプリ
のデザインとプロトタイプの作成が可能です。
ページ レイアウト そのもののテンプレートや、ボタンやアイコンなどの種類を複数揃えたキットなど、Adobe XDで使用できるテンプレートも数多くあります。好みのテンプレートを組み合わせて配置すれば、手軽にオリジナリティのあるプロトタイプを作成できます。
Adobe XDでワイヤーフレーム制作するなら知っておくべき機能｜ferret [フェレット]
Adobe XDで使えるおすすめ無料テンプレート15選
1.iOS 10 GUI
iOS Design Kit - Free iOS GUI for iPhone & iPad
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つ仕上げてみることからはじめましょう。
