600x400

スマホのワイヤーフレーム作りに使えるベクター素材まとめ


今やサイトアクセスの大半を占める”スマホ”に特化したワイヤーフレームを集めました。
Webデザイナーに欠かせない、ワイヤーフレーム。その存在意義は、プロジェクトメンバーとの共有や、クライアントとの擦り合わせ時に役立つことです。
Web制作者が出来るだけ自由に、そして効率良く制作するために、ワイヤーフレームの素材を使ってみてはいかがでしょうか?
UIを意識したサイト制作のために、Webサイトの設計図を作る際に役立つ、ワイヤーフレームの素材をご紹介します。

 

ワイヤーフレームキット

 

ダウンロードしてすぐに使える、ワイヤーフレームのキットをご紹介します。

Device Outlines

device-outlines_1x

https://dribbble.com/

シンプルでフラットなデザインに最適です。

 

iPhone 5S Template

iPhone 5S Template

https://dribbble.com/

iPhone5版。こちらもかなりシンプルです。PDFとPDSでダウンロード可能です。

 

iPhone 6 Wireframes

iPhone 6 Wireframes

https://dribbble.com/

こちらiPhone6版です。同じくPDFとPSDでダウンロード可能です。

 

Vector Apple Outline Device

Vector Apple Outline Device

http://www.pixeden.com/

アウトラインでスッキリとしていて設計が捗ります。

 

Responsive Wireframe Sketch Sheet

Responsive Wireframe Sketch Sheet

https://dribbble.com/

PDFでダウンロード、手書きでのワイヤーフレーム作成に最適です。

 

Flat Device Templates

Flat Device Templates

https://gumroad.com/l/iVMt

フラットデザインでおしゃれな仕様です。iPhone以外のデバイスも収録されています。

 

Flatastic Mobile UI Kit

flatastic-mobile-ui-kit

http://thedesigninspiration.com/

豊富なデザインが収録されたフラットデザインのUIキットです。

 

One Page Website Wireframes

One Page Website Wireframes

https://dribbble.com/

PSDでダウンロードできます。高品質なフリー素材です。

 

Flat UI template

flat-design

http://jp.freepik.com/

ポップで可愛いデザインのキットです。

 

Mobile Wireframe Kit PSD

mobile-wireframe-kit

http://www.cssauthor.com/

フラットなデザインでシンプルさが素敵なキットです。

 

iOS 8 Wireframing UI Design Kit

iOS 8 Wireframing UI Design Kit

http://www.uxpin.com/

iOS8対応(iPhone5/6/6plus)の高品質なワイヤーフレームキットです。

Awesome Kit

Awesome Kit

http://awesomekit.me/

MAP等が揃うハイクオリティのワイヤーフレームキットです。ファイル形式はAIです。

WireKit

WireKit

http://adamwhitcroft.com/wirekit/

一般的な素材が揃っています。シンプルさが美しいPDSワイヤーフレームキットです。

 

iPhone 6 Wireframe Colleciton

iPhone 6 Wireframe Colleciton

http://mikedonovandesign.com/

フリーでのダウンロードが可能な、PSDのキットです。

 

iOS 7 Wireframe Kit

iOS 7 Wireframe Kit

http://blakeperdue.com/

iOS7に対応。AIファイルが無料でダウンロード出来るワイヤーフレームキットです。

 

iPhone 6 Vector Mock Up & Line Wireframe Mock Up

iPhone 6 Vector Mock Up & Line Wireframe Mock Up

http://www.techandall.com/

PSD、AI、PNGのファイルがまとめてダウンロード出来ます。iPhone 6ベクトルモックアップ&ラインワイヤーフレームモックアップのセットです。

 

App Wireframes Kit

App Wireframes Kit

http://graphicburger.com/

このキットは、PSDとAIファイル形式でダウンロード出来ます。

 

Illustrator iPhone 5 Wireframe Mockup

Illustrator iPhone 5 Wireframe Mockup

https://dribbble.com/

