Advertisement

 

 

ウェブデザイン制作においてボタンやナビゲーションバー、バナーデザインは重要なデザインパーツです。

しかしすべてのパーツを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用テンプレートやアイコンなどを販売しているウェブサイトですが、多くの無料素材も同時に公開されています。

入力されているテキストを変更するだけでそのまま使えるUIデザイン用PSD素材が多く、商用利用できる点もポイントです。

 

Pixel Perfect Button Set

ノイズテクスチャを利用した質感の高い立体的なボタンデザイン6色セット。

それぞれ通常、ホバー、アクティブ用に3タイプずつデザインが用意されています。

 

 

 

Carbon Style GUI Set

青色にぼんやりと輝くインターフェースが魅力的なGUIデザイン素材セットで、ボタンやラジオボタン、スクロールバーなどが揃っています。

 

 

Clean Login Box with Free PSD

ツルツルとした質感を表現したログインボックス用PSD素材9色セット。

 

 

Ribbons Pack Free PSD

最近よく見かける立体的なリボンデザインを6種類まとめた便利なセット。

色付けしたレイヤーを重ねることで、お好みの色のリボンデザインを作成することが可能。

 

 

Folded Button Set and Post Box Design

実際にリボンデザインをブログデザインとして利用した具体例のPSD素材、こちらも全5色から選択可能となっています。

 

 

 

Sophisticated Vectorial Contact Form

自然な立体感を表現したお問い合わせフォーム用PSD素材。

 

 

Wood Sytle Slider Control

ウッドテクスチャの上にレイアウトされた立体的なスライダーデザイン、色使いがとても繊細なつくりとなっています。

 

 

 

Sexy Web Menu Design

ウェブサイトやブログの顔となるヘッダー部分をスタイリッシュにデザインしたい方へ、7色の落ち着いた色使いから選ぶことができます。

 

 

 

48 Pixel Perfect Credit Card Icons

高詳細にデザインされたクレジットカードを48x48pxサイズのアイコンとして利用可能なPSD素材。

ショッピングサイトなどにぴったりかもしれません。

 

 

 

2. Premium Pixels

 

URL: Premium Pixels

 

 

以前のエントリー、高品質でオシャレな無料素材だけを公開しているウェブサイト「Premium Pixels」でもご紹介しましたが、定期的に公開されるPSD素材ファイルの質感が抜群に高いブログメディア。

すべての無料アイテムを組み合わせればひとつのウェブサイトになるのではないか、というくらいに豊富なデザイン数が特長のひとつで、どれも個人、商用利用可能となっています。

 

 

Simple Pricing Table

オンラインサービス用ウェブサイトでよく見かける値段比較用テーブルデザイン、強調したい部分をシンプルに強調するデザインがナイス。

 

 

Album Tracklist Widget PSD

音楽関連のウェブサイトにレイアウトするMP3プレイヤー用PSDデザインファイル。

 

 

Stitcked Fabric Horizontal Accordion PSD

縫い付けられたようなデザインがかわいい横型スライダー用PSD素材ファイル、カラフルですね。

 

 

Business Website Template Design PSD – Redux

紺色を基調とした企業用サイトに利用できるウェブレイアウトをPSD素材でそのまま無料ダウンロード可能。

WordPress用テーマとしてこちらより購入可能となっています。

→ デモページ

 

 

Pretty Little Folded Ribbon PSD

ティファニーグリーンの背景にデザインされたかわいい3Dリボンデザイン素材。

 

 

Custom Lightbox Skin PSD

写真を魅せる人気のプラグインLightboxなどのUIデザインとして使えるスタイリッシュなPSDデザイン素材。

 

 

10 High Resolution Cloud Textures

「空」をテーマにした高解像度のテクスチャ素材10セットで、このサイトにはテクスチャ、Photoshop用パターン素材なども揃っていますよ。

 

 

3. Designmoo

 

URL: Designmoo

 

 

コミュニティーに参加することで世界中のデザイナーが公開、共有したデザインパーツを無料でダウンロードすることができる便利サイト。

参加方法はtwitterを使い「Invitation(招待状)」を申し込み、参加というシンプルさ。

もちろんデザインをしていることが条件となり、参加しているデザイナーの数も多く、高品質なUIデザインパーツがほぼ毎日公開されています。

 

 

Call To Action Button

思わず押してしまいたくなるスタイリッシュなボタンデザイン用PSD素材ファイル。

 

 

Boxes

立体的にデザインされたボックスデザインのPSD素材ファイル、スライダーなどにいかがでしょう。

 

 

Download

シンプルな吹き出しをデザインしたボックス枠とボタンデザインのUIデザインセット。

 

 

Simple Buttons

ボタンを押したようなレタープレスデザインのボタン素材、3種類セットとなっています。

 

 

4. 365 Icon

 

URL: 365 Icons

 

365種類のアイコンセットを公開しているサイトで、最近はウェブサイトに使えるUIデザインも定期的に無料ダウンロード可能となっています。

ウェブサイトのアクセントとして高品質なアイコン素材を探してみてはいかがでしょう。

 

Northstar iPhone Icons

カラフルな色使いがポップなiPhone用アイコン12個セットをPSD素材でダウンロード可能となっています。

 

 

Skype Replacement Icons

iPad2にはカメラも内臓されているようなので使う機会の増えそうなSkypeアイコン素材をPSDファイルで。

 

Pocket Web Developer’s Icon Pack

立体的なポケットにアイコンを収納したユニークなデザインのPSD素材セット。

 

 

Bannerlicious

広告用バナーデザインやテーブルとして利用することができるUIデザインセット。

 

 

5. 365 PSD

 

URL: 365PSD

 

毎日ひとつずつウェブ制作に使えるUIデザイン素材をPSDファイルで無料ダウンロードできるブログメディア。

どれもディテールにこだわった高品質なデザインが多く、デザイン時間の節約にもなりますよ。

 

Ribbon Header PSD

エレガントなヘッダーデザインを表現するときに使えるリボンデザイン+ナビゲーションメニュー。

 

 

Vimeo Player

Vimeoの動画プレイヤーを忠実にPhotoshopで再現したデザイン素材。

 

 

Clean and Simple Image Slider

Premium Pixelsのデザイナーさんがデザイン、登校しているシンプルなスライダーのPSD素材ファイル。

 

 

Gray & White Form Elements

シンプルなコンタクトフォームを利用したい方にオススメしたいUIデザインセット。

 

 

Event Calendar Widget PSD

アドミンパネルやログインユーザーの表示に使えるボタンデザインセット。

 

 

Dark Buttons, Toooptips, Tabs, UI Elements

ボタンやツールチップ、タブなどのUIデザインパーツをまとめたダーク系PSD素材。

 

 

Day 112

親しみやいミドリ色のボタンデザイン用PSDデザインファイル素材。

 

 

Day 178 by Kuldar Kalvik

レトロな色使いとタイポグラフィーが印象的な3色のボタンデザインセット。

 

 

Individual Blog Post Excerpt

ブログのコメントフォームに利用することができるほんのり立体的なデザインがナイス。

 

 

最後に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]