Moz - ボタンを作る

　Webページを見やすく、使いやすくする上で欠かせないボタン類。このページでは簡単なボタンの作り方を紹介します。

　本題に入る前に、ボタンがWebページ上でどこに使われるかをちょっと考えてみます。まあ、ページ上どこもかしこも全部ボタン、というデザインもアリと言えばアリなんですが、普通は各メニュー項目や、ホームへ戻る、一つ前へ戻る、次へ進むなどの戻る/進む系、あとはメールを送る、などでしょうか。このページではメールと戻る系にボタンが使われていますね。

　で、メニュー項目はそのページに特有なボタンを使うことが多いと思いますが、メールを送るボタンは封筒やポストのマーク、戻る系は上向きの矢印などが多いと思います。ボタンと言えば普通はGIFファイルなどのビットマップにするのですが、とりあえず、雛形だけ作っておきたいとか、そもそもビットマップファイルを作るのが面倒だ、という場合は、日本語フォント中にある記号で代用することも可能です。例えば、昔このページの一番下にあったボタンの固まり（今はSPAM対策でなくなっちゃいました）は・・・

これでもいいわけです。他に、「←」「→」なんかも結構使えます。

　ただし、この場合の欠点は、日本語が表示できないとハナモゲラになってしまう点でしょうか。通常、日本語のページを作っている場合にはあまり問題にはならないでしょう。

　で、これでは見栄えがしないので、普通はビットマップでボタンを書くわけです。ビットマップの大きさですが、大きいと邪魔ですし、小さいとつつきにくくなるので、大体10～20ドットくらいの大きさがいいのではないかと思います。また、シリーズで同じ大きさのボタンを作っておくと、並べる時や、IMGタグにWIDTH/HEIGHTを突っ込む時に楽です。

　じゃあ、とりあえず作ってみましょうか。ボタンに書く絵柄はとりあえず考えないで、ただの正方形のボタンを作ってみます。大きさは16X16ピクセルにしてみます。

　・・・なんか手抜きのにおいがプンプン漂ってきますが・・・。お察しの通り、16X16ピクセルの正方形を、藤色で塗っただけです。ボタンといわれれば確かにボタンかもしれませんが、なんか、押せそうな気がしませんね。なんで押せそうな気がしないのでしょう？

　それはこのボタンが出っ張って見えないからですね。世の中には出っ張ってないボタンというのも数多くあるのですが、文字も何も入っていない平面的な四角を「ボタン」というのは、やっぱりちょっと無理があるようです。だったら、出っ張って見えるようにすればいい訳ですが・・・どうやって？

　CRTの画面というのは平面ですから、実際に触れる凹凸をつける訳にはいきません。じゃあ、凹凸があるように見せることはできないかというと、そんなことはないですよね。凹凸のある物体を写真に撮って、それを画面上に表示してやれば、それは凹凸があるように見えるわけです。だったら、これを真似すればいいわけです。

　じゃあ、写真はなぜ凹凸があるように見えるのか？　それは「光と影」のなせる技です。凹凸があるところに光を当てれば、凹凸によって影ができます。それを描いてやればよいのです。

　実際に描く場合には、光の当て方を考えないといけません。普通、右利きの人がデスクワークをする場合には、光は左上から当てるのがよいとされています。そうすれば右手の影が邪魔にならないからです。ここでも、左上から光を当てたことにして、影を描いてみます。

　書き方ですが、ボタン表面の大きさを16X16ピクセルだとすると、ボタン表面は、16X16ピクセルの画像を新規作成して藤色に塗ります。同様に、影も16X16ピクセルの画像を新規作成して、藍色に塗っておきます。

　最後にこれらを重ねるのですが、出来上がりの画像サイズは、影が右と下に1ピクセルずつ飛び出す格好になるので、17X17ピクセルです。この大きさで新規作成しておいて、影を右下に、ボタン表面を左上に寄せて貼り付けて、Photo Magic 6ならばオブジェクトをベースに結合しておしまい。

　多少は出っ張って見えるようになりました。ここでは左上から当てましたが、右上から当ててもまあ大丈夫でしょう。が、下の方から当てると、出っ張っているようには見えず、引っ込んでいるように見えるので、避けた方がよいでしょう。

　さらに出っ張ってみえるようにするには、ハイライトを追加します。手近の物で、ある程度光沢があって、角があるものを探して見てください。その角をよく見ると、光に面している角は、物の色ではなくて、光を反射して光源の色に輝いていませんか？　これを真似すればもっと見栄えがよくなるに違いありません。

　で、やり方ですけど、さっき作ったボタンの上に、ハイライト部分だけの画像を重ねる方針で行きます。ということで、ハイライト部分だけの画像を作ります。今回は簡単なので、ペイントブラシとかでちまちま描いてもいいのですが、対象物を白黒で作っておいて、白黒反転して、1ピクセル右下へずらして貼り付けるのが簡単です。で、作ったハイライト部分はこんな感じ。

　これをさっきのボタンに重ねます。そのまんま重ねるとボタン本体が真っ黒けになってしまいますので、Photo Magicの加色混合モードで貼り付けます。Photo Magic 6の場合は、貼り付けてから選択ツールを選んで、「混合モード」を変えればOKです。ハイライト部分の画像で黒い部分はそのまま残り、白い部分は白飛び状態になります。まあ、実際にやってみるのが一番わかりやすいでしょう。

正方形のボタン（ハイライト付き）

　これでほとんど完成。本来ならば透過GIFで、本体でも影でもない部分は背景が抜けるようにセーブすれば完璧なのですが、ここではちょっと手を抜いています。後は自由研究ということで。

本館入口 / 百舌鳥のおきらくお絵描き / ボタンを作る

ご意見・ご要望の送り先はあかもず仮店舗の末尾をご覧ください。

メールを送る　〒		★　Shooting Stars Squareへ戻る
このページの先頭へ　△		▲　百舌鳥のおきらくお絵描きへ戻る