ホームページやウェブサイトなどのデザイン制作において、あらかじめ手描きやオンラインツールで作成されたモックアップを使いデザインを進める方もいるのではないでしょうか。
今回はPhotoshopなどを使ってデザインするときに便利なパーツ関連をまとめた27個の無料キットを、海外デザインブログDzine Blogの「27 Free High-Quality UI Wireframe Kits to Download」よりご紹介します。
ボタンやラジオボックスなどから並び替えなどユーサビリティ面で便利なタブ、カーソル、ページネーション、矢印記号とあらゆるアイテムが揃っています。
部品パーツはPNGファイルのものが多いので、必要なパーツをステッカー感覚でウェブデザインに加えることができ便利です。
そろそろ日本での発売が開始されるappleのiPad用ワイヤーフレームキットなどもありましたよ。
どれも色合いや質感が統一されたパーツがそれぞれのキットに揃っているので、お気に入りのPhotoshop用フリー素材を見てはいかがでしょうか。
Mac OS専用オンラインアプリケーションOmini Graffleを個人的に使うことがあるので、追加しておきたいパーツもまとめています。
詳細は以下から。
UIデザインのワイヤーフレームに便利なPhotoshop用キットまとめ
Windowsの最新ブラウザの透明ツールボックスをPhotoshopでそのまま忠実にデザインしたPSDファイル。
ウェブサービスなどを紹介するときなどに使えそうです。
ダーク系デザインのウェブサイトをデザインしようと思っている方はこちらはいかがでしょう。
立体的な影や淡いグラデーションなどウェブトレンドを取り入れたパーツが揃っています。
Marvelous Flex Darkskin PSD UI
こちらもダーク系デザインに使える、水色のライティングがきれいなパーツをまとめたPSDファイル。
ダウンロードするには無料会員登録が必要となります。
一度ご紹介した気もしますが、質感の高い20種類以上のボタンなどに加え、決済ページに使えるクレジットカード型アイコンなどをまとめたフリー素材。
MacとWindows VistaをOSとして、それぞれFirefoxとInternet ExplorerのブラウザをそのままPSDファイルにしたキット。
一緒に問い合わせ用コンタクトフォームパーツも揃っています。
ポップでカラフルな付箋やカレンダーなどデスクトップガジェット風デザインパーツを集めたフリー素材。
壁紙をデザインするときなどにも応用することができそうです。
会員登録を使ったサービスを展開されている方はこんな豪華なIDテンプレートはいかがですか。
すべてのパーツがレイヤーごとに分かれているので、フォントや色なども変更可能です。
iPadの発売が目前ですが、電子書籍やアプリケーションなどを販売しようと考えている方にオススメのアイテムがこちら。
使われている全てのボタンパーツなどを細かくわけたPhotoshop用PSDファイルです。
持っていると何かと便利ですよ。
IllustratorやPDFファイル用フリー素材まとめ
手描きでiPhone用アプリの枠組みをデザインしたいときに便利なPDFファイル。
ラフに描かれたiPhoneのイラストと一緒に備考欄もたっぷりレイアウトされているので、思いついたアイデアをサッと書き留めることができます。
ホームページや特にブログのモックアップを作成するときに使えるIllustrator用AIファイル。
ページネーションやカテゴリーなどをシンプルなモノクロタイプでデザインしています。
Free Sketching & Wireframing Kit
こちらもウェブサイトに必要なパーツをデザインしたモックアップ用キット。
ダウンロードできるファイル種類も豊富でAi、SVG、EPSファイルのほかにPDFファイルも用意されています。
タブコンテンツや調節用つまみ、カレンダーなど高品質な部品パーツをSVG、PNG、PDFファイルなどからお好みで選ぶことができます。
2010.05.12追記
シンプルなワイヤーフレーム用パーツをPDFファイルでまとめているセットのひとつ。
Omni Graffle用追加ファイルまとめ
Omni GraffleはMac OS専用オンラインアプリケーションのひとつ。
ワイヤーフレーム作成に特化したサービスだけあって直感的な操作が魅力のひとつです。
ダウンロード、解凍したファイルをインストールされているフォルダより、~/Library/Application Support/OmniGraffle/Stencils/に格納すると追加用ファイルを使うことができます。
Macをお持ちの方は試してみるとよいかもしれません。
OmniGraffle for Mac – Products – The Omni Group
質感の高いメニューバーやタブ用ボックス枠などそのままデザインに使えそうなパーツが揃ったファイル。
iPhoneに使われているパーツがすべて収録されたモックアップ用ファイル。
アプリケーションを開発するときに重宝しそうなアイテムのひとつ。
こちらもiPhoneモックアップ用追加ファイルのひとつ。
Flickrなどの写真ギャラリーをレイアウトしたデザインなども揃っています。
日本での需要はいまひとつかもしれませんが、世界基準サービスを開発、販売している方などにオススメ。
やさしい水色の色使いが印象的なモックアップ用フリーキット。
Omni Graffle Wireframe Stencils
Mac OSで使われているボタンやスクロールバーなどをまとめたセット。
CMSサービス用編集ページデザインなどにも対応してくれそうです。
iPadとiPhoneを同時にデザインしたいときに使えるモックアップツール。
使われている部品パーツと一緒にイラスト用デザインなども揃っていて使い勝手がよいツール。
追記事項、まとめ
モックアップの作成方法は最初にも触れましたが、手描きデザインを基にオンラインツールを使ってプロジェクトチームで共有することも可能です。
オンラインサービスや便利なツールをまとめた以下のエントリーを参考にしていただくとよいかもしれません。
ウェブデザインのワイヤーフレーム作成に使えるオンラインツール10選まとめ
印刷可能、UIデザインのモックアップ用無料スケッチPDFファイルまとめ
このほかにも参照元サイトには今回紹介していないフリー素材も公開されているので、こちらもよろしかったら一緒にあわせてどうぞ。
[参照元 : 27 Free High-Quality UI Wireframe Kits to Download – Dzine Blog]
