Webデザイントレンド定点観測 背景が透けてみえる「ゴーストボタン」
東京都渋谷区でフリーランスWebデザイナーとして働く、黒野明子（くろのあきこ）と申します。
「Webデザイントレンド定点観測」の連載も、早いもので第6回となりました。今月のテーマは「背景が透けてみえる『ゴーストボタン』」です。
「ゴーストボタン」の特徴をまとめると、下記のようになります。
- 細めの罫線で囲まれた、大きめのボタン。背景の塗りは無いか、薄い半透明
- ボタンの中には、シンプルなテキストがあるのみ
- 背景いっぱいの写真（動画）と一緒に使われるパターンが多い
- 非常に半径の小さな角丸のパターンが多い
- 画面中央などの非常に目立つ位置に設置される場合が多い
「ゴーストボタン」という名称は、ボタンの後ろの背景が透けて見えることから、そう呼ばれ始めたようです。
この「ゴーストボタン」、実は先月ご紹介した「ウィンドウいっぱいの背景動画を活用したデザイン」の実例サイトの中でも、いくつか使われていたのです。
しかし、筆者も、このネーミングを知ったのは、当原稿執筆の前夜。うっすらと認識をしていたものに名前を与えられて、頭の中で像が結ばれたのでした。
参考記事
Design Trend: Ghost Buttons in Website Design – Designmodo
ページの背景に美しく大きなビジュアルを使うデザインが流行するとともに、背景色が無く写真の邪魔になりにくい「ゴーストボタン」も多用されています。
また、今回ご紹介する実例サイトの中では、オンマウス時にアニメーションを使ったギミックを施したものもいくつか見受けられ、ボタンの存在感の無さを補っていました。
それでは、収集した10個のサイト＋おまけをご紹介していきましょう。
Meeet
ポートフォリオ作成のためにサイドプロジェクトを進めたい開発者とデザイナーのマッチングサイトです。
シンプルな1カラムのレスポンシブWebデザインで、ファーストビューの下部に、最も重要なボタン「Discover your Project」が設置されています。オンマウスの際には、背景が非常に薄い半透明の白に変化します。
Lunet Eyewear – Handcrafted
ハンドメイドの木製眼鏡フレームを販売しているサイトです。
木立の中に立つモデルの写真が画面いっぱいに広がり、左側に黒い細罫のゴーストボタンが設置されています。このボタンは、オンマウスで特に変化しませんでした。
Lunet Eyewear – Handcrafted Wooden Eyewear
Wastronauts Media – Responsive Web Design Southampton
イギリスのWebデザイン／制作会社のサイト。問い合わせフォームにリンクした赤い細罫のゴーストボタンは、オンマウスで赤い色ベタ背景に変化します。
Wastronauts Media – Responsive Web Design Southampton
Sailing Collective
顧客に帆船旅行を提供する旅行会社のサイトです。高級感あふれる旅先の絶景の写真が何枚も画面いっぱいに広がり、その写真の邪魔をしないゴーストボタンが多用されています。
オンマウスの際には、背景白ベタ＋黒文字に変化します。
Baxter – US
男性用化粧品／グルーミング用品のサイトです。他の例よりも少し太め（幅3px）の白罫線のゴーストボタンは、オンマウスで背景白ベタ＋黒文字に変化します。
One Million Vacation Rental Listings
190カ国で展開する休暇用不動産レンタル会社のサイト。ファーストビューでは、先月も紹介した「ウィンドウいっぱいに広がる動画」の背景が利用され、窓の周囲でカーテンや木の葉が揺れています。
中央下部のゴーストボタンは、薄い半透明の黒背景になっており、オンマウスで背景白ベタ＋青い文字に変化します。
One Million Vacation Rental Listings
taffy : official site
日本のバンドのオフィシャルサイト。背景いっぱいの写真の上に、スクエアな1px白罫線のゴーストボタンが並んでいます。オンマウス時に見られる、テレビの画像が乱れるようなギミックのアニメーションが個性的です。
We Are Heckford | The digital and creative agency based in Preston
イギリスにある、クリエイティブエージェンシーのサイトです。スクエアなゴーストボタンですが、オンマウス時にアニメーションで角丸に変化するギミックが施されています。
We Are Heckford | The digital and creative agency based in Preston
Softgames – Mobile Entertainment Services GmbH
ドイツにある、HTML5を利用したゲームプラットフォームの会社のサイト。深緑の背景の上で、オレンジ色の罫線のゴーストボタンが映えます。
このサイトで面白いのは、ゴーストボタンに手描き風の「It’ll cost you 1 minute! （1分で終わります！）」というメッセージが添えられていることでしょう。背景色との組み合わせで、黒板に描かれたような印象を与えます。
オンマウス時には、背景白ベタ＋オレンジ色の文字に変化します。
Softgames – Mobile Entertainment Services GmbH
Photolab
ギリシャのデジタルイメージング／写真プリント会社のサイトです。
背景いっぱいの動画が使われたこのサイトのゴーストボタンは円形になっており、中にはシンプルなアイコンが入っています。オンマウスで、少しだけ透明度が増す設定になっています。
INC Research: The global CRO for your Phase I to IV worldwide clinical trials
おまけとして、アメリカの臨床研究機関のサイトをご紹介しておきましょう。
厳密には「ボタン」と言っていいのか微妙ですが、このサイトのひとつひとつの更新情報は、背景が透明な白罫線のコマ内に納められています。それそれのコマはクリッカブルになっていて、クリックするとひっくり返るアニメーションの後に黄色い背景色に変化します。
このサイトでも、画面の背景いっぱいに使われた写真を損なわないように、更新情報の枠が「ゴースト（背景色が無い）」状態になっていることが分かります。
INC Research: The global CRO for your Phase I to IV worldwide clinical trials
今月のテーマ「ゴーストボタン」は、先月の記事「ウィンドウいっぱいの背景動画を活用したデザイン」と組み合わせてチェックすることにより、とても理解しやすいトレンドだと言えそうですね。
今回の実例サイトには、様々な国のバラエティ豊かな業種のサイトを取り上げることができ、「ゴーストボタン」があちこちに広く浸透している気配を感じました。
（了）