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

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

Common elements used in interface button design

[ad#ad-2]

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

• 1. テクスチャを使ったボタン
• 2. パターンを使ったボタン
• 3. 3Dを使ったボタン
• 4. 1ピクを使ったボタン
• 5. 背景をインデントしたボタン
• 6. グロウを使ったボタン
• 7. ハイライトを使ったボタン

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]