Advertisement

27uidesignkit

 

ホームページやウェブサイトなどのデザイン制作において、あらかじめ手描きやオンラインツールで作成されたモックアップを使いデザインを進める方もいるのではないでしょうか。

今回はPhotoshopなどを使ってデザインするときに便利なパーツ関連をまとめた27個の無料キットを、海外デザインブログDzine Blogの「27 Free High-Quality UI Wireframe Kits to Download」よりご紹介します。

 

ボタンやラジオボックスなどから並び替えなどユーサビリティ面で便利なタブ、カーソル、ページネーション、矢印記号とあらゆるアイテムが揃っています。

部品パーツはPNGファイルのものが多いので、必要なパーツをステッカー感覚でウェブデザインに加えることができ便利です。

そろそろ日本での発売が開始されるappleのiPad用ワイヤーフレームキットなどもありましたよ。

 

どれも色合いや質感が統一されたパーツがそれぞれのキットに揃っているので、お気に入りのPhotoshop用フリー素材を見てはいかがでしょうか。

Mac OS専用オンラインアプリケーションOmini Graffleを個人的に使うことがあるので、追加しておきたいパーツもまとめています。 

 

詳細は以下から。

 

 

UIデザインのワイヤーフレームに便利なPhotoshop用キットまとめ


 

Windows 7 ToolBar PSD

Windowsの最新ブラウザの透明ツールボックスをPhotoshopでそのまま忠実にデザインしたPSDファイル。

ウェブサービスなどを紹介するときなどに使えそうです。

54

 

 

Web Form Elements

ダーク系デザインのウェブサイトをデザインしようと思っている方はこちらはいかがでしょう。

立体的な影や淡いグラデーションなどウェブトレンドを取り入れたパーツが揃っています。

20

 

 

Marvelous Flex Darkskin PSD UI

こちらもダーク系デザインに使える、水色のライティングがきれいなパーツをまとめたPSDファイル。

ダウンロードするには無料会員登録が必要となります。

44

 

 

Web UITreasure Chest V.1.0

一度ご紹介した気もしますが、質感の高い20種類以上のボタンなどに加え、決済ページに使えるクレジットカード型アイコンなどをまとめたフリー素材。

35

 

 

Browser Form Elements

MacとWindows VistaをOSとして、それぞれFirefoxとInternet ExplorerのブラウザをそのままPSDファイルにしたキット。

一緒に問い合わせ用コンタクトフォームパーツも揃っています。

19

 

 

Deluxe Creative Pack 001

ポップでカラフルな付箋やカレンダーなどデスクトップガジェット風デザインパーツを集めたフリー素材。

壁紙をデザインするときなどにも応用することができそうです。

46

 

 

Peter’s DeviantArt ID Ver 1.3

会員登録を使ったサービスを展開されている方はこんな豪華なIDテンプレートはいかがですか。

すべてのパーツがレイヤーごとに分かれているので、フォントや色なども変更可能です。

45

 

 

iPad GUI PSD Design Template

iPadの発売が目前ですが、電子書籍やアプリケーションなどを販売しようと考えている方にオススメのアイテムがこちら。

使われている全てのボタンパーツなどを細かくわけたPhotoshop用PSDファイルです。

持っていると何かと便利ですよ。

26

 

 

 

IllustratorやPDFファイル用フリー素材まとめ


 

iPhone App Wireframe 

手描きでiPhone用アプリの枠組みをデザインしたいときに便利なPDFファイル。

ラフに描かれたiPhoneのイラストと一緒に備考欄もたっぷりレイアウトされているので、思いついたアイデアをサッと書き留めることができます。

40

 

 

Wireframe Symbols

ホームページや特にブログのモックアップを作成するときに使えるIllustrator用AIファイル。

ページネーションやカテゴリーなどをシンプルなモノクロタイプでデザインしています。

9

 

 

Free Sketching & Wireframing Kit

こちらもウェブサイトに必要なパーツをデザインしたモックアップ用キット。

ダウンロードできるファイル種類も豊富でAi、SVG、EPSファイルのほかにPDFファイルも用意されています。

8

 

 

Design Stencils

タブコンテンツや調節用つまみ、カレンダーなど高品質な部品パーツをSVG、PNG、PDFファイルなどからお好みで選ぶことができます。

6

 

 

2010.05.12追記

Wireframe Magnets (DIY Kit)

シンプルなワイヤーフレーム用パーツをPDFファイルでまとめているセットのひとつ。

wireframekit

 

 

 

Omni Graffle用追加ファイルまとめ


 

Omni GraffleはMac OS専用オンラインアプリケーションのひとつ。

ワイヤーフレーム作成に特化したサービスだけあって直感的な操作が魅力のひとつです。

 

ダウンロード、解凍したファイルをインストールされているフォルダより、~/Library/Application Support/OmniGraffle/Stencils/に格納すると追加用ファイルを使うことができます。

Macをお持ちの方は試してみるとよいかもしれません。

 wireframe_tools_10

OmniGraffle for Mac – Products – The Omni Group

 

 

Flex 3 Stencil

質感の高いメニューバーやタブ用ボックス枠などそのままデザインに使えそうなパーツが揃ったファイル。

4

 

 

iPhone 3G Stencil

iPhoneに使われているパーツがすべて収録されたモックアップ用ファイル。

アプリケーションを開発するときに重宝しそうなアイテムのひとつ。

28

 

 

Ultimate iPhone Stencil

こちらもiPhoneモックアップ用追加ファイルのひとつ。

Flickrなどの写真ギャラリーをレイアウトしたデザインなども揃っています。

27

 

 

Facebook Application

日本での需要はいまひとつかもしれませんが、世界基準サービスを開発、販売している方などにオススメ。

3

 

 

Omni Graffle Wireframe Kit

やさしい水色の色使いが印象的なモックアップ用フリーキット。

52

 

 

Omni Graffle Wireframe Stencils

Mac OSで使われているボタンやスクロールバーなどをまとめたセット。

CMSサービス用編集ページデザインなどにも対応してくれそうです。

10

 

 

iPad&iPhone Design

iPadとiPhoneを同時にデザインしたいときに使えるモックアップツール。

使われている部品パーツと一緒にイラスト用デザインなども揃っていて使い勝手がよいツール。

51

 

 

 

追記事項、まとめ


 

モックアップの作成方法は最初にも触れましたが、手描きデザインを基にオンラインツールを使ってプロジェクトチームで共有することも可能です。

オンラインサービスや便利なツールをまとめた以下のエントリーを参考にしていただくとよいかもしれません。

 

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

10wireframetool

 

 

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

printpdf1

 

このほかにも参照元サイトには今回紹介していないフリー素材も公開されているので、こちらもよろしかったら一緒にあわせてどうぞ。

 

[参照元 : 27 Free High-Quality UI Wireframe Kits to Download – Dzine Blog]