iPhone5対応、AI形式のモックアップが無料です。ワイヤーフレームの制作時に重宝します。

 

Lookamore UI Kit Android

lookamore-dribbble

https://dribbble.com/

希少なAndroid用のUIキットです。ワイヤーフレームにも応用出来ます。

 

Android Wireframe Kit

Android Wireframe Kit

https://dribbble.com/

sketchで編集可能なキットです。日本ではマイナーですが、WEB制作に特化した編集ツールです。

 

厳選!おすすめワイヤーフレーム素材

 

筆者がワイヤーフレーム制作時に使っている”おすすめ素材”を紹介します。

こんな使い方もあるんだ!という発見があるかもしれない!?斬新で使い心地が抜群な素材を紹介します。

 

Wireframe Screen Flow Template

Wireframe Screen Flow Template

http://androiduiux.com/

動的なサイトの動作説明に役立ちます。

 

Mobile Cooking App Wireframe

Mobile Cooking App Wireframe

https://dribbble.com/shots/

クッキングアプリをモチーフにしていますが、サイト制作の設計にも使えます。

 

Sqetch, an Illustrator Wireframe Toolkit

Sqetch, an Illustrator Wireframe Toolkit

http://www.eleqtriq.com/

AIファイルです。おしゃれなサイトのイメージのも合致するデザインのキットです。

 

Basiliq

basiliq

https://castle.co/design/basiliq

PSDファイル。無料ですが、ハイクオリティの良素材です。手描きのエレメントが最高におしゃれで、欲しい素材が揃っています。デスクトップとスマホ、どちらにも応用可能です。

 

Wireframe Sketchy iPhone Elements

Wireframe Sketchy iPhone Elements

http://medialoot.com/

ベクトル要素のコレクションです。手描きで可愛い素材です。

 

WEB UI Treasure Chest

WEB UI Treasure Chest

http://lazycrazy.deviantart.com/

PSDファイルで、エレメントの編集も可能です。100以上のアイテムが揃っています。

 

ワイヤーフレームに使えるアイコン素材

ワイヤーフレームにも、イメージに合ったアイコンを配置したいものです。ワンポイントにも最適な、豊富で使いやすいアイコン素材を紹介します。

 

Free iphone toolbar icons

Free iphone toolbar icons

http://blog.twg.ca/

PNG形式。商用フリーのアイコン素材です。多種多様なアイコンが揃っています。

 

icon Sweets

icon Sweets

http://iconsweets.com/

PSDファイルです。単色なのでシンプルで使いやすいデザインです。

 

Tabs Icons

Tabs Icons

http://www.tabsicons.com/

PSDファイルのフリー素材。整ったアイコンでWEB制作に重宝しそうです。

 

Glyphish

Glyphish

http://glyphish.com/

PSDファイルのフリー素材です。フラットデザインに相性抜群なシンプルデザインです。

 

64 free tab bar icons

64 free tab bar icons

http://app-bits.com/

PNGファイルです。細かな描写や独特なアイコンも有り差別化に一役かってくれそうです。

 

Pixel Press Icons

Pixel Press Icons

http://www.pixelpressicons.com/

PNG形式のフリーアイコンです。珍しいアイコンも有ります。

 

50 Free Android Menu Icons

50 Free Android Menu Icons

http://www.androidicons.com/

PNG・AI形式のファイルが使えます。Androidのアイコンをモチーフにしたシンプルな仕様です。これもフラットデザインにぴったりですね。

 

まとめ

ここまで、ワイヤーフレームの素材を紹介して参りましたが、いかがでしたか?
制作者によって、求める素材も様々ですよね。
紹介した各素材も、Web制作の当事者が、必要を感じて作成し、共有している場合が多くありました。
優良な素材を無償で提供して下さる開発者に感謝しながら、素材を活用して、より良いUIデザインを考えていきたいですね。
ユーザーが使いやすいサイトを制作する際の、参考にして頂ければと幸いです。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticleWordpress用のサーバーを選ぶときのポイントまとめ