調べてみた

【2024年】Web制作会社20社のボタンの作り方を調べてみた

2023年web制作会社20社のボタンについて調べてみたら
ニャンコ
ニャンコ

恒例の「調べてみたら」シリーズです。
今回もWEB制作会社20社を調べました。

今回調べたのはボタンについてです。

ワンコ
ワンコ
ニャンコ
ニャンコ

ボタンの作り方も色々ありますよね。
幅をwidthで作成したり、高さをheightで指定するか、paddingを使用するか など。

今ボタンはどういう作り方が流行っているのか、さっそく見てみましょう。

ワンコ
ワンコ

皆さんはボタンをどのように作成していますか?
私は個人的には、幅を「min-width」で指定して、高さを「padding」で出すことが多いですね。
これなら、文字数が多くなったり折り返しになったとしてもデザインが崩れないからです。

ただ、現在の主流はどんな作りが多いのか気になったので、制作会社20社のボタンの作成方法を調べてみました。
これでだいたいのトレンドをつかんで、コーディングに活かしましょう。

1.調査方法

今回調べたのは、下記のようなボタンです。
矢印があったり、アイコンがあったりなどの、デザインの違いはありますが、そのサイトで共通で使われているボタンについて調べています。

ボタン

まず調査方法ですが、以下のようにします。

  • ・位置情報での検索結果の影響を防ぐため、アメリカ版googleで「Web制作会社」と検索
  • 1ページ目に表示された制作会社、もしくは「制作会社おすすめ○○選」といった記事から20社抜粋
  • 制作実績ページから最新の2件を調査(合計40ページ)
  • 基本的にはPC版のデザインについてのみ確認しています。

調べたのは下記の項目です。

横幅:ボタンの横幅をどのように指定しているか

高さ:ボタンの高さをどのように出しているか

フォントサイズ:フォントサイズをどの単位で指定しているか

ニャンコ
ニャンコ

それでは、結果発表です。

2.調査結果

ということで結果はこのようになりました。
以下は調査結果をまとめた表になります。

縦軸の数字がサイト(1-1)は1社目の1ページ目を表します。
・横軸が調べたものの種類です。

・セルに入力されているのが、その項目をどのプロパティを使用して実装しているか、()の中身はどの単位を指定しているかを表す。

例として、「width(px)」はwidthプロパティにpxを指定して横幅を出している となります。

横幅高さフォントサイズ
1-1width(px)padding(px)rem
1-2max-width(px)height(px)rem
2-1padding(em)padding(em)px
2-2width(px)padding(px)px
3-1width(px)height(px)px
3-2width(px)height(px)px
4-1width(rem)padding(rem)rem
4-2width(px)line-height(px)px
5-1width(px)height(px)rem
5-2min-width(rem)padding(rem)em
6-1width(px)height:(px)rem
6-2width(px)height(px)rem
7-1width(px)height(px)rem
7-2padding(px)padding(px)rem
8-1width(px)padding(px)px
8-2width(px)padding(px)px
9-1padding(px)padding(px)rem
9-2max-width(px)padding(px)rem
10-1width(px)padding(em)rem
10-2width(px)padding(px)px
11-1max-width(rem)line-height(rem)rem
11-2padding(em)padding(em)rem
12-1min-width(px)min-height(px)px
12-2max-width(px)padding(em)px
13-1max-width(px)padding(px)calc(px)
13-2width(px)padding(px)rem
14-1max-width(rem)min-height(rem)rem
14-2padding(rem)padding(rem)rem
15-1max-width(px)height(px)rem
15-2width(px)padding(px)rem
16-1max-width(px)padding(px)px
16-2max-width(px)padding(px)px
17-1min-width(px)padding(px)rem
17-2max-width(px)padding(px)rem
18-1min-width(px)padding(px)rem
18-2width(px)height(px)px
19-1width(px)line-height(px)px
19-2max-width(rem)height(rem)rem
20-1padding(em)padding(em)px
20-2width(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社のボタンの作り方を調べてみた。でした。

侍テラコヤ感想

副業・案件獲得

2024/10/3

 侍テラコヤを実際に受講したガチ本音レビュー【評判】

スクール概要 侍テラコヤ 侍テラコヤは、プログラミング学習の課題を解決するために設立されたオンライン学習プラットフォームです。高額なプログラミングスクールに通うのが難しい方や、独学でエラー解決に苦労して挫折してしまう方に最適な環境を提供しています。月額2,980円から利用可能で、サブスク型なので合わないと思ったときにいつでも解約可能です。オンラインレッスンやQ&A掲示板を通じて、現役エンジニアに質問や相談ができるのも大きな特徴です。 ・月額2,980円からの安価な月額定額制・作りながら学べる教材が ...

ReadMore

30代にもおすすめな無料プログラミングスクール

副業・案件獲得

2024/6/17

30代からキャリアチェンジ!無料で学べるプログラミングスクール4選

30代からのプログラミングは遅くない! まず初めにこれを言いたいです。30代からプログラミングを始めるのは遅い? いやいや、30代からプログラミングを始めるのは遅くありません。 なぜ、そう言い切れるのかというと、私が実際そうだったからです。 プログラミングを勉強し始めて4か月で転職を果たした私がいうので、間違いありません。そんな私も受講した無料プログラミングスクールもあるので、ご紹介致します。 無料で学べるプログラミングスクールが存在する プログラミングは現代社会における重要なスキルの一つとなっており、多 ...

ReadMore

副業・案件獲得

2024/1/21

プログラミングスクール【70%OFF】その方法を解説

最近プログラミングスクールのサイトを見ると、受講費用の70%OFF(上限56万円)という表記をよく見ますね。これは、「リスキリングを通じたキャリアアップ支援事業」の一環ですが、私はこのことについてあまり知りませんでした。なので、今回はこの「リスキリングを通じたキャリアアップ支援事業」についてと、補助金を受け取るための条件などを調べてみました。スクールに入校を考えている方は、絶対利用した方がいい制度なので是非最後までお読みください。 「リスキリングを通じたキャリアアップ支援事業」って何? まず、リスキリング ...

ReadMore

schoo ウェブ制作におすすめ

副業・案件獲得

2024/3/3

オンライン学習動画「Schoo」体験レポート

おすすめ 登録・生放送授業が無料!オンライン学習動画サービス 7000本の授業が見放題!社会人向けオンライン学習動画【Schoo(スクー)】 7000本の授業が見放題!オンライン学習動画【Schoo(スクー)】 総合評価 : 「参加型生放送授業」と、「8,000本以上の録画授業」で動画学習「WEBアプリケーション開発【入門】」や「HTML・CSS基礎」などWEB制作講座も多彩!参加型生放送授業は無料、録画授業は月/980円と格安で学べる! ●365日配信される参加型生放送授業が無料●チャットで業界の気軽に ...

ReadMore

副業・案件獲得

2024/2/27

現実的にお金を増やす方法を考える!

1.WEB制作の案件を受注して普通に稼ぐ WEB制作副業で稼ぐ WEB制作の知識を学習して、案件を獲得する方法。プログラミングに比べ、学習がしやすく、かつ簡単。この方法の一番の利点は、実力を付けることが出来ればその後の選択肢が様々広がることでしょう。私もサービス業から在宅コーダーへとJOBチェンジしたので生活がすっごい楽です。 依頼が豊富 学習がし易く、比較的簡単 実力があれば安定して仕事を得る事ができる 実力を付けることが出来ればその後の選択肢が広がる 最低でも数か月の学習期間が必要 案件を獲得するまで ...

ReadMore

-調べてみた
-, ,