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

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

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

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

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

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

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

メリット

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

デメリット

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

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

1.Verbal plus Visual

http://www.verbalplusvisual.com/

2.KangoMedia

http://kangomedia.com/

3.The Offshore Partners

http://theoffshorepartners.com/

4.Union Room

http://www.unionroom.com/

5.Papaya

https://papaya.com.hr/

6.Charles-Axel Pauwels

http://capauwels.com/

7.Visage

http://visage.co/

8.Lees Ferry

http://leesferry.com/

9.Haigh & Hastings

http://www.haighandhastings.com/

10.Decibel Digital

https://www.decibeldigital.com

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

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

参考：

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