海外のWebデザイン関連ブログ「SmashingApps.com」さんが、無料でダウンロードできる「ボタン」を紹介しています。
ソーシャルメディアやブックマークや検索などのボタンセットがまとめられています。フラットデザインや立体感あるオシャレなデザインまでいろいろなジャンルのボタンがあります。
Social share PSD buttons – Freebiesbug
8 Free PSD Button Styles – Freebiesbug
3D Social Buttons free PSD – Freebiesbug
Blue PSD Button – Freebiesbug
続きは下のリンクから元記事を参照してみて下さい。
40 Free Web Design Buttons For Web Designers | SmashingApps.com
PSDボタン素材とは？使うメリット
PSDボタン素材とは、Photoshopで編集できる形式（拡張子.psd）で配布されているボタンのデザインデータのこと。ソーシャルシェアボタンや検索ボタン、ダウンロードボタンなどが、レイヤーを分けた状態で作り込まれています。ゼロからデザインする手間を省きつつ、自分のサイトに合わせて色や文字を調整できるのが大きな魅力です。
- 時短になる：影・グラデーション・角丸などの作り込みが済んでいるので、すぐ使える。
- カスタマイズしやすい：レイヤーが分かれていれば、色や文字、サイズを後から自由に変更できる。
- クオリティが安定する：プロが作った素材を土台にすることで、デザインの完成度を底上げできる。
ボタン素材の選び方
数あるボタン素材から自分のサイトに合うものを選ぶときは、見た目だけでなく次の点もチェックすると失敗しにくくなります。
- サイトの雰囲気に合うか：フラットデザイン中心のサイトに立体的なボタンを置くと浮いてしまう。全体のトーンに合わせる。
- レイヤーが編集可能か：画像が一枚に統合されていると色や文字を変えにくい。レイヤー分けされた素材が扱いやすい。
- サイズ・解像度：高解像度（Retina対応など）の素材なら、拡大しても粗くなりにくい。
- 状態（ホバー・押下）の有無：通常時とマウスを乗せたときのデザインがそろっていると、実装時に便利。
- ライセンス：商用利用や再配布の可否を必ず確認する。
PSDをWebで使える形にする手順
PSDはあくまでデザインデータなので、そのままではWebページに表示できません。実際のサイトで使うには、次のような流れで書き出します。
- Photoshop（または無料の代替ソフト）でPSDを開く。
- 色・文字・サイズなどを自分のサイトに合わせて調整する。
- 必要なボタン部分を選択し、PNGなどの画像形式で書き出す（透過が必要ならPNGが便利）。
- Webページに画像として配置するか、デザインを参考にCSSでボタンを再現する。
近年はボタンをCSSで再現するのも一般的です。素材を「完成形のデザイン見本」として参考にし、実装はコードで行うと、表示が軽く拡大にも強いボタンになります。
活用シーンと注意点
ボタン素材は、ブログのシェアボタン、ランディングページの申し込みボタン、バナー内のリンクなど幅広く活躍します。一方で、使うときには次の点に気を付けましょう。
- クリックできることが直感的に伝わるデザインを選ぶ（影や色で“押せそう”に見せる）。
- ボタンが多すぎると、どれを押せばよいか迷わせてしまう。重要なものを目立たせる。
- 古いデザインの素材は時代遅れに見えることも。サイト全体の鮮度に合わせて選ぶ。
- 配布元のライセンス（商用利用・クレジット表記・再配布の可否）を必ず確認する。
押されやすいボタンにするデザインの工夫
せっかくボタン素材を使っても、クリックされなければ意味がありません。素材を土台にしつつ、次のポイントを押さえると“押されやすいボタン”に仕上がります。
- 色でメリハリを付ける：一番押してほしいボタンだけ目立つ色にし、それ以外は控えめにする。
- 十分な大きさを確保する：特にスマホでは、指でタップしやすいサイズにする。
- 文言を具体的にする：「送信」より「無料で申し込む」のように、押した先が伝わる言葉にする。
- 余白を取る：周囲に空間があるボタンは目に留まりやすく、押しやすい。
ボタンは“見た目”だけでなく“どう見えれば押したくなるか”まで考えると、サイトの成果に直結します。
よくある質問
Photoshopを持っていなくてもPSDは使えますか？
PSDに対応した無料のオンライン画像編集ツールなどで開ける場合があります。ただし複雑なレイヤー効果は再現しきれないこともあるため、編集前にバックアップを取っておくと安心です。
ボタン素材は画像とCSS、どちらで実装するのがよいですか？
シンプルなボタンなら、表示が軽く拡大に強いCSS実装がおすすめです。グラデーションや細かい装飾を忠実に再現したい場合は、画像として書き出す方法が向いています。
無料素材を商用サイトに使ってもよいですか？
配布元のライセンス次第です。商用利用可と明記されているか、クレジット表記が必要かを確認してから使いましょう。
スマホ表示でもボタン素材はそのまま使えますか？
画像のボタンは縮小すると文字が読みにくくなることがあります。スマホでも見やすいよう、高解像度の素材を選ぶか、CSSで再現してサイズを可変にするのがおすすめです。
まとめ
PSDボタン素材は、デザインの手間を減らしながら完成度を高められる頼れる存在です。選ぶときは「サイトの雰囲気との相性」「編集のしやすさ」「ライセンス」を確認し、用途に応じて画像書き出しかCSS再現かを使い分けましょう。気になる素材を見つけたら、まずは色や文字を自分のサイト用に変えるところから試してみてください。
