« ブログのトップページに戻る

2014年のトレンド、ゴーストボタンを調べてみた

   投稿者 : 2015年2月20日 By

イメージ写真

ここ数年のあいだ、フラットデザインはWEBデザイントレンドとなっている。
昨年2014年は、このフラットデザインWebサイトの流れのなか、爆発的なトレンドとなったのがゴーストボタンデザインだ。
ゴーストボタンは、枠線のみで表現され、透明化されたボタンデザインである。背景色を透明化または薄い半透明化したボタンデザインである。
ほとんどの場合、テキストとアウトラインのみで作られ、幽霊のようにサイトに溶け込むことから、「ゴースト」ボタンと呼ばれるているようだ。
フラットデザインとの相性が良いことから、フラットデザインの流行とともにWebサイトで使われるようになった。特長としては、これまで使っているボタンに比べクリック範囲が広く、背景画像の邪魔にならない。ボタンは画面の真ん中に配置されていることが多いなどがある。今回はこのゴーストボタンについてまとめてみた。

1.ゴーストボタンの特長

ゴーストボタンは、これまでのデザインに比べ、特に清潔感のあるクリーンな印象がある。シンプルでミニマルなデザインは、Webサイトでメインとなるビジュアルの邪魔をせずに設置できる。下記にその特長を整理した。

  • アウトラインに囲まれている。
  • カラー白または黒。テキストと境界線で構成
  • これまでのボタンよりも大きい
  • Webページの目だつ場所に配置
  • 単独に使用されるか、またはいくつかのボタングループと一緒に配置
  • ボタンは塗りつぶさずに透明
  • 背景画像が透けてみえる
  • フラットデザインと相性がいい
  •  

2.ゴーストボタンのメリット、デメリット

今年もデザイントレンドの流れとしてあるゴーストボタンではあるが、使用に際しては長所と短所を理解することが重要である。

メリット

  • モダンなデザインで、クリーンでシンプルなデザイン
  • 背景画像を邪魔しない、画像を認識できる
  • 強調しない控えめなデザイン
  • 簡単に設計でき、実装できる
  • 洗練された印象、高級感を与える

デメリット

  • ユーザーを混乱させる可能性がある
  • 背景画像の印象が強く、ボタンが埋もれてしまう(視認性が悪い)
  • トレンドなので長期的に運用するサイトでは使用できない

 

3.ゴーストボタンを使った海外サイト

 

1.Verbal plus Visual

verbalplusvisual
http://www.verbalplusvisual.com/

 

2.KangoMedia

KangoMedia
http://kangomedia.com/

 

3.The Offshore Partners

theoffshorepartners
http://theoffshorepartners.com/

 

4.Union Room

unionroom
http://www.unionroom.com/

 

5.Papaya

https://papaya.com.hr/
https://papaya.com.hr/

 

6.Charles-Axel Pauwels

capauwels
http://capauwels.com/

 

7.Visage

visage
http://visage.co/

 

8.Lees Ferry

leesferry
http://leesferry.com/

 

9.Haigh & Hastings

haighandhastings
http://www.haighandhastings.com/

 

10.Decibel Digital

decibeldigital
https://www.decibeldigital.com

 

4.ゴーストボタンは使える?使えない?

ボタンというとECサイトの「購入する」「カートに入れる」などページの右端にあることが多いCATボタンがあるが、ゴーストボタンはページの中心などの目立つところに設置されており、クリックできる範囲が広いのが特徴である。
背景画像やデザインになじむことから、クールな雰囲気、高級感のあるWebサイトに使用されることが多いといえる。
また、ゴーストボタンは背景が透けているため、写真を背景に使ったビジュアル重視のブランドイメージを優先するWebサイトでの活用は有効である。
ゴーストボタンをECサイトにデザインするとどうなるか?
使用された事例はあまり見たことがないが、やはり考えらることは、背景とマッチしすぎて、ボタンを「画像かな? クリックできるの?」と誤解をまねき、ボタンであることがわかりづらく視認性が悪い。
そうなると、コーンバージョン率が下がるなどデメリットがあり、ECサイトに使用するには少々ハードルが高い。
ゴーストボタンを導入するときは、ターゲットの利用シーンをイメージすることが重要である。そしてサイトの目的を考え、本当に目的にあっているのか考え、使用することが求められる。

参考:

Design Trend: Ghost Buttons in Website Design
How to Create CSS Ghost Buttons


関連する記事

YouTube動画マーケティングで売り上げを伸ばす!... ネットを使って見込み客を集客(マーケティング)するには、インターネット動画を活用するのが効果的だ。もし、ECサイトなどで、集客が伸び悩んでいる場合、ECの商品の動画をインターネット動画の中でもYouTubeに動画をアップロードし、自社サイトにもYouTube動画を貼ることをお勧めする。今回はこの...
懇親会・Live Commerce交流会 開催について... 2月19日・東京渋谷で開催されるLive Commerceの次回のセミナーですが、セミナー終了後、同ヒカリエ内にて懇親会を開催します! 参加のメリット セミナーでは聞きづらかったことや、目的意識を共有できる参加者様同士の交流、またセミナーではお話しできなかった裏話など、参会者の皆さまと交流...
中国爆買いをビジネスチャンスに – 簡体字のECサイトがないことによる機会損失とは... 2016年の中国の伝統的なお正月(旧正月)は、2月7日から13日までの7連休になります。日本の1月1日から3日までのお正月と違い、この期間はあまり正月らしいムードはありません。 2016年の中国旧正月も例年以上に、この時期に日本への旅行を計画している中国人は多くいます。 観光客の多くがドラ...
「製造業の海外展開」 顧客は誰か! 皆さん こんにちは。 今回から新しいチャレンジのスタートです。 海外販売を成功に導きたいとの想いが一杯のスタートです。 海外販売第一歩の反省から「マーケティング」の重要性を認識し、先ず着手したのが「市場の絞り込み」活動です。「顧客は誰か!」とも表現しますね。 取り扱うのは引き続き...
色がもつイメージ:高貴と高級をメッセージする=”紫”の効果... 色が何らかのサインを送りだしていることは誰もがよく知っている。誰がどんな色を選ぼうと、共通しているのは、その色に対して人は反応するということだ。私たちは色に条件反射し、気づくこともない。 色に対する反応は直観的反応とも言われ、個々の色は人の本能的な反応と密接に関係し、その反応は生理的、感情的...
SEO対策 今年のキーワードを知ってますか?... 企業やショップなどのサイトの目的は集客し、売り上げに貢献することにある。 サイトを開設して、何もしなければ、お客様はサイトに訪れることもないだろう。 そして、サイトにお客様を呼びこむには集客する必要があるだろう。代表的な集客手法としては、SEO対策と広告(リスティング広告やアフェイエイト広...
このエントリーをはてなブックマークに追加
 

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。