早くもAdobe XDのUI素材が!最近のWebデザインで使われているテクニックの勉強になるUI素材のまとめ

デザインでここぞという時に強みになるのが、引き出しがどれだけあるかです。
最近のWebデザインで使われているさまざまなテクニックの勉強になるUI素材、Adobe XD用、Photoshop用、Sketch用の無料素材を紹介します。

素材のキャプチャ

Guacamole
Adobe XD, Adobe Photoshop, Sketch

XDにはデフォルトでApple iOS, Google マテリアル, Microsoft WindowsのUIキットが利用できますが、Guacamoleでも70種類以上のUI素材、150種類以上のアイコン素材などが利用できます。
XD対応の素材はこれからどんどん増えてきそうですね。

Adobe XDってなんぞ?という方は下記を参考にしてください。

素材のキャプチャ

Mercatus UI Kit
Sketch

Eコマース用のサインアップ、メニュー、カート、プロダクト、ソーシャル、ロケーションの150種類以上のスクリーンを備えたUIキット。キャプチャはプロダクトの一部です。

素材のキャプチャ

Daily UI 30 Elements #2
Adobe Photoshop

ついお尻に目を奪われた鮮やかなレッドをプレイムカラーにした30種類のUIエレメントが揃った素材。ボタンやパネルに使うだけでなく、アイコンのワンポイントなど巧いですね。

素材のキャプチャ

Drone zone - website template
Adobe Photoshop

今年になってからグラデーションの使い方も少しずつ進化してきました。グラフィックに重ねたり、エレメントに使用したり、そのバリエーションも豊富です。

素材のキャプチャ

Olios PSD Template
Adobe Photoshop

ホワイトをベースにデザインされた美しいUI素材。グレーの使い方が非常に巧いです。

素材のキャプチャ

Blog PSD template
Adobe Photoshop

個人ブログ用のUI素材。個人のブログでもグラフィックは魅力的に見せるための重要な要素です。

素材のキャプチャ

Pilumnus PSD Template
Adobe Photoshop

グラフィックを見せるための背景に非常に面白いアイデアを採用しています。

素材のキャプチャ

Gratia PSD Template
Adobe Photoshop

アクセントカラーを効果的につかったモノトーンのUI素材。

素材のキャプチャ

Restaurant Blocks
Adobe Photoshop

飲食店用のさまざまなパネルのレイアウトが揃ったUI素材。

素材のキャプチャ

1357 Recipes App UI Kit
Sketch

お料理のレシピを見せる25種類のレイアウトが揃ったUI素材。

素材のキャプチャ

Free Portfolio PSD Template
Adobe Photoshop

ポートフォリオ向けのデザインで、ラインの使い方が独創的でよいアクセントになっています。

素材のキャプチャ

EXO One page PSD Theme
Adobe Photoshop

パープルは扱うのが難しいカラーですが、品よく美しくレイアウトされています。

素材のキャプチャ

Free UI Kit | Landing
Adobe Photoshop, Sketch

ポップなカラーが楽しいUI素材。ホワイトスペースをゆったりとることで、多彩なカラーを使ってもまとまりがあります。

素材のキャプチャ

EarthShift
Adobe Photoshop

ベーシックなUIエレメントとコンポーネントがまとめられた素材。

素材のキャプチャ

Phoenix Startup UI Kit
Adobe Photoshop, Sketch

スタートアップ用のさまざまなレイアウトが用意されたUI素材。

素材のキャプチャ

Eppe
Adobe Photoshop

6種類のヒーローヘッダ、50種類以上のUIエレメントが揃った素材。

素材のキャプチャ

FUK
Adobe Photoshop

カード型UIのさまざまなレイアウトを楽しめます。

素材のキャプチャ

Radish
Adobe Photoshop

高級感のあるファッション系のデザイン。全部は有料ですが、サンプルが無料で利用できます。

素材のキャプチャ

Global
Adobe Photoshop

タイムラインのようなナビゲーションを備えたポートフォリオ用のUI素材。

素材のキャプチャ

Food & Drink UI Kit
Adobe Photoshop, Sketch

さまざなカラーを備えた飲食物に対応できるかわいいカラーのUI素材。

素材のキャプチャ

Free Material Design UI Kit
Adobe Photoshop

Material Designのシンプルな構成でデザインされたUI素材。

素材のキャプチャ

FADE APP UI KIT
Adobe Photoshop

この碧、好きな色です!iOSとAndroidに対応したフラットスタイルのUI素材。

top of page

©2017 coliss