Adobe XD

【無料で利用できる】Adobe XD おすすめUIキット【2020年版】

【無料で利用できる】Adobe XD おすすめUIキット【2020年版】を、Webサイト用とアプリ用に分けてご紹介していきます。

※基本無料で利用できるものをご紹介していますが、ライセンスや使用ルールがUIキットによって異なる場合がありますので使用の際は、注意してください。

Adobe XD UIキットを使用するメリット

Adobe XDを初めて使用される方は、「UIキットってなんだ?」という方もいるかと思いますが、UIデザインの作成、ワイヤーフレームの作成の時に非常に便利な「テンプレート」です。

具体的なメリットとしては

  • Adobe XDのデザインデータの作り方の参考になる
  • 初制作の業種サイトやアプリでも大体の雰囲気を掴める
  • デザインのマンネリ化からの脱却

レイヤーやコンポーネントの作り方も見るだけで目から鱗です。
UIキットを使ったことがない人は是非ダウンロードしてみましょう。

それでは、おすすめUIキットのご紹介。(Webサイト、アプリで分けています)

Webサイト用UIキット

Wires jp 2.0

Adobe XDのUIキットをまだ使ったことがない方は、とりあえず日本語UIキットの「Wire jp 2.0」をダウンロードしましょう。ワイヤー作りにも最適!

https://www.behance.net/gallery/67284971/Wires-jp

Bootstrap 4 UI

BootstrapのUIキット「Bootstrap 4 UI」。Bootstrapを使用するならマストでダウンロード!

https://xdresources.co/resources/bootstrap-4-ui

Africa Travel Co.

トラベル系のサイトを作るなら「Africa Travel Co.」のUIキットがおすすめ。英語サイトですが、レイアウトパターンやインスピレーションを得るには十分。

https://www.behance.net/gallery/90689863/Africa-Travel-Co-UI-Kit-Free-for-Adobe-XD

Seoulify – Fashion store

ファッション系のサイトを作成するときに参考になるUIキット「Seoulify – Fashion store」。ファッション系サイトらしい、余白の使い方や商品の見せ方の参考に。

https://www.behance.net/gallery/81701613/FREE-Seoulify-Fashion-store

Fashion Editorial UI Kit for Adobe XD

ファッション系のUIキットをもうひとつ「Fashion Editorial UI Kit for Adobe XD」こちらのほうがギャラリー感強めです。

https://www.behance.net/gallery/65315257/Fashion-Editorial-UI-Kit-for-Adobe-XD

FREE | Web UI & Animations

Adobe XDではプロトタイプ機能を使用してアニメーションの実装も作成可能です。アニメーションの参考になるUIキット「FREE | Web UI & Animations」。テーマも豊富で勉強になります。

https://www.behance.net/gallery/90222715/FREE-Web-UI-Animations-for-Adobe-XD

FREE Dashboard UI Kit for Adobe XD

ダッシュボード作成用のUIキット「FREE Dashboard UI Kit for Adobe XD」グラフ関連のコンポーネントが豊富です。

https://www.behance.net/gallery/60714355/FREE-Dashboard-UI-Kit-for-Adobe-XD

Bauhaus-Inspired

文字もレイアウトも癖強めのUIキット「Bauhaus-Inspired」バウハウスの巨匠が制作されています。インスピレーションを得るのにいいですね。

https://www.behance.net/gallery/66759837/Bauhaus-Inspired-UI-kit-for-Adobe-XD

アプリ作成用UIキット

Foodybite

U○er Eatsみたいなアプリを作りたいときにおすすめのUIキット「Foodybite」ログイン画面やマイページのデザインまで揃っていて使いやすいです。

https://www.behance.net/gallery/81858385/Foodybite-Free-UI-Kit-for-Adobe-XD

Free Neomorphic

デザイントレンドでもある「ニューモフィズム」を取り入れた、UIキット「Free Neomorphic」。「ニューモフィズム」な感じで作って!という時や、トレンドを取り入れたUIを作りたい時、すごく助かりますね!

白と黒バージョンがあります。

https://www.behance.net/gallery/93347841/Free-Neomorphic-UI-Kit-for-Adobe-Xd-Light
https://www.behance.net/gallery/92605077/Free-Neomorphic-UI-Kit-for-Adobe-Xd-Dark

BookStore Application UI Free Kit

本屋のアプリをベースにしたUIキット「BookStore Application」。
ログインUIや、検索UIの参考にも。

https://www.behance.net/gallery/79399497/BookStore-Application-UI-Free-Kit-Adobe-XD

Swissfund App Adobe XD

Adobe XDのプロトタイプで実装できるアニメーションの参考になるUIキット「Swissfund App Adobe XD+Auto animation + XD DOWNLOAD

https://www.behance.net/gallery/76784089/Swissfund-App-Adobe-XDAuto-animation-XD-DOWNLOAD

E-Comm Free UI Kit for Adobe XD

Eコマース系のUIキット「E-Comm Free UI Kit for Adobe XD

https://www.behance.net/gallery/72486017/E-Comm-Free-UI-Kit-for-Adobe-XD

UI Kit. Zen Real Estate Mobile App

ホテル予約、宿予約系のアプリを作りたい時に便利なUIキット「UI Kit. Zen Real Estate Mobile App

https://www.behance.net/gallery/85995969/Free-Download-UI-Kit-Zen-Real-Estate-Mobile-App

その他

60 XD Gradients

グラデーションのみを集めたキットです。これはありがたい!

https://www.behance.net/gallery/67772089/60-XD-Gradients-Free-Downlaod

XD Icon Set

Adobe XDで使えるシンプルなアイコンセット。

https://www.behance.net/gallery/67342437/XD-Icon-Set-Free-Downlaod

Free wireframe kits for Adobe XD

ワイヤーフレーム作成につかえる「Free wireframe kits for Adobe XD」シンプルで使いやすいコンポーネントが沢山あります。

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

Free Wireframes for Adobe XD

ワイヤーフレーム作成キットをもうひとつ。「Free Wireframes for Adobe XD」こちらのほうが、作り込み強めです。

https://www.behance.net/gallery/86750239/Free-Wireframes-for-Adobe-XD

Auto-Animate UI Kit

XDでアニメーション用のUIキット「Auto-Animate UI Kit

https://www.behance.net/gallery/72065227/Auto-Animate-UI-Kit-for-Adobe-XD

Apple Design Resources

Appleの「iOS/MacOS/WatchOS」用のUIキット。モックアップ作成の時に使えます。

https://developer.apple.com/design/resources/

Sticker sheets & icons

Googleが公開してるマテリアルデザイン用のUIキット「Sticker sheets & icon」

https://material.io/archive/guidelines/resources/sticker-sheets-icons.html

Adobe公式サイトでもUIキットが見れる

今回ご紹介したUIキットは沢山ある中のほんの一部です。

Adobeの公式サイトにもUIキットが紹介されていますので、よければ合わせてご覧ください。

https://www.adobe.com/jp/products/xd/resources.html#panel-3

最後に

今回は【無料で利用できる】Adobe XD おすすめUIキット【2020年版】を、Webサイト用とアプリ用に分けてご紹介いたしました。

デザイントレンドとか初業種のサイト制作の時とか、ほんとにUIキットが役に立ちます。もちろん、Webデザインの勉強やマンネリ解消にも、すごく効果的なのでデザインを考えるのに困ったら、UIキットを探してみるのはいかがでしょうか。