psd790x470

Webデザインで大活躍なクオリティの高いボタンPSD素材50選


サイト制作に必須の”ボタン素材”を、使いやすいPSD形式に絞ってご紹介します。
最近ではCSS3を使ったボタンデザインを行う事も多いかと思いますが、サイトの仕様によっては、画像の素材での配置が有効な場合もありますよね。統一感やイメージによってアレンジ出来るところもメリットです。
無料でハイクオリティな、PSDのボタン素材を厳選しました。イメージにピッタリなボタン素材を見つけて、サイト制作に役立て頂ければ幸いです。

 

グラデーション・3Dボタン

 

Web特有のデジタルらしさを感じる、美しい立体的なボタンを紹介します。

 

Free psd arrow buttons set

arrow-buttons

http://freedesignfile.com/

Webサイトに使える、多様なボタンが揃っています。

 

Tangy Multi-Color Button Set

color-button

http://pixelb.in/tangy-multi-color-button-set-96/

シンプルだからこそ使いやすい、カラフルなボタンが各色3パターン用意されています。

 

Chunky 3D Web Buttons

webbuttons

http://www.premiumpixels.com/

Normal/Hover/Activeの3パターンが揃っていて使いやすい素材です。

 

Glossy Neat Web Buttons (Psd)

Colored-Multipurpose-Buttons-Psd

http://www.blugraphic.com/

可愛いシルエットアイコン付きで、美しいボタンです。

 

Free Cool Buttons Psd

free-cool-buttons

http://365psd.com/

各色3パターンのボタンです。アレンジ次第でバリエーションが増えそうですね。

 

PSD Web Design Neon Buttons

design-buttons-psd

http://www.nxworld.net/

ネオンカラーで目を引くボタンです。

 

Freebie Button

Button-PSD-10

http://dribbble.com/

ガラス質感を表現した、3パターンがセットになった素材です。

 

31 Free Buttons PSD File

FREE-Buttons-PSD

http://m3-f-web.deviantart.com/

豊富なバリエーションで、使い方色々です。

 

button

button

http://azot4o.deviantart.com/

高級感があるブラックテイストのボタンです。ゴールドの文字が渋いですね。

 

Bright 3D Buttons

3d-buttons

http://designmoo.com/

3カラーのセットです。程よい立体感に惹きつけられます。

 

汎用フラットボタン

 

流行か、今後のスタンダードになるのか?フラットデザインはやっぱりオシャレでかっこいいですね。フラットなデザインのボタンを紹介します。

 

White flat web button psd

white-flat-web-button

http://freedesignfile.com/

シンプルでさりげないボタン配置が、オシャレ感を実現出来ます。

 

5 Flatty Fresh Flat Buttons

5_flatty_fresh_flat_buttons_

http://hazzbrogaming.deviantart.com/

カラフルで5つのパターンがセットになっています。統一感を表現する事が出来ます。

 

Web Button variety

button

http://jp.freepik.com/

しずく型のアイコンが可愛らしく、アクセントになります。

 

Simple Button

simple-button

http://www.freebiesgallery.com/

フラットデザインに合う白を基調としたシンプルボタンです。

 

Web Browser UI Elements

Web Browser UI Elements

http://dribbble.com/

サーモンピンクが可愛いさを表現できます。素朴で温かみのあるボタンです。

 

Flat Buttons PSD

flat-buttons-psd

http://www.freebiesgallery.com/

フラットと立体感の絶妙なマッチングで、どんなデザインにも合う使いやすいボタンです。

 

Freebie PSD – Flat Icons

 

PSD-Flat-Icons

http://dribbble.com/

オシャレなフラットデザインのアイコンがセットになっています。

 

パターンセット

 

セットでダウンロード出来る、有難い素材をご紹介します。バリエーションが豊富だと、使い方の幅も広がりますよね。

 

MultyStyle Button Pack

MultyStyle-Button-Pack

https://www.behance.net/

フラット、シャイニー、レトロと3パターンがセットになっています。

 

Fashion Buttons

fashion-ui-buttons

https://dribbble.com/

清潔感や信頼感を表現出来る、淡い色が特徴のボタンです。

 

25 Free PSD Modern Buttons vol. 1

25-Modern-Buttons-preview

http://graphicsdrawer.com/

パターンを応用して、好きな色にも変えられる非常に実用性の高いセットです。

 

デザインボタン

 

デザイン性の高いボタンを集めました。流行と独自性の間で、サイトデザインにインパクトを与える秀逸なボタンばかりです。

 

Retro Style Buttons

button

http://365psd.com/

布の質感にマッチするかわいいボタンです。レトロな雰囲気も素敵です。

 

Wood UI kit psd material

wood-ui-kit

http://freedesignfile.com/

ナチュラルな木目が、優しげな雰囲気を醸し出してくれます。

 

Wooden Button

Wooden-Button

https://dribbble.com/

この立体感はインパクトが有ります。

 

Register for Free Buttons

registration-for-free-buttons

http://designmoo.com/

