Pocket

Desktop HD

どうも、yohicです。
先日フリーのPSDをご紹介したんですが、そういえば最近Sketchばかり使ってるなあと思いまして。。。
最初はワイヤー描くときだけ使ってたんですが、だんだんデザインもこっちを使うようになってしまいましたね。
結局画像の加工するのでphotoshopが無いと全部はできないのですが、半分以上はSketchで完了してしまうのではないかなと。
どちらにしてもphotoshop使うなら、Sketchいらないじゃないという議論もあったのですが、そこはまた別の機会に書いてみたいと思います。

今回はワイヤーフレームを描くときに使えそうなUIキットを30個選んでみました!

スポンサーリンク



webサイトのワイヤーフレーム

まずはWebサイトのワイヤーフレームで使えそうなUIキットを10個ほど選んでみました。

01: Atomic Design Template Sketch Resource

01
http://www.sketchappsources.com/free-source/2160-atomic-design-template-sketch-freebie-resource.html
社内で噂になっていたアトミックデザインのワイヤーフレームテンプレートです。アトミックデザインをしっかり調べたい。

02: Wireframe Templates Sketch Resource

02
http://www.sketchappsources.com/free-source/2129-db-wireframe-templates-sketch-freebie-resource.html
グリッドが引いてあって便利ですね。印刷して使うのも良さそう。

03: Wirebase Wireframing Kit  Sketch Resource

03
http://www.sketchappsources.com/free-source/1979-wirebase-wireframing-kit-sketch-freebie-resource.html
色々なパーツが揃ってますね。こういうのがあるとワイヤー描くとき楽ですよね。

04: Responsive Wireframe Template Sketch Resource

04
http://www.sketchappsources.com/free-source/1884-responsive-wireframe-template-sketch-freebie-resource.html
レスポンシブデザインのワイヤーフレームです。
このまま使うのは厳しそうですが、参考になるところは多いです。

05: Onepager Website Wireframe Sketch Resource

05
http://www.sketchappsources.com/free-source/1836-single-web-page-wireframe-sketch-freebie-resource.html
サイトのワイヤーフレームです。
ベースとして使えそうですね。

06: Basic Wireframe Kit Sketch Resource

06
http://www.sketchappsources.com/free-source/1804-basic-wireframe-kit-sketch-freebie-resource.html
こちらも色々なパーツが揃ったテンプレートです。使い所が多そうですね。

07: Chrome Mockup Wireframe Sketch Resource

07
http://www.sketchappsources.com/free-source/1195-browser-mockup-wireframe-sketch-freebie-resouce.html
ブラウザのモックアップです。実際にブラウザの枠にあてはめてみると印象変わりますよね。

08: Free responsive wireframes Sketch Resource

08
http://www.sketchappsources.com/free-source/57-free-responsive-wireframes.html
レスポンシブデザインのワイヤーフレームです。

09: Google Material Design UI Sketch Resource

09
http://www.sketchappsources.com/free-source/597-google-material-design-ui-sketch-app.html
あれ?これはSketchにデフォルトで入ってましたっけ?
自分で入れたんだっけ・・・よく使います。

10: Simple Shapes Wireframe Sketch Resource

10
http://www.sketchappsources.com/free-source/1316-simple-shapes-wireframe-sketch-freebie-resource.html
シンプルなワイヤーフレームのテンプレートです。使いやすい。

スマートフォンのワイヤーフレーム

iPhone7も出た事ですし、iPhoneのワイヤーフレームもアップデートしてみてはいかがでしょうか。

11: iPhone 7 Wireframe Sketch Resource

11
http://www.sketchappsources.com/free-source/2199-iphone-7-wireframe-sketch-freebie-resource.html
iPhone7のワイヤーフレームです。これから使う事が増えそうですね。

12: Mobile UI Wireframe Kit Sketch Resource

12
http://www.sketchappsources.com/free-source/2162-mobile-ui-wireframe-kit-sketch-freebie-resource.html
モバイルのUIを集めたワイヤーフレームです。

