以前にもUIデザインやワイヤーフレームに便利なデザインキットをまとめたエントリーをご紹介しているのですが、新しいフリー素材がたくさん公開されていましたので、再度まとめることにしました。
海外デザインブログSpeckyboy Design Magazineで、モバイルやウェブサイトのUIデザインで使えるPhotoshop用デザインキットを30個まとめたエントリー「30 Fresh Web UI, Mobile UI and Wireframe Kits」が公開されていたので、今回はご紹介します。
iPhoneやAndroidなどのスマートフォンやiPadなど忠実に再現したPSDファイルや、思わずクリックしたくなるようなボタン、UIデザインなど利用することで制作時間の短縮になるアイテムが揃っています。
まだ確認していないデザイン素材キットがないか確認してみてはいかがでしょう。
詳細は以下から。
モバイル、ウェブサイトのUIデザインなどに使えるPhotoshop用フリー素材30個まとめ
ボタンなどのUIデザインパーツ
光沢感たっぷりな思わずクリックしたくなる立体的なUIデザインパーツ。
ボタン、検索バー、ドロップダウンメニューなどのアイテムをPSDファイルでダウンロード可能。
※ 商用利用可能
クロム調の立体的なデザインパーツをまとめたUIキット素材のひとつで、レタープレス（型押し）風デザインなど細部までこだわっています。
落ち着いた印象のボタンデザインをまとめたUIデザイン素材で、それぞれ3種類ずつデザインされている点もポイントです。
※ 商用利用可能
質感の異なる5種類のボタンデザインを各11色ずつデザインしたPhotoshop用PSDファイル。
サイズや色の変更なども自由に行うことができ、デザイン制作などで重宝するアイテムのひとつ。
※ 商用利用可能（要デザイナー許可）
どんなデザインにもあわせやすいシンプルなUIデザインパーツで、ボタンやアイコン、ラジオボックス、バナーなど豊富な種類と各6色のバリエーションも魅力的。
すべてのファイルはまとめてPSDファイルでダウンロード可能となっています。
こちらのフリー素材は何度かご紹介していますが、ホームページ制作に必要な一通りのUIデザインパーツがまとめられています。
ブラック、ホワイトバージョンの2種類を選択することが可能となっています。
iPhoneやAndroidなどスマートフォン関連デザイン
Android携帯で利用されているデザインを忠実に再現したUIデザインパーツ素材。
あまり他では見かけないデザインが多く、個人的にメモとしてエントリー。
※ 商用利用可能
Android携帯で利用されているUIデザインをまとめた素材キットで、簡単なアプリやモックアップなどに利用することを想定してデザインされています。
iPhone 4 GUI PSD (Retina Display)
そしてこちらがiPhone用UIデザインをまとめたフリー素材キットで、Retinaディスプレイに対応したデザインを作成することができます。
※ 商用利用可能
タイトルのままですがHTC HD 2スマートフォンを本物そっくりにベクターデザインで再現したPSD素材。
レイヤーに細かくパーツごとに分けられているので、デザインの編集、加工も簡単に行うことができます。
Mobility: A Free Set of Mobile UI Design Elements
赤色をアクセントカラーにiphone 4のUIデザインをまとめた素材セットで、比較的最近公開された新しいフリー素材。
こちらもPSDファイルをダウンロード可能となっているので、自由なカスタマイズが魅力。
※ 商用利用可能
ホワイトモデルの発売中止が危ぶまれているそうですが、Photoshopではブラック、ホワイトモデルともに自由にデザインすることができますよ。
3000x4000pxという高解像度素材なので、デザインの幅も広がるのではないでしょうか。
こちらはiPadをモチーフに水平、垂直方向にデザインされたPhotoshop用PSDファイル素材。
そのほかにもPNGファイルも同時ダウンロード可能となっています。
※ 商用利用可能
日本未発売のスマートフォン携帯のひとつで、個人的にデザインが気に入ったのでメモとして。
こちらも日本未発売モデルのひとつでMotorola製スマート携帯のベクターデザイン素材。
ワイヤーフレームやモックアップに便利なフリー素材
Squetch – Wireframing Toolkit for Illsutrator
ウェブデザインを制作する前にモックアップ用として便利なIllustrator用AIファイル。
ブラウザ、スマートフォン、iPadなどのモックアップに対応しています。
Illustrator Template for iPhone Design
こちらもiPhone用モックアップをデザイン、スケッチするときに便利なIllustrator用AIファイル。
そのまま印刷することで手描きでデザインすることもできそうですね。
Dragnet Website Wireframes Kit
手描きでモックアップされた様なラフデザインをパソコンで可能なモックアップ素材のひとつで、それぞれPNGファイルで収録されています。
番外編、まとめ
最近のウェブデザイントレンドのひとつとして、グリッドラインを利用したシンプルでわかりやすいウェブデザインをよく見かけるようになりました。
こちらはボタンひとつで、グリッドラインを表示してくれるPhotoshop用アクションファイルとなっており、後はダウンロードしたデザインパーツを線に沿って並べることで、デザイン制作を楽にしてくれるアイテムです。
グリッドラインをボタンひとつで作成するPhotoshop用アクションファイル
また以前UIデザインをまとめたエントリーも一緒に参考にしていただくことで、今回未紹介のフリー素材をダウンロード可能となっています。
モバイル、ウェブサイトなどのワイヤーフレーム、UIデザイン用Photoshopフリー素材まとめ
[参照元 : 30 Fresh Web UI, Mobile UI and Wireframe Kits – Speckyboy Design Magazine]
