creatersnest134

見出しにぴったりなリボン素材まとめ


サイトの中でも見出しは目立たせたい部分。そんな見出しの背景やワンポイントとして使えるのがリボン素材です。リボンを自分で一から作ることもできますが、全てを作るのも大変なもの。
そこで、今回は無料ですぐに使えるリボン素材を集めました。そのままでも十分ですが、用途に合わせて自分でアレンジを加えても良いかもしれませんね。

 

Retro Web Ribbons Vintage Psd Pack
001_psd-web-elements-retro-ribbons-label-menu

http://www.pixeden.com/psd-web-elements/retro-web-ribbons-vintage-psd-pack

レトロな雰囲気のリボンです。
見出しやボタンの背景として活躍してくれる他、ワンポイントとして使える素材まで多数あります。

 

Psd Ribbon Classic Set

free-ribbon-design-201306_14

http://www.pixeden.com/psd-web-elements/psd-ribbon-classic-set

クラシックなリボンです。
6パターンの配色がありますので、サイトに合ったものを選ぶことができます。

 

40+ Vector Ribbons (Ai, Eps)

Ribbons-Thumb

http://www.blugraphic.com/2013/06/15/40-vector-ribbons-ai-eps/

リボンの幅から形が多数揃っています。
色は自分で変えることができますので、微妙な幅を調整して使いたいときに活躍してくれます。

 

Vector Ribbons Vector Graphic

vector_ribbons

http://dryicons.com/free-graphics/preview/vector-ribbons/

グラデーションを用いたリボンです。
シンプルな形が多いので、立体に見せたいときのポイントとして使うことができます。

 

Ribbons Free PSD

free_psd_ribbons_preview_big1

http://freepsdfiles.net/graphics/4-free-psd-ribbons

プレゼントの包装に使いそうなデザインです。
実物に似たリボンを使いたいと言うときに使える素材が揃っています。

 

5 Free PSD Ribbon Templates

リボン

http://freepsdfiles.net/objects/5-free-psd-ribbon-templates

ポップなデザインのリボンです。
カラフルなデザインに仕上げたいときに使えそうですね。

 

Curled red ribbon (banner), PSD template

red-ribbon

http://www.psdgraphics.com/psd/curled-red-ribbon-banner-psd-template/

金色で高級感のある定番の赤色リボンです。
豪華に見せたいときに活躍する素材です。

 

Free Vivid Vector Ribbon Pack

free_vivid_vector_ribbon_pack_by_soneyboy-d6hhaoy

http://soneyboy.deviantart.com/art/Free-Vivid-Vector-Ribbon-Pack-392157538

デザイン性のある少し変わった形のリボンです。
いつもと違う雰囲気にしたいときなどに使ってみるのも良いですね。

 

Abstract Ribbons

Abstract-Ribbons

http://www.blugraphic.com/2013/06/30/abstract-ribbons-psd-vector/

シンプルで単色なリボンです。
透明度を上げて、写真や画像の上に重ねて使うこともできます。

 

Ribbons PSD

ribbons_psd_by_b_squaredstock

http://b-squaredstock.deviantart.com/art/Ribbons-PSD-113611542

おどろおどろしい雰囲気のリボンです。
こういったデザインは一から作るのが大変ですので、活用できますね。

 

Psd Web Ribbon Sale Label Vol 1

001-web-ribbon-sale-label-vol-1

http://www.pixeden.com/psd-web-elements/psd-web-ribbon-sale-label-vol-1

切り込みから出てきたように見えるリボンです。
商用サイトで、新着やセール品など目立たせたい箇所に便利なデザインです。

 

Colorful Ribbons Vector Graphic

colorful_ribbons

http://dryicons.com/free-graphics/preview/colorful-ribbons/

しおりのようなデザインのリボンです。
見出しのワンポイントに入れると、華やかなデザインにしてくれます。

 

Retro colorful shopping labels

retro-colorful-shopping-labels_23-2147496142

http://www.freepik.com/free-vector/retro-colorful-shopping-labels_725588.htm

パステルカラーの商用サイトで使えるリボンです。
女の子らしいサイトのデザインに使うことができます。

 

Shadowed Dark Ribbon (Psd)

ribbon

http://www.blugraphic.com/2012/05/14/shadowed-dark-ribbon-psd/

あまり見かけない黒いリボンです。
シックなデザインに仕上げたいときに使いたい素材です。

 

Pretty Modern Ribbons (Psd)

cute-little-ribbon-2

http://www.blugraphic.com/2012/05/10/2-pretty-modern-ribbons-psd/

黒色とピンク色で作られたシンプルな形のリボンです。
リボンの背景には柄模様が入れられている凝ったデザインです。

 

4 Free PSD Ribbon Templates

4_Free_PSD_Ribbons_Preview_Big

http://freepsdfiles.net/buttons/4-free-psd-ribbon-templates

ポストイットのようなデザインのリボンです。
テープで貼ったようなデザインが特徴的です。

 

Wedding decoration collection

wedding-decoration-collection_23-2147508227

http://www.freepik.com/free-vector/wedding-decoration-collection_776487.htm

線だけで作られたリボンです。
ウェディングサイトなど結婚式向けのデザインにピッタリです。

 

Grunge textured vintage ribbons

grunge-textured-vintage-ribbons_23-2147492516

http://www.freepik.com/free-vector/grunge-textured-vintage-ribbons_715784.htm

ポップな色と定番のデザインが特徴的なリボンです。
女の子と向けのデザインをするときに、使いやすい素材が揃っています。

 

PSD Ribbons Corner Set

preview11

http://freepsdfiles.net/graphics/psd-ribbons-corner-set

コーナーで使うことのできるリボンです。
新着コーナーや新作などを目立たせたいときに活用できます。

 

かわいいハートのリボン飾り帯イラスト

fade19dac9d2724443df0517a3674a40

http://frame-illust.com/?p=778

かわいいハートデザインのリボンです。
バレンタインや母の日などのデザインにピッタリです。

 

Red ribbons set (PSD)

ribbons-corners-labels

http://www.psdgraphics.com/templates/red-ribbons-set-psd/

定番の赤いシンプルなリボンです。
見慣れている形はサイトなどのデザインにも使いやすいものですね。

 

Golden Decorative Vector Ribbons Set

Golden-Decorative-Vector-Ribbons-Set

http://www.pixeden.com/decorative-vectors/golden-decorative-vector-ribbons-set

ゴージャスな金色のリボンです。
高級感のあるデザインに仕上げたいときにピッタリです。

 

Retro ribbons collection

retro-ribbons-collection_1010-2

http://www.freepik.com/free-vector/retro-ribbons-collection_794154.htm

色やデザインが様々なリボンです。
用途に合わせて自分に合ったデザインを見つけてみてください。

 

Happy easter badges

happy-easter-badges_23-2147505020

http://www.freepik.com/free-vector/happy-easter-badges_765122.htm

ハッピーイースター用にデザインされたのリボンです。
文字を変えてハロウィンなどにも使えそうですね。

 

Vector ribbons free download

vector-ribbons-free-download_23-2147491088

http://www.freepik.com/free-vector/vector-ribbons-free-download_713808.htm

背景に写真や柄を入れているときに文字を乗せたいときに使いやすいリボンです。
透明度を下げて、上手く活用してみてください。

 

Corner Ribbons

free-ribbon-design-201306_18

http://365psd.com/day/3-281/

コーナーに使うリボンです。
見出しに限らず、デザインのアクセントとして様々な場所に活用できます。

 

Ribbons (flat) PSD

ribbons__flat__psd_by_nishithv-d6pkh5r

http://nishithv.deviantart.com/art/Ribbons-flat-PSD-405742815

平面でクラシカルなリボンです。
Photoshopを使って、自分で配色を変えることも可能です。

 

Christmas decorative ribbons

christmas-decorative-ribbons_459-72

http://www.freepik.com/free-vector/christmas-decorative-ribbons_783176.htm

クリスマス仕様にデザインされた素材です。
クリスマスシーズンには活躍できそうですね。

 

Leather vector labels set

leather-vector-labels-set_23-2147492468

http://www.freepik.com/free-vector/leather-vector-labels-set_715736.htm

革素材をイメージして作られたリボンです。
シンプルなデザインにも取り入れやすい色味と形になっています。

 

Badges Vector

badges-vector

http://www.allvectors.com/badges-vector/

ベーシックなタイプのリボンです。
自分で色を変更して使う際に使いやすい素材です。

 

さいごに

今回は無料で使うことができるリボン素材についてまとめましたが、活用できそうなものは見つかったでしょうか?
ほとんどの素材がPhotoshopやイラストレータを使えば色の変更も可能です。自分で好みの色に変更して、デザインに活用してみてください。
デザインが少し物足りないなと感じたときにリボン素材を足すと、それだけで華やかになるものです。

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

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

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


Next Article【まずはイメージしてみよう!】Webサイトが完成するまでの流れ