【初心者向け】SWELLでメインビジュアルにボタンを設置する方法

今回は、SWELLでメインビジュアルにボタンを設定する方法をご紹介します。

ただのボタンをつけることなら、他のテーマでもできるのですが、SWELLの魅力は、ボタンを自由にカスタマイズできる点です！【初心者向け】【中級者向け】と２回に分けてご紹介します。

今回は、【初心者向け】として、初心者でも簡単に設定できる方法をお伝えします。
この方法は、WordPressの管理画面で、設定を確認しながら簡単に編集できます。

＼ 本当に使いやすいテーマなら／

メインビジュアルって、どこ？

メインビジュアルとは、サイトのトップページや記事の上部に表示される大きな画像や背景のことを指します。
いわば「サイトの顔」となる部分で、訪問者が最初に目にする重要なエリアです。

例えば、メインビジュアルには、企業のホームページではブランドのイメージを伝える写真やキャッチコピーが配置されることが多く、個人ブログではおすすめの記事やプロフィールを目立たせるデザインになっていることが一般的です。メインビジュアルは、サイト全体の雰囲気や目的を瞬時に伝える役割を持っています。

メインビジュアルにボタンを設置するメリット

メインビジュアルに「ボタン」を設置することで、２つのメリットがあります。

クリック率の向上
メインビジュアルに「講座に申し込む」「レッスン体験申込み」「商品の購入」などボタンを配置することで、読者が目的のページへスムーズに移動しやすくなります。視覚的に分かりやすい導線を作ることで、クリック率が向上します。

回遊率アップ
サイトに訪れた人が「次にどこをクリックすればいいのか」迷ってしまうと、そのまま離脱してしまうことがあります。しかし、メインビジュアルに適切なボタンを設置することで、「もっと読んでみたい！」と思ってもらいやすくなり、自然と色々なページを見てもらいやすくなります。

それでは次から、初心者でも簡単に設定できる方法を紹介します。

SWELLの「カスタマイズ」画面からボタンを設定する（簡単）

SWELLでは、テーマの「カスタマイズ」機能を使うことで、簡単にメインビジュアルにボタンを設置できます。特に初心者の方におすすめの方法で、コードを使わずに直感的な操作で設定できるのが魅力です。

ボタンは「置いた後」が本番！スマホ表示の罠に注意

無事にメインビジュアルにボタンは設置できましたか？ PCで見ると、綺麗な画像の上にボタンが配置されていて、一気にプロっぽいサイトになったと思います。

ただ、ここで終わらないのが「読者に優しい（おもてなしの）サイト」です。 Webディレクター・編集者として20年、様々なサイトを見てきて痛感するのは、「ボタンは設置してからが本番」だということ。

特に気をつけたいのが「スマホでの見え方」です。

PCで綺麗でも、スマホだとボタンが「遠い」かも？

SWELLのメインビジュアル設定でよくあるのが、以下の現象です。

【残念なメインビジュアル】
PCではちょうどいい位置にボタンがあるのに、スマホで見ると画像が縦長になりすぎて、ボタンが画面の一番下（あるいはスクロールしないと見えない位置）に追いやられてしまう。

これでは、せっかく設置したボタンに気づいてもらえず、クリック率がガクッと下がってしまいます。

クリックされるボタンの秘訣は「正方形」と「チラ見せ」

「じゃあ、スマホでボタンをしっかり目立たせるにはどうしたらいいの？」

その答えは、スマホ用の画像を「あえて正方形」で作成することです。 画面いっぱいに画像を表示させるのではなく、画面の下1/3に余白を作り、そこにボタンや次の記事の頭を「チラ見せ」させるんです。

この「チラ見せの法則」を使うと、読者は自然と下へスクロールしたくなり、ボタンのクリック率も劇的にアップします。

具体的な画像サイズの目安や、SWELLでの設定のコツは以下の記事でたっぷり解説しています。「せっかく置いたボタンをもっと押してほしい！」という方は、必ずチェックしてくださいね。

---

さらに自由にレイアウトしたい方へ【中級編】

基本のボタン設置、お疲れ様でした！ これだけでも十分にプロっぽいサイトの「顔」になりますよね。

でも、SWELLに慣れてくると、だんだんこんな欲が出てきませんか？

• 「ボタンを2つ横に並べたい」
• 「文字を右寄せにして、左側は背景画像の余白を活かしたい」
• 「PCとスマホで、ボタンの位置を別々に変えたい」

実はSWELLの「ブログパーツ」機能を使えば、難しいCSS（コード）を一切書かずに、ブロックをパズルみたいに組み立てるだけで自由自在なメインビジュアルが作れるんです！

「標準機能の真ん中配置じゃ物足りない！」「もっと自分好みにデザインしたい！」という方は、ぜひこちらの【中級編】ステップアップ記事にも挑戦してみてくださいね。

---

設定がうまくいかない時は、気軽にプロへご相談を

「ボタンのテキストは何にすればいいか迷う…」
「スマホで見ると、どうしても画像やボタンのバランスが崩れてしまう…」

もし、ご自身で設定していて「どうもしっくりこないな」と行き詰まってしまったら、一人で悩まずにぜひ声をかけてください。 Webディレクターとして、あなたのブログに最適なボタンの配置や、デザインのカスタマイズをお手伝いさせていただきます。