Advertisement

50uidesignkit

 

ホームページやウェブサイト、携帯用モバイルサイトを制作するときにどのような手順でおこないますか。

ひとによってさまざまであると思いますが、手書きでモックアップをスケッチ、モックアップを使ってワイヤーフレームを作成、それからデザインに着手する方もいるかと思います。

 

海外老舗デザインブログSmashing Magazineで、モバイル、ウェブサイトのモックアップやワイヤーフレーム、ユーザーインターフェース用デザインフリー素材をまとめたエントリー「Free Wireframing Kits, UI Design Kits, PDFs and Resources」が公開されていたので、今回はご紹介します。

 

Photoshopで利用することのできるPSDファイルを中心に、プリント印刷可能なPDFなどのフリー素材もそろっていますので、一度確認してみてはいかがでしょう。

 

 

詳細は以下から。

 

 

ワイヤーフレーム、UIデザインなどに使えるフリー素材まとめ


 

モバイルGUI用PSDファイル

 

Android GUI PSD

徐々に利用者数も増えているGoogle製Android携帯のデザインパーツをすべてレイヤーごとにデザインしたGUI素材キットのひとつ。
uidesignkit50

 

 

Fireworks Template for Android

こちらはPhotoshop用ではありませんが、Fireworksを利用されている方にオススメしたいAndroid携帯用GUIデザインパーツをまとめた素材キット。

uidesignkit52

 

 

Google Android GUI PSD

Androidスマートフォンで利用されているボタンなどのデザインパーツをまとめたPhotoshop用PSDファイルのひとつ。

uidesignkit51

 

 

RIM Blackberry PSD

オバマ大統領が愛用していることでも有名なBlackberryを135個のレイヤーに分けてデザインしたPSD素材のひとつ。

uidesignkit48

 

 

All Elemtns of Maemo 5 GUI in PSD

日本未発売のNokia製スマートフォンのGUIデザインパーツをまとめたフリー素材のひとつ。

高品質なボタンはウェブサイトなどでも利用することができそうですね。

ロシア語でわかりにくいのでダウンロードはこちらから。

uidesignkit58

 

 

Palm Pre GUI PSD

こちらも日本未発売のスマートフォンモデルですが、ユニークで細部までこだわったデザインパーツがまとめられています。

uidesignkit57

 

 

iPhone 4 GUI PSD (Retina Display)

最新iPhone 4をモチーフにデザインされたGUIフリー素材となっており、こちらのエントリーで詳しく触れています。

uidesignkit29

 

 

iPad GUI Kit in PSD

こちらはiPadを利用したウェブサイト、デザイン制作で活躍してくれるGUI素材キットのひとつ。

使用されているすべてのボタンやタブメニューなどを収録しています。

uidesignkit56

 

 

Free Apple iPad Icon Set

アイコンセットのひとつなのですが、同時にデザイン編集が可能なPSDファイルも一緒に収録されています。

uidesignkit55

 

 

Apple iPad Fully Editable PSD

こちらもiPadのデザインパーツを組み合わせることで自由に編集可能なPhotoshop用PSDファイル。

uidesignkit46

 

 

Sexy Vector Cell Phone

拡大縮小も自由自在なiPhone 4のベクター素材のひとつ。

uidesignkit42

 

 

iPhone UI Vector Elements

iPhoneで利用されているユーザーインターフェースをベクター素材でデザインした素材キットのひとつ。

wireframes-103

 

 

iPad Vector GUI Elements

こちらもベクター素材でデザインされたiPad用のユーザーインターフェースをまとめたGUIフリー素材。

wireframes-104

 

 

iPhone GUI Elements

こちらはiPhone 3GSをモチーフにしたGUIデザインパーツをまとめた素材セットのひとつ。

パーツごとに分けてダウンロードすることができるので、お好みの素材のみを選択することができます。

uidesignkit5

 

 

 

ソーシャルネットワーク関連のGUI PSDファイル

 

Free Full-Layered Facebook GUI PSD Kit

世界中で利用されているFacebook用アプリケーションやファンサイトを制作するときに便利なGUI素材キット。

uidesignkit12

 

 

Facebook GUI Free PSD Resource

こちらもFacebookのユーザーインターフェースを完全再現したPhotoshop用PSDファイル素材。

uidesignkit22

 

 

Omnigraffle Twitter Widget Stencil

こちらはPhotoshopではなく、Mac専用のOmnigraffleを利用し編集、加工を行う素材キットのひとつ。

ワイヤーフレーム作成などに利用することが可能となっています。

uidesignkit21

 

 

 

ワイヤーフレーム、モックアップ作成に関するフリー素材

 

Free Web UI Elements

見やすく操作性の高いボタンやプログレスバーなどのデザインパーツをまとめた素材セットで、Photoshop用PSDファイルで公開されています。

uidesignkit13

 

 

User Interface Design Framework

以前ご紹介しましたが、個人的に最近よく利用させてもらっているので再エントリー。

GUIベクター素材やアイコン、ボタンなどに利用することができるスタイルライブラリーなど合計1000個以上のパーツがそろっています。

詳しくはこちらのエントリーで触れています。

uidesignkit1

 

 

Marvelous Flex Darkskin PSD UI

ダーク系のウェブサイトデザインを制作する時に便利なユーザーインターフェースをまとめた素材セット。

uidesignkit24

 

 

Web Wireframe Kit

こちらのエントリーで以前ご紹介していますが、ダーク系、ホワイト系両方のウェブサイトデザインに利用することができるユーザーインターフェースをまとめた便利な素材のひとつ。

uidesignkit27

 

 

165 Vector Icons

淡いグラデーションを利用することでミニマルな印象を与えてくれるアイコン素材を165種類そろえた素材セットのひとつ。

各5色ずつ用意されているので合計800個以上のアイコン素材をIllustratorで自由に編集、加工することが可能。

uidesignkit8

 

 

Apple Elements for Omnigraffle

こちらもOmnigraffle用の素材となりますが、iPodなどのApple製品デバイスをまとめたユニークな素材。

uidesignkit36

 

 

Browser Form Elemtns PSD

Windows, Macを利用したFirefoxとInternet ExplorerのブラウザをそのままPhotoshopで表現したユニークな素材キットのひとつ。

uidesignkit14

 

 

その他のモックアップに便利な素材まとめ


 

今回まとめたデザインパーツを利用していろいろな形でモックアップデザインを完成させてみてはいかがでしょうか。

以下のエントリーもよろしかったら参考にしてみてはいかがでしょう。

 

種類別、ウェブデザインのモックアップ用UIデザイン素材キット20個まとめ 

20webuidesignkit

 

ウェブデザインのワイヤーフレームに使えるPhotoshop関連のフリー素材キット27個まとめ 

こちらのエントリーではPhotoshopで使えるPSDファイルを中心にUIデザイン素材をまとめています。

27uidesignkit1

 

印刷可能、UIデザインのモックアップ用無料スケッチPDFファイルまとめ 

手書きでモックアップをデザインするときに便利、どこにいても印刷するだけで利用できるのはうれしいですね。

printpdf1

 

ウェブデザインのワイヤーフレーム作成に使えるオンラインツール10選まとめ 

複数人で行うプロジェクトや、クライアントとの打ち合わせなどで簡単にデザインを共有することができる、便利ツールをまとめています。

10wireframetool

 

グリッドを使ったウェブレイアウトのデザイン方法&具体的サンプル 

最近多くのホームページで利用されているグリッドを利用したレイアウト方法について触れています。

gridbasedlayout2

 

[参照元 : Free Wireframing Kits, UI Design Kits, PDFs & Resources – Smashing Magazine]