TOP  >  ボタン

Tag : ボタン

2017年12月18日

クリスマスなWebデザインのアクセントに!グラフィカルなトグルボタン「CodePen – Bauble Toggle」

クリスマスまであと数日。デザインのちょっとした部分にもクリスマス感を取り入れることで、より気分を高めることができるのではないでしょうか。そんな中今回ご紹介するのは、クリスマス気分を盛り上げてくれるグラフィカルなトグルボタン「CodePen – Bauble Toggle」です。

codepen-bauble-toggle1
CodePen – Bauble Toggle

クリスマスのオーナメントをイメージさせるイラストがボタンになった、可愛らしいトグルボタンです。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2017年09月29日

様々なチェックボックスを気軽に再現できる「CSS Checkbox Library」

WEBサイトで何かを選択する際に使用するチェックボックス。アンケート機能やメールフォームにはよく利用されていることから、機会が多いのであれば、テンプレートとして所持しておきたいものです。そんな方におすすめできる「CSS Checkbox Library」を今回は紹介したいと思います。

CSSCheckbox_Library_tip

チェックボックスに焦点をあて、いろんなタイプのものがまとめられています。気になったものをいくつかピックアップしているので下記よりご覧下さい。

詳しくは以下

(続きを読む…)

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

CSS3でつくるボタンの最新チュートリアルまとめ「50 CSS3 Button Tutorials For Designers [2017]」

WEBやアプリ上でのボタンはユーザーにとって大きな意味を持ち、非常に重要な要素。一目でボタンだとわかるようなつくりであることはもちろんのこと、遊び心あるエフェクトはユーザーの目を楽しませます。今回はそういったボタンを探している方におすすめ、最新CSS3ボタンのまとめ「50 CSS3 Button Tutorials For Designers [2017]」をご紹介します。

50_CSS3_Button_top
Off-registration button

すべてにデモがついているので、その場でどんな動きをするのかを確認することが可能。50種類もあるボタンの中でも気になったものをいくつかピックアップしていますので、下記よりご覧下さい。

詳しくは以下

(続きを読む…)

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

CSS3で創るボタンコレクション「10 Awesome CSS Button Libraries & Collections」

Web上においてボタンは欠かせないもの。何か物を購入する際や、メールを送る際には必ずクリックするものだからこそ、分かりやすく、デザイン性の高いものにしていきたい。そういったシーンでも活躍してくれるボタンコレクション「10 Awesome CSS Button Libraries & Collections」をご紹介していきたいと思います。

css-button-libraries-top
Bttn.css – Demo

コーディング上でデザインの可変が可能なCSSで作成されたボタンをまとめたものになります。下記にいくつかピックアップしてありますので、ご覧下さい。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
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年08月29日

iPhoneでのAPPデザイン設計に最適なワイヤーフレーム集「Basement iOS」

アプリをデザインするためには、まず全体の構成設計が必須。しかしすべてのページやコンテンツ分を一から作り上げるのはなかなか大変だと思います。今回はそんなときに活躍してくれる、iPhoneでのAPPデザイン設計に最適なワイヤーフレーム集「Basement iOS」を紹介したいと思います。

ioswire1

さまざまな種類のページ設計ワイヤーフレームがまとめられており、作りたいアプリのジャンル別に使い分けることができます。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:30  |  
Category: Design   
2015年11月04日

デザイナーがチェックしておきたい 最新のフリーリソース集「50+ fresh resources for designers, November 2015」

デザイナーなら常に最新の素材をチェックしておきたいもの。しかし膨大な数の素材から最良のものを探しだすのはなかなか難しいと思います。そんな中今回は、最新のフリーリソース集「50+ fresh resources for designers, November 2015」を紹介したいと思います。

resources1104_1
AristoTheme Flat File Cms Themes – Agron Sketch Theme

使いやすい・デザイン性のあるフリーでダウンロードできるリソースがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:59  |  
Category: Design   
2008年09月26日

多彩な表現を身につけるためのチュートリアル45選「45 Explosively Colorful Photoshop Effects」

