---
title: どことなくWeb 2.0の香りがするボタンの作り方
date: 2008-02-25T00:00:00.000Z
updated: 2026-07-28T14:00:00.000Z
tags:
  - barleyyoungleaves
url: https://baku89.com/barleyyoungleaves/2008-02-25_%E3%81%A9%E3%81%93%E3%81%A8%E3%81%AA%E3%81%8FWeb_2.0%E3%81%AE%E9%A6%99%E3%82%8A%E3%81%8C%E3%81%99%E3%82%8B%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9
---

# どことなくWeb 2.0の香りがするボタンの作り方

しばらく受験勉強のために放置していたら「机上 desktop」で検索しても1位に表示されなくなってしまいましたね(苦笑)

最近Web 2.0 Web 2.0とかなんとか叫ばれていますが、\
Web2.0の正確な意味すらわかっていない僕にしては、\
ボタンのデザインこそが「Web 2.0っぽさ」を演出するカギになるのではないかと考えています！

そこで、「別にWeb2.0とか分からないけど、Web2.0っぽさを演出する」ボタンを研究に研究を重ね、その作り方を発見したので書いてみます(大袈裟な...)

パターン1\
難易度:★☆☆\
![button\_3.png](https://wp.baku89.com/wp-content/uploads/2026/07/fc2_missing-image.png "http://blog-imgs-18.fc2.com/b/a/r/barleyyoungleaves/button_3.png")\
グラデーションだけだと味気ないボタン群。\
そこに少し光沢を重ねてやるだけでこんなにも「Web2.0っぽさ」が倍増するという観測結果があります。(嘘)\
多少光沢の形が違いますが、Appleもおもにこのタイプを使用しているみたいですね!\
両端の湾曲部を大きくすればするほど立体感がでるみたいです。

パターン2\
難易度:★★☆\
![button\_2.png](https://wp.baku89.com/wp-content/uploads/2026/07/fc2_missing-image.png "http://blog-imgs-18.fc2.com/b/a/r/barleyyoungleaves/button_2.png")\
上から光沢をかけることでこんなにも印象が変わりますね!\
球体を表現するのによくつかわれる手法です。\
[BitComet](http://jp.bitcomet.com/)や、[CoreAnimation](http://www.apple.com/macosx/technology/coreanimation.html)のマークもこんな感じですね。\
これは不透明度マスクを設定して、光沢が下の方に行くにつれ透明にするのがミソです。

パターン3\
![buttons.png](https://wp.baku89.com/wp-content/uploads/2026/07/fc2_missing-image.png "http://blog-imgs-18.fc2.com/b/a/r/barleyyoungleaves/buttons.png")\
まさしくVistaのボタンっぽいですね。\
図ではわかりやすくするために透明度を上げているのですが、(単なる失敗)\
光沢の部分は円の中心部に近づくにつれ透明度を上げるのがミソです。

以上、半年以上にわたって「ボタンの光沢」について観察した結果なのですが、(本当)\
実を言うとこのブログはパターン1で統一しているんです。\
Web2.0からだんだん離れていきましたが、\
さりげない所に使ってみると面白いかもしれませんね。

[0](http://barleyyoungleaves.blog99.fc2.com/blog-entry-139.html#comments)

```
                                                    [0](http://barleyyoungleaves.blog99.fc2.com/blog-entry-139.html#trackback)

                -->
```

---

- カテゴリ: 雑念