勝つ「購入ボタン」をデザインするための5つのヒント
あなたがデザイナー、またはオンラインマーケティング担当者、または何かを販売しようとしているWebサイトを所有している場合は、適切な「購入ボタン」を設計する必要があります。そして、あなたはすぐにそれを置くだけであることがすぐにわかります “今買う” 青い四角形のテキストだけでは十分ではありません。.
幸いなことに、適切な「購入ボタン」を設計することは、基本的な知識を習得した後はそれほど難しくありません。ここに行きます.
まず第一に、 ボタン上のテキストは最も重要なものです, しかし、対処が必要な機能が他にもいくつかあります。テキストが最も重要だと言うのはなぜですか。これを想像しなさい - それのテキストが言うなら美しくデザインされたボタンを持つことのポイントは何である “地獄に行く!”? ケースクローズ. 良いコピーはお金が作られるところです.
本日の記事では、議論しています 5つの重要な特徴 適切な「購入ボタン」の見てみましょう!
1.全体的なスタイル
それが最も重要な特徴であるので、これは理由なしにこのリストの＃1ポイントではありません.
あなたはしたい ボタンを紫色の牛に変える. これは、Seth Godinによって普及した概念です。要するに、あなたはそれが注目に値することを望みます。驚くべきことに、私は見逃せないものを意味します。牧草地の真ん中にある紫色の牛のようなもの.
一部のデザイナーはこれが特に得意ではありません。それが置かれているウェブサイトの色とスタイルと美しく結び付くボタンを作成するのは魅力的です。最初は非常に良い考えのようですが、それだけではありません.
問題は、そのようなボタンが注目に値するものではないということです。あなたのボタンを溶け込ませたくはありません。あなたはそれを際立たせたいのです。それゆえ、それはちょうどそのウェブサイトと一致している必要がある何かとしてではなく、あるウェブサイト上に座ることが起こる全く別の要素として作成されるべきです.
紫色の牛のようなボタンの良い例を挙げてみましょう。.
Mozilla Firefox
これがFirefoxのダウンロードページの外観です。私はあなたに一つのことに気付いてほしい。左側のボタン、ダウンロードボタンは、そのページの他の何にも似ていません。それは唯一の緑のことです。 Firefoxのロゴが表示される唯一の場所です。それはそこで最大の要素の一つです。それは折り目の上に位置しています.
これらのすべての特性はこのボタンを非常に目に見えるようにします。紫色の牛です。あなたがそれを見ていないと言っているならあなたはただ誰かを感動させようとしています.
手短に： 注目すべきボタンを狙う.
外観
で始めましょう 色.
あなたが注目に値することを望むならば、ページの他のどこにも使われていない色を使ってください。 Firefoxの人たちが彼らのウェブサイトでやっているのと同じように。あなたはあなたのウェブサイトの現在の配色とよく似ているけれどもまだ非常に異なっている色を見つけるために配色デザイナーのようなツールを使うことができます.
そして “違う” ここにキーワードです。あなたのウェブサイトが大部分青であるならば、あなたは青の購入ボタンを欲しくありません。あなたは青の色合いが欲しくありません。青みがかって見えるものは何も欲しくありません。あなたはピンク、またはオレンジなどが欲しい.
もう1つトリックオレンジは赤のすぐ後に最も目に見える色として知られています。しかし、それは赤がするすべての否定的な感情を高めるわけではありません。 “やめる”, “外を見る!”, そして “危険”）インターネット上で最も人気のあるオレンジ色のボタンは、 amazon.com.
次に注目するのは ボタンのサイズ. まあ、私が言うことができる、それは大きい必要があります。大きいほど良いです。 （やはりFirefoxの例）
“もっと大きくすることはできますか?” 設計段階で尋ねるべきよい質問です。たくさんやりなさい.
あるべきですか シンプルまたは派手? ボタンは派手すぎてはいけません。 Firefoxのボタンをもう一度見てください。派手です。オレンジ色のキツネがついていますが、それでもボタンのように見えます。そしてそれはあなたが渡ることができない境界です。あなたのボタンが誰かに見えないならば、だれもそれをクリックしないでしょう.
だからこそ、派手で単純な答えはありません。あなたはただ自分自身で見つけなければなりません。常に分割テスト2つのボタンを作成します。1つは派手で、もう1つは単純です。両方を同時に使用して、どちらが優れているかを確認してください。 Googleウェブサイトオプティマイザーはそれをあなたを助けます.
簡単なボタンの簡単な例.
テーマヒューズ
ご覧のように、ボタンはオレンジ色のキツネを使用していませんが、それでも非常に見やすくなっています。実際のところ、ThemeFuse（私がその一部であるプレミアムWordPressテーマストア）は、ショートコードと呼ばれるちょっとしたものを提供します。とりわけ、これらのショートコードにより、見栄えの良いボタンを簡単に作成できます。.
たとえば、次の1行だけで
[button link = "domain.com"]私の素晴らしい製品を購入するにはここをクリックしてください！[/ button]
私はこの結果を得ます：
3.フォント
Sans-serifフォント はあらゆる種類のボタンの標準です。それは、sans-serifフォントはあらゆるオンラインでの使用において非常に読みやすいからです。 （反対に、serifフォントは印刷出版物に適しています。）
ボタン上のコピーは、ページ上で最も重要なテキストであるため、できるだけ読みやすくする必要があります。オールキャップはお勧めできません。大文字と小文字の混在ははるかにうまく機能します。大文字と小文字が混在しているとは、すべての単語の最初の文字が大文字であることを意味します。 （のような言葉を除いて “にとって”, “の”, “そして”, 等。）
（画像ソース：Gomediazine）
あなたが使うことができるいくつかの安全なフォントは、次のとおりです。Arial、Helvetica、Franklin Gothic、Myriad、または他の古典的なサンセリフフォント、実際には.
今色についてはどうですか。コピーは、もちろん、ボタンの色とは対照的でなければなりません。あなたはグレーオングレーはしたくない。あなたは白黒、またはオレンジ上の青が欲しい.
繰り返しますが、テキストは読みやすくする必要があります.
配置
最適な配置は、Webサイトのデザインによって異なりますが、これはおそらく驚くべきことではありません。しかし遵守する価値があるいくつかのルールがまだあります.
に置きます 最も明白な場所. ここで創造的になろうとしないでください。配置は顧客/ユーザーにとって明白であるべきです.
誰かがウェブサイトを訪れるたびに、彼らは特定の場所で特定のものを見ることを期待します。左上隅にロゴ、右上隅にショッピングカートの概要、フッターに著作権条項などがあります。あなたの仕事は、購入ボタンの最も明白な場所を見つけてそこに配置することです。.
もちろん、それは同時に最も目に見える場所である必要があります。これは2つのことを意味します。
- それ 絶対に 配置する必要があります ひだの上, そして
- 空白を恐れてはいけません。 Whitespaceは、あらゆる優れたWebデザイナーの友達です。覚えておいて、それはあなたがウェブサイトに置くことができるものの量は関係ありません、あなたがそれからあなたがそれから取り除くことができるものの量が重要であることは重要です.
ボタンを複製してページの下部に配置することで、配置戦略をステロイドに配置できます。そのようにして、誰かがページ全体を読むとき、彼らはまだそれの一番下で行動をとることができます.
5.追加の要素
これはケーキの上のアイシングです。追加の要素によって、ボタンの表示がさらに向上します。要素の例： 矢印、ショッピングカート、虫眼鏡、プラス記号、またはさまざまなブランド要素.
私のお気に入りの例 - Firefoxの例 - オレンジ色のキツネ（別名ロゴ）.
経験則では、追加の要素を使用します。 ボタンの目的を強調する. たとえば、下向きの2つの矢印はダウンロードボタンに適しています。ショッピングカートのアイコンは、カートに追加ボタン（上記のamazonの例）と併用すると効果的です。虫眼鏡は検索ボタンに最適です。等々.
いくつかのブランド要素を使用することもできます。例えば、フィードを購読するボタンが付いた標準のRSSアイコン、Twitterにフォローボタンが付いた鳥のアイコン、Firefoxがダウンロードボタンが付いたオレンジ色のキツネ、バイマイボタンが付いた独自のロゴなどがあります。ものボタン.
ここではいくつかの例を示します。
ウェイクインタラクティブ
コマーシャル
中程度
Unlocking.com
Sofasurfer.eu
アップロードする
「無料」の力
もう1つのトリックは、英語で最も強力な単語を使用することです - 無料。何かが無料であると宣伝されているときはいつでも、人々は予想通りに非合理的に行動し始めます。 ダンアリリー, 「無理の逆さま」とは、私が何を言っているのかを調べることです。）
その他の例：
フレッシュブック
ウフー
Freeagent.com
次は何ですか?
もしあなたがPhotoshopや他の似たようなソフトウェアに精通しているならば、あなたはただ先に進んで今すぐいいボタンを作成することができます。もう一つの方法は、私がこの記事の前半で述べたように、ThemeFuseによって任意のWordPressテーマのラッキーオーナーになることです。.
素晴らしい購入ボタンをデザインする際のアドバイスは何ですか。? あなたの意見でこの記事を更新したいです。.