デザインは幅が広くグラフィックデザインという分野だけに絞っても多種多様な表現が存在します。今回紹介する「45 Explosively Colorful Photoshop Effects」はphotoshopで作るグラフィックデザインの様々な表現のチュートリアルを集めたエントリーです。

その作品と言うよりも、写真を絵画調にに見せるTips、60年代のサイケデリック風に仕上げるTipsなど、グラフィックの技と言う色合いが強いチュートリアルが集められてまとめられています。今日はその中から特に気になったチュートリアルをピックアップして紹介します。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:05  |  
Category: Design , Photoshop   
tag: 
2009年03月17日

簡単に作りたい人の為の名刺のベクターデータ「12 Free Vector Business Cards」

ビジネスの上で重要なツールの一つ名刺。それゆえにこだわっている方も多いかと思いますが、逆に沢山配るものなので、簡単に作れれば良いとお考えの方も多いかと思います。今日紹介するのはクリエイティブな名刺を簡単に作成できる名刺のベクターデータ素材を配信している「12 Free Vector Business Cards」を紹介したいと思います。

meishivector

配信されている名刺は全部で12種類で、どちらかというと色鮮やかなものが多く、印象的なデザインが中心です。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:22  |  
Category: Design , vector   
tag: Design vector
2008年09月14日

photoshopのテキストエフェクトチュ−トリアル50「50 Creative Photoshop Text Effects」

グラフィックデザインをしていく上で、文字の装飾と言うのは欠かせない部分です。今日紹介する「50 Creative Photoshop Text Effects」はphotoshopによるテキストエフェクトチュ−トリアルを50個集めたエントリーです。

光彩、立体、テクスチャと様々な技法のテキストエフェクトが収録されていますが、今日はその中から気になったチュートリアルをいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:06  |  
Category: Design , Photoshop   
2015年01月15日

生地の織り目をテクスチャ化「40 Intricate Weave Patterns For Your Creative Design」

テクスチャにはさまざまな種類があり、イメージしているデザインに合わせて使い分けて使用するため、種類を豊富にストックされている方も多いのでは?そんな中今回は、暖かみのあるデザインなどに特に活用できそうな、生地の織り目をテクスチャ化した「40 Intricate Weave Patterns For Your Creative Design」を紹介したいと思います。

ori1
Pattern / *No Sleep 2 :: COLOURlovers

さまざまな織り方がある生地をテーマとし、いろんなテイストのテクスチャがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:43  |  
Category: Design   
2008年09月02日

8971のフリーフォントを収録した「fontspace.com」

欧文フォントやdingbats fontを探している方におすすめしたいのが今回紹介するフリーフォント配布サイト「fontspace.com」です。このサイトでは、 現在8971種類のフリーフォントが収録されていて無料でダウンロードできます。

フォントの個別ページではフォントセットのサムネイルが表示される他、フォントの大きさを選択してプレビューすることもできるので、かなり分かりやすくなっています。

(続きを読む…)

続きを読む
posted 11:50  |  
Category: Design , Font   
tag: Design Font
2013年01月01日

最近リリースされたクリエイティブなフリーフォント集「20 Must Have New Free Fonts」

日々、クリエイティブで高品質なフォントが世界中でリリースされておりすが、今日はその中から、最近リリースされたフリーフォントを集めたエントリー「20 Must Have New Free Fonts」を紹介したいと思います。


Stiff Staff

シンプルなものから、個性的なフォントまで幅広く、フォントが集められていますが、今日はその中から幾つか気になったフォントをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:30  |  
Category: WebService   
tag: 
2010年03月21日

商用利用可!毎日PSDファイルを提供してくれるpsdパーツ配布サイト「365psd」

photoshopを利用して制作をしている方にはかなり嬉しいpsdファイル。作り方にもよりますが、合成前のpsdファイルがあれば、一部分を流用したり、カスタムして広範囲で利用できます。今日紹介するのはそんなpsdファイルを毎日提供してくれる「365psd」というサイトです。

365psd01

毎日、一つづつ更新されていて、多くの賛同するデザイナーによって運営されているみたいで、それだけに多種多様なpsdファイルが公開されています。公開されているファイルの中からいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:46  |  
Category: Design , Photoshop   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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