SONICMOOV Googleページ

【動作確認サイトあり】デザインに使いたいApple WatchのフリーPSD素材20選

【動作確認サイトあり】デザインに使いたいApple WatchのフリーPSD素材20選

  • このエントリーをはてなブックマークに追加

こんにちは、さいどうです。
いよいよ!4月24日Apple Watchが発売されますね!

今回はデザインで使えそうなApple Watchのファイルをご紹介します。

Apple Watch

フリーファイルを使う前に、公式のガイドラインは必ず確認しておきましょう!

Apple Watch Human Interface Guidelines

Apple Watch Human Interface Guidelines

https://developer.apple.com/app-store/watch/

公式ガイドラインのサイトです。
英語表記ですが、画面サイズやアイコンサイズ、レイアウトなどが記載されています。
細かいサイズなどはこちらが参考になるかと思います。

以下から素材のご紹介です。
PSDデータの紹介がメインですが、一部、ベクターで利用できるデータも含んでいます。

1.Apple Watch GUI PSD

Apple Watch GUI PSD

https://dribbble.com/shots/1735649-Apple-Watch-GUI-PSD

代表的なUIが揃っています。
エレメントも本物を忠実に再現されています!

続きを読む

 

2.WATCH APPS CONCEPT GUI 2.0

WATCH APPS CONCEPT GUI 2.0

http://watch.janlosert.com/

twitterでツイートするとダウンロード可能です。
データかなり重いですが38mmと42mmの両方揃っています。
UIの数も多いので持っていて損はないかと思います!

 

3.Apple Watch GUI for illustrator

Apple Watch GUI for illustrator

http://codemotionapps.com/apple-watch-gui/

こちらはaiのGUIです!38mmと42mmがあります。
twitterまたはfacebookでシェアするとダウンロード可能です。
aiでデザインを制作している人には便利ですね。

 

4.Apple Watch Screen PSD

Apple Watch Screen PSD

http://www.happy.watch/downloads/2014/9/12/apple-watch-screen-psd

こちらはスクリーン画面のみのモックアップです。
アイコン制作の際などで使えそうですね!

 

5.Apple Watch Free Psd Mockup

Apple Watch Free Psd Mockup

http://medialoot.com/item/apple-watch-free-psd-mockup/

スクリーン画面とスポーツバンドのモックアップです。
バンドの色は5色です。

 

6.Apple Watch Free Template

Apple Watch Free Template

https://dribbble.com/shots/1718811-Apple-Watch-Free-Template

正面と横向きのモックアップです。
横向きの方は画像ですが、正面のスクリーン画面が変更可能です!

 

7.Apple Watch Free Template

Apple Watch Free Template

https://dribbble.com/shots/1719044-Apple-Watch-Free-Template-PSD

スクリーン画面と本体のモックアップです。
本体の方も画面がスマートオブジェクトになっているので簡単に変更可能です。

 

8.Apple Watch Free Template PSD

Apple Watch Free Template PSD

https://dribbble.com/shots/1722447-Apple-Watch-Free-Template-PSD

DropBoxか、直接ダウンロードが選べます。スポーツバンドは白と黒の2色があります。

 

9.Watch PSD Template

Watch PSD Template

https://dribbble.com/shots/1719188–Watch-PSD-Template

バンドの種類が豊富なのがいいですね。
重なっているだけなので、すべてバラバラに使うことが出来ます!

 

10.Watch Free Templates

Watch Free Templates

https://dribbble.com/shots/1966404–Watch-Free-Templates

1つ1つpsdに分かれていて、全部で7種類あります。
動きをだしたいときに使えそうですね!

 

11.Apple Watch Icon Template 1.0

Apple Watch Icon Template 1.0

http://expressivemedia.co.uk/work/apple-watch-icon-template-1-0/

アイコンのテンプレートです。38mmと42mmがあります。
ガイドのPDFと、テンプレートのアクションも入っていて親切なところがいいです!

 

