Adobe XDがどんどん便利になってる！Web制作に使える無料素材のまとめ
Post on:2017年10月27日
sponsors
先週の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
