ホームページ制作からSEOやリスティング広告などWEBマーケティング全て対応

インバウンドサイトを作るときに知っておきたいこと

戦略的WEBサイト制作が得意なエムハンドとは!?
  • 何をしている会社?
  • 何を作っているの?

なぜ使われる?WEBデザインでゴーストボタンを使うメリット、デメリット

  • WEBデザイン

ゴーストボタンをご存じですか?そう、背景が透明(半透明)の、あのシンプルなボタンのことです。今日は、その特徴やメリット、デメリットについてのお話です。

実は、ゴーストボタンは2014年のWEBデザインのトレンドワードでした。とはいえ、WEBデザインのトレンドは海外発のものが多く、日本のサイトに定着するまでには若干のタイムラグがあります。ゴーストボタンも同じで、最近になって日本のサイトでも広く定着し始めたという感じです。そこで、あらためてゴーストボタンについて、まとめておこうと思います。最後に国内サイトの事例もご紹介しますので、ぜひ参考にしてください!

ゴーストボタンとは?あらためて、その定義

「背景が透けて見えること」が名前の由来

ゴーストボタンは透明(半透明)のボタンで、この「背景が透けて見える」ということが、ゴーストという名称の由来にもなっています。背景にごく薄く色の入ったものもゴーストボタンに含まれます。テキストを枠で囲っただけのシンプルなデザインで、かたちもソリッドな長方形や少しだけ角丸にしたものがほとんど。典型的な例としてよく紹介されるサイトには、以下のようなものがあります(矢印の部分がゴーストボタン)。

20151005_000

ご覧のように、グラデーションやドロップシャドウなどの装飾もなくシンプルなアウトラインのみ。その太さも1px~2pxくらいの細いものが多く、色も白や黒などで、これまでの「クリックしてもらうためにとにかく目立つように」というボタンのデザインとは根本的に違う作りになっています。

・上記参考サイトのURL(左より)
http://getbootstrap.com/
http://www.verbalplusvisual.com/
http://theoffshorepartners.com/the-ocean/

なぜ使われるのか?WEBデザインにゴーストボタンを使うメリット

繰り返しになりますが、ゴーストボタンの特徴は非常にシンプルなデザインであること。アウトラインとテキストという必要最小限の要素で形成されています。このようなゴーストボタンを使う最大のメリットは、デザインの邪魔にならないこと。現在のトレンドとなっている、背景にフルスクリーンの写真や動画を使用した雰囲気のあるWEBデザインでも、そのイメージを壊すことなくボタンの機能をプラスできます。

スマホやタブレットでの閲覧と相まって、シンプルなフラットデザインへと移行しているWEBデザインのトレンドとも、シンプルなゴーストボタンは好相性。強調し過ぎない控えめなデザインは、洗練された知的な印象やグレード感を表現できます。また、制作面では簡単に設計、実装できるというメリットもあります。

ここは注意!ゴーストボタンのデメリット

とにかくシンプルで、デザインの邪魔にならない。そのメリットを裏返せば、シンプルすぎてデザインに馴染んでしまい、ボタンとして認識されないというデメリットになります。

「目だった方がクリックされる」という、それまでのボタンの考え方とは間逆のデザインですから、利用者によってはそもそもボタンであるということが認識できず、どのような操作をすればページ遷移するのかわからないというケースもあるかもしれません。その結果、クリックされない可能性もあるということを一応頭に入れておいたほうが良いでしょう。

ゴーストボタンの採用にあたっては、WEBのトレンドや操作に慣れ親しんでいるユーザーが閲覧するサイトなのか、それとも高齢者など普段あまりWEBを見ないユーザーも見ることがあるのかなど、ターゲットを考えて決めていったほうが良いかもしれません。

ゴーストボタンを使った日本のWEBサイト例

以上、ゴーストボタンのメリット、デメリットをまとめてみましたが、最後に、上手くゴーストボタンを取り入れたサイトをいくつかご紹介します。ゴーストボタンを使ったサイト事例では、海外のものがほとんどですが、ここではあえて、日本のサイトの中からピックアップしてみました。

mixi

20151005_01
https://mixi.co.jp/

SNS運などを手掛けるmixiのコーポレートサイト。背景写真の雰囲気をこわさないように、ごくベーシックなゴーストボタンを上手く使っています。

MOREWORKS

20151005_02
https://www.moreworks.jp/

クリエイターの転職支援サイト。ここでも、雰囲気のある背景写真の邪魔にならないように、ほんの少しだけ角丸にしたゴーストボタンが使われています。

株式会社エスユーエス

20151005_03
http://www.sus-g.co.jp/

機械系サービスやITサービスなど幅広い事業を手掛けるSUSのコーポレートサイト。トップページから各コーナーへのリンクボタンにゴーストボタンが使われています。

adidas football

20151005_04
http://adidas.jp/football/

アディダスのサイトのトップページでは、ページ下部にある動画へのリンクボタンとして、ゴーストボタンが使われています。

お茶の秋月園オンラインショップ

20151005_5
http://www.akizukien-shop.com/

ECサイトのトップページです。販売する商品写真の雰囲気をこわさないように、商品一覧へのリンクボタンとしてゴーストボタンを使用しています。

今回のまとめ

以上、今回はゴーストボタンをとりあげてみました。背景全面に写真や動画を使ったサイトが増えたことに加え、マルチデバイス化の進展とともに浸透してきたフラットデザインの流れもあり、全体のデザインに溶け込みながらも役割を果たすボタンデザインとして、ゴーストボタンが広く使われるようになってきました。うちでも使ってみたいなぁ…などと考えていらっしゃる方も多いかもしれませんね。今回の記事を参考に、デメリットなども踏まえなから、ゴーストボタンを上手く取り入れてデザイン性の高いサイトを作っていきましょう!

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  5. 5

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  6. 6

    今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ

  7. 7

    わずか60秒でカンタン制作?!無料アンケートフォーム作成サービス、おすすめベスト5!

  8. 8

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    歯科クリニックのホームページを徹底調査!24サイトに見る集患力のポイントとは?

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  7. 7

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  8. 8

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  9. 9

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  10. 10

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

PDFで出力できる!無料自動お見積り

選択するだけで簡単にお見積り可能です。

さらに詳しく話を聞いてみたい方はこちらよりご連絡ください:0120-931-572

ご相談・お問い合わせ

簡単なお見積りが発行できます

ワンクリックに命がけのホームページ制作会社M-HAND