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