creatersnest2

半透明でシンプルな、ゴーストボタンを作ってみよう!


2014年にWebデザインのトレンドの1つとしてとりあえげられたものです。「ゴーストボタン」という名称は、ボタンが透けて後ろの背景が透けて見えることから、そう呼ばれ始めたようです。ゴーストボタン?難しいの?と敷居が高いように感じますが、実際は、なんてことありません。罫線で囲んだ、ただのボタンです!

ただのボタンですから簡単につくれます。ただただ、背景を透明にして罫線で囲んでしまいましょう!これから「罫線と透明背景の文字のボタン」「罫線と半透明の文字のボタン」「罫線が角丸のボタン」「大きな楕円の罫線のボタン」「大きな楕円の半透明のボタン(色変え)」のボタンを作っていきます。参考にして色々作ってみてくださいね!

ゴーストボタンの特徴をまとめると、下記のようになります。
・シンプルなカラーリング
・ボタンの背景は、透明か薄い半透明
・細めの罫線で囲む
・大きめのボタン
・太めのフォント
・画面中央など、目立つ場所に配置
・画像や動画を背景とする場所に使われる

ゴーストボタンは、手軽にデザイン作成することが出来る点もポイントです。
派手なデコレーションはなくし、シンプルにすることを心がけましょう。

スクリーン上でもっとも大きなデザインエレメントにすることで、ユーザーが自然とクリックするように誘導できて、洗練された印象をあたえることができます。特にデザインにおいてのシンプルさは、高級感を演出してくれます。

 

ここでは、ボタンの作り方と使用例を見ていきましょう。
上記の特徴を生かし、5つ作っていきます。

 

背景が透明なボタンを作る

新規作成
新規作成します。大きさは300×150pxです
長方形
長方形ツールの長方形を選択します。
塗りは透明に、線は2ptに設定します。(見やすくするために赤で作っています。)
文字入れ
太めのフォントを入れます。「Avenir Black」を使用しています。

pngに変換
PNGに変換します。
メニューバーのファイル→書き出し→Web用に保存をクリックします。(※1:command+S & Shiftキー & altキー)
S1S2合成
背景写真をWebサイトのTOP画面としてレイアウトしました。
フォントを細くした方に比べて、太くした方がより目立ちます。

次にこのボタンを参考にしていくつかボタンを作ってみましょう。

 

背景を白の半透明にする

新規作成します。大きさは300×150pxです
背景白ー半透明30
背景を塗りつぶしツールで塗りつぶします。
レイヤーの透明度20%にします。
・太めのフォントを入れます。
・PNGに変換します。
SW11
完成。背景が透明なものに比べ、ボタンの視認性が高くなりました。

 

枠の形を変えてみる

新規作成します。大きさは300×150pxです
角丸
長方形ツールの角丸を選択し、3ptで設定します。
背景は透明のままです。
・太めのフォントを入れます。
・PNGに変換します。
swm11
完成

 

大きさと形を変えてみる

新規作成2
新規作成します。大きさは400×300pxです
(見やすくするために赤で作っています。)
楕円選択
長方形ツールの楕円を選択し、4ptで線色を赤に設定します。
文字入れ2

太めのフォントを入れます。「Avenir Black」を使用しています。
PNGに変換します。
メニューバーのファイル→書き出し→Web用に保存をクリックします。(※1)
stt11
完成

 

背景に色を加え、文字と線の色を白に変えてみる

新規作成します。大きさは400×300pxです
長方形ツールの楕円を選択し、4ptで線色を白に設定します。
楕円コピー
1:楕円形のレイヤーをレイヤーパネルの下部の赤い部分にドラックしてコピーレイヤーを作ります
2:面に色を入れ、線を透明にします
PNGに変換します。
メニューバーのファイル→書き出し→Web用に保存をクリックします。(※1)
swm12
完成

 

最後に

ゴーストボタンは、表示するテキストは、よく見かける『Click Here』ではなく、コンセプトをうまく伝えることが出来る言葉を選ぶことがベターです。また、大きさや配置する場所によって使いやすさが全く変わってきます。特にイメージ写真と重ねて配置するときは、メインデザインを崩さないようにすることが必要です。

 

 

参考:
ゴーストボタンを使った新しいデザイントレンド&参考Webサイトまとめ
http://photoshopvip.net/archives/66405
デザイン初心者が感動する!Photoshopロールオーバーボタンの作り方
http://blog.bridge-net.jp/2015/04/rollover-button
【Photoshop】Web用ボタン日本語チュートリアルを集めてみた – NAVER まとめ
http://matome.naver.jp/odai/2132766555448340001

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticlePhotoshopでぼかしを加えてトイカメラ風の画像にする方法