クリック率・コンバージョン率を高めるボタン。3つの大きなポイント
WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在
これは使いやすい、美しいCSS3グラデーションのボタンが簡単に作成できるオンラインツール -CssGradientButton
パネル右：グラデーションやシャドウなどの編集 作成が完了したら、コードを下部に生成されます。 生成されるコードは下記のようになっています。 <!DOCTYPE html><html><head> <style type="text/css"> .button_example{ border:solid 1px #819bcb; -webkit-border-radius: 3px;width:150px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center;
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
立体感がリアルなON・OFFスイッチ実装jQueryデモ:phpspot開発日誌
jQuery Fancy Switch | Papermashup.com 立体感がリアルなON・OFFスイッチ実装jQueryデモ。 CSS3でやっているわけではなく、画像を切り替えているだけなのでそこまで驚くことではないかもしれませんが、かなり分かりやすいデザインであることは言うまでもなく、更にオシャレなデザインとなっております つい押したくなってしまうようなデザインですね 関連エントリ iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」 iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」
CSS3で線（border）をグラデーションさせるテクニック
Illustrator とかでよくやる「塗りとパスのオフセットを使って実現する線のグラデーション」を、CSS3で実験してみました。 ↓とりあえず、border を使った場合と、線をグラデーションさせた場合の作例です。CSS だけで作っています。モダンブラウザで見てください。 微妙な違いかもしれませんが、線にグラデーションを適用した方、よりリアルで繊細な印象になります。 作り方 border は使いません。替わりに、ネストしたボックスを作り、親ボックスをグラデーションさせることで、線がグラデーションしているように見せます。 HTML 内側に span を入れ込んで「重ねた塗り」を実現します。 <a href="#" class="button"><span>ボタン</span></a> 外側のボックス (a) の padding が線幅になります。内側のボックス (span) は、白で塗りつ
メンテナンス中
ただいまメンテナンス中です。 （The server is now under maintenance） ご迷惑をお掛けいたしまして、大変申し訳ございません。 メンテナンス作業が終了次第、サービスを再開いたします。 今しばらくお待ちいただきますよう、よろしくお願い申し上げます。
画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションを適用する
CSS3を使って、画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションなどを適用するさまざまなテクニックを紹介します。 また、Chrome, Safari, Firefoxなど、最近のブラウザで期待通りに表示されないのを回避する方法もあわせて紹介します。 CSS3 Image Styles [ad#ad-2] 最近のブラウザで生じる問題点 画像に角丸やドロップシャドウを適用すると期待通りにならないことがあります。これはChrome, Safari, Firefoxなど、最近のブラウザでも生じます。 Chromeでの表示 デモでは「border-radius」と内側に「box-shadow」を適用していますが、Chrome, Safariではキャプチャのように欠けて表示されてしまいます。 また、Firefoxでは「border-radius」は期待通りですが、「box-shad
jQueryとCSSで作るiPhone風ラジオボタン・チェックボックス
2014年8月20日 jQuery いつも使っているラジオボタンやチェックボックスにもっと彩りを！ここではCSSとjQueryを使ってiPhone風のデザインに変える方法を紹介します。使用する画像は一枚のみ。CSSスプライトで表示位置を変えます。サンプルも用意してみたので覗いてみてくださいね！ ↑私が10年以上利用している会計ソフト！ サンプルはこちら。IE7, IE8, FF, Chromeで正常動作 See the Pen Mobile like radio/check buttons by Mana (@manabox) on CodePen. ファイルを準備 必要なファイルを準備します jQuery こんな感じの画像を作る コーディング ファイルを読み込む ヘッダー内にjQueryを読み込ませます。 <script type='text/javascript' src='/samp
オンラインでボタンを作成できるジェネレーター10:phpspot開発日誌
10 Online Website Button Generators | jQuery4u オンラインでボタンを作成できるジェネレーター10 とりあえずサクッとボタンっぽい素材が必要な時に簡単にブラウザ上で作れるジェネレーターが１０個まとまっていました。 汎用的なものから個性的なものまで作れます 関連エントリ これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集 Twitter・mixi・facebook・はてブ等のソーシャルボタンを瞬時に埋め込めるWordPressプラグイン「WP Social Bookmarking Light」 CSS3で実装されたボタンのサンプルやチュートリアル総まとめ
UIの研究や作成に参考にできるフリーのUIキット４２:phpspot開発日誌
42 Outstanding FREE UI Kits for Web Designers | Queness UIの研究や作成に参考にできるフリーのUIキット４２。 PSD形式などで利用することができるようです。サイトのアイデアを練りつつ、どんなUIにしたらベストかな？といったことを考える際にもUIが揃っているので参考にできるかもしれません。 関連エントリ LionのUIキットPSD これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 独特のUIを提供してくれるjQuery用のUIフレームワーク「Ninja UI」 色々と使えそうなフリーのUIエレメントPSD７０種
これは斬新！木のUIで訪問者を驚かせよう、なUIパーツ:phpspot開発日誌
Got Wood? UI Design Elements | MediaLoot これは斬新！木のUIで訪問者を驚かせよう、なUIパーツ。 木のiPhoneケースや木のキーボード等、木とITを絡めるとなぜかインパクト絶大ですが、木のUIキットを発見しました。 これでページデザインをすれば自然の温かみによってリラックスした気分でページを使えるのかも。 基本的なUIパーツはそろっているので頑張ればページに適用できるはず。 レイヤーに綺麗に分かれているのがいいですね。 見ていてなにか作りたくなりました。 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 モックアップ作成用PhotoshopのUIキット「Soft UI Kit」 ブルーが美しいモダンなＵＩキットPSD 色々と使えそうなフリーのUIエレメントPSD７０種
最近のインターフェイスデザインから学ぶ、7種類のボタンデザイン
ユーザーのアクションを誘う購入や送信や検索ボタンなど、最近のインターフェイスデザインでよく見かける7種類のボタンデザインを紹介します。 Common elements used in interface button design [ad#ad-2] 下記は各ポイントを意訳したものです。 また、元記事ではそれぞれのボタンを作成するPhotoshopのチュートリアルも掲載されています。 1. テクスチャを使ったボタン 2. パターンを使ったボタン 3. 3Dを使ったボタン 4. 1ピクを使ったボタン 5. 背景をインデントしたボタン 6. グロウを使ったボタン 7. ハイライトを使ったボタン 1. テクスチャを使ったボタン テクスチャはボタンにわずかな奥行きを与え、クリックが可能であることが分かるようにする素晴らしいテクニックです。
[CSS]かわいいストライプ柄を作成するスタイルシートのチュートリアル
画像を使用しないで、ストライプ柄のボタンを作成するスタイルシートのチュートリアルを紹介します。 ストライプ柄はボタン以外にも適用が可能です。 Simple buttons with light stripes (pure CSS) デモページ [ad#ad-2] かわいいストライプ柄のボタンは、マウスホバーのエフェクトも実装されています。 HTML ボタンはテキストを使ったa要素で作成されています。 <a class="bt-blue fx-stripes" href="#"><span>Blue button</span></a> <a class="bt-grey fx-stripes" href="#"><span>Grey button</span></a> CSS：ストライプ ストライプのベースとなるスタイルシートです。 .fx-stripes:before { content:
jQueryとCSSで実現する押しやすくオシャレなチェックボックス実装チュートリアル:phpspot開発日誌
Better Check Boxes with jQuery and CSS | Tutorialzine jQueryとCSSで実現する押しやすくオシャレなチェックボックス実装チュートリアル。 独自のチェックボックスを実装するチュートリアルとサンプルがダウンロード出来ます。 普通のチェックボックスは小さくて連続して押したりする場合は結構ストレスがたまったりしますね。 というわけで次のようなチェックボックスを作る例です。 大きくて押しやすく、画像ベースにデザインされており、なかなかカッコいいというのも特徴。 スクリプト部分にはjQueryプラグインが使われていますが、５０行程のスクリプトなので改造も容易です。 標準のチェックボックスのストレスを取り払い、デザイン性も持ち合わせたチェックボックス導入の際に参考にできます。 関連エントリ デザイン性に優れたクリエイティブなフォームデザインのサン
綺麗なアイコン付きボタン４２個パック:phpspot開発日誌
Mega Web Buttons Pack #1 | Codrops 綺麗なアイコン付きボタン４２個パック。 次のように、ボタンにアイコンが付いてより分かりやすくなっているものをダウンロード可能です。 jQueryとCSSが使われていて比較的容易に実装できてマークアップもシンプルになってます。 アイコンがあると無いとでは格段に見やすさが違いますね。 関連エントリ CSSスプライトでカッコイイボタンを作るチュートリアル シンプルさがなんともいい感じのCSSボタン集「Super Simple CSS Buttons」 CSSでクールなボタンを作るまとめ CSSでボタンを綺麗にスタイルするサンプル集
メタリック感がリアルかなりクールなブラックのボタン作成Photoshopチュートリアル:phpspot開発日誌
Stylish Metallic Button in Photoshop | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials メタリック感がリアルかなりクールなブラックのボタン作成Photoshopチュートリアル。 次のようなボタンを作成するチュートリアルです。 円のふちはレイヤースタイルで比較的容易に実現できます。 あとはレイヤースタイルとパスツールを使ってよりリアルにしていきます。 レイヤースタイル、パスツール、グラデーション機能をフルに使っていて色々と応用できそう。 関連エントリ プロレベルのPhotoshopチュートリアル集 クラウド時代にファンシーな雲を描画するPhotoshopチュートリアル ボタン作成のPhotoshopチュートリアル集
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3の制作をぐっと楽にする厳選20のオンラインツール
CSSベースのかっこいいボタンがぱっと簡単に作成できるオンラインサービス -Twitter Bootstrap Button Generator
アイコン付きの分かりやすいボタンをCSS3で実装するサンプル:phpspot開発日誌
クールなUIパーツを収録したUI作成用PSDキット「Transparent Glass UI」:phpspot開発日誌