13: Field Wireframe Sample Sketch Resource

13
http://www.sketchappsources.com/free-source/2073-field-wireframe-kit-sample-sketch-freebie-resource.html
こちららもモバイルの様々なUIを集めたワイヤーフレームです。使い勝手良さそう。

14: Savvy iOS Wireframe Kit Sketch Resource

14
http://www.sketchappsources.com/free-source/2046-savvy-ios-wireframe-kit-sketch-freebie-resource.html
iOSのUIキットです。

15: Android Splash Screen Artboards Sketch Resource

15
http://www.sketchappsources.com/free-source/2115-android-splash-screen-sizes-artboards-sketch-freebie-resource.html
アンドロイドの各画面サイズが用意されています。
なかなか自分で調べるのは面倒なのでありがたいですね。

16: Android Material Design UI Kit Sketch Resource

16
http://www.sketchappsources.com/free-source/852-android-material-design-ui-kit-sketch-freebie-rsource.html
マテリアルデザインのUIキットです。

17: iOS 7 Status Bars Sketch Resource

17
http://www.sketchappsources.com/free-source/173-ios-7-status-bars.html
iPhone7のステータスバーのモックです。使用頻度高そう。

18: iOS 7 Icons: Natives and Basics Sketch Resource

18
http://www.sketchappsources.com/free-source/281-ios7-icons-natives-and-basics.html
iOSのアイコンセットです。

19: WZ Wireframe Kit Sketch Resource

19
http://www.sketchappsources.com/free-source/1687-wz-wireframe-kit-sketch-freebie-resource.html
綺麗なUIキットです。

20: Wireframe Sketch Resource

20
http://www.sketchappsources.com/free-source/853-wireframe-sketch-freebie-resource.html
こちらもシンプルで綺麗。

アイコン

ワイヤーフレームを描くにあたって、必要なアイコンセットを集めてみました。

21: Sketch Icon Set Sketch Resource

21
http://www.sketchappsources.com/free-source/8-icons-set-kit.html

22: Sketch icons Sketch Resource

22
http://www.sketchappsources.com/free-source/546-sketch-icons-freebie-resource.html

23: 100+ Simple Line Icons Sketch Resource

23
http://www.sketchappsources.com/free-source/959-100-simple-line-icons-for-web-UI-sketch-freebie-resource.html

24: FontAwesome Icons Sketch Resource

24
http://www.sketchappsources.com/free-source/897-fontawesome-icons-sketch-freebie-resource.html

25: 45 Basic Line Icons Sketch Resource

25
http://www.sketchappsources.com/free-source/2192-basic-line-icons-sketch-freebie-resource.html

その他

その他、使えそうなUIキットを集めてみました。

26: Graphs Sketch Resource

26
http://www.sketchappsources.com/free-source/398-graphs.html
ダミーのグラフとか重宝しますね。

27: Collection of 50 Sign Up Views Sketch Resource

27
http://www.sketchappsources.com/free-source/1759-collection-of-50-onboarding-views-sketch-freebie-resource.html
すごい!サインアップのデザインがたくさん載ってます。
ワイヤーフレームというよりはデザインよりですね。

28: Apple App Store and Google Play Store Icons Sketch Resource

28
http://www.sketchappsources.com/free-source/591-apple-store-google-play-sketch-freebie.html
Appをダウンロードするときに使うボタンセットです。

29: Simple Charts Sketch Resource

29
http://www.sketchappsources.com/free-source/2051-simple-charts-kit-sketch-freebie-resource.html
こちらもグラフのダミーデザインです。

30: Sketch Hunt Arrows and Lines Pack Sketch Resource

30
http://www.sketchappsources.com/free-source/2190-sketch-hunt-arrows-and-lines-pack-sketch-freebie-resource.html
矢印セット!使いますねーこれは。

いかがだったでしょうか。
ひとつひとつ開いてみたんですがやっぱりSketchは軽いですね!
これから使う頻度も増えそうです。
ではでは!

スポンサーリンク



Pocket

There are currently no comments.