ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeウェブデザイン基礎講座 > ゴーストボタン - 2015年に最も流行りそうなWebデザイン

ゴーストボタン - 2015年に最も流行りそうなWebデザイン

投稿日:2015年04月03日

このチュートリアルでは、2015年に最も流行りそうなWebデザインをご紹介します。

Step1:はじめに

ウェブサイト構築の全体的なプランの中で、Web開発者がボタンの使用について話をしなくなってから、かなりの年月が過ぎました。
ほとんどのデザイナーは2003/2004年頃までにデザインの要素としてボタンを実装するのを辞め、代わりにダイナミックメニューやCSSが使われるようになりました。
ところが、ひょんなことからボタンがWeb開発の分野に戻ってきました。
ただし、今回はゴーストボタンとしてです。



Step2:ゴーストボタンって一体なに?

ウェブサイトに四角形や長方形で透明なボタンがあって、クリックするとその機能が作動するものがありますよね。
それがゴーストボタンです。
ゴーストと言うのはボタンが透明なためで、ボタンという名前は説明しなくても分かりますよね。
正確に言うと、ゴーストボタンは実際のところボタンではありません。
なぜなら、塗りが無いからです。
塗りの無い外枠と言った方がもっと正確ですが、それは単なる意味論です。

ゴーストボタンって一体なに?

ゴーストボタンのほとんどはウェブサイト上にある他の通常のボタンより大きいことにも気付いたことと思いますが、ゴーストボタンは背景部分の邪魔にはなりません。





Step3:誰がゴーストボタンを使うのですか?

ゴーストボタンは画面のとても大きな領域を占めるので、通常は入口ページのようなスタイルのサイトに使われていることにも気付くでしょう。
サイト内で訪問者の目を捕らえ、ボタンをクリックしようという行動を上手く喚起します。
基本的に、サイトのデザイン構成がシンプルであればあるほど、ページのキーとなる位置にゴーストボタンが目立つように配置されていることが多い傾向にあります。

誰がゴーストボタンを使うのですか?

スマートフォンのポピュラーなOSのユーザーインターフェイスにはゴーストボタンがたくさん使われています。
アップルはゴーストボタンを非常にたくさん使っています。
開発者にしてみれば、ゴーストボタンの使用によって、画面のより多くの領域を活用することが出来るので、とても理にかなっているのです。



Step4:使用する利点

ゴーストボタンが現在Webデザイナーの間で流行っているということは別にして、使用することで何か本当の利点はあるのでしょうか?
いくつか思い浮かんだことを書いてみました。

・目立ち過ぎない - 後ろに何があっても、その邪魔にならない。
・ファイルサイズ - ゴーストボタンはアウトラインなのでファイルサイズが遥かに小さくなる。

使用する利点

・モバイルアプリ - スマートフォンの画面の全ての領域は貴重なものです。そのため、背景にあるアプリの上にゴーストボタンを置けるというのはとても便利です。
・注目を集める - 美的観点からもゴーストボタンは効果があるので、サイト訪問者の注目を集めることが出来ます。
・訪問者の誘導 - 目立つ場所に大きなボタンを表示できるので、サイト訪問者のナビゲーションを上手くコントロールできます。
・汎用性 - どんなデザインやタイポグラフィーを使用するサイトであっても、ゴーストボタンはその見た目から、どこにでもなじみます。
・機能性 - ウェブサーファーにとって最悪なのは、ナビゲーションメニューがどこにあるか探さないといけないということですが、ゴーストボタンではこれは起こりません。
・特殊性 - ゴーストボタンを使っているデザイナーは使っていないデザイナーより優位性があります。ボタン自体に特殊性があるからです。

使用する利点

参考記事:
10 Books Every Web Designer Has to Read
13 Essential CSS Tutorials For Your Web Dev Toolkit
How I built My First Website (and How You Can Do it Too)
Flat Design: Everything You Should Know
Glaring UX Mistakes That Drive People Nuts



Step5:何か欠点は無いのですか?

その昔、賢人は言いました。登って行った者は降りて来なくてはならない。
ゴーストボタンのようなWebの流行についても同じことが言えます。
長い目で見たビジネス的観点から、ゴーストボタンを使用することに何か欠点はないのでしょうか?
まず最初に考えるべきは流行遅れになってしまうことです。
人気が無くなれば、ウェブサイトのデザインを変える必要があるかもしれません。

次に、私は全てのウェブサイトにゴーストボタンが必要だとは思いませんが、開発者の中にはどうしても使おうとする人がいるかもしれません。
私は役に立つ場面でのみ使うべきだと思います。
最後に、Webデザインの機能的要素としてゴーストボタンを使いたいのであれば、シンプルなものにするというルールを守る必要があります。
読みやすくして、不要な派手さは避けるべきです。

何か欠点は無いのですか?



Step6:どうやってゴーストボタンを作ればいいのですか?

下記はHTMLやCSSで再現が可能ないくつかの例です。
画像をクリックして、作り方を学んでください。

ゴーストボタン 例その1
どうやってゴーストボタンを作ればいいのですか?

ゴーストボタン 例その2
どうやってゴーストボタンを作ればいいのですか?

ゴーストボタン 例その3
どうやってゴーストボタンを作ればいいのですか?

ゴーストボタン 例その4
どうやってゴーストボタンを作ればいいのですか?

ゴーストボタン 例その5
どうやってゴーストボタンを作ればいいのですか?

ゴーストボタンは如何でしたか?
これまでお作りになったことはありますか?



引用:Web Design Library 著者:AliceL 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング