ゴーストボタンを使う際の注意点と使いどき | UX MILK

2018/02/06 45 users UX MILK UX Movement ユーザ ミニマリスト

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 ゴーストボタンとは、外枠があるけれど中が透明なボタンのことです。Web上で人気のトレンドですが、多くのデザイナーが間違って使用しています。 クリック率が下がる ゴーストボタンはミニマリストな今どきの見た目と感覚を演出し、デザイナーの間で人気です。騒々しく威圧的な印象を、ユーザーに対して与えません... 続きを読む

ゴーストボタンと相性が良さそうなホバーエフェクト 10＋ | NxWorld

2015/05/20 153 users エフェクト CSS NxWorld コピペ ホバーエフェクト

メモしていたものが溜まってきて一覧化したのでシェアします。以前にもCSSのみでボタンデザインやホバーエフェクトを実装できるエントリーを書きましたが、今回はCSSのみで実装するゴーストボタンと相性が良さそうなホバーエフェクトのサンプルです。もちろんゴーストボタンに限らず様々なタイプのボタンで使用でき、対応しているブラウザであればコピペで簡単に実装できると思うので、気になるエフェクトがあれば是非使って... 続きを読む

ゴーストボタンにマウスを乗せたときの動きいろいろ16個｜Webpark

2015/05/20 312 users span Webpark 擬似要素 HTML マウス

昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せ... 続きを読む

[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ | コリス

2015/01/15 93 users ソリッド コリス チュートリアル CSS ライン

大きな写真画像の背景やMaterial Designなどのフラットなスタイルに合うソリッドなラインでデザインされたゴーストボタンを実装するチュートリアルをまとめました。 シンプルなものから、かわいいアニメーションや一味違...記事の続きを読む 続きを読む

デザインが自動化されても心配しない理由 : could

2014/12/04 201 users CSSアニメーション デザイナー 背景 ビデオ could

デザイン デザインが自動化されても心配しない理由 個人的にデザインの自動化は歓迎していて、デザイナーが本来しなければならないことに集中できるのではと期待しています。作ることに費やした膨大な時間を、問題解決のための機能を設計するために費やすことができる機会を与えてくれるからです。 それって本当にオリジナル？ レスポンシブ？フラット？ビデオをつかった背景？CSSアニメーション？ゴーストボタン？いろいろ... 続きを読む

新型ナビメニュー「ポップアウト」の実装チュートリアル＆参考Webサイトまとめ - Photoshop VIP

2014/08/06 120 users ナビゲーションメニュー VIP ポップアウト チュートリアル

新しいデザイントレンド「ゴーストボタン」同様に、ナビゲーションメニューに面白いアニメーション効果、「ポップアウト」を加えたWebサイトを見かけるようになっています。 今回はそんな新型ナビメニュー「ポップアウト」の実装チュートリアルと、参考にしたいWebサイトデザインをまとめています。今後のデザイン制作、プロジェクトに活用してみてはいかがでしょう。 チュートリアルはどれもデモサイトが用意されており、... 続きを読む

配色のセンスも参考になる！今チェックしておきたい「ソリッド」を効果的に使ったUIキット・ページレイアウトのまとめ | コリス

2014/08/05 114 users コリス 矩形 ソリッド エレメント ダイアモンド

ソリッドなラインを使ったアイコン、テキストを矩形で囲ったゴーストボタン、ラインで描いた幾何学模様など、ソリッドを使ったUIキット、Webページやアプリのレイアウトやテンプレートを紹介します。 いくつかはPSDファイル（無料/有料）もダウンロードできます。 BrandaLoka 斜めのグリッドをはじめ、ダイアモンドやサークル状のエレメントなどにソリッドを取り入れたスタイリッシュな縦長1ページ用のテン... 続きを読む

ゴーストボタンを使った新しいデザイントレンド＆参考Webサイトまとめ - Photoshop VIP

2014/07/16 229 users VIP 新しいデザイントレンド

海外デザインブログDesignModoで公開された「Design Trend: Ghost Buttons in Website Design」の著者Carrier Cousinから許可をもらい、日本語訳しています。Thank you so much, @designmodo & @carriercousins! まだたしかではありませんが、2014年もっともおおきなデザイントレンドの波がきている... 続きを読む

Webデザイントレンド定点観測 背景が透けてみえる「ゴーストボタン」 | Adobe Pinch In

2014/07/04 143 users Adobe Pinch In 背景 罫線 あきこ グロ

東京都渋谷区でフリーランスWebデザイナーとして働く、黒野明子（くろのあきこ）と申します。 「Webデザイントレンド定点観測」の連載も、早いもので第6回となりました。今月のテーマは「背景が透けてみえる『ゴーストボタン』」です。 「ゴーストボタン」の特徴をまとめると、下記のようになります。 細めの罫線で囲まれた、大きめのボタン。背景の塗りは無いか、薄い半透明 ボタンの中には、シンプルなテキストがある... 続きを読む