今回は、さまざまな見た目のボタンを一覧で確認できて、さらにそのまま再利用しやすい形でコピーできる「ボタンの見本市サイト」を作ったので紹介します。
公開先はこちらです。
この記事で紹介するもの
今回作成したのは、ボタンデザインをまとめて見比べられるだけでなく、実用面も重視したボタン見本サイトです。
よくある「見た目だけ並べたギャラリー」ではなく、実際に触ってそのまま使えることを意識して作りました。
主な特徴は以下です。
- さまざまな見た目のボタンを一覧で確認できる
- ボタンを押すと、そのボタンに対応する内容をコピーできる
- 画面下部に、コピー対象のHTMLやCSSを確認できる領域がある
- 「css をコピー」「要素をコピー」「ズボラ版要素をコピー」の3パターンを用意している
- 淡いグラデーション系、少し濃いグラデーション系、業務画面向け、やわらかい印象のものなど、方向の違うボタンをまとめて確認できる
作ろうと思ったきっかけ
HTMLやCSSでボタンを作っていると、毎回こんなことが起きやすいと思います。
- ちょうどよい見た目のボタンがすぐ出てこない
- 以前作ったボタンを流用したいが、探すのが面倒
- サンプルは見つかっても、そのまま使える形になっていない
- classベースで管理したい時と、1個だけ雑に貼りたい時の両方に対応したい
特に私は、「見本を見ながら選びたい」のと同時に、「選んだらそのままコピーして使いたい」という気持ちが強かったので、両方を満たす形にしました。
サイトの見どころ
1. ボタンを大量に見比べられます
まず一番の特徴は、ボタンのバリエーションを一覧で見られることです。
例えば、
- 基本操作ボタン
- 主要アクション
- やさしい印象のボタン
- 警告・危険操作
- 成功・完了系
- 枠線だけの軽量ボタン
- ガラス風ボタン
- ピル型ボタン
- 濃色系ボタン
- 基本操作ボタン系のうっすらグラデ版
など、用途や雰囲気ごとにまとまっています。
単純に色違いを増やしただけではなく、「どういう場面で使いやすいか」もイメージしやすい文言にしているので、実際の画面に当てはめて考えやすいです。
2. 押したボタンをそのまま使いやすい形でコピーできます
このサイトでは、見本として表示するだけでなく、押したボタンの内容をコピーできるようにしています。
しかも、コピー方法を複数用意しているのがポイントです。
css をコピー
classベースで再利用したいとき向けです。
スタイル定義だけ欲しい場合に便利です。
要素をコピー
HTML要素だけ欲しいとき向けです。
class名付きの要素だけ抜き出して使いたい場合に向いています。
ズボラ版要素をコピー
これがかなり実用的です。
インラインstyle付きのボタンとしてコピーできるので、とりあえず1個だけ貼ってすぐ使いたい時にとても便利です。
「ズボラ版要素をコピー」が便利だった話
個人的には、この機能がかなり気に入っています。
CSSを整理して運用するのはもちろん大事ですが、実際には
- 一旦見た目だけ試したい
- すぐモックに貼りたい
- 管理画面の一部だけ仮置きしたい
- 後で整える前提で、とりあえず使いたい
という場面も多いです。
そういう時に、インラインstyle込みでボタン1個をすぐ持っていけるのは想像以上に便利でした。
「あとでちゃんと整理するけど、今は速度優先」という時に役立ちます。
見た目の方向性について
今回のボタンは、全体として次のような方向を意識しています。
- きつすぎない配色
- 業務画面にも使いやすい
- 少しやさしく見える
- 軽いグラデーションで立体感を出す
- ただし派手すぎない
特に、基本操作ボタン系ではうっすらグラデーションをベースにしつつ、少しだけ濃いものも混ぜて、一覧で見た時に変化が出るようにしています。
全部が同じ淡さだと、どうしても見分けがつきにくくなります。
逆に全部が濃いと、少しうるさく見えます。
そのため、
- ベースはやや淡め
- 一部に少し濃いものを混ぜる
という形にすると、見本市として見た時にちょうどよくなりました。
こういう人に向いています
このサイトは、特に次のような人に向いていると思います。
- HTML/CSSでUIを作ることがある人
- ボタンデザインの引き出しを増やしたい人
- サンプルを見ながら選びたい人
- 選んだボタンをすぐ使いたい人
- 管理画面や業務画面向けの落ち着いたUIを作りたい人
- 淡色系ボタンをたくさん比較したい人
公開URL
改めて、公開先はこちらです。
アクセスするとそのまま使えます。
おわりに
今回は、ボタンを一覧で見比べられて、しかもそのままコピーして再利用しやすい「ボタンの見本市サイト」を作ってみました。
見た目の比較だけで終わらず、実際の制作作業につながるように、
- 見本として眺められる
- 押して試せる
- 必要な形でコピーできる
という流れを意識しています。
HTMLやCSSでボタンを作る時、毎回ゼロから考えるのが面倒なことは多いので、そういう時の土台として使いやすいサイトになったと思います。
同じような用途で使えるものを探している方の参考になれば嬉しいです。