SWELLで画像の上にボタンを表示する方法を公開【初心者OK】

「SWELLで画像の上にボタンを置きたいのに、やり方が分からない…」「メインビジュアルにおしゃれなボタンを重ねたいけど、なぜか崩れてしまう…」。

こんな悩みを抱えていませんか？

結論からいうと、SWELLには画像の上にボタンを重ねるための仕組みがいくつか用意されていて、それぞれの特徴を知っておくとかなり自由度の高いデザインが作れます。

SWELLで画像の上にボタンを置いて、読者が迷わず次の行動を取れるページにしたい人向けに、私が実際のブログ運営で試しているやり方をできるだけリアルにまとめていきます。

SWELLで画像の上にボタンを置くと何がいいのか？

画像の上にボタンを置く大きなメリットは、次のような点です。

• 画像に視線が集まりやすく、そのままボタンにも目が行く
• 「読む」「登録する」「購入する」など、次にしてほしい行動をハッキリ示せる
• 文章だけのページよりも、プロっぽく整理されたデザインに見える

特にSWELLは、シンプルで余白のきれいなテーマなので、画像とボタンを組み合わせると一気に「ちゃんと作り込んだサイト感」を出しやすいです。トップページのメインビジュアル、記事内のバナー、LP（ランディングページ）のセクションなど、いろいろな場所で応用できます。

このあと紹介するパターンをいくつか覚えておくと、「ここは画像の上にボタンを置いたほうがわかりやすいな」という判断もしやすくなります。

SWELLで画像の上にボタンを重ねる5つのパターン

メインビジュアルに画像の上ボタンを表示する基本パターン

最初に抑えておきたいのが、「トップページのメインビジュアルの画像の上にボタンを置く」パターンです。SWELLでは「ブログパーツ」と「メインビジュアル設定」を組み合わせることで、コードを書かずに実現できます。

流れをざっくり整理すると、次のようになります。

手順	場所	やること	ポイント
1	ブログパーツ	新規でブログパーツを作り、SWELLボタンブロックを置く	ボタンの文言とリンク先をまず決める
2	ブログパーツ	必要に応じて見出しや短い説明も追加	「キャッチコピー＋ボタン」のセットが使いやすい
3	カスタマイザー	メインビジュアルの背景画像を設定	横長で余白にゆとりのある画像が扱いやすい
4	カスタマイザー	メインビジュアルの表示内容にブログパーツを指定	先ほど作成したブログパーツを選ぶだけでOK
5	プレビュー	PCとスマホの両方で見え方をチェック	ボタンの文言が長すぎないか、改行位置も確認

この方法なら、メインビジュアルの画像の上に、キャッチコピーとボタンをセットで重ねられます。最初はボタンの文言を短めにして、スマホでも2行以内に収まるようにすると、全体のバランスが崩れにくいです。

なお、ボタンのクリック計測機能はブログパーツでは使えない仕様なので、「メインビジュアルのボタンのクリック数まで正確に追いたい」という場合は、あとで紹介するパターンと組み合わせるのもアリです。

フルワイドブロック＋ボタンでLP風のセクションを作る

次は、ページの途中に「横幅いっぱいの画像＋ボタン」のセクションを作るパターンです。SWELL独自の「フルワイド」ブロックを使うと、LPの一部のようなレイアウトをかんたんに作れます。

基本的な構成はこんなイメージです

• フルワイドブロックを追加して、背景画像を設定する
• ブロックの中に見出し・説明文・SWELLボタンを入れる
• 余白や高さを調整しつつ、画像の上にボタンが載っているように見せる

項目	設定の目安
背景画像	多少トリミングされても問題ないシンプルな写真
コンテンツの横幅	やや狭めにして中央寄せすると整って見える
内側の余白	上下はしっかりめ、左右はやや控えめ
ボタンの配置	見出し・説明文のすぐ下に1〜2個程度

私は商品紹介ページやプロフィールページの途中に、このフルワイド＋ボタンのセクションを挟むことが多いです。文章が続く部分の前後に入れてあげると、読者の集中力もリセットされて、次の内容も読まれやすくなります。

カバーブロック＋SWELLボタンでシンプルに実装する

WordPress標準の「カバーブロック」も、画像の上にボタンを置きたいときにかなり便利です。カバーは「背景画像の上にテキストやボタンを置く」という構造になっているので、そこにSWELLボタンを入れるだけで形になります。

