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   
このエントリーをはてなブックマークに追加

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

2016年08月27日

画像に併せて最適なグラデーション背景を出力できる「Grade.js」

デザインにおいて配色はとても重要な要素であり、かつ難しいものでもあります。単色同士の掛け合わせのみならず、写真にも色は数多く使われており、利用する写真によっても合う色、合わない色があります。今日紹介するのは画像に併せて最適なグラデーション背景を出力できる「Grade.js」です。

gradejs

このjavascriptはgradient-wrapというclassで指定した要素内の画像に応じて、その配色を読み取り、画像を引き立てるのに最も有効なグラデーション背景を生成してくれるjavascriptとなっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:32  |  
Category: javascript , WebDesign   
2018年11月23日

年末年始のデザインに取り入れたいフリーフォントまとめ「Free Fonts: 25 New Fonts for Graphic Designers」

フォントはいくつあっても困ることのないアイテムです。これまでも数々のフォントを紹介していますが、今回紹介するのは、クリスマスやお正月のデザインをもっとハイクオリティに演出できるフリーフォントまとめ「Free Fonts: 25 New Fonts for Graphic Designers」です。

download
Free Fonts: 25 New Fonts for Graphic Designers

シンプルなフォントから個性的なものまで、冬を彩る様々なフォントが集約されたサイトの紹介です。中でも気になったものをいくつかピックアップしてみました。

詳しくは以下
(続きを読む…)

続きを読む
posted 09:00  |  
Category: Design , Font   
2015年03月01日

豊富なバリエーションを揃えた背景パターンチュートリアル集「Pattern Tutorials: 25 Background Pattern Design Tutorials & Free Patterns」

背景に利用することでデザインをより魅力的に見せてくれる効果を発揮するパターン素材。すでに用意されているものを使用するのも良いのですが、時には自身で作成したものでデザインを完成させたい時もあるのではないでしょうか?今回はそんな時に参考にしたい背景パターンチュートリアル集「Pattern Tutorials: 25 Background Pattern Design Tutorials & Free Patterns」を紹介したいと思います。

pattern1
Create a Wallpaper with Vector Geometric Blurred Shapes in Illustrator and Photoshop

豊富なバリエーションを揃えたチュートリアル集で、ソフトのいろいろな技術等も参考にすることができそうです。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2008年11月24日

新人デザイナーのためのillustrator+αショートカットキー一覧のまとめ

ショートカットキーを使えば、すぐできること、改善できることというのが沢山あります。しかしなかなか慣れてくるまではどうしてもUIに頼って、ショートカットキーを使わないなんて人も多いかと思います。そこで今回は操作に慣れていない人向けにillustoratorのショットカットキーを覚えるために役立つWEBサイトを紹介したいと思います。


photo by laffy4k

探してみるとものすごい数のチートシートがありますが、今日は使えそうなものをいくつかピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:12  |  
Category: Design   
2008年08月06日

おもちゃ箱の中身のようなベクターデータ「Pimpin’ Vector Pack」

今まで様々なベクターデータを紹介してきましたが、今日紹介する「Pimpin’ Vector Packはおもちゃ箱をひっくりかえしたようなPOPで可愛らしいフリーで使えるベクターデータパックです。

ふき出しから、ハートのマシンガン、王冠、手錠、スペースインベーダーなどなど、ジャンルにとらわれず、上記のように色とりどりの様々なオブジェクトのベクターデータが収録されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:59  |  
Category: Design , vector   
tag: Design vector
2017年07月18日

プログラマーのためのWEBサービスや開発系のアイコンセット「devicon」

Twitterなどの有名なアイコンは、自分がよく使用するものはストックとして持っているかもしれませんが、必要時にない場合は探すことになり、非常に手間を感じるのではないでしょうか。そんな手間を省いてくれる「devicon」を今回はご紹介します。

devicon

デベロッパーが持っておくと便利なアイコンが多数まとめられており、ソースコードも記載してくれている優秀なアイコンセットになります。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Tool , WebDesign   
2012年07月10日

素材感のあるシームレステクスチャまとめ「Handy Roundup of Free Seamless & Repeating Textures」

幾何学模様などパソコン上で制作した素材はどこまでも素材を継ぎ足したりと、利用しやすい加工が自由にできますが、布や紙など素材感のあるテクスチャをシームレスに利用するのは難しいもの。そんな中今回紹介するのが、素材感のあるシームレステクスチャをまとめた「Handy Roundup of Free Seamless & Repeating Textures」です。


Seamless Wooden Hedge Texture | Free resources for designer and developers

木目やレザーなど、質感を楽しめるテクスチャが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:16  |  
Category: Design   
2015年01月27日

さまざまな描写のフリーポップアップウインドウまとめ「45 Free Popup, Alert Window, Notification, Photoshop Designs」

webサイト上で、メニュー選択や特別なアクションをする際に登場することの多いポップアップウインドウ。どうしてもシンプルな描写になってしまいがちですが、今回はそんな状況から開放される、さまざまな描写のフリーポップアップウインドウまとめた「45 Free Popup, Alert Window, Notification, Photoshop Designs」を紹介したいと思います。

pop1
minimal dark dropdown menu psd PSD file| Free Download

多彩な表現の、メニューやアラート、通知機能などを取り入れたポップアップウインドウが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:08  |  
Category: Design   
2011年05月12日

webサイト制作のアイデアソースとなるポートフォリオサイト30選「30 Portfolios to Inspire You」

自信のこれまでの作品やアートワークを、多くの人に見てもらう為に作成するポートフォリオサイト。作品はもちろん、サイト自体のデザイン性やクリエイティブ性も、センスを問われる重要な要素の一つです。そこで今回は、ポートフォリオサイト制作の参考となりそうなwebサイトまとめ「30 Portfolios to Inspire You」を紹介したいと思います。


Rickard Sund

素材や色使いへの配慮が行き届いたポートフォリオサイトが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2017年10月17日

webサイトのUIデザインに関するPhotoshopチュートリアルまとめ「50 Tutorials for Designing Website in Photoshop – Ultimate Roundup」

デザインのスキルアップはデザイナーにとって重要な課題。日々技術を上げるため、常にアンテナを貼っている方も多いはず。そんな中今回ご紹介するのは、webサイトデザインに関するPhotoshopチュートリアルをまとめた「50 Tutorials for Designing Website in Photoshop – Ultimate Roundup」です。

50-tutorials-for-designing-photoshop1
Design a Textured Outdoors Website in Photoshop

デザインの参考やスキルアップに使える、WebのUIデザインに関したチュートリアルが、50種類もまとめられています。その中から特に気に入ったものを幾つかピックアップしてご紹介しますので、ご確認下さい。

詳しくは以下

(続きを読む…)

続きを読む

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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