12.Template for Apple Watch Icons

Template for Apple Watch Icons

https://dribbble.com/shots/1925214-Template-for-Apple-Watch-Icons?list=searches&offset=11

こちらも同様に38mmと42mmがあります。
ホームアイコンの真ん中に自分の制作したアイコンをはめてデザインを確認できます。

 

13.Apple Watch Template

Apple Watch Template

http://blog.appicontemplate.com/creating-icons-for-the-apple-watch/

38mmと42mmと、設定のアイコンにわかれています。
ホーム画面、アプリ画面、詳細画面のモックアップがあるのでアイコン制作の時にデザインしやすそうです!

 

14.Apple Watch Template free PSD

https://lab.sonicmoov.com/files/2015/04/14.png

https://dribbble.com/shots/1723821-Apple-Watch-Template-free-PSD

実際つけているようにみせるモックアップです。
写真にはまるとよりかっこよく見えそうですね!

 

15.WATCH Mockups

WATCH Mockups

https://dribbble.com/shots/1724950-Free-PSD-4x-WATCH-Mockups

こちらは4パターン別々のPSDに入っています。
バンドの種類と写真の雰囲気があっていて用途別に使えそうです!

 

16.Apple Watch-Freebie

Apple Watch-Freebie

https://dribbble.com/shots/1720474-Apple-Watch-Freebie

シンプルでフラットなイラストのモックアップです。
フラットなサイトに似合いそうです。

 

17.Apple Watch Flat Mockup

Apple Watch Flat Mockup

https://dribbble.com/shots/1743690-Apple-Watch-Flat-Mockup

こちらはスポーツバンドタイプのイラストのモックアップです。全部で5色あります。

 

18.Apple Watch-Free Psd Flat Mockup

Apple Watch-Free Psd Flat Mockup

https://dribbble.com/shots/1720409-Apple-Watch-Free-Psd-Flat-Mockup

横向きもそろったイラストのモックアップです。バンドもバラバラに作られています。

 

19.New Apple WATCH Free Vector Download

New Apple WATCH Free Vector Download

https://dribbble.com/shots/1718697-New-Apple-WATCH-Free-Vector-Download

こちらはaiのイラストモックアップです。ゴールドとプラチナとステンレスがあるのがいいですね!

 

20.Uber Watch+Freebie

Uber Watch+Freebie

https://dribbble.com/shots/1723575-Uber-Watch-Freebie?list=searches&offset=2

シンプルなワイヤーフレームです。
今後アプリケーションを開発していく上で必要になるかもしれません!

 

おまけ

Watch Aware

https://lab.sonicmoov.com/files/2015/04/watchware.png

http://watchaware.com/watch-apps

Apple Watchのアプリの動きを見ることが出来ます。
パターンが100種類以上あるのに驚きです!
各アプリのMORE INFOからUIの詳細を確認できます。

 

mix your watch

https://lab.sonicmoov.com/files/2015/04/mixyourmatch.png

http://mixyourwatch.com/

Apple Watchの組み合わせに悩んでいる方におすすめのmix your watch。
簡単に好きな組み合わせを作ることが出来ますよ!

 

iTunes store アプリ

https://lab.sonicmoov.com/files/2015/04/appstore.png

https://itunes.apple.com/jp/app/apple-store/id375380948?mt=8

スマホにダウンロードすれば、Apple watchの実寸サイズを見ることが出来ます。
思ったより・・・小さい!

以上です。
デザインの参考にしたいとき、買おうか迷っているときに参考にしてみてください!

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

さいどう(デザイナー)

ソーシャルアプリ事業部デザイナーのさいどうです。 好きな衛星はエウロパです。

関連するSONICMOOVのサービス

Webデザイナー募集!

イラストーレーター募集!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ

Webデザイナー募集!

新着の記事

mautic is open source marketing automation