ボタンは私たちにもっとも身近な、ごく普遍的なインタラクション要素です。とてもシンプルなUI要素でありながらも、ここ数十年でそのデザインは大きく変化しましたが、いつの時代も大事なのはその明確さと認知性でした。 この記事では、ボタンデザインの進化を振り返り、効果的なボタンを作るための方法論について見ていきたいと思います。 スタイルの進化 立体的なボタン 昔からOSのボタンデザインは、周りの要素からボタンを見分けるためにレリーフとシャドウを使ってきました。 なぜこのデザインなのかというと、シンプルな原理が基本となっています。ボーダー、グラデーション、ドロップシャドウを使用して背景とコンテンツに対してボタンを引き立たせ、クリックできる要素だということを簡単に識別できるようにしているのです。
none file print delete clear save upload cloud folder camera photo image barcode phone music video playmedia record play pause stop eject bell volumeup volumedown volume off light dark lock unlock flag wifi time map geo location pin walking bicycle car bus plane compass cursor pointer grab arrowup arrowright arrowdown arrowleft up right down left back next dropdown sort good bad full small move un
検証したパターン 調査結果 全アクセスのコンバージョン率（CVR） 結果は下記の通りとなりました。 なんと！緑色がもっともCVRが低いという結果になりました。 どうやら、無条件に「緑色のボタンはクリック率が高い」という結果にはならないようです。 Firefoxをダウンロードしたユーザーと、ビーワークスの採用に応募しようとしたユーザーには、何か違いがあったのでしょうか？ 「どこから流入したか」によって結果に違いがあった 調査対象ページにアクセスしたユーザーは、何かきっかけがあって、ビーワークスの採用に興味を持ってアクセスしているはずです。そこで、どこから流入したのか、「参照元」のセグメント別に結果を分けて分析してみます。 こうやってセグメント別に分けてみると、参照元によってCVRの平均値自体に大きな差があることがわかります。CVR順に並べると、検索 ＞ WebNAUT ＞ なめぱら という結
WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在
Twitter, Facebook, Google+, RSSなど、ソーシャルメディアの不揃いなデザインのボタンを統一した美しいデザインにしてブログやサイトに設置するjQueryのプラグインを紹介します。 Koottam Social jQuery Plugin [ad#ad-2] Koottamの主な特徴 Koottamのデモ Koottamの使い方 Koottamの主な特徴 Twitter, Facebook, Google+などのアカウントを設定するだけで設置できます。 7種類のテーマがあり、CSSベースでカスタマイズも可。 カウントの表示はスタティック・アニメーションに対応。 カラーは簡単に変更できます。 より大きいカウント用に省略表記も対応。 MITライセンスのため、あらゆるブログ・サイトに使用しても無料！ Koottamのデモ
ユーザーのアクションを誘う購入や送信や検索ボタンなど、最近のインターフェイスデザインでよく見かける7種類のボタンデザインを紹介します。 Common elements used in interface button design [ad#ad-2] 下記は各ポイントを意訳したものです。 また、元記事ではそれぞれのボタンを作成するPhotoshopのチュートリアルも掲載されています。 1. テクスチャを使ったボタン 2. パターンを使ったボタン 3. 3Dを使ったボタン 4. 1ピクを使ったボタン 5. 背景をインデントしたボタン 6. グロウを使ったボタン 7. ハイライトを使ったボタン 1. テクスチャを使ったボタン テクスチャはボタンにわずかな奥行きを与え、クリックが可能であることが分かるようにする素晴らしいテクニックです。
検索ボックス、ボタン、アラートパネル、プルダウン、スクロールバーなど、ウェブデザインで使用するさまざまなエレメントをかわいらしいデザインでまとめたモックアップ用のPSD素材を紹介します。
ユーザーにより多くクリックされる効果的なボタンにするには、どのように手をいれたらよいのかをステップごとに紹介します。
ログインフォームを実装する際に、大切な7つの要素と重要な1つの機能を紹介します。 元記事では下記のCSS3で実装されたフォームもダウンロードできます。 フォームのタイトル このフォームが何についてのものであるか手短に説明されたタイトル。特に、ウェブサイトの名称を記すことは非常に重要です。 非メンバー用のリンク 非メンバーが偶然、このページを見つけてしまうことがあるかもしれません。そして、メンバーを増やすチャンスもあるので、登録ページへの誘導も行っておきます。 ラベルとフィールド ログインフォームは通常、2つのフィールドで構成されていますが、ラベルは読みやすいようにします。 パスワードを忘れた場合 これは同じく、非常に重要なリンクです。多くのユーザーは多数のアカウントとパスワードをもっているものです。そして、しばしばそれはあなたのサイトでどれなのか忘れてしまうことがあります。 また、配置する
IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。 ホバー時のキャプチャ 実装のポイント スケラｰビリティ 文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小 アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能 フレキシビリティ あらゆるHTML要素に適用可能 コンパチビリティ 主要ブラウザに優雅なグラデーションを提供 ユーザビリティ ノーマル時、ホバー時、アクティブ時を用
9 FREE Creative Buttons for You to Download | UnderWorld Magazines なんともいい感じなボタン素材色々。 次のようないい感じのデザインのボタンが色々紹介されています。 デザインの感じも様々で、サイトデザインに合わせたものを選べます。 なんとなくサイトのボタン味気ないなぁ、という方は参考にしてみるとよさそう。 ボタンデザインでクリック率も変わったりするようなので、広告のコンバージョンを測る要領でテストしてよいものを採用する等するとよさそうですね。 関連エントリ シンプルでいい感じのボタンテンプレートPSD iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 ページの端っこに常に表示させるボタン実装用jQueryプラグイン「EdgeButton」
Best of Free Clean PSD Buttons ready for web2.0 | djavupixel.com かなりクールにデザインされたPhotoshop用のボタンテンプレート集。 CSS3でかなりボタンをデザインできるようになったとはいえ、そこまでやるなら画像にしちゃったほうが、という場面も多くあります。 Photoshop用のボタンテンプレートが色々まとまっていたのでデザインの際の参考にできそうです。 36 Free High Quality Web Buttons Different buttons and states with sliders and drop downs by James McDonald Download 60 glossy web buttons in PSD & PNG Grey Button with hover by Ignaci
知っていましたか？バナーの色の違いでクリック率が大幅に変わるのをご存知でしたか？ある実験結果がありますので、ご紹介しようと思います。 こんにちは、マメボーです。 今日は、おそらくアフィリエイターさん必見ですよ！ アフィリエイターさんは報酬を得るため 商品を検証してレビューを書いて、販売ページに誘導するです。 ですが、 せっかく検証して、良いレビューを書いても、 販売ページに誘導できなくては、まったく意味が無いですよね。 そのためにいろいろ工夫していると思います。 みなさんはどのような工夫をしていますか？ 一番思いつく方法としては、 目立たせる！ ですよね。 こんな感じですか？ ↓↓↓ 「そう、そう、それ！」 って思われた方は、 実は非常に損をしているかも知れませんよ。 もっともクリックされやすいバナーボタンの色は これは、2009年にMozillaのFirefoxがある実験を行った結果です
A collection of great UI buttons spotted in the wild. Curated by MaxButtons. Submissions welcome.
色のついた鉄のような、黒光りしたボタン6種類12点です。 サイズも2種類用意しましたので、用途に応じてご利用ください。 画像はPNG32bit形式で制作していますので、IE6などの古いブラウザはボタンの余白が透過されません。ご注意ください。 fireworks編集データを無料ダウンロード
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く