ここ数年のあいだ、フラットデザインはWEBデザイントレンドとなっている。
昨年2014年は、このフラットデザインWebサイトの流れのなか、爆発的なトレンドとなったのがゴーストボタンデザインだ。
ゴーストボタンは、枠線のみで表現され、透明化されたボタンデザインである。背景色を透明化または薄い半透明化したボタンデザインである。
ほとんどの場合、テキストとアウトラインのみで作られ、幽霊のようにサイトに溶け込むことから、「ゴースト」ボタンと呼ばれるているようだ。
フラットデザインとの相性が良いことから、フラットデザインの流行とともにWebサイトで使われるようになった。特長としては、これまで使っているボタンに比べクリック範囲が広く、背景画像の邪魔にならない。ボタンは画面の真ん中に配置されていることが多いなどがある。今回はこのゴーストボタンについてまとめてみた。
ゴーストボタンは、これまでのデザインに比べ、特に清潔感のあるクリーンな印象がある。シンプルでミニマルなデザインは、Webサイトでメインとなるビジュアルの邪魔をせずに設置できる。下記にその特長を整理した。
今年もデザイントレンドの流れとしてあるゴーストボタンではあるが、使用に際しては長所と短所を理解することが重要である。
http://www.verbalplusvisual.com/
http://kangomedia.com/
http://theoffshorepartners.com/
http://www.unionroom.com/
https://papaya.com.hr/
http://capauwels.com/
http://visage.co/
http://leesferry.com/
http://www.haighandhastings.com/
https://www.decibeldigital.com
ボタンというとECサイトの「購入する」「カートに入れる」などページの右端にあることが多いCATボタンがあるが、ゴーストボタンはページの中心などの目立つところに設置されており、クリックできる範囲が広いのが特徴である。
背景画像やデザインになじむことから、クールな雰囲気、高級感のあるWebサイトに使用されることが多いといえる。
また、ゴーストボタンは背景が透けているため、写真を背景に使ったビジュアル重視のブランドイメージを優先するWebサイトでの活用は有効である。
ゴーストボタンをECサイトにデザインするとどうなるか？
使用された事例はあまり見たことがないが、やはり考えらることは、背景とマッチしすぎて、ボタンを「画像かな？ クリックできるの？」と誤解をまねき、ボタンであることがわかりづらく視認性が悪い。
そうなると、コーンバージョン率が下がるなどデメリットがあり、ECサイトに使用するには少々ハードルが高い。
ゴーストボタンを導入するときは、ターゲットの利用シーンをイメージすることが重要である。そしてサイトの目的を考え、本当に目的にあっているのか考え、使用することが求められる。
参考：
Design Trend: Ghost Buttons in Website Design
How to Create CSS Ghost Buttons