覚えておきたかったので備忘録も兼ねてご紹介。「Websites with Ghost Buttons」は、海外のWebデザインを中心に今年から特に見かけるようになったゴーストボタンのみを集めているギャラリーです。また、ギャラリーではありませんが同じくゴーストボタンのデザイン例をまとめているエントリーも併せて紹介します。

ゴーストボタンとは

簡単に説明すると、ゴーストボタンとはテキストやアウトラインのみで作成されているようなシンプルデザインで、背景に関しても塗りつぶさなかったり透過で表示させたりしているようなボタンです。
フラットデザインやミニマルデザインと相性が良く、サイトをスタイリッシュに見せることもできるので、特に海外のサイトでは使用されているのをよく見かけます。
ただ、パッと見でボタンだとわかりにくいことや入力フィールドと勘違いさせてしまうというデメリットもあるので、使用する場合はテキストの文言や透過背景を工夫したりする必要があります。

Websites with Ghost Buttons

「Websites with Ghost Buttons」はゴーストボタンのデザインのみを集めているギャラリーで、大体同じような見栄えではありますが、余白の取り方やラインの太さが異なったり、角丸・アイコン・背景の有無など、様々なタイプのゴーストボタンが掲載されています。
掲載されているのはボタン周辺のイメージだけなのですが、それぞれイメージ下に使用されているサイトへのリンクが用意されているので、サイト全体での見栄えを確認したい時はそちらから確認することができます。

ゴーストボタンのショーケースをまとめたエントリー

以下はそれぞれゴーストボタンを採用しているWebデザインをまとめたエントリーで、「Websites with Ghost Buttons」に掲載されているものや他のエントリーでも紹介されていて被っているものもありますが、それぞれ20サイト以上まとめられています。

Back to top