TOP  >  ボタン

Tag : ボタン

2017年01月09日

コピー&ペーストで気軽にクリエイティブなCSSボタンが設置できる「bttn.css」

WEBサイトのユーザーインターフェイスの中で最も重要な要素の一つボタン。主にユーザーがページ遷移や情報を取得する時に利用するため利用されます。よく目にする部分だけに、ここの動きやクリエイティブはWEBサイトのクオリティを決定づける要素の一つだと思います。今日紹介するのはコピー&ペーストで気軽にクリエイティブなCSSボタンが設置できる「bttn.css」です。

cssbt01

このbttn.cssでは様々な大きさ・色・動きがセットされており、どのボタンも簡単に実装することが可能です。

詳しくは以下

cssbt02

登録さているボタンは全部で15種類。どれもシンプルでマウスオーバーでそれぞれのボタンにあったアクションが展開されるようになっています。色ベタのものと罫線で表現されたものと絞り込んで探すことも可能です。

カスタマイズできる項目としてはカラー6種類、サイズが4種類となっています。シンプルでしかもCSSだけで制作されているので非常に使い勝手が良いと思います。ボタンデザイン・アクションで迷っている方は是非どうぞ。

Bttn.css – Demo

続きを読む
posted 08:30  |  
Category: Design , WebDesign   
このエントリーをはてなブックマークに追加
2015年11月12日

表現力豊かに ボタン作成のチュートリアルまとめ「Call to Action: 13 Tutorials For Creating The Perfect Button」

クリックすることでアクションが起きることを認識させるためのツールとして利用されるボタン。形が大きさ、デザインなど、ベースの制作物によって合わせるタイプも選びたいもの。しかしどのように作ったらよいか分からず、ありきたりになってしまうことは意外に多いのではないでしょうか?今回はそんな時に参考にしたいボタン作成のチュートリアルまとめ「Call to Action: 13 Tutorials For Creating The Perfect Button」を紹介したいと思います。

button1112_1
4-Designer | Deep analysis on how to create a high-precision button

いろいろな種類のデザインボタンの作り方が分かりやすくまとめられた記事がピックアップされています。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:22  |  
Category: Design   
このエントリーをはてなブックマークに追加
2015年04月27日

クリックしたくなるフリーweb用ボタン素材「12 Fresh High Quality Free Web Button Files」

webサイトには見せる情報の他に、クリックさせてユーザーを誘導するための要素や仕掛けが必要となってきます。そんな時によく利用されるボタン素材をあつめた「12 Fresh High Quality Free Web Button Files」を今回は紹介します。

bottun0428_2
25 Free PSD Modern Buttons vol. 1 | Graphics Drawer

12種の厳選されたフリーボタン素材がまとめられており、シーンに合わせて使い分けることができそうです。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
このエントリーをはてなブックマークに追加
2014年08月17日

クリックエリアを分かりやすくデザイン的に見せるためのフリーボタン素材「40 Free Web Design Buttons For Web Designers」

webサイト上で、クリックして決定する動作を行ってもらうために必要なボタン。できるだけ分かりやすく、押しやすくするためには、デザインが重要な鍵になってきます。今回はそんなクリックエリアを分かりやすくデザイン的に見せるためのフリーボタン素材「40 Free Web Design Buttons For Web Designers」を紹介したいと思います。

button140817_2
Download Buttons PSD | Free PSD Files

さまざまなクリックシーンで利用できる、いろいろな種類のボタンがセットになってまとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
このエントリーをはてなブックマークに追加
2013年10月25日

PSDで作られたWebボタンのテンプレート集「45 Free And Useful Web Buttons In PSD Format」

Webサイトの制作においては、細かなパーツのクオリティにもこだわることで、よりデザインの精度を上げることができるものです。今回hそんな時に是非利用したい、psdボタンのテンプレート集「45 Free And Useful Web Buttons In PSD Format」を紹介したいと思います。

45fauwbipf_0
Web buttons by Gil Huybrecht – Designmoo

SNSやリンク、検索ボタンなど、さまざまな用途を想定した高品位なWebボタンが数多く紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
このエントリーをはてなブックマークに追加
2011年10月12日

表現力の高いボタン素材のPhotoshopテンプレート集「35 Free “Call To Action” Button Templates (PSD)」

いくつものページをつなげる重要な役割を果たすボタンは、デザインにもこだわりたいもの。そこで今回紹介するのが、表現力の高いボタン素材を手軽に利用できるPhotoshopテンプレート集「35 Free “Call To Action” Button Templates (PSD)」です。


Nice download button by Roy Pipeloi – Designmoo

シンプルなデザインはもちろん、クオリティの高いボタンテンプレートばかりが35種類も紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:21  |  
Category: Photoshop   
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2010年12月13日

ショッピングサイトで利用できるアイコンセット「Ecommerce Icons: 15 Useful Sets For Your Online Shop」

オンラインのショッピングサイトを制作する時に素材としてあると非常に役に立つアイコンセット「Ecommerce Icons: 15 Useful Sets For Your Online Shop」を今回は紹介したいと思います。


Free Icons (with PSDs): 30 E-Commerce Icons

ショッピングカートやsaleの表示、メール、カードのマーク、セキュリティなど、さまざまな種類のアイコンが多彩な種類で収録されています。いくつか気になったものをまとめてみました。下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:25  |  
Category: Design   
2013年04月27日

【商用可】面で描かれた、POPでキュートなアイコンセット「Flat Design Icons Set Vol1」

