ウェブデザイン制作においてボタンやナビゲーションバー、バナーデザインは重要なデザインパーツです。
しかしすべてのパーツをPhotoshopで制作するとなると時間もアイデアも必要となります。
そんなときはあらかじめ細かくデザインされたPSDファイル素材を利用することで、簡単にデザインを取り入れることが可能となります。
海外デザインブログWeb Design Shockで、ウェブデザインに便利なPSD素材を無料ダウンロードできる5つの優良サイトをまとめたエントリー「A Hundred of Really High Quality Free Design Elements and Where to Find Them」が公開されていたので、今回はご紹介します。
定期的に無料素材を公開しているので、RSSリーダーに登録しておくと良いかもしれません。
詳細は以下から。
ウェブデザインに便利なPSD素材を無料ダウンロードできるサイト、ブログ
1. Theme Shock
URL: Theme Shock
WordPress用テンプレートやアイコンなどを販売しているウェブサイトですが、多くの無料素材も同時に公開されています。
入力されているテキストを変更するだけでそのまま使えるＵＩデザイン用PSD素材が多く、商用利用できる点もポイントです。
ノイズテクスチャを利用した質感の高い立体的なボタンデザイン6色セット。
それぞれ通常、ホバー、アクティブ用に3タイプずつデザインが用意されています。
青色にぼんやりと輝くインターフェースが魅力的なGUIデザイン素材セットで、ボタンやラジオボタン、スクロールバーなどが揃っています。
ツルツルとした質感を表現したログインボックス用PSD素材9色セット。
最近よく見かける立体的なリボンデザインを6種類まとめた便利なセット。
色付けしたレイヤーを重ねることで、お好みの色のリボンデザインを作成することが可能。
Folded Button Set and Post Box Design
実際にリボンデザインをブログデザインとして利用した具体例のPSD素材、こちらも全5色から選択可能となっています。
Sophisticated Vectorial Contact Form
自然な立体感を表現したお問い合わせフォーム用PSD素材。
ウッドテクスチャの上にレイアウトされた立体的なスライダーデザイン、色使いがとても繊細なつくりとなっています。
ウェブサイトやブログの顔となるヘッダー部分をスタイリッシュにデザインしたい方へ、7色の落ち着いた色使いから選ぶことができます。
48 Pixel Perfect Credit Card Icons
高詳細にデザインされたクレジットカードを48x48pxサイズのアイコンとして利用可能なPSD素材。
ショッピングサイトなどにぴったりかもしれません。
2. Premium Pixels
URL: Premium Pixels
以前のエントリー、高品質でオシャレな無料素材だけを公開しているウェブサイト「Premium Pixels」でもご紹介しましたが、定期的に公開されるPSD素材ファイルの質感が抜群に高いブログメディア。
すべての無料アイテムを組み合わせればひとつのウェブサイトになるのではないか、というくらいに豊富なデザイン数が特長のひとつで、どれも個人、商用利用可能となっています。
オンラインサービス用ウェブサイトでよく見かける値段比較用テーブルデザイン、強調したい部分をシンプルに強調するデザインがナイス。
音楽関連のウェブサイトにレイアウトするMP3プレイヤー用PSDデザインファイル。
Stitcked Fabric Horizontal Accordion PSD
縫い付けられたようなデザインがかわいい横型スライダー用PSD素材ファイル、カラフルですね。
Business Website Template Design PSD – Redux
紺色を基調とした企業用サイトに利用できるウェブレイアウトをPSD素材でそのまま無料ダウンロード可能。
WordPress用テーマとしてこちらより購入可能となっています。
→ デモページ
Pretty Little Folded Ribbon PSD
ティファニーグリーンの背景にデザインされたかわいい3Dリボンデザイン素材。
写真を魅せる人気のプラグインLightboxなどのUIデザインとして使えるスタイリッシュなPSDデザイン素材。
10 High Resolution Cloud Textures
「空」をテーマにした高解像度のテクスチャ素材10セットで、このサイトにはテクスチャ、Photoshop用パターン素材なども揃っていますよ。
3. Designmoo
URL: Designmoo
コミュニティーに参加することで世界中のデザイナーが公開、共有したデザインパーツを無料でダウンロードすることができる便利サイト。
参加方法はtwitterを使い「Invitation（招待状）」を申し込み、参加というシンプルさ。
もちろんデザインをしていることが条件となり、参加しているデザイナーの数も多く、高品質なUIデザインパーツがほぼ毎日公開されています。
思わず押してしまいたくなるスタイリッシュなボタンデザイン用PSD素材ファイル。
立体的にデザインされたボックスデザインのPSD素材ファイル、スライダーなどにいかがでしょう。
シンプルな吹き出しをデザインしたボックス枠とボタンデザインのUIデザインセット。
ボタンを押したようなレタープレスデザインのボタン素材、3種類セットとなっています。
4. 365 Icon
URL: 365 Icons
365種類のアイコンセットを公開しているサイトで、最近はウェブサイトに使えるUIデザインも定期的に無料ダウンロード可能となっています。
ウェブサイトのアクセントとして高品質なアイコン素材を探してみてはいかがでしょう。
カラフルな色使いがポップなiPhone用アイコン12個セットをPSD素材でダウンロード可能となっています。
iPad2にはカメラも内臓されているようなので使う機会の増えそうなSkypeアイコン素材をPSDファイルで。
Pocket Web Developer’s Icon Pack
立体的なポケットにアイコンを収納したユニークなデザインのPSD素材セット。
広告用バナーデザインやテーブルとして利用することができるＵＩデザインセット。
5. 365 PSD
URL: 365PSD
毎日ひとつずつウェブ制作に使えるUIデザイン素材をPSDファイルで無料ダウンロードできるブログメディア。
どれもディテールにこだわった高品質なデザインが多く、デザイン時間の節約にもなりますよ。
エレガントなヘッダーデザインを表現するときに使えるリボンデザイン+ナビゲーションメニュー。
Vimeoの動画プレイヤーを忠実にPhotoshopで再現したデザイン素材。
Premium Pixelsのデザイナーさんがデザイン、登校しているシンプルなスライダーのPSD素材ファイル。
シンプルなコンタクトフォームを利用したい方にオススメしたいUIデザインセット。
アドミンパネルやログインユーザーの表示に使えるボタンデザインセット。
Dark Buttons, Toooptips, Tabs, UI Elements
ボタンやツールチップ、タブなどのＵＩデザインパーツをまとめたダーク系PSD素材。
親しみやいミドリ色のボタンデザイン用PSDデザインファイル素材。
レトロな色使いとタイポグラフィーが印象的な3色のボタンデザインセット。
ブログのコメントフォームに利用することができるほんのり立体的なデザインがナイス。
最後にCSS3のみで作成するデザインキット
CSS3を使ったウェブサイトが増えており、画像を使わずにテキストのみで再現することができるユニークデザイン。
コードをコピー、貼り付けするだけで利用することができますが、すべてのブラウザに対応していない点がネックとなりそうです。
A Hand-Coded Designer CSS UI Kit
グラデーションを利用した立体的なデザインをCSSのみで作成することができるデザインキット。
全6色でボタンのほかに、検索ボックス、ログインボックス、テーブルデザインが設定されています。
→ デモページ
CSS Drop-Shadow without Images
イメージ画像を使わずにCSSのみでドロップシャドウをデザインすることができるデザインキット。
合計8種類のドロップシャドウが収録されているので、お好みのデザインを選択することが可能。
→ デモページ
Using CSS Text-Shadow to Create Cool Text Effects
タイポグラフィーを劇的に変えたいときに使える6種類のCSSだけで作成されたテキストエフェクト。
[参照元 : A Hundred of Really High Quality Free Design Elements & Where to Find Them – Webdesign Shock]
