ホームページやウェブサイト、携帯用モバイルサイトを制作するときにどのような手順でおこないますか。
ひとによってさまざまであると思いますが、手書きでモックアップをスケッチ、モックアップを使ってワイヤーフレームを作成、それからデザインに着手する方もいるかと思います。
海外老舗デザインブログSmashing Magazineで、モバイル、ウェブサイトのモックアップやワイヤーフレーム、ユーザーインターフェース用デザインフリー素材をまとめたエントリー「Free Wireframing Kits, UI Design Kits, PDFs and Resources」が公開されていたので、今回はご紹介します。
Photoshopで利用することのできるPSDファイルを中心に、プリント印刷可能なPDFなどのフリー素材もそろっていますので、一度確認してみてはいかがでしょう。
詳細は以下から。
ワイヤーフレーム、ＵＩデザインなどに使えるフリー素材まとめ
モバイルGUI用PSDファイル
徐々に利用者数も増えているGoogle製Android携帯のデザインパーツをすべてレイヤーごとにデザインしたGUI素材キットのひとつ。
Fireworks Template for Android
こちらはPhotoshop用ではありませんが、Fireworksを利用されている方にオススメしたいAndroid携帯用GUIデザインパーツをまとめた素材キット。
Androidスマートフォンで利用されているボタンなどのデザインパーツをまとめたPhotoshop用PSDファイルのひとつ。
オバマ大統領が愛用していることでも有名なBlackberryを135個のレイヤーに分けてデザインしたPSD素材のひとつ。
All Elemtns of Maemo 5 GUI in PSD
日本未発売のNokia製スマートフォンのGUIデザインパーツをまとめたフリー素材のひとつ。
高品質なボタンはウェブサイトなどでも利用することができそうですね。
ロシア語でわかりにくいのでダウンロードはこちらから。
こちらも日本未発売のスマートフォンモデルですが、ユニークで細部までこだわったデザインパーツがまとめられています。
iPhone 4 GUI PSD (Retina Display)
最新iPhone 4をモチーフにデザインされたGUIフリー素材となっており、こちらのエントリーで詳しく触れています。
こちらはiPadを利用したウェブサイト、デザイン制作で活躍してくれるGUI素材キットのひとつ。
使用されているすべてのボタンやタブメニューなどを収録しています。
アイコンセットのひとつなのですが、同時にデザイン編集が可能なPSDファイルも一緒に収録されています。
こちらもiPadのデザインパーツを組み合わせることで自由に編集可能なPhotoshop用PSDファイル。
拡大縮小も自由自在なiPhone 4のベクター素材のひとつ。
iPhoneで利用されているユーザーインターフェースをベクター素材でデザインした素材キットのひとつ。
こちらもベクター素材でデザインされたiPad用のユーザーインターフェースをまとめたGUIフリー素材。
こちらはiPhone 3GSをモチーフにしたGUIデザインパーツをまとめた素材セットのひとつ。
パーツごとに分けてダウンロードすることができるので、お好みの素材のみを選択することができます。
ソーシャルネットワーク関連のGUI PSDファイル
Free Full-Layered Facebook GUI PSD Kit
世界中で利用されているFacebook用アプリケーションやファンサイトを制作するときに便利なGUI素材キット。
Facebook GUI Free PSD Resource
こちらもFacebookのユーザーインターフェースを完全再現したPhotoshop用PSDファイル素材。
Omnigraffle Twitter Widget Stencil
こちらはPhotoshopではなく、Mac専用のOmnigraffleを利用し編集、加工を行う素材キットのひとつ。
ワイヤーフレーム作成などに利用することが可能となっています。
ワイヤーフレーム、モックアップ作成に関するフリー素材
見やすく操作性の高いボタンやプログレスバーなどのデザインパーツをまとめた素材セットで、Photoshop用PSDファイルで公開されています。
User Interface Design Framework
以前ご紹介しましたが、個人的に最近よく利用させてもらっているので再エントリー。
GUIベクター素材やアイコン、ボタンなどに利用することができるスタイルライブラリーなど合計1000個以上のパーツがそろっています。
詳しくはこちらのエントリーで触れています。
Marvelous Flex Darkskin PSD UI
ダーク系のウェブサイトデザインを制作する時に便利なユーザーインターフェースをまとめた素材セット。
こちらのエントリーで以前ご紹介していますが、ダーク系、ホワイト系両方のウェブサイトデザインに利用することができるユーザーインターフェースをまとめた便利な素材のひとつ。
165 Vector Icons
淡いグラデーションを利用することでミニマルな印象を与えてくれるアイコン素材を165種類そろえた素材セットのひとつ。
各5色ずつ用意されているので合計800個以上のアイコン素材をIllustratorで自由に編集、加工することが可能。
Apple Elements for Omnigraffle
こちらもOmnigraffle用の素材となりますが、iPodなどのApple製品デバイスをまとめたユニークな素材。
Windows, Macを利用したFirefoxとInternet ExplorerのブラウザをそのままPhotoshopで表現したユニークな素材キットのひとつ。
その他のモックアップに便利な素材まとめ
今回まとめたデザインパーツを利用していろいろな形でモックアップデザインを完成させてみてはいかがでしょうか。
以下のエントリーもよろしかったら参考にしてみてはいかがでしょう。
種類別、ウェブデザインのモックアップ用UIデザイン素材キット20個まとめ
ウェブデザインのワイヤーフレームに使えるPhotoshop関連のフリー素材キット27個まとめ
こちらのエントリーではPhotoshopで使えるPSDファイルを中心にUIデザイン素材をまとめています。
印刷可能、UIデザインのモックアップ用無料スケッチPDFファイルまとめ
手書きでモックアップをデザインするときに便利、どこにいても印刷するだけで利用できるのはうれしいですね。
ウェブデザインのワイヤーフレーム作成に使えるオンラインツール10選まとめ
複数人で行うプロジェクトや、クライアントとの打ち合わせなどで簡単にデザインを共有することができる、便利ツールをまとめています。
グリッドを使ったウェブレイアウトのデザイン方法＆具体的サンプル
最近多くのホームページで利用されているグリッドを利用したレイアウト方法について触れています。
[参照元 : Free Wireframing Kits, UI Design Kits, PDFs & Resources – Smashing Magazine]
