Webサイトを作っていると、「ボタンって何pxくらいにすればいい？」「ボタンの文字と余白のバランスがわからない」「PCとスマホでボタンの大きさは変えたほうがいい？」と悩むことがあります。
ボタンは、Webサイトの中でもユーザーにクリックやタップしてもらう重要な要素です。
そのため、単純に「見た目がかっこいいボタン」を作るだけではなく、押しやすさと読みやすさを考えてサイズを決めることが大切です。
この記事では、Webデザイン初心者向けに、ボタンの高さや横幅、文字サイズ、余白、ボタン同士の間隔、角丸、PCとスマホの違いなどを解説します。
「Webデザイン ボタン サイズ」「Webサイト ボタン 大きさ」「CTA ボタン サイズ」などで検索している方も、ぜひ参考にしてください。
Webサイトのボタンサイズに正解はある？
まず知っておきたいのは、すべてのWebサイトに共通するボタンサイズの正解はないということです。
ボタンの目的や文字数、配置する場所によって適切なサイズは変わります。
ただし、初心者の方は次の数値を目安にすると考えやすくなります。
- ボタンの高さ：40〜52px程度
- 文字サイズ：14〜16px程度
- 左右のpadding：20〜32px程度
- ボタン同士の間隔：12〜24px程度
- 角丸：4〜12px程度
スマートフォンでは、タップしやすさを考えて高さ44px以上を一つの目安にするとよいでしょう。
これらはあくまでスタート地点です。
実際には、文字数やデザイン、周囲の要素とのバランスを見ながら調整します。
ボタンの高さはどう決める？
ボタンのサイズを決めるとき、まず考えたいのが高さです。
ボタンが小さすぎると、文字が窮屈になったり、スマートフォンでタップしにくくなったりします。
反対に大きすぎると、ボタンだけが目立ちすぎてしまいます。
一般的には、40〜52px程度を目安にすると扱いやすいでしょう。
ただし、heightを固定するよりも、paddingを使ってボタンの高さを作る方法もあります。
.button {
padding: 14px 24px;
}
この方法なら、文字数やフォントサイズが変わっても柔軟に対応できます。
ボタンの文字サイズは何px？
ボタンの文字は、本文より少し目立つ程度にすると使いやすいでしょう。
一般的には、14〜16px程度が一つの目安です。
重要なのは、文字サイズだけでなくボタン全体とのバランスです。
16pxの文字に対してボタンの高さが32pxしかなければ、窮屈に見える可能性があります。
反対に、14pxの文字に対して高さ80pxのボタンでは、大きすぎる印象になります。
「文字サイズを決める→上下の余白を決める」という順番で考えると、サイズを決めやすくなります。
ボタンの横幅はどう決める？
横幅についても、「必ず200px」というような固定値で考える必要はありません。
基本的には、ボタンの文字数と左右の余白から決めると考えるとわかりやすいでしょう。
たとえば、
.button {
padding: 14px 24px;
}
とすると、文字の左右に24pxずつ余白ができます。
「詳しく見る」のような短い文字なら自然なサイズになります。
一方、「サービス資料をダウンロードする」のように文字数が多い場合は、横幅も大きくなります。
ボタンの文字が長いからといって、無理に固定幅にすると、文字が詰まったりスマホで折り返したりすることがあります。
そのため、文字量に合わせて横幅を決めるのが基本です。
ボタンの内側の余白はどのくらい？
ボタンの文字とボタンの端との距離には、適度な余白が必要です。
初心者の方は、まず上下12〜16px、左右20〜32px程度から調整するとよいでしょう。
ポイントは、上下左右を同じ値にする必要はないということです。
横長のボタンにしたい場合は、左右のpaddingを大きくします。
.button {
padding: 14px 32px;
}
このようにすると、ボタンにゆったりとした印象を与えられます。
ボタン同士の間隔はどのくらい？
「お問い合わせ」と「資料請求」など、複数のボタンを並べる場合は、ボタン同士の間隔も重要です。
近すぎると、一つの大きなボタンのように見えてしまいます。
一般的には、12〜24px程度の間隔から調整するとよいでしょう。
PCでは横並び、スマートフォンでは縦並びにすることもあります。
特にスマホでは、誤タップを防ぐためにも、ボタン同士を適度に離すことが大切です。
ボタンの角丸は何px？
角丸についても、絶対的な正解はありません。
一般的には、4〜12px程度の角丸なら使いやすいでしょう。
完全な丸型のボタンにしたい場合は、
.button {
border-radius: 9999px;
}
のように設定することもできます。
角丸が小さいとシャープな印象、大きいと柔らかく親しみやすい印象になります。
Webサイト全体のデザインに合わせて決めることが大切です。
CTAボタンは少し大きめでもOK
CTAとは、ユーザーに特定の行動を促すためのボタンです。
たとえば、
- お問い合わせ
- 資料請求
- 購入する
- 予約する
- 無料で試す
などがあります。
こうした重要なCTAボタンは、通常のリンクやボタンより少し大きめに設定してもよいでしょう。
ただし、大きくすればするほどよいわけではありません。
「このボタンを押してほしい」とユーザーが自然に認識できる程度の存在感を意識します。
ボタンの数にも注意する
ボタンのサイズだけでなく、1画面にボタンを置きすぎないことも重要です。
「お問い合わせ」「資料請求」「購入」「詳しく見る」など、複数のCTAが同じ場所に並んでいると、ユーザーはどれを押せばいいのかわからなくなります。
特に重要なCTAがある場合は、最も優先したいボタンを目立たせることを意識しましょう。
ボタンの大きさだけでなく、色や配置、周囲の余白によっても優先順位を表現できます。
PCとスマホでボタンサイズを変える
PCとスマートフォンでは、ボタンの使われ方が異なります。
PCではマウスでクリックできますが、スマホでは指でタップします。
そのため、スマホでは小さすぎるボタンを避けることが大切です。
たとえば、PCでは横幅150px程度のボタンでも、スマホでは画面幅に合わせて少し大きくすることがあります。
ただし、すべてのボタンを100%幅にする必要はありません。
ボタンの重要度やレイアウトに応じて調整しましょう。
ボタンサイズを決めるときの考え方
ボタンのサイズで迷ったら、次の順番で考えると決めやすくなります。
1. ボタンの目的を決める
「詳しく見る」のか「お問い合わせ」なのかによって、必要な存在感は変わります。
2. 文字サイズを決める
まず14〜16px程度を基準にします。
3. 上下のpaddingを決める
12〜16px程度から調整します。
4. 左右のpaddingを決める
20〜32px程度を目安にします。
5. 周囲とのバランスを見る
ボタンだけが大きすぎたり、小さすぎたりしないか確認します。
6. スマホでも確認する
実際に指でタップしやすいサイズになっているか確認しましょう。
まとめ：ボタンサイズは「文字＋余白」で考える
Webサイトのボタンサイズには、すべてのサイトに共通する正解があるわけではありません。
初心者の方は、まず以下を目安にしてみましょう。
- 高さ：40〜52px程度
- 文字サイズ：14〜16px程度
- 上下padding：12〜16px程度
- 左右padding：20〜32px程度
- ボタン同士の間隔：12〜24px程度
- 角丸：4〜12px程度
そして、単純に「ボタンは48px」と覚えるのではなく、文字の大きさと内側の余白からボタンのサイズを決めることが大切です。
また、スマートフォンではタップしやすさも重要になります。
「文字が読みやすいか」「押しやすいか」「周囲の要素とバランスが取れているか」を確認しながら調整しましょう。
ボタンはWebサイトの中でもユーザーの行動に直接つながる重要な要素です。
見た目だけでサイズを決めるのではなく、目的・文字量・余白・デバイスに合わせてサイズを決めることを意識してみてください。
