最近のインターフェイスデザインから学ぶ、7種類のボタンデザイン

ユーザーのアクションを誘う購入や送信や検索ボタンなど、最近のインターフェイスデザインでよく見かける7種類のボタンデザインを紹介します。

サイトのキャプチャ

Common elements used in interface button design

[ad#ad-2]

下記は各ポイントを意訳したものです。
また、元記事ではそれぞれのボタンを作成するPhotoshopのチュートリアルも掲載されています。

1. テクスチャを使ったボタン

テクスチャはボタンにわずかな奥行きを与え、クリックが可能であることが分かるようにする素晴らしいテクニックです。

ボタンのキャプチャ

New ShelfLuv Header
テクスチャを使用して、インターフェイスに次元を与えています。

ボタンのキャプチャ

Upload button
さまざまな箇所にテクスチャを使用しており、ボタンにはさらに激しく使用しています。

ボタンのキャプチャ

TV Show Listing
テクスチャは実際にはボタンには使用されていません、ここではボタンを際立たせるためにその背景に使用しています。

2. パターンを使ったボタン

パターンはボタンにほんの少しの興味と奥行きを与えるもう一つの素晴らしいテクニックです。

ボタンのキャプチャ

'Submit a project' button
ボタンの左側に対角線の反射のパターンを使っています。

ボタンのキャプチャ

Friend's dreams widget
対角線のラインがデザインに次元を与え、上質な外見を生み出しています。

ボタンのキャプチャ

Beginning A 'Brew' Project
この最後もボタン自身にはパターンを使用していません、グレーのヘッダのパターンはデザイン全体に次元を与え、結果的にそれがオレンジ色のボタンを強調させています。

3. 3Dを使ったボタン

3Dのボタンは見た目的に最もリアルなデザインといってよく、これがクリックできないと思う人はいないでしょう。
唯一の欠点は、このエフェクトは通常のウェブデザインでは浮いてしまうことです(特に企業サイト)。

ボタンのキャプチャ

Buttons
シャドウと1ピクセルのラインで特定のエリアを強調し、3Dのようにデザインしています。

ボタンのキャプチャ

Enhancr
3Dボタンを次元を加えるために使用しています。

ボタンのキャプチャ

Hire Me Button
これは少し変わった使い方です。
3Dのボタンはボックスからはみ出ており、ボックスを包装しているリボンのように扱っています。

4. 1ピクを使ったボタン

ピクセルに気を配ることはボタンだけでなく、ユーザインターフェイスデザインのすべてにおいて不可欠なものです。1ピクセルのラインはボタンにおいて、奥行きと3Dの見た目を与えます。また、ボタンが押されたかのような見栄えも作り出すことができます。

ボタンのキャプチャ

Catbag
赤いボタンの上部に1ピクセルのハイライトが使用されています。これは3Dに見える効果とともに、ページのディテールにも影響を与えています。

ボタンのキャプチャ

CSS3 buttons for MGS
このCSS3で実装されたボタンは背景から際立たせるために、1ピクセルのラインを使用しています。

ボタンのキャプチャ

iProtest
ボタンの上部にハイライトとして、1ピクセルの軽いラインを使用しています。

5. 背景をインデントしたボタン

インデントされた背景を使うとボタンがそこに埋め込まれたような見栄えにし、奥行きをとビジュアル的な興味を与えます。

ボタンのキャプチャ

Homepage Redesign Rebound
インデントを現すために、微妙なインナーシャドウを使用しています。

ボタンのキャプチャ

Rateblend
背景にグラデーションを使用して、ボタンにインデントを与えています。

ボタンのキャプチャ

Freebies - A gift for you Dribbble
このボタンの背景は、グラデーション、インナーシャドウ、ドロップシャドウなど複数のスタイルを持たせています。

6. グロウを使ったボタン

グロウはインターフェイスデザインの中でも難しいもので、通常は暗めのインターフェイスの時だけ使用されるものです。

ボタンのキャプチャ

Updating Content
グロウをタイポグラフィにも使うことで、このボタンを暗い背景からより際立たせています。

ボタンのキャプチャ

Map App
グロウはiPhoneのような暗いインターフェイスでよく利用されます。これはアクティブな状態だと、タイポグラフィの周りにグロウが適用されるものです。

ボタンのキャプチャ

Go Button Hover
これはかなり繊細なグロウがボタンを美しく見せている例です。

7. ハイライトを使ったボタン

ハイライトはボタンに奥行き、ビジュアル的な興味、そしてクリックできそうな見栄えを与えます。

ボタンのキャプチャ

Portfolio Header Area
ボタンの上半部にある半透明の白い矩形が奥行きを与えています。

ボタンのキャプチャ

Website
1ピクセルのラインをハイライトとして、ボタンを強調しています。

ボタンのキャプチャ

WIP Website
明から暗、そして明になるグラデーションがボタンのハイライトとシャドウとして使用されています。

[ad#ad-2]

sponsors

top of page

©2018 coliss