Adobe XDがかなり便利になってる!スマホやWebサイトの制作に使える、UIやワイヤーフレームの無料素材のまとめ
Post on:2018年6月26日
Adobe XDは毎月アップデートされ、機能の強化もすごいですが、無料素材もどんどん公開されています。スマホやWebサイトのUIデザイン、ワイヤーフレーム、スタイルガイドの作成に役立つAdobe XDの無料素材をまとめました。

Adobe XDの基本的な使い方や新機能を学びたい人には、先週紹介したAdobe公式チュートリアルファイルがオススメです。
今回紹介するAdobe XDのUI素材は、ここから。
まずは、先日公式経由でリリースされたUIキットから。

Vault Security UI Kit for Adobe XD
20種類のカスタマイズ可能なスクリーンが含まれたUIキット。スタイルガイドも含まれており、勉強にもなります。今月アップデートされたAdobe XDの新機能も効果的に使用されています。

Klein wireframe kit for Adobe XD
主要なUIコンポーネントを含む、スマホ・デスクトップ対応のワイヤーフレームキット。

Fashion Editorial UI Kit for Adobe XD
UIキットは割とシンプルなものが多いですが、これはちょっと珍しくファッションサイトのUIキットです。画像やタイポグラフィの美しいデザインを学ぶことができます。

フレンドリーなUIを備えたEコーマス用のUIキット。カスタマイズ可能なUIコンポーネントが35種類含まれており、新しいプロジェクトに利用できるワイヤーフレームも揃っています。

Sky Travel UI Kit for Adobe XD
ホテル、フライト、アクティビティのリストからボタンやアイコンまで、旅行をテーマにしたスマホアプリやWebサイト用のUIキット。

Navigo Transportation UI Kit FREE for Adobe XD
60種類以上のカスタマイズ可能なスクリーンを使って、交通を扱ったスマホアプリやWebサイトを構築するのに役立つUIキット。

iPhone8とiPhoneXの両方の解像度で作成されたiOSアプリ用のUIキット。キャンディみたいなカラフルなカラースキームがかわいいです。

Wires, free wireframe kits for Adobe XD
スマホ用170種類、Web用90種類、240種類のUIコンポーネントと178種類のアイコンを備えたワイヤーフレーム用の素材。ランディングページやフォームのさまざまなワイヤーフレームが収録されています。

Adobe XD Freebie-UI Style Guide
スタイルガイド用のAdobe XD素材。こういうのを一つ用意しておくと便利ですね。

A complete Material Design color palette plus gradients
Material Designの美しいグラデーションが収録された素材。

Chrome, Firefox, Edge, Safariの各ブラウザの枠を収録した素材。
sponsors