UI・UXデザインに欠かせないAdobe XD。そんなAdobe XDには予めAppleのiOSやGoogleのAndroid向けのUI Kitをダウンロードして利用できるようになっていますが、Web上には無料で配布されているUI Kitもあります。
そんなわけで、良さそうなAdobe XD用のUI Kitをピックアップしてみました。
目次
- 凝ったデザインSocial Meet Up UI Kit FREE
- 綺麗・オシャレAtro Mobile UI Kit (Freebie)
- メンターサービスをイメージMentorMe UI Kit
- PC向けダッシュボードFREE Dashboard UI Kit
- スタイルガイドは参考にしたいPawtastic UI Kit
- EコマースなE-Comm Free UI Kit
- こんなアニメーションができる!Auto-Animate UI Kit
- 2バージョンPersional finance v2.1
- マップアプリなNavigo Transportation UI Kit FREE
- 旅行用にSky Travel UI Kit
- チュートリアルもあるTractiv UI Kit
- セキュリティアプリなVault UI Kit
- iPhoneやmacOsのUI Kit
- AndroidのUI Kit
- Adobeサイトの紹介コーナー
凝ったデザインSocial Meet Up UI Kit FREE
https://www.behance.net/gallery/72907227/Meetio-UI-Kit
少し変わったサンプルデザイン、そして80以上の画面デザインがあり、しかもプレビュー時の画面の動きがけっこう凝った作りになっており、Adobe XDでここまでできるのかと思わせてくれます。
「Download .xd file」のリンクからダウンロードできます。
綺麗・オシャレAtro Mobile UI Kit (Freebie)
https://gumroad.com/l/atro-freebie
綺麗、オシャレなデザインに仕上がってて、細かいところまで確認できるので勉強にもなります。プロトタイプのリンク設定はなされていないので、プレビューしたら十字キーで画面を動かして見ることができます。
「公平な価格を設定して下さい: $」の入力欄に「0」と入力、「これが欲しいです!」をクリックして進めてメアドの入力もすると、無料でダウンロードできます。
メンターサービスをイメージMentorMe UI Kit
https://www.behance.net/gallery/65354875/MentorMe-UI-Kit-for-Adobe-XD
メンターサービスを想定したアプリのUIデザインになっています。使用しているアイコンを一覧に並べている画面もあり、作業効率を上げるという意味では参考にしたいですね。
PC向けダッシュボードFREE Dashboard UI Kit
https://www.behance.net/gallery/60714355/FREE-Dashboard-UI-Kit-for-Adobe-XD
Adobe XDはスマホ向けのアプリだけではなく、PC向けのUIデザインも行えます。サンプルはダッシュボードのデザインUI Kitとなっています。
スタイルガイドは参考にしたいPawtastic UI Kit
https://www.behance.net/gallery/62932019/Pawtastic-UI-Kit-for-Adobe-XD
これもPC向けですが、UI Kit、サイドバーイメージ、プロトタイプ、ワイヤーフレームと、デザインするにあたり、各パーツのスタイルガイドをしっかりと作り込んでいるので修正や流れを把握しやすい作りになっているのではないかと思います。ぜひともチェックしておきたい制作ガイドです。
EコマースなE-Comm Free UI Kit
https://www.behance.net/gallery/72486017/E-Comm-Free-UI-Kit-for-Adobe-XD
Eコマースを想定したアプリのUI Kitサンプルです。スタイルガイド的なところでコンポーネントという箇所に様々なパーツサンプルがあります。
こんなアニメーションができる!Auto-Animate UI Kit
https://www.behance.net/gallery/72065227/Auto-Animate-UI-Kit-for-Adobe-XD
UI Kitデザインというよりも、Adobe XDで表現できるアニメーションのやり方をサンプルで見せてくれる感じです。プロトタイプ画面で、見たいサンプルの画面を選択してプレビューをクリックでアニメーションが見れます。
2バージョンPersional finance v2.1
https://gumroad.com/l/PERSONAL_FINANCE
iPhone 6、7、8向けのサイズと、iPhone X向けの2サイズ向けのデザインが用意されています。
これも、「公平な価格を設定して下さい: $」の入力欄に「0」と入力、「これが欲しいです!」をクリックして進めてメアドの入力もすると、無料でダウンロードできます。
マップアプリなNavigo Transportation UI Kit FREE
https://www.behance.net/gallery/60581581/Navigo-Transportation-UI-Kit-FREE-for-Adobe-XD
マップを使ったアプリとなっていて、思わずサービスとして使いたくなりそうなになります。やはり雰囲気を感じさせるデザインは大事ですね。
旅行用にSky Travel UI Kit
https://www.behance.net/gallery/61170611/Sky-Travel-UI-Kit-for-Adobe-XD
旅行用のサンプルデザインUI Kitです。紫ベースのデザインとなっていて、ここは好みが分かれそうです。
チュートリアルもあるTractiv UI Kit
https://www.behance.net/gallery/70103089/Tractiv-Adobe-XD-UI-Kit
アクティビティをトラックするためのアプリをイメージしたUI Kitです。チュートリアルサンプルも表示される設計となっています。
セキュリティアプリなVault UI Kit
https://www.behance.net/gallery/66784311/Vault-UI-Kit-for-Adobe-XD
セキュリティ用のアプリのデザインUI Kitです。
iPhoneやmacOsのUI Kit
https://developer.apple.com/design/resources/
紹介するまでもないですが、Appleの公式iPhoneやmacOs向けのUIKitが配布されています。dmgファイルで配布されているため、Windowsで開く場合には、7-Zipを使うといいでしょう。
Android用UI Kit
こちらもおなじみのAndroidのUI Kitです。
Adobeサイトの紹介コーナー
https://www.adobe.com/jp/products/xd/resources.html#panel-3a
Adobeさんが紹介しているUI Kitのコーナーです。こちらも色々とチェックしてみてください。