【無料で利用できる】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キットを探してみるのはいかがでしょうか。