具体的な流れは次の通りです。

• カバーブロックを追加する
• 背景に画像を設定し、必要に応じてオーバーレイ（半透明の色）をかける
• 中に見出し・テキスト・SWELLボタンを配置する

カバーブロックの強みは、オーバーレイの調整がとても簡単なことです。少しうるさい写真でも、暗めのオーバーレイをうっすらかけるだけで、文字とボタンがぐっと読みやすくなります。

背景画像とボタンの色の組み合わせは、次のようなイメージで考えると失敗しにくいです。

• 明るい写真には、少し暗めのボタン＋黒系オーバーレイ
• 暗めの写真には、白や明るい色のボタン＋オーバーレイは薄め
• カラフルな写真には、全体をうっすら暗くしてから、サイトのテーマカラーのボタン

「派手さ」を追いかけるよりも、「文字がすっと読めるか」「ボタンがパッと見て分かるか」を優先して調整していくと、結果としておしゃれな見た目になります。

メディアとテキスト＋ボタンで半分重なったレイアウトにする

「画像の上にガッツリ乗せる」というより、画像とテキストが少し重なったようなレイアウトにしたいときは、SWELLの「メディアとテキスト」ブロックが活躍します。特に、ブロークングリッドレイアウトを選ぶと、画像とテキストの位置がずれて配置されて、かなり今っぽい印象になります。

具体的には、次のような手順です。

• メディアとテキストブロックを追加する
• レイアウト設定から「ブロークングリッド」を選ぶ
• メディア側に画像、テキスト側に見出し・説明文・SWELLボタンを置く
• テキスト側の背景色や余白を調整して、画像に少し重なって見えるようにする

このパターンは、次のような場面に相性がいいです。

• サービス内容をひとつずつ紹介するセクション
• 制作実績やポートフォリオの紹介部分
• 商品やプランの特徴をシンプルにまとめるとき

パターン	背景色	画像の位置	ボタンのタイプ
ベーシック	白	左	ノーマルボタン
落ち着いた雰囲気	薄いグレー	右	アウトラインボタン
ポップな印象	淡いカラー	左	立体ボタン＋やや大きめ

メディアとテキストは、スマホ表示になると縦一列に並びます。そのときにボタンが画像に埋もれてしまっていないか、テキストとボタンの間に余白がちゃんとあるかも、必ず確認しておきましょう。

バナーリンクブロックで「画像一体型ボタン」を作る

SWELL独自の「バナーリンク」ブロックを使うと、画像とテキストとボタンがセットになった、いわゆる「バナー的なリンク」をサクッと作れます。画像編集ソフトでバナー画像を用意しなくてもいいので、アフィリエイトやキャンペーン用の導線を作るときにかなり便利です。

基本的な手順は次の通りです。

• バナーリンクブロックを追加する
• 使いたい画像を選ぶ（横長がおすすめ）
• タイトル・説明文・ボタンの文言を入力する
• 角丸や影、ボタンの有無などのデザインを調整する

用途	画像の雰囲気	ボタンの数	設置場所
アフィリエイト案件の紹介	商品やサービスのイメージ写真	1つ	記事下・プロフィール下
メルマガや公式LINE誘導	シンプルなイラストやアイコン	1つ	サイドバー・フッター
自社サービスLPへの導線	サービス全体がイメージできる画像	1〜2つ	トップページ中段

私の場合は、まずバナーリンクで仮の画像とボタンをサクッと作り、あとから余裕ができたタイミングで画像だけ差し替えることが多いです。完璧なバナーを作るより、「とりあえず画像の上にボタンがある導線を用意する」ほうが、結果的にクリックや成約が早く生まれやすいと感じています。

SWELLボタンブロックの基本設定と便利機能

SWELLボタンのデザインタイプとおすすめ設定

SWELLのボタンブロックには、いくつかのデザインタイプがあります。最初はどれを選べばいいか分かりにくいので、よく使うタイプとおすすめの用途をまとめてみました。

デザインタイプ	見た目の印象	向いている用途
ノーマル	いちばんベーシックでクセがない	基本的にはどこでも使える
立体	少し浮き上がって見える	申し込みボタンなど、強く押してほしい場面
キラッと	ホバーしたときに光る演出が入る	キャンペーンや特典付きのリンク
アウトライン	枠線だけのシンプルなボタン	補足説明やサブメニューへのリンク

ボタンの色は、サイト全体のテーマカラーとそろえるのが基本です。ただ、画像の上にボタンを置くときは、背景画像とのコントラストもかなり重要になります。

• 明るい写真の上なら、ボタンは濃い色で
• 暗めの写真の上なら、白や明るい色のボタンで
• 色が多い写真の上なら、まずオーバーレイで少し落ち着かせてからボタン色を決める

このあたりを意識しておくだけでも、「なんとなく見づらいボタン」から「ちゃんと読めて押しやすいボタン」に変わっていきます。

クリック計測でボタンの成果を見える化する

SWELLには、ボタンのクリック数などを計測できる機能があります。せっかく画像の上にボタンを置くなら、「どのボタンがどれくらい押されているか」を数字で確認しておくと、改善の方向性が見えやすくなります。

ざっくりとした考え方は次の通りです。

• 重要なボタンには分かりやすいボタンIDを付けておく
• メインビジュアル用、記事下バナー用など、設置場所ごとにIDを分ける
• しばらく運用したら、どのボタンが一番クリックされているかを比べる

計測をオンにすると、次のような項目が見られます。

• ボタンが表示された回数
• ボタンが実際にクリックされた回数
• 表示回数に対するクリック率
• そのボタンの位置まで読まれた割合

もしメインの導線として置いたボタンの数字がいまいちだった場合は、次のような部分を少しずつ変えてみてください。

• 文言を「詳しく見る」から「無料で試してみる」など、より具体的な表現に変える
• ボタンの色やサイズ、形を見直す
• 似たボタンをいくつも置いている場合は、1つだけに絞ってみる

私も、ボタンの文言を変えただけでクリック数が目に見えて増えたことがあります。感覚だけに頼るより、数字を見ながら小さく試していくほうが、着実にサイトの成果につながっていきます。

画像の上にボタンを置くときのデザインとUXのコツ

色・オーバーレイ・文字数の基本ルール

画像の上にボタンや文字を配置するときは、最初に「コントラスト」を意識するのがおすすめです。背景と文字・ボタンの明るさが近いと、どうしても読みにくくなります。

項目	目安
ボタン内テキスト	7〜15文字くらいまでに収める
ボタンの幅	テキストより少し広いくらいがバランス良い
オーバーレイの濃さ	薄い黒を30〜50％程度でかけると使いやすい
画像の明るさ	どちらかというとやや暗めに寄せると文字が読みやすい

旅行写真などカラフルな画像の上に白い文字とボタンを置くと、背景に負けてしまうことがあります。そういうときは、カバーやフルワイドのオーバーレイ設定で、うっすら暗くしてあげると、一気にボタンが見やすくなります。

スマホ表示でチェックしておきたいポイント

SWELLで画像の上にボタンを配置したら、必ずスマホ表示でも確認しましょう。PCではうまく見えていたのに、スマホで見たらボタンがはみ出していたり、画像がつぶれてしまっていたりするのはあるあるです。

チェックしておきたいポイントは次の通りです。

• ボタンの文字が2行3行と長くなりすぎていないか
• 画像の上下が切れすぎて、何の画像か分からなくなっていないか
• ボタン同士が近すぎて、指で押しにくくなっていないか
• 一番押してほしいボタンが、スクロールしないと見えない位置に隠れていないか

特にメインビジュアルのような大きな画像は、スマホだと縦にぎゅっと縮まります。ボタンの文字数を減らしたり、フォントサイズや行間を少し小さめに調整したりしながら、PCとスマホの両方で気持ちよく見えるラインを探してみてください。

SEOとアクセシビリティの観点から見る「画像の上にボタン」

画像に文字を焼き込まない方がいい理由

デザイン的には、画像編集ソフトで「文字込みの完成バナー」を作って貼り付ける方法もあります。ただ、検索からの評価を考えると、これはあまりおすすめできません。

理由はシンプルで、画像の中に書かれた文字は、検索エンジンからはほとんど読まれないからです。キャッチコピーやボタンの文言まで画像にしてしまうと、ページのテキスト情報が少なくなり、内容が伝わりにくくなります。

やり方	SEO的な評価	コメント
文字もボタンも画像に埋め込む	弱い	検索エンジンからはただの画像に見えてしまう
画像＋テキスト（ボタンなし）	普通	内容は伝わるが、行動が少し分かりにくい
画像＋テキスト＋実際のボタン	良い	テキストもボタンも読み取られやすく、構造も分かりやすい

画像は雰囲気やイメージを伝える役割、文字やボタンは情報と行動を伝える役割、とざっくり分けて考えておくと、SEOにも優しく、あとからの修正もしやすいページ構成になります。

alt属性と見出しタグの付け方

画像を使うときは、「alt属性（代替テキスト）」も忘れずに意識したいポイントです。altは、画像が読み込めないときやスクリーンリーダーで読み上げるときに使われるテキストです。

• 純粋な背景的な画像なら、altは空かごく簡単な説明にする
• 商品やサービスを説明する画像なら、「何の画像か」が分かるように書く
• ボタンの内容は、ボタン側のテキストでしっかり伝える

また、見出しタグ（h2やh3）はデザインのためではなく、「ページの構造」を示すために使います。画像の上に置いたキャッチコピーを、なんとなくh2にしてしまうのではなく、次のようなイメージで整理すると分かりやすくなります。

• セクション全体のタイトル：h2
• その中の細かいポイント：h3
• 画像の上に載せた短いキャッチコピー：装飾した段落テキスト

このくらいのゆるいルールでもいいので意識しておくと、画像の上にボタンや文字をたくさん置いたページでも、検索エンジンから見たときの構造がきれいに伝わりやすくなります。

よくある質問（FAQ）

Q1.SWELLで画像の上にボタンを置くなら、どのやり方から試すのがいいですか？

A1.迷ったときは、バナーリンクブロックから試すのがおすすめです。バナーリンクなら、画像・テキスト・ボタンがセットになっているので、「まずは形にする」ところまでがとても早いです。

そのうえで、トップページの印象をもっと強くしたくなったら、ブログパーツとメインビジュアルを組み合わせるパターンにチャレンジしてみると良いと思います。私も最初はバナーリンクで感覚をつかんでから、フルワイドやカバーに広げていきました。

Q2.SWELLで画像の上にボタンを置いたら、スマホで崩れてしまいます

A2.スマホで崩れるときは、たいてい次のどれかが原因です。

• ボタンのテキストが長すぎて、細長い2〜3行になっている
• ボタンのpadding（左右の余白）が大きすぎて幅を取りすぎている
• フルワイドやカバーの高さを固定しすぎて、内容が窮屈になっている

とくに、メインビジュアルに画像の上ボタンを置いている場合は、スマホで見たときに縦の比率がかなり変わります。テキストを思い切って短くしたり、ボタンサイズを見直したりしながら、PCとスマホの両方で違和感がないかチェックしてみてください。

Q3.SWELLで画像の上にボタンを自由な位置に置きたいのですが、どうすればいいですか？

A3.SWELLの標準機能だけで、画像の上の「ピンポイントの位置」にボタンを完全に自由配置するのは、正直なところそこまで得意ではありません。メインビジュアルやカバーブロックなど、用意されたレイアウトの範囲で調整する形が基本になります。

それでもある程度自由度がほしい場合は、次のような工夫があります。

• メディアとテキストのブロークングリッドで、あえてずらして重ねる
• 余白やマージンを調整して、見た目として気持ちいい位置に寄せる
• どうしても細かく調整したいパーツだけ、追加CSSで位置を微調整する

「1px単位できっちり合わせる」より、「SWELLが得意なレイアウトに寄せていく」という発想で考えたほうが、作業のストレスも少なく、結果としてきれいに仕上がりやすいです。

まとめ：SWELLで画像の上にボタンを置いて、クリックされる導線を作ろう

この記事のポイント振り返ります

今日からできる最初の一歩としては、「バナーリンクブロックを使って、画像の上にボタンがあるバナーをひとつ作ってみる」ことをおすすめします。それをきっかけに、メインビジュアルやLP風のセクションにも広げていけば、SWELLで作るサイトの雰囲気が一気に変わっていきます。

私自身も、小さなバナーひとつから始めて、画像の上にボタンを置いた導線を少しずつ増やしていくうちに、クリック数や成約数が目に見えて変わってきました。あなたのサイトでも、SWELLで画像の上にボタンを上手に使って、読者が迷わず行動できるページを一緒に作っていきましょう。