WEBの素材としてアイコンセットは珍しいものではなく、様々なものがリリースされており立体的なものから、ピクトグラムライクな平面的なものもあります。今回紹介するのはすべて面で描かれた、POPでキュートなアイコンセット「Flat Design Icons Set Vol1」を紹介したいと思います。

アイコンはシンプルながらも細かいところまで作り込まれており、面で描かれながらも陰影や光も表現されており、立体的に見えます。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:26  |  
Category: Design , Photoshop , WebDesign   
2009年07月04日

WEB開発者の為のチートシート「40+ Essential Front End Web Developer Cheat Sheets」

WEBの制作、開発に必要な知識は多岐にわたり、毎回使うものは大体覚えていたりしますが、その都度ちょっとしたところを調べて制作していると言う事をされている方も多いのではないでしょうか?今日紹介するのはそんな人に便利なWEB制作者、開発者のために作られたチートシートをまとめたエントリー「40+ Essential Front End Web Developer Cheat Sheets」です。

cheetsheet01
Gosquared CSS help sheets

全部で40ものチートシートが公開されていますが、今回はその中から気になったものをいくつか公開したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:08  |  
Category: WebDesign   
2012年03月15日

Photoshopブラシで表現できるフレームまとめ「100+ Free Photoshop Frame Brushes To Decorate Your Designs」

メイングラフィックやタイトルの装飾など、さまざまなシーンで活躍するフレーム枠は、テイスト違いごとにたくさんストックしておきたいもの。そこで今回紹介するのが、Photoshopブラシで表現できるフレームをまとめた「100+ Free Photoshop Frame Brushes To Decorate Your Designs」です。


Bri’s Picture Frame brushes by ~rabidbribri on deviantART

ラインの美しいフレームから、絵画を飾るようなリアルなフレームまで、たくさんのブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:01  |  
Category: Design , Photoshop   
2015年10月20日

最新の多彩な種類のフリー素材をまとめた「36 Freebies & Goodies For Web Designers」

フリー素材はいろいろな種類を持っているほど、デザインの幅が広がるもの。常に最新の素材をチェックしておきたいものです。そんな中今回紹介するのは、最新の多彩な種類のフリー素材をまとめた「36 Freebies & Goodies For Web Designers」です。

feebies1020_2
Mega Freebie Bundle | AlienValley

アイコン、テンプレート、wordpressテーマなど、いろいろな種類のフリーダウンロードできる素材がまとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:42  |  
Category: Design   
2011年01月11日

ブラシサイトから選ばれた厳選photoshopブラシ25選「25 Most Popular Photoshop Brush Sets from BrushLovers.com」

様々なグラフィック表現を可能にしてくれるphotoshopブラシ。日々様々なブラシがリリースされていますが、今日紹介するのはphotoshopブラシを集めて紹介しているブラシサイト「BrushLovers.com」からさらに選りすぐってまとめたエントリー「25 Most Popular Photoshop Brush Sets from BrushLovers.com」。


Pop Dots (6 Brushes)

比較的実用的なものを中心にまとめられています。今日はさらにその中からいくつか気になったブラシを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:26  |  
Category: Design , Photoshop   
2011年02月06日

様々なRESET CSSを集めた「CSS Reset.com」

様々なブラウザがリリースされており、CSSの解釈は各ブラウザで異なり、多くのWEB制作者が悩まされていますが、そんな問題を回避してくれる対策の一つが、Reset CSS、ブラウザ間の見栄えを少しでも揃えるために、ブラウザ固有のスタイルシートを初期化してくれるものですが、今回紹介するのはそんなReset CSSを集めたサイト「CSS Reset.com」を紹介したいと思います。

サイトからは様々な種類のResetCSSのコードをコピーできたり、それぞれのドキュメントが参照できたりと、ResetCSSを便利に利用出来るようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:45  |  
Category: WebDesign   
2011年12月19日

Wegraphicsから公開されたさまざまなデザイン素材まとめ「30 Gorgeous Freebies from Wegraphics」

web上で公開されているデザイン素材は、プロのデザインワークでもよく利用されており、クオリティの高い素材はダウンロード数も多く人気も高いもの。今回はそんな人気の高い素材を多数公開しているWegraphicsの素材の中から、特におすすめのデザイン素材をまとめた「30 Gorgeous Freebies from Wegraphics」を紹介したいと思います。


3D Explosion brushes

アイコンなどのデザインパーツはもちろん、Photoshopブラシや背景テクスチャなど、デザイン制作にすぐに役立つさまざまな素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2009年12月09日

商用可!ベクターで利用できるフリークリスマスアイコンセット「Free Smashing Christmas Icon Set」

季節的にすっかり街はクリスマスムードで、街にはクリスマスにまつわるものが溢れていますが、今日紹介するのはオーナメントやツリー、雪だるまなどなど、クリスマスの定番のモチーフをアイコンセットにした「Free Smashing Christmas Icon Set」です。

smashing_cris01

こちらのアイコンセットはベクターデータで配布されており、自由に大きさやカタチ、色などをカスタマイズすることができます。収録されているアイコンは以下の通りです。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:52  |  
Category: Design , vector   
tag: Design vector
2016年02月16日

クリエイティブな見た目が魅力なフリーフォントまとめ「22 New Modern Free Fonts for Designers」

デザイン性のあるフォントを利用するだけで、制作物のクオリティはグッと高まっていくと思います。今回はそんな時にぜひ参考にしたい、クリエイティブな見た目が魅力なフリーフォントまとめ「22 New Modern Free Fonts for Designers」を紹介したいと思います。

font0216_2
Elder Display on Behance

22種というフリーフォントがピックアップされており、どれも非常にデザイン性の高いものばかり。気になったものをまとめましたので、以下よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Font   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る