早くもAdobe XDのUI素材が!最近のWebデザインで使われているテクニックの勉強になるUI素材のまとめ
Post on:2016年8月4日
デザインでここぞという時に強みになるのが、引き出しがどれだけあるかです。
最近のWebデザインで使われているさまざまなテクニックの勉強になるUI素材、Adobe XD用、Photoshop用、Sketch用の無料素材を紹介します。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-01.png)
Guacamole
Adobe XD, Adobe Photoshop, Sketch
XDにはデフォルトでApple iOS, Google マテリアル, Microsoft WindowsのUIキットが利用できますが、Guacamoleでも70種類以上のUI素材、150種類以上のアイコン素材などが利用できます。
XD対応の素材はこれからどんどん増えてきそうですね。
Adobe XDってなんぞ?という方は下記を参考にしてください。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-02.png)
Mercatus UI Kit
Sketch
Eコマース用のサインアップ、メニュー、カート、プロダクト、ソーシャル、ロケーションの150種類以上のスクリーンを備えたUIキット。キャプチャはプロダクトの一部です。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-03.png)
Daily UI 30 Elements #2
Adobe Photoshop
ついお尻に目を奪われた鮮やかなレッドをプレイムカラーにした30種類のUIエレメントが揃った素材。ボタンやパネルに使うだけでなく、アイコンのワンポイントなど巧いですね。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-04.png)
Drone zone - website template
Adobe Photoshop
今年になってからグラデーションの使い方も少しずつ進化してきました。グラフィックに重ねたり、エレメントに使用したり、そのバリエーションも豊富です。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-05.png)
Olios PSD Template
Adobe Photoshop
ホワイトをベースにデザインされた美しいUI素材。グレーの使い方が非常に巧いです。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-06.png)
Blog PSD template
Adobe Photoshop
個人ブログ用のUI素材。個人のブログでもグラフィックは魅力的に見せるための重要な要素です。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-07.png)
Pilumnus PSD Template
Adobe Photoshop
グラフィックを見せるための背景に非常に面白いアイデアを採用しています。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-08.png)
Gratia PSD Template
Adobe Photoshop
アクセントカラーを効果的につかったモノトーンのUI素材。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-09.png)
Restaurant Blocks
Adobe Photoshop
飲食店用のさまざまなパネルのレイアウトが揃ったUI素材。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-10.png)
1357 Recipes App UI Kit
Sketch
お料理のレシピを見せる25種類のレイアウトが揃ったUI素材。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-11.png)
Free Portfolio PSD Template
Adobe Photoshop
ポートフォリオ向けのデザインで、ラインの使い方が独創的でよいアクセントになっています。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-12.png)
EXO One page PSD Theme
Adobe Photoshop
パープルは扱うのが難しいカラーですが、品よく美しくレイアウトされています。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-13.png)
Free UI Kit | Landing
Adobe Photoshop, Sketch
ポップなカラーが楽しいUI素材。ホワイトスペースをゆったりとることで、多彩なカラーを使ってもまとまりがあります。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-14.png)
EarthShift
Adobe Photoshop
ベーシックなUIエレメントとコンポーネントがまとめられた素材。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-15.png)
Phoenix Startup UI Kit
Adobe Photoshop, Sketch
スタートアップ用のさまざまなレイアウトが用意されたUI素材。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-16.png)
Eppe
Adobe Photoshop
6種類のヒーローヘッダ、50種類以上のUIエレメントが揃った素材。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-17.png)
FUK
Adobe Photoshop
カード型UIのさまざまなレイアウトを楽しめます。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-18.png)
Radish
Adobe Photoshop
高級感のあるファッション系のデザイン。全部は有料ですが、サンプルが無料で利用できます。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-19.png)
Global
Adobe Photoshop
タイムラインのようなナビゲーションを備えたポートフォリオ用のUI素材。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-20.png)
Food & Drink UI Kit
Adobe Photoshop, Sketch
さまざなカラーを備えた飲食物に対応できるかわいいカラーのUI素材。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-21.png)
Free Material Design UI Kit
Adobe Photoshop
Material Designのシンプルな構成でデザインされたUI素材。
![素材のキャプチャ](http://coliss.com/wp-content/uploads-201603/2016080305-23.png)
FADE APP UI KIT
Adobe Photoshop
この碧、好きな色です!iOSとAndroidに対応したフラットスタイルのUI素材。
sponsors