Adobe XD UIキットのおすすめ18選【無料ダウンロード】 | 您所在的位置:网站首页 › 用xd做ui › Adobe XD UIキットのおすすめ18選【無料ダウンロード】 |
この記事では、Adobe XDに欠かせないUIキットのおすすめを「18個」紹介します。 もちろん無料でダウンロードできるものに絞って紹介していますので、気に入ったUIキットがあれば全部ダウンロードしておくと、いざという時とても便利ですよ。 UIキットとは?Adobe XD UIキットのおすすめ18選・全て無料でダウンロードできますResponsive Resize KitFashion Influencer UI Kit for Adobe XDWires jp 2.0Hand-drawn Wireframe UI Kit for Adobe XDWiresAdobe XD Desktop WireflowsFree Wireframe Kit For Adobe XDBullexeCommerce – Free UI KitE-Comm Free UI KitLogin UI Kit – Vol 1 Free DownloadAfrica Travel Co.Free Dashboard UI KitBootstrap 4 GUIApple iOS – MacOS – WatchOSのUIキットsticker sheet for Adobe XDMaterial Design Kit /Android Nougat Free GUIDesign toolkits for Windows apps(Windows UI)まとめUIキットとは? Adobe XD用に作られた、デザインテンプレートのことです。ワイヤーフレームの制作に特化したものや、iOSやandroidのUIを再現したもの、オシャレにデザインされたものまで、幅広くあります。 UIキットをダウンロードしておけば、ウェブサイトやアプリのデザインを高速で作ることが可能です。また、どれも洗練されたテンプレートばかりで、見ているだけでインスピレーションが湧き上がってきます。デザインに迷走している時にもUIキットはオススメです。 どのテンプレートも、登録されているアセットを使えば「高速どころか爆速で」ラフデザインが作れます。詳しくは別記事で解説してるので、ぜひ目を通してみてください。 ![]() Adobe XD UIキットのおすすめ18選・全て無料でダウンロードできますResponsive Resize Kit Responsive Resize Kit メインビジュアルにダイナミックな写真を取り入れた、定番ながら飽きのこないモダンなウェブデザインのUIキットです。 3パターン「PC・タブレット・スマホ」のレスポンシブデザインのアートボードが制作されており、とても使いやすいテンプレートです。ウェブ制作でXDを使っているならダウンロードしておきたいUIキットです。 Fashion Influencer UI Kit for Adobe XD Fashion Influencer UI Kit for Adobe XD ファッションブランドのECサイト向けデザインをコンセプトにしたUIキット。 とにかくモダンでお洒落。写真やテキストの配置、全体的な余白の取り方が洗練されていて、見ているだけで勉強になります。 PCサイズのみのUIキットですが、モダンなファッション系サイトのデザインの参考にしたい方にはもってこいのUIキットです。 Wires jp 2.0 Wires jp 2.0 日本人製作者により、日本向けに制作された人気のUIキット。WEBサイトのワイヤーフレームはこのUIキットひとつあれば事足りることが非常に多いです。 縦長のコーポレートサイトやLP、コンセプトサイトなど、日本で定番となっているページ構成がフォローされた素晴らしいテンプレートです。 トップページのレイアウトを始め、ボタン類、フォーム(インプット)、ヘッダーフッターナビや、販売プランに至るまで、幅広く対応出来ます。日本語を想定した文字サイズになっているので、初心者の方はアセットの文字スタイルを参考に、見出しや文章のサイズを決めるのもありです。勉強になりますよ。さらに、PCサイズ、スマホサイズでレスポンシブに対応しているので非常に重宝します。制作者の方々への感謝が止まらないUIキットです。 Hand-drawn Wireframe UI Kit for Adobe XD Hand-drawn Wireframe Adobe公式でも紹介されている「手書き」をコンセプトにしたUIキットです。 素晴らしいの一言です。WEBとモバイルのコンポーネントが全て手書きで丁寧に作ってあり、人間味のある暖かいワイヤーフレームを制作できます。 しかも、フォントは「Tekton Pro」という手書きフォントが使われているので、自由にカスタマイズできます。Adobe Fontsに収録されているフォントなので、そのままスっと使えます。 個性を出したい時に全力で使いたいUIキットナンバーワンです。 Wires Wires WiresもAdobe XDのメニューからアクセスできる定番のUIキット。 PCサイズとSPサイズの2ファイルる構成です。「Wires jp」よりも海外サイトで見かけるようなダイナミックなレイアウト。 プライスボードやフォームのインプットなど多数パターンがあり、フッター周りのレイアウトも複数あるので、とても使い勝手がよくダウンロードしておいて間違いのないUIキットのひとつです。 Adobe XD Desktop Wireflows Adobe XD Desktop Wireflows とても可愛らしいワイヤーフレームが作れる人気のUIキット。 パーツがほぼ全て角丸なので好みは分かれますが、グリッドレイアウト、WEBサイト、eコマース、ダッシュボードまでフォローしてあり、ウェブサイトのワイヤー作りの即戦力になってくれます。 クライアント次第では、こういった個性のあるワイヤー素材を使って提案すると好印象を与えられますよね。 Free Wireframe Kit For Adobe XD Free Wireframe Kit For Adobe XD シンプルで最低限の味付けしかしていないベーシックなワイヤーフレーム。 ノートPC、スマホ、タブレットのモックアップを使ったデザインで、アプリ向けサービスのプローモーションサイトなどに活用するテンプレートです。シンプルなので逆にデザインをイメージしやすく使い勝手の良いキットです。 Bullex Bullex ダークブルーをメインカラーに、アクセントカラーがポップで良い感じです。曲線をふんだんに使った美しいデザインで、アイソメトリック系のイラストにも合いそうなのが特徴です。 UIキットにはPCサイズしかおさめられてないですが、曲線を生かしたWEBデザインの参考になります。 eCommerce – Free UI Kit eCommerce – Free UI Kit シンプルで洗練されたeコマース向けUIキットです。 シンプルでモダンなデザインなので、ファッション系だけでなく、家具や小物系のECサイトなど幅広く使えるテンプレート。カートや決済周りまでデザインパターンがあるので、販売系のサイトを制作する時は参考になります。 アートボードはPCとスマホサイズのレスポンシブで構成されていて、汎用性も高いUIキットです。 E-Comm Free UI Kit E-Comm Free UI Kit こちらはAdobeの公式で紹介されている「eコマース」向けのアプリのUIキットです。 白とグレーをベースにカラフルなアイコンが映える、ポップなデザインが特徴的なテンプレートです。商品の紹介だけでなく、ユーザーとのチャット画面やログイン周りもきちんとフォローされているので、ECサイト系のアプリのワイヤー制作で活躍します。 Login UI Kit – Vol 1 Free Download Login UI Kit – Vol 2 その名の通り「ログイン」に特化したUIキット。 デザインパターンは当然のことながら、ログイン項目やユーザービリティーの面でも非常に参考になります。ログイン周りのデザインはどうしても短調になりがちなので、ダウンロードして一見の価値ありです。 Africa Travel Co. Africa Travel Co. 全画面で写真を使ったダイナミックでインパクトのあるトラベル系UIキット。 旅行代理店のウェブサイトを想定したつくりで、プラン表や料金、予約ページなども用意されています。レスポンシブに対応してPCとスマホの2サイズのUIテンプレートがフォローされているのも嬉しいところです。 赤いアクセントカラーと写真とのコントラストが、洗練された雰囲気を醸し出してますね。かっこいいです。 Free Dashboard UI Kit Free Dashboard UI Kit ダッシュボードに特化した、パステルカラーがお洒落なマテリアルデザインのUIキット。 ダッシュボードに関連する、ログイン周り、ユーザーやチームの管理、グラフ、カレンダーにいたるまで幅広くデザインされています。色味がアイソメトリック系のイラストにも合うデザインなので、WEBやアプリ制作のインスピレーションを貰える優良なテンプレートです。 Bootstrap 4 GUI Bootstrap 4 All Components ウェブ系ワイヤーフレームの定番、BootstrapのUIキット。 BootstrapならではのUIが網羅的にテンプレート化してあるので、Bootstrapの案件が来た時にはとても便利です。独自のCMSを制作する時に、管理画面はBootstrapで作っちゃおうみたいな事もあるので、ぜひダウンロードしておきたいテンプレートです。 Apple iOS – MacOS – WatchOSのUIキット Apple iOS – MacOS – WatchOSのUIキット Adobe公式で紹介されている、Appleの「iOS/MacOS/WatchOS」用のUIキット。 Apple公式がデベロッパー向けに配布しているテンプレートで、iPhoneやApple Watch向けのアプリケーションや、maxOS向けのアプリケーションをデザインする時にUIをそのまま使えて重宝します。 ダークモードにも対応しているので、「ライト/ダーク」でパターンが必要な時にも助かります。とりあえずダウンロードしておいて間違いないUIキットです。 sticker sheet for Adobe XD sticker sheet for Adobe XD Adobe XDのメニューからダウンロードサイトに飛べるマテリアルデザイン公式のUIキット。 シンプルで最低限ながら、必要なアイコン素材、ツールバー系、ナビゲーションやスマホのレイアウトがデザインされていて、ワイヤーフレームの作成で使用頻度の高いUIキットです。 AndroidアプリやWEBのワイヤー用に、ダウンロードしておくと良いでしょう。 別記事で、このUIキットのアセットを使ってワイヤーを作る方法も紹介しているので、ぜひご覧ください。 ![]() Material Design Kit /Android Nougat Free GUI Android Nougat Free GUI ひとつ前に続き、こちらもAndroidのマテリアルデザインのUIキットです。「sticker sheet for Adobe XD」にはないUIやテンプレートが含まれているので、合わせてダウンロードがオススメです。 Design toolkits for Windows apps(Windows UI) Design toolkits for Windows apps Adobe XDのメニューからダウンロードページにアクセスできる、マイクロソフト公式のWindowsのUIキットです。Windowsのアプリをデザインする時に、コントロールやレイアウトの参考になります。 まとめ 本日は、Adobe XDのオススメUIキットを紹介いたしました。いかがでしょうか?これが全て無料でダウンロードできるって凄いですよね。 Adobe XDでデザイン制作が早い理由のひとつに、充実したUIキットの存在があります。 今日紹介した以外にも数多くの無料UIキットがありますので、是非ご自身でもチェックして見ると新しい発見があって楽しいですよ。 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |