【手順】Studioのボタンの作り方｜ホバー装飾とスマホで押しやすいサイズ

Studioでボタンを作ろうとして、「ボタン」という部品が見つからず手が止まった方へ。Studioのボタンは、ボックスに背景色・角丸・パディングを付け、そのボックス全体にリンクを設定して作ります。専用機能はありませんが、この作り方を覚えれば形も大きさも自由に決められます。

本記事では、基本の作り方からホバー装飾、スマホで押しやすいサイズ、押されやすい文言の決め方までを順番に解説します。筆者は2024年12月からノーコードサロンを運営していますが、ボタンについては「作れたけれど押されない」「スマホだと押しにくい」という相談が特に多いところです。つまずきやすい順に並べました。

結論：ボタンは「ボックス＋テキスト＋リンク＋ホバー」で作る

先に結論をお伝えすると、Studioのボタンは次の4つの要素の組み合わせで作ります。

• ボックス：ボタンの土台。背景色・角丸・余白（パディング）を付ける
• テキスト（＋アイコン）：ボタンの中に入れる文言。必要なら矢印などのアイコンを添える
• リンク：ボックスにリンク先を設定し、押したときの遷移先を決める
• ホバー装飾：マウスを乗せたときの見た目の変化。押せることを伝える

この4点を押さえれば、デザインは自由に調整できます。特に見落とされやすいのがホバー装飾です。変化がないボタンは「押せるのか分からない」印象になりがちなので、ここまで含めて1セットと考えるのがコツです。ノーコードサロンの制作現場でも、ボタンは装飾よりまず「ボックス構造とリンク・ホバー」をセットで組むのが基本です。ボタンの周辺の余白設計はStudioのボックス・余白の仕組みもあわせて確認すると理解が深まります。

ボタンを作る基本手順

まずは装飾なしで、リンクとして機能するボタンを作ります。

手順1：土台のボックスを置く

ボタンの土台となるボックスを配置します。このボックスに背景色を付け、角丸で丸みを付けると、ボタンらしい見た目になります。四角のままでもボタンにはなりますが、角丸を少し付けると柔らかく押しやすい印象になります。角丸は4〜8px程度なら落ち着いた印象、高さの半分まで付けると丸いピル型になります。サイト全体で同じ数値に揃えると、ばらつきが出ません。

手順2：内側の余白（パディング）で大きさを決める

ボタンの大きさは、幅と高さを数値で固定するのではなく内側の余白（パディング）で決めるのがおすすめです。左右・上下にパディングを取ると、文言の長さが変わってもバランスが崩れにくくなります。高さを固定してしまうと、スマホで文言が2行に折り返したときに文字がはみ出したり、中央からずれたりします。特に上下のパディングは押しやすさに直結するため、狭すぎないよう十分に取ります。目安は上下12〜16px、左右24〜32pxあたりです。

手順3：テキストとアイコンを入れる

ボックスの中にボタンの文言（テキスト）を入れます。「無料で相談する」「資料を受け取る」など、押した先が分かる具体的な言葉にすると効果的です。矢印などのアイコンを添えると、次のアクションが直感的に伝わります。テキストは中央寄せにし、ボックスの横幅は内容に合わせて自動で伸びる設定にしておくと、文言を変えても崩れません。

手順4：リンクを設定する

ボックス（またはボタン全体）にリンク先を設定します。サイト内の別ページ、外部URLなど、目的に応じて遷移先を指定します。テキストだけでなくボックス全体にリンクを付けると、押せる範囲が広がってクリックしやすくなります。外部サイトへ飛ばすボタンは、新しいタブで開くようにしておくと、自分のサイトから離脱されにくくなります。

スマホで押しやすいボタンのサイズ

「表示はされているのに押されない」ボタンで、いちばん多い原因が小ささです。指で押すことを前提にしたサイズの目安は、OSの設計指針に書かれています。AppleのHuman Interface Guidelinesではタップできる領域を44×44pt以上、GoogleのMaterial Designでは48×48dp以上とすることが推奨されています。ボタンの高さはこの数値を下回らないように作ります。

ボタンの種類	高さの目安	左右のパディング
メインのCTA（お問い合わせ・申し込み）	48〜56px	32px前後
通常のボタン（詳細を見る など）	44〜48px	24px前後
小さめのボタン（タグ・絞り込み）	36px以上＋周囲に余白	16px前後

高さそのものだけでなく、ボタン同士の間隔も効きます。ボタンを縦や横に並べるときは8px以上空けると、隣を押してしまう誤タップが減ります。スマホで押しにくいと感じたら、デザインを変える前にまず高さが足りているかを確認してください。画面幅ごとにサイズを調整する手順はStudioのレスポンシブ設定のやり方で解説しています。

ボタンを装飾する（ホバーと影）

基本のボタンができたら、押されやすくするための装飾を加えます。

ホバー時に色や影を変える

マウスを乗せたとき（ホバー）に見た目が変わると、「押せる」ことが伝わります。Studioでは要素の状態に応じてスタイルを切り替えられるため、ホバーのコンディションで背景色を濃く（または明るく）する、影を付ける、といった変化を設定します。変化は控えめでも効果があります。切り替えに短いアニメーションを添えると、より自然な動きになります。動きの付け方はStudioでのアニメーションの付け方も参考になります。

スマホではホバーが効かない前提で考える

ホバーはマウス操作向けの機能のため、タッチ操作のスマホでは基本的に発火しません。これは不具合ではなく仕様です。つまり、ホバーに頼った設計にすると、スマホの訪問者には「押せる」ことが何も伝わりません。スマホで押せると伝えるのは、背景色のコントラスト、矢印などのアイコン、そして十分な大きさの3つです。PCでホバーを作り込んだあと、スマホ表示でもボタンだと分かるかを必ず見てください。

少しの拡大・浮き上がりで反応を出す

ホバー時にボタンをわずかに拡大したり、影を強めて浮き上がるように見せると、反応があることが伝わりクリックを後押しします。ただし大きく動かしすぎると安っぽく見えるため、変化は上品な範囲にとどめます。

色のコントラストで目立たせる

もっとも重要なボタン（メインのCTA）は、背景色と文字色のコントラストをはっきりさせ、ページの中で目立たせます。逆に、優先度の低いボタンは枠線だけの控えめなデザイン（ゴーストボタン）にすると、主役のボタンが引き立ちます。ボタンの色は多用せず、「一番押してほしいボタンだけ目立つ色」にするのが効果的です。

できたボタンはコンポーネントにして使い回す

形が決まったボタンは、コンポーネントにしておくと全ページで使い回せます。あとから色や角丸を変えたくなったとき、1か所の編集で全ページに反映されるため、ページごとに微妙に違うボタンが増えるのを防げます。手順はStudioのコンポーネントの使い方にまとめています。

押されるボタンにする文言の決め方

サイズと装飾を整えても押されないときは、文言を見直します。ボタンの中の言葉は、押した先で何が起きるかを伝える場所です。ボタンの文言は「サイト側がしてほしいこと」ではなく「読者が受け取るもの」で書きます。

弱くなりがちな文言	言い換えの例
送信	相談内容を送る
こちら／詳しくはこちら	料金プランを見る
お問い合わせ	見積もりを依頼する
資料請求	資料を受け取る（無料）
登録	無料で使いはじめる

あわせて、押したあとの不安を減らす一言をボタンの下に小さく置くのも有効です。「入力は30秒で終わります」のように事実と違うことを書く必要はなく、「相談は無料です」「しつこい営業はしません」といった、自分のサイトで本当に言えることを添えます。

つまずき・よくある失敗と対処

ボタン作りでよく起きる失敗を、症状から引ける形で整理します。

症状	原因	直し方
文字の上でしか反応しない	テキストにだけリンクを付けている	ボックス全体にリンクを付け直す
ホバーしても変わらない	コンディションが未設定、または変化が小さすぎる	背景色か影を、見て分かる範囲で変える
スマホで押し間違える	高さと上下パディングが不足している	高さ44px以上を確保し、ボタン同士を8px以上離す
スマホだけ見た目が崩れる	幅や高さを数値で固定している	パディングで大きさを決め、幅は内容に合わせる
どれを押せばいいか分からない	目立つ色のボタンが多すぎる	メインは1つに絞り、他はゴーストボタンにする
見られているのに押されない	文言が抽象的で、押した先が想像できない	「無料で相談する」など、得られるものを書く

ボタンは「目立たせる」だけでは機能しません。押しやすい大きさがあり、押した先が分かり、押せると見た目で伝わる——この3つがそろって初めてクリックされます。

よくある質問（FAQ）

Q1Studioにボタン専用の機能はありますか？

Studioでは、ボックスにテキストや背景色・角丸・リンクを組み合わせてボタンを作るのが基本です。専用の部品を探すより、「ボックス＋テキスト＋リンク＋ホバー」で作ると考えると、デザインの自由度が高く、思い通りのボタンを作れます。よく使うボタンはコンポーネント化しておくと再利用が楽になります。

Q2ホバーで色を変えるにはどうすればいいですか？

要素の状態に応じてスタイルを切り替える「ホバーのコンディション」を使います。ホバー時の背景色や影を設定すると、マウスを乗せたときだけ見た目が変わります。切り替えに短いアニメーションを添えると、より自然でクリックしたくなる動きになります。

Q3スマホで押しやすいボタンのサイズはどれくらいですか？

タップできる領域は、AppleのHuman Interface Guidelinesでは44×44pt以上、GoogleのMaterial Designでは48×48dp以上が推奨されています。ボタンの高さはこれを下回らないようにし、上下のパディングで確保します。小さすぎるボタンは押し間違いのもとです。文字サイズも小さくなりすぎないよう、各画面幅で確認してください。

Q4ボタンの幅と高さは数値で決めるべきですか？

数値で固定するのは避け、パディングで大きさを決めるのがおすすめです。高さを固定すると、スマホで文言が2行になったときにはみ出します。幅も固定すると、文言を少し変えただけで窮屈になります。パディングで決めておけば、文言の長さが変わってもバランスが保たれます。

Q5全ページのボタンをまとめて変えたいときはどうしますか？

ボタンをコンポーネントにしておくと、1か所の編集が使っている全ページに反映されます。色だけを揃えたい場合は、カラースタイルとして色を登録しておく方法もあります。ページを作るたびに手で同じボタンを組むと、あとから直すときに漏れが出やすくなります。

まとめ

Studioのボタンは、「ボックス＋テキスト（＋アイコン）＋リンク＋ホバー装飾」の組み合わせで作ります。土台のボックスに背景色・角丸・パディングを付け、ボックス全体にリンクを設定し、ホバーで色や影を変えて「押せる」ことを伝えます。スマホでは高さ44px以上を確保し、ホバーが効かない前提で色のコントラストと大きさで伝えます。文言は「送信」ではなく、押した先で得られるものを書きます。まずは基本のボタンを1つ作り、スマホ表示で指で押せるかを確かめてから装飾に進んでください。

ノーコードサロンでは、こうした「作れたけれど成果につながらない」段階の相談が日々やり取りされています。自分のサイトのボタンを見せて意見をもらえる相手がいるだけで、公開後に直す回数はぐっと減ります。