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

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


関連する記事

フリマアプリはどこまで伸びるのか?... ここ数年、急激な成長を見せているフリマアプリ。「フリマアプリ」とはリアルフリーマーケットをスマートフォンで実現できるアプリである。スマートフォンで商品の写真を撮って出品できる手軽さ、初心者でも売買ができるシンプルさが受け、急激に市場を拡大している。今回はEC業界に大きな影響を与えている「フリマア...
色の持つイメージ:グレーは高品質をイメージできる... 色が何らかのサインを送りだしていることは誰もがよく知っている。誰がどんな色を選ぼうと、共通しているのは、その色に対して人は反応するということだ。 私たちは色に対し条件反射し、気づくこともない。色に対する反応は直観的反応とも言われ、個々の色は人の本能的な反応と密接に関係し、その反応は生理的、感...
新しい”eBay”の売り手 評価基準とは?... 皆さん、ご存知でしょうか?今月の20日から、eBayの“Seller Standards”という売り手を評価する基準が更新されたという事を。eBayによれば、サイトの信頼性を更に高めるための更新とのことですが・・・、売り手にとってかなり厳しいという声もあるようです。この新たなスタンダードに関...
ヤフーショッピング出店無料化、あなたが考えなければならない価値とは?... 現在、ネットショップを持つ事に価値があるでしょうか? stores.jp や base の登場や Yahoo が発表したネットショップ0円によりネットショップを持つ事自体の価値はほぼゼロになったと思います。 今後、ネットショップを立ち上げる際に何が価値になるか? これを明確にし、他社との...
海外進出が進む日本企業 越境ECの可能性は?... 外務省のが昨年2017年9月28日に発表した、「海外在留邦人数調査統計」によると、海外在留邦人数では米国が約42万人と最も多く、次いで中国の約12万人、3位はオーストラリアの9万人と中国以外は前年比増という結果であった。 海外に住む日本人の数は、年々増加の一途であり、2016年は約133万...
今、アメリカでトレンドのサブスクリプションボックスとは?... アメリカでは近年、「サブスクリプションビジネス」と呼ばれる定期購入型ビジネスに参入する事業者が増えている。 ギャップなどアパレル系企業やポルシェなど自動車メーカーなど自社の車両を定期レンタルできるサービスを開始したり、新しいビジネスモデルに注目が集まっている。 「サブスクリプションビジネ...
このエントリーをはてなブックマークに追加
 

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