Advertisement

uiwireframingkits7

 

海外デザインブログSmashingAppsで、細かい部分までこだわり抜いた、無料PhotoshopUIデザイン素材キット50個をまとめたエントリー「50 Fresh Free Web and Mobile UI Element Kits, Wireframe Kits and PSD Files」が公開されていたので、今回はご紹介します。

 

 

どれも1px単位にこだわった、高品質デザインが魅力となっており、操作性だけでなく、見た目でもたのしむことができるWebサイトを制作してみてはいかがでしょう。

 

また後半部分では、UIデザインを使ったWebサイトの枠組み(フレームワーク)、モックアップ作成に利用可能なPDFシートもまとめています。

 

 

 

詳細は以下から。

 

 

 

デザイン性の高い、無料UIデザイン素材まとめ 2012年3月度

 

Futurico

みどり色のグラデーションが、立体的でリッチなインターフェースデザインをデザインしています。

CSS3を利用した、ナビゲーションメニューの作り方も公開されており、一緒に利用可能ですよ。

 

 

 

Free Candy UI Kit

タイトルのとおり、キャンディーのような光沢感たっぷりなUIデザインをまとめた無料パーツ素材。

uiwireframingkits81

 

 

 

Menu PSD Freebie

カラフルな色使いと、グラデーションによる立体感たっぷりでデザインされた、縦型ナビゲーションメニュー。

 

 

 

Favbulous Colourful Buttons

ポップカラーの組み合わせに立体感と質感をアップした、ボタン素材6個セット。

 

 

 

Classic PSD Web Buttons Vol.1

絶妙なドロップシャドウを加えることで、リアル感を再現した、クラシカルなボタン素材3色セット。

 

 

 

Multi Colored Web Elements 

12種類のボタンデザインを、それぞれ5色ずつ展開したお得な無料ダウンロード素材セット。個人的にお気に入りとしてメモ。

 

 

 

Tron Glow UI Kit

映画Tronにでてきたような、ぼんやりと青白く光る、ネオンカラーが印象的なUIデザインパーツセット。

uiwireframingkits65

 

 

 

Dark UI Elements

こちらはむらさき色をベースに、グラデーションの濃淡を利用した、つまみ型UIデザイン。

uiwireframingkits78

 

 

 

Progress Bar

進行状況やフォームの記入などのステップを表示するのに便利な、プログレスバー。

ネオンの色はカラーパレットより調整することが可能となっています。

uiwireframingkits80

 

 

 

Derailed UI Set

ややザラっとした、マットタイプの質感が印象的だった、トグルやツマミ、ドロップダウン選択ボックスをまとめた無料素材。

uiwireframingkits70

 

 

 

Smooth UI Kit

白を基調に、パステルカラーのみを利用してデザイン制作された、やさしい印象を与えてくれる、立体的なフォルムが◎。

uiwireframingkits68

 

 

 

Skinny Kid Ui Kit

1px単位にこだわってデザインされた、高品質なデザインUIセット。思わずクリックしてしまいそうです。

uiwireframingkits27

 

 

 

Shopping Cart Dropdown

ボタンをクリックすると出現する、エレガントスタイルのドロップダウンメニュー。ショッピングサイトにいかがでしょう。

uiwireframingkits77

 

 

 

Lion Ui Kit Preview

MacOS、Lionのインターフェースデザインを本物そっくりに、忠実に再現した、PSDデザイン素材。

プレゼンテーションなどにも活用することができそうです。

uiwireframingkits14

 

 

 

Aluminoi: UI Kit

紺色をベースにマットタイプでデザインされた、UI素材キットが収録されています。

uiwireframingkits44

 

 

 

Dark UI Kit Part2

レザーテクスチャのような質感の高い背景デザインとの相性もばっちりな、ダーク系UIデザイン素材。

uiwireframingkits19

 

 

 

Heads Up Display UI Kit

半透明のボックス枠に、黒と水色のコントラストが使い勝手のよい、UIデザイン素材をまとめた無料素材セット。

uiwireframingkits83

 

 

 

Byttterscotch UI Kit

茶色と黄色のおしゃれな配色が目を惹いた、1pxまでていねいにデザインされたUIデザイン素材。

uiwireframingkits13

 

 

 

Flip Timer

パタパタと回転するタイムボードを、立体感たっぷりで表現したデザイン素材。数字の組み合わせも自由自在です。

uiwireframingkits67

 

 

 

Premium Pixels Login Box

こちらは作り方から詳しくチュートリアルで解説してあるので、UIデザイン作成テクニックの参考になりそうです。

uiwireframingkits35

 

 

 

IxD Gestures

UIデザインの操作方法を解説するときに、一緒に使いたいジェスチャーデザインのまとめ。

すっきりとしたデザインとなっており、幅広い用途に利用できます。

uiwireframingkits12

 

 

 

jQuery Mobile UI Elements

iPhone用サイトやテーマ作成をおこなうときのモックアップに利用したい、モバイル用UI素材セット。

こちらはMacアプリOmnigraffle用となっています。

uiwireframingkits60

 

 

 

Responsive layout Wireframe

ウィンドウ幅に応じて、レイアウトが変化するレスポンシブWebデザインに、3タイプまで対応したモックアップ用素材。

uiwireframingkits54

 

 

 

Wireframe Sketch Sheets

PCからiPhone、iPadなどさまざまなデバイス用レイアウトのモックアップに活用したい素材シート10枚セット。

PDFファイルとなっており、そのまま印刷して利用可能となっています。

 

 

[参照元 : 50 Fresh Free Web and Mobile UI Element Kits, Wireframe Kits and PSD Files – SmashingApps]