Adobe XDがどんどん便利になってる!Web制作に使える無料素材のまとめ

先週のCreative Cloudアップデートで、Adobe XDが正式版としてリリースされました。Adobeユーザーはもちろん、Windowsがメイン環境の人にもUI/UXデザインの本命と言えるでしょう。
昨日のAdobe Creative Cloud道場のライブ動画ではAdobe XDの近い将来の機能として、タブレット用のレイアウトを作成したら、人工知能Adobe Senseiでスマホ用の複数のレイアウト候補を自動作成し、あとはそこから選び出せるようになるとのことです。作業には時間をかけず、クリエイティブに時間をかけることができますね。

Adobe XDでWebサイトやスマホアプリを制作する際に役立つ、ユーザーフローやワイヤーフレーム、グリッド、スタイルガイド、UIコンポーネントなどの無料素材を紹介します。

Adobe XDのキャプチャ

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

Adobe XDの素材のキャプチャ

8pt Grid for Web

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

Adobe XDの素材のキャプチャ

Bootstrap Grid for Adobe XD

Bootstrapで採用されている1170px(12カラム、幅: 67/68px、溝: 30px)のグリッド素材。

ユーザーフロー・ワイヤーフレーム関連のAdobe XDの素材

Adobe XDの素材のキャプチャ

Wires, free wireframe kits for Adobe XD

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

Adobe XDの素材のキャプチャ

iOS User Flows for Sketch & Adobe XD

iOS用のさまざまなユーザーフローがまとめられた素材。

Adobe XDの素材のキャプチャ

Adobe XD Mobile Wireflows

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

Adobe XDの素材のキャプチャ

Adobe XD Desktop Wireflows

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

Adobe XDの素材のキャプチャ

Tablet Wireframes - Adobe XD

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

Adobe XDの素材のキャプチャ

ミニマルなワイヤーフレーム素材。拡大すると、しっかりコンテンツが揃っています。

スタイルガイド関連のAdobe XDの素材

Adobe XDの素材のキャプチャ

Material Design Color Palettes & Gradients

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

Adobe XDの素材のキャプチャ

Free Adobe Xd Styleguide

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

Adobe XDの素材のキャプチャ

Adobe XD Freebie-UI Style Guide

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

Adobe XDの素材のキャプチャ

Navigations & Footers

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

UI Kit関連のAdobe XDの素材

Adobe XDの素材のキャプチャ

Guacamole

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

Adobe XDの素材のキャプチャ

Aphrodite UI KIT - 4 Profile Styles

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

Adobe XDの素材のキャプチャ

Minimal Chic (iOS UI Kit Freebie)

ミニマルにデザインされたコマース用のUIキット。

Adobe XDの素材のキャプチャ

Windows Fluent Design Concept

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

Adobe XDの素材のキャプチャ

Blog Components for Adobe Xd

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

Adobe XDの素材のキャプチャ

Material Design Components sticker sheet for Adobe XD

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

Adobe XDの素材のキャプチャ

Adobe XD - UI Template

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

top of page

©2017 coliss