Adobe XDがどんどん便利になってる!Web制作に使える無料素材のまとめ
Post on:2017年10月27日
先週のCreative Cloudアップデートで、Adobe XDが正式版としてリリースされました。Adobeユーザーはもちろん、Windowsがメイン環境の人にもUI/UXデザインの本命と言えるでしょう。
昨日のAdobe Creative Cloud道場のライブ動画ではAdobe XDの近い将来の機能として、タブレット用のレイアウトを作成したら、人工知能Adobe Senseiでスマホ用の複数のレイアウト候補を自動作成し、あとはそこから選び出せるようになるとのことです。作業には時間をかけず、クリエイティブに時間をかけることができますね。
Adobe XDでWebサイトやスマホアプリを制作する際に役立つ、ユーザーフローやワイヤーフレーム、グリッド、スタイルガイド、UIコンポーネントなどの無料素材を紹介します。

グリッド関連のAdobe XDの素材

レスポンシブ対応のグリッドを設計する際、8pxを基準値にしたものが主流となっています。グリッドをはじめ、エレメントのサイズ、マージンなどを設計する際にも応用が利く数値です。

Bootstrapで採用されている1170px(12カラム、幅: 67/68px、溝: 30px)のグリッド素材。
ユーザーフロー・ワイヤーフレーム関連のAdobe XDの素材

Wires, free wireframe kits for Adobe XD
Webサイト用90種類、スマホアプリ用170種類が揃ったワイヤーフレーム素材。240種類のコンポーネントも用意されており、組み合わせて利用できます。

iOS User Flows for Sketch & Adobe XD
iOS用のさまざまなユーザーフローがまとめられた素材。

スマホ用のさまざまなコンテンツが揃った素材。

上記と同作者による、デスクトップ用のさまざまなコンテンツが揃った素材。

タブレット用のワイヤーフレーム素材。

ミニマルなワイヤーフレーム素材。拡大すると、しっかりコンテンツが揃っています。
スタイルガイド関連のAdobe XDの素材

Material Design Color Palettes & Gradients
Material Designの使いやすいカラーパレットとグラデーションがまとめられています。

カラー・フォント・アイコン・コントロールを定義するスタイルガイド。

Adobe XD Freebie-UI Style Guide
カラーやフォントをはじめ、ボタン、カード、ツールチップ、パンくずなどのUI要素を定義するスタイルガイド。

ナビゲーション30種類とフッタ30種類のスタイルをまとめた素材。
UI Kit関連のAdobe XDの素材

70種類以上のUI素材、150種類以上のアイコン素材などが利用できるUIキット。Photoshop用、Sketch用も揃っています。

Aphrodite UI KIT - 4 Profile Styles
プロフィールのスクリーンデザイン、4スタイルが揃ったUI素材。XDでのデザイン作業も充実しています。

Minimal Chic (iOS UI Kit Freebie)
ミニマルにデザインされたコマース用のUIキット。

Windows 10の「Fluent Design System」用のコンポーネントが揃ったUIキット。

ブログ用のさまざまなコンポーネントがまとめられたUIキット。

Material Design Components sticker sheet for Adobe XD
Material Designで使用されるさまざまなコンポーネントがまとめられたUIキット。

コンテンツ用のUIをデザインするためのテンプレート素材。
sponsors