恒例の「調べてみたら」シリーズです。
今回もWEB制作会社20社を調べました。
今回調べたのはボタンについてです。
ボタンの作り方も色々ありますよね。
幅をwidthで作成したり、高さをheightで指定するか、paddingを使用するか など。
今ボタンはどういう作り方が流行っているのか、さっそく見てみましょう。
皆さんはボタンをどのように作成していますか？
私は個人的には、幅を「min-width」で指定して、高さを「padding」で出すことが多いですね。
これなら、文字数が多くなったり折り返しになったとしてもデザインが崩れないからです。
ただ、現在の主流はどんな作りが多いのか気になったので、制作会社20社のボタンの作成方法を調べてみました。
これでだいたいのトレンドをつかんで、コーディングに活かしましょう。
１．調査方法
今回調べたのは、下記のようなボタンです。
矢印があったり、アイコンがあったりなどの、デザインの違いはありますが、そのサイトで共通で使われているボタンについて調べています。
まず調査方法ですが、以下のようにします。
- ・位置情報での検索結果の影響を防ぐため、アメリカ版googleで「Web制作会社」と検索
- １ページ目に表示された制作会社、もしくは「制作会社おすすめ○○選」といった記事から20社抜粋
- 制作実績ページから最新の２件を調査（合計40ページ）
- 基本的にはPC版のデザインについてのみ確認しています。
調べたのは下記の項目です。
横幅：ボタンの横幅をどのように指定しているか
高さ：ボタンの高さをどのように出しているか
フォントサイズ：フォントサイズをどの単位で指定しているか
それでは、結果発表です。
２．調査結果
ということで結果はこのようになりました。
以下は調査結果をまとめた表になります。
・縦軸の数字がサイト（1-1）は１社目の１ページ目を表します。
・横軸が調べたものの種類です。
・セルに入力されているのが、その項目をどのプロパティを使用して実装しているか、（）の中身はどの単位を指定しているかを表す。
例として、「width（px）」はwidthプロパティにpxを指定して横幅を出している となります。
| 横幅 | 高さ | フォントサイズ | |
|---|---|---|---|
| 1-1 | width（px） | padding（px） | rem |
| 1-2 | max-width（px） | height（px） | rem |
| 2-1 | padding（em） | padding（em） | px |
| 2-2 | width（px） | padding（px） | px |
| 3-1 | width（px） | height（px） | px |
| 3-2 | width（px） | height（px） | px |
| 4-1 | width（rem） | padding（rem） | rem |
| 4-2 | width（px） | line-height（px） | px |
| 5-1 | width（px） | height（px） | rem |
| 5-2 | min-width（rem） | padding（rem） | em |
| 6-1 | width（px） | height:（px） | rem |
| 6-2 | width（px） | height（px） | rem |
| 7-1 | width（px） | height（px） | rem |
| 7-2 | padding（px） | padding（px） | rem |
| 8-1 | width（px） | padding（px） | px |
| 8-2 | width（px） | padding（px） | px |
| 9-1 | padding（px） | padding（px） | rem |
| 9-2 | max-width（px） | padding（px） | rem |
| 10-1 | width（px） | padding（em） | rem |
| 10-2 | width（px） | padding（px） | px |
| 11-1 | max-width（rem） | line-height（rem） | rem |
| 11-2 | padding（em） | padding（em） | rem |
| 12-1 | min-width（px） | min-height（px） | px |
| 12-2 | max-width（px） | padding（em） | px |
| 13-1 | max-width（px） | padding（px） | calc（px） |
| 13-2 | width（px） | padding（px） | rem |
| 14-1 | max-width（rem） | min-height（rem） | rem |
| 14-2 | padding（rem） | padding（rem） | rem |
| 15-1 | max-width（px） | height（px） | rem |
| 15-2 | width（px） | padding（px） | rem |
| 16-1 | max-width（px） | padding（px） | px |
| 16-2 | max-width（px） | padding（px） | px |
| 17-1 | min-width（px） | padding（px） | rem |
| 17-2 | max-width（px） | padding（px） | rem |
| 18-1 | min-width（px） | padding（px） | rem |
| 18-2 | width（px） | height（px） | px |
| 19-1 | width（px） | line-height（px） | px |
| 19-2 | max-width（rem） | height（rem） | rem |
| 20-1 | padding（em） | padding（em） | px |
| 20-2 | width（px） | height（px） | rem |
3．総評
「min-width」思ったより少ない
私が良く使用している「min-width」は4サイトしか使用してなかったですね。
どちらかというと「width:100%」を指定しての「max-width」の方が多かったです。
横幅の指定は「width」が多い
横幅の指定は「width」が多かったです。
まあ、手っ取り早いですし、長い文字が入らないことが分かっていたり、デザイン上どこで使用してもサイズが変わらないならwidthが分かりやすくていいですね。
高さは「padding」を使用して出しているものが多い
高さはやはり「padding」で出しているものが大半でした。
paddingなら文字数が増えて折り返しがあったとしてもデザインが崩れませんし、文字の縦中央揃えができるので良いですね。
ただ、paddingだと数pxずれたりしますよね。
ピクセルパーフェクト目指してないならpaddingが一番良さそうです。
「height」を使用もそこそこ
「height」を使用しているサイトも11サイトとそこそこ多かったです。
文字数が折り返さないと分かっているなら「hegiht」での指定は楽ですよね。
縦中央揃えでまた別のプロパティが必要になりますが。。。
フォントサイズの指定は「rem」
フォントサイズの指定は「rem」が圧倒的でした。
やはり現在の主流は「rem」ですね。
PC,スマホ共にフォントサイズが調整しやすいです。
後、「em」の指定って少ないですよね。
私自身も正直親要素の影響受けたりするから、使いづらいのでほぼ使いません。
まとめ
以上 web制作会社20社のボタンの作り方を調べてみた。でした。
過去に調べたもので、フォントサイズやブレイクポイントなどありますのでそちらも是非ご覧ください。
今後も自分が気になったものはどんどん調べていきますよ！