可愛いチェック柄のボタンです。色によって受ける印象が大きく変わるのが面白いですね。

 

Instagram Sign-in Buttons

social-button

http://365psd.com/

Instagramをモチーフにしていますが、テキストを変えればオリジナルのアイコンになります。

 

汎用サークルボタン

 

丸型はコンパクトでデザイン性が高く、ボタンとして配置するのに最適です。サークルのボタンを集めてみました。

 

Creative red icons psd material

red-icons-psd

http://freedesignfile.com/

不思議な立体感がアクセントにもなるナビゲーションにもピッタリなボタンです。

 

Arcade Button

Arcade-Button

http://dribbble.com/

リアルな質感に驚きます。思わず押したくなってしまいます。

 

metal
free-button

http://jp.freepik.com/

ボタンというより「ツマミ」ですね。こちらもメタリックのリアルさに驚きます。

 

XBOX-controller-button

xbox_button

https://dribbble.com/

目の前にボタンがあると錯覚する、トリックアートの様ですね。

 

Circular Buttons

circular-buttons-psd

http://www.freebiesgallery.com/

ツヤのある美しいサークル型のボタンです。

 

Exquisite modern app psd icons

modern-app

http://freedesignfile.com/

アプリケーションアイコンですが、サイトのワンポイントにも使えます。

 

White Button

white-button

http://www.freebiesgallery.com/

白さが際立つ、清潔感のあるボタンです。

 

ソーシャルボタン

 

SNSのボタンは、Webサイトに必須ですよね。連携したからには押してもいたいので、思わず押したくなるボタンを集めました。

 

Share Buttons PSD

Share-Buttons

https://dribbble.com/

吹き出し様になって可愛いシェアボタンです。押したくなりますね。

 

PSD icon button

sns-butoon

http://jp.freepik.com/

ブルーでさりげないソーシャルアイコンボタンです。

 

Social Sign in Buttons

sns-button

http://365psd.com/

淡い色合いが、柔らかいイメージのサイトにピッタリですね。

 

Social Sign In Buttons

Social-Sign-In-Buttons

https://dribbble.com/

Windowsのデスクトップアイコンがモチーフになっています。

 

3D Facebook & Twitter PSD Buttons

facebook-twitter-psd

http://freebiesbug.com/

触れてみたくなる秀逸なボタンです。

 

Social Login Buttons

Social-Login-Buttons

http://dribbble.com/

フラットでシンプルさを極めたSNSのログインボタンです。

 

Freebie PSD:Signin Button

signin_button

https://dribbble.com/

スタンダードなデザインですが、これが一番しっくり来る、支持されるボタンです。

 

Free Social Button PSD

Free-Social-Button

http://dribbble.com/

工夫の効いた可愛いボタンです。

 

Social Share Buttons – FREE PSD

social-share-buttons

https://dribbble.com/

こちらもスタンダードなデザインですが、しっくり来るボタンですね。

 

UIボタン

 

ダウンロードボタン、アップロードボタンetc…

 

サイトに配置するボタンは、ユーザーが分かりやすく、ボタンが何を意味するのか即座に分かるのが理想ですね。そんな理想を実現してくれる、高品質な素材を厳選しました。

 

Free Cloud Hosting Upload Buttons

freebie-upload-button

http://www.psdchat.com/

流行のヘキサゴンの形をしたダウンロードボタンです。

 

Transparant UI Kit Freebie

wireframingkits55

http://dribbble.com/

透過デザインがオシャレです。UIキットとしてダウンロード出来ます。

 

Free App Download Buttons

app-download-buttons

http://www.freebiesgallery.com/

各種ダウンロードサイトのアイコンが揃うセットです。

 

download button

free

http://jp.freepik.com/

豊富なバリエーションから、サイトイメージに合うボタンが見つかりそうですね。

 

Free Vector App Store/Google Play/Amazon Badges

app_buttons

https://dribbble.com/

スタンダードな仕様なので、一目でリンク先が分かるダウンロードボタンですね。

 

Download Button

Download-Button

https://dribbble.com/

綺麗なダウンロードボタンは、ワンポイントとしても活用出来そうですね。

 

Free Buttons .PSD

free_buttons__psd

http://yesimadesigner.deviantart.com/

テキストを編集して、何にでも使えるダウンロードボタンになります。

 

Upload Button

upload_button_p

http://jp.365psd.com/

シンプルですが、ダウンロードを表すクラウドのマークが可愛いですね。

 

On/Off Button

button_p

http://365psd.com/

On/Offをシンプルに表現出来るスイッチ型ボタンです。

 

まとめ

 

ここまで、PSDファイルとして配布されている、無料の素材をご紹介して参りましたが、いかがでしたでしょうか?お気に入りのボタンを見つけて頂けたら幸いです。

 

無料の素材を厳選して紹介しましたが、利用規約については配布元のサイトで確認した上で利用して頂く様お願い致します。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【WordPress】プラグインを使ってYoutube動画をサイトに埋め込む方法