この記事では、SWELLのボックスメニューの基本的な使い方から、サイドバーへの設置方法、デザインの整え方、クリックされやすい文言の考え方まで、まとめて紹介します。
SWELLのボックスメニューを「なんとなく置いている飾り」から「読者を迷わせないナビ」に育てていきましょう。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
SWELLのボックスメニューとは？できることと役割
最初に、SWELLのボックスメニューがどんなブロックなのかをざっくり押さえておきます。全体像を理解しておくと、「この設定は何のためにあるのか」が見えやすくなるので、その後の細かい調整もスムーズになります。
SWELLのボックスメニューでできること
SWELLのボックスメニューブロックは、「画像（またはアイコン）＋テキスト＋リンク」がセットになった、ナビゲーション用のボックスを作るためのブロックです。
テキストリンクだけのメニューより見た目で目立ちやすく、読者を行きたいページに誘導しやすいのが特徴です。
主な機能を表にまとめると、こんなイメージです。
| 機能 | 内容のイメージ |
|---|---|
| アイコン・画像の表示 | 用意されたアイコンや、自分で作った画像をボックス内に表示できる |
| テキスト表示 | カテゴリー名や誘導文など、自由なテキストを配置できる |
| リンク設定 | 内部リンク・外部リンクどちらも設定可能で、ボックス全体をリンクにできる |
| カラー・スタイルの変更 | 枠線だけのスタイルや、背景色付きのスタイルなどを選べる |
| レイアウトの調整 | 列数、アイコンの大きさ、余白、縦並び・横並びなどを細かく変更できる |
| ブログパーツ化 | ブログパーツにしてサイドバーやフッターに使い回せる |
サイドバーにカテゴリーへの入り口をまとめたり、記事下におすすめ記事を並べたりと、「ここから先はこのルートでどうぞ」と案内する役割を持たせると力を発揮してくれます。
テキストリンクとの違いと使いどころ
同じナビゲーションでも、テキストリンクとボックスメニューでは役割や見せ方が少し違います。
ざっくり分けるとこんなイメージです。
- テキストリンク：シンプルで軽い。本文中でちょこちょこ内部リンクを貼るのに向いている。
- ボックスメニュー：視覚的に目立つ。読者に「ここから進むと良さそう」と一目で理解してほしい導線に向いている。
私の場合、次のような使い分けをすることが多いです。
- 本文の途中で補足記事に飛ばしたいときはテキストリンク
- サイドバーや記事下で「おすすめ記事」や「主要カテゴリーの入口」をまとめるときはボックスメニュー
とくに、ブログを読み慣れていない人やスマホ読者が多いサイトでは、ボックスメニューのような「見ればわかるナビ」があるだけでも、次のページに進んでもらいやすくなります。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
SWELLのボックスメニューの基本的な作り方
ここからは、投稿や固定ページの中にSWELLのボックスメニューを設置する基本的な手順を紹介します。まずは「記事の一部として出すボックスメニューの作り方」を押さえ、そのあとサイドバーなどの共通部分への応用を見ていきます。
投稿・固定ページでボックスメニューを挿入する
まず、ブロックエディター上でボックスメニューブロックを呼び出します。
基本的な流れは次のとおりです。
| ステップ | 操作内容 |
|---|---|
| 1 | ボックスメニューを挿入したい位置のブロックを選ぶ |
| 2 | 「＋」ボタンから「ボックスメニュー」を検索して選択する |
| 3 | もしくは段落で「/box-menu」または「/ボックスメニュー」と入力して呼び出す |
| 4 | 初期状態のボックスが表示されたら、編集を始める |
慣れてくると、いちいちブロック一覧から探さなくても「/box」と打てば候補に出てくるので、キーボードだけでサクッと挿入できて便利です。
各ボックスにリンク・テキスト・アイコンを設定する
ブロックを挿入できたら、個々のボックスの中身を整えていきます。
やることは大きく3つです。
- アイコンまたは画像を設定する
- テキスト（ラベル）を書き込む
- リンク先URLを設定する
ボックスをクリックすると、ブロックツールバーにリンクのアイコンが表示されるので、そこから内部リンクや外部リンクを設定します。
内部リンクなら、検索欄に記事タイトルの一部を入れて候補から選ぶと早いですし、外部リンクならフルURLを貼り付ければOKです。
初期設定でやっておきたい項目（列数・並び・余白）
SWELLのボックスメニューブロックは、右側のサイドバーから見た目に関する細かい設定ができます。
とくに最初に触っておきたいのは、次のような項目です。
- スタイル：枠線だけの「標準」か、背景色付きの「塗り」か
- 列数：PC・タブレット・スマホごとの表示列数
- アイコンとテキストの並び：縦並びか横並びか
- ボックス同士の余白：詰め気味か、ゆったりか
私がよく使うパターンは、だいたい次のような設定です。
- PC：3〜4列表示
- タブレット：2〜3列表示
- スマホ：1〜2列表示
スマホで縦に長くなりすぎると、ボックスメニューにたどり着く前に読者が疲れてしまうので、「スマホで見てもスクロールがつらくならないか」を意識して列数や余白を調整してあげると快適になります。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
ブログパーツでSWELLボックスメニューをサイドバーに設置する方法
続いて、「サイドバーやフッターにボックスメニューを固定表示したい」というときのやり方です。ここでは、ブログパーツ機能とウィジェットを組み合わせて設置する王道パターンを紹介します。
ブログパーツでボックスメニューを作成する
まずは、管理画面でブログパーツを作り、その中にボックスメニューを配置します。
ざっくりとした手順は次のとおりです。
- 管理画面の「ブログパーツ」→「新規追加」を開く
- タイトルに「サイドバー用ボックスメニュー」など分かりやすい名前を付ける
- 本文エリアにボックスメニューブロックを挿入し、中身を作り込む
- 公開ボタンを押して保存する
公開すると、ブログパーツ一覧の画面に「呼び出しコード」やIDが表示されます。
SWELLではショートコード形式の呼び出しコードが用意されているので、「あとでサイドバー用ウィジェットに貼るもの」と覚えておけばOKです。
ウィジェットでサイドバー・記事下に呼び出す
ブログパーツができたら、今度はそれをウィジェットを使って表示させます。
やることを表にすると、次のような流れです。
| ステップ | 操作内容 |
|---|---|
| 1 | 管理画面の「外観」→「ウィジェット」を開く |
| 2 | 「共通サイドバー」や「投稿ページ下」など、表示したいエリアを選ぶ |
| 3 | 「テキスト」や「カスタムHTML」など、ショートコードを入れられるウィジェットを追加する |
| 4 | 内容欄にブログパーツの呼び出しコード（ショートコード）を貼り付ける |
| 5 | 必要に応じてウィジェットタイトルを入れ、保存する |
これで、指定したエリアにボックスメニューが表示されます。
サイドバーに設置しておけば、どの記事を開いても同じメニューが表示されるので、サイト全体の「案内板」として機能させることができます。
設置場所ごとのおすすめパターン
ブログパーツ化したボックスメニューは、サイドバー以外の場所に置いても便利です。
- 共通サイドバー：ブログ全体の主要カテゴリーへの入り口をまとめる
- 投稿ページ下：関連記事や「次に読んでほしい記事」への導線を並べる
- 固定ページ下部：プロフィールページやサービス紹介ページの最後に、次のアクションをまとめて提示する
中身の違うブログパーツをいくつか用意しておけば、「記事の種類ごとにサイドバーのボックスメニューを変える」といった使い分けも可能です。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
デザインとレイアウトを整えるコツ（SWELLのボックスメニュー）
ここからは、SWELLのボックスメニューを「なんとなく並べただけ」から一歩進めて、見た目を整えるためのポイントをまとめていきます。派手にしすぎると逆に読みにくくなるので、「シンプルで分かりやすい」を軸に調整していきましょう。
スタイル・カラー・列数の設定
ボックスメニューブロックには、代表的なスタイルとして「標準」と「塗り」があります。
それぞれの特徴をまとめると、次のようなイメージです。
| 項目 | 標準（枠線のみ） | 塗り（背景色あり） |
|---|---|---|
| 見た目 | すっきりして、ミニマルな印象になる | ボタンのように目立ちやすく、強調したいときに向いている |
| 向いている用途 | カテゴリ一覧や、軽めのナビゲーション | 重要な導線、キャンペーンやサービス紹介など |
| カラー設定 | テキストとアイコンの色をそれぞれ調整 | テキスト色と背景色の組み合わせで印象を決める |
列数は、サイトの幅やボックス内の文字数を見ながら決めるのが基本です。
アイコンのサイズは、文字より少し大きいくらいを目安にしておくと、「何のアイコンか分かるけど、大げさすぎない」ほどよいバランスになります。
スマホファーストで考えるレイアウト
今は、スマホからブログを読む人のほうが多いことも珍しくありません。
ボックスメニューも「まずスマホで見てどうか」を基準に考えると、失敗しにくくなります。
スマホ表示で気にしておきたいポイントは、次のとおりです。
- ボックスの数を増やしすぎず、縦のスクロール量を抑える
- ボックス1つあたりのテキストは短めにして、2行程度に収める
- ボックス同士がくっつかないよう、余白をしっかりめに取る
- ボックス全体がタップ範囲になるよう、リンクの設定を見直す
個人的な感覚では、スマホで縦に4〜6個ほど並ぶくらいのボックスメニューが、一番タップされやすく、見た目もすっきりしやすいと感じています。
迷ったら真似したいシンプル構成
「デザインセンスに自信がない…」「色をいじり始めたら止まらない…」というときは、シンプル構成から始めておけば大きく外しません。
例えば、次のようなパターンです。
- スタイル：塗り
- 背景色：サイトのメインカラーを薄くした色
- テキスト色：黒か濃いグレー
- アイコン：単色で線がはっきりしたもの
- 列数：PCでは3列、スマホでは1列
このくらいの設定でも十分おしゃれに見えますし、サイト全体の世界観も崩れにくいです。
慣れてきたら、ホバー時だけ背景色を濃くしたり、ボックスに薄い影を付けて立体感を出したりと、自分のサイトに合うアレンジを少しずつ足していくと楽しくなってきます。
アイコン・画像の作り方とおすすめの考え方
次に、ボックスメニューの「顔」になるアイコンや画像について見ていきます。ここを少し整えるだけで、サイトの雰囲気が一段まとまって見えるので、こだわりたいポイントです。
SVGアイコンと画像アイコンの違い
【稼げるキーワード教えます】
▼ ▼ ▼
SWELLのボックスメニューでは、用意されたSVGアイコンを使うことも、自分で作った画像を使うこともできます。
それぞれの違いは、ざっくりこんな感じです。
| 種類 | メリット | 気をつけたい点 |
|---|---|---|
| SVGアイコン | 色を自由に変えやすく、拡大しても劣化しにくい。読み込みも軽い。 | テーマの用意したデザインに寄るので、完全にオリジナルとは言いにくい |
| 画像アイコン | 自分のブランドカラーやイラストを使えて、世界観を作り込みやすい | サイズを間違えるとぼやけたり、読み込みが重くなったりしやすい |
最初はSVGアイコンから始めて、ボックスメニューの動きやレイアウトに慣れてきたら、少しずつ画像アイコンに置き換えていく、という流れがやりやすいと思います。
Canvaでオリジナルアイコンを作るコツ
画像編集ソフトに慣れていなくても、オンラインデザインツールを使えば十分きれいなアイコンが作れます。
私がよくやるCanvaでの作り方は、次のような流れです。
- 正方形のキャンバス（例として500×500程度）を選ぶ
- 背景を透明にしておく
- サイトのメインカラーをベースに、シンプルなアイコンや文字を配置する
- PNG形式で書き出し、SWELLにアップロードする
このとき、
- 線を細くしすぎない
- 使う色を増やしすぎない（メイン＋アクセントくらい）
- 周りに十分な余白を残す
といった点を意識すると、ボックスメニュー内でもつぶれずに見やすく表示されます。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
サイト全体のトンマナを合わせるポイント
ボックスメニューのアイコンだけ雰囲気が違っていると、ページ全体がちぐはぐに見えてしまいます。
統一感を出すために、次のようなルールをあらかじめ決めておくと楽です。
- アイコンの形：丸型でそろえる、角丸四角でそろえるなど
- 色の数：メインカラーとアクセントカラーを合わせて2〜3色までにする
- 線の太さ：すべてのアイコンで同じ太さにする
- 背景：すべて透明にするか、薄いグレーの背景で統一する
一度テンプレートを作っておけば、新しいカテゴリーを追加するときも、同じルールでアイコンを増やしていくだけで済みます。
サイトタイプ別・SWELLボックスメニュー活用例
ここからは、サイトのタイプごとに、SWELLのボックスメニューをどう設計すると使いやすいかを具体的にイメージしていきます。「とりあえず人気記事を並べておく」から卒業して、読者目線で使いやすいナビを考えてみましょう。
雑記ブログでの活用例
雑記ブログはテーマが広がりやすいので、ボックスメニューで「入り口の整理」をしてあげると、読者が自分の興味のある分野に進みやすくなります。
| ブログの例 | ボックスメニューの例 |
|---|---|
| 雑記ブログ | 「暮らし」「仕事」「お金」「趣味」など、ざっくりしたテーマごとの入口 |
| 子育て系雑記 | 「育児グッズ」「家事のコツ」「時短レシピ」など、読者の悩み別の入口 |
| ガジェット系ブログ | 「スマホ」「PC」「周辺機器」「サブスク」など、ジャンル別の入口 |
トップページや共通サイドバーにこうしたボックスメニューを置いておくと、「このブログの中に、自分が知りたい情報はありそうか」が一目で伝わります。
特化ブログ・アフィリエイトサイトでの活用例
特化ブログやアフィリエイトサイトでは、「収益につながるページへの導線」をボックスメニューに集中させる使い方が定番です。
例えば、次のような内容をボックスメニューにまとめます。
- 比較・ランキング記事へのリンク
- ジャンル別のおすすめ商品一覧へのリンク
- 悩み別にまとめた解決記事へのリンク
このとき、ラベルの付け方も少し工夫するのがおすすめです。
- 「初心者向け」「中級者向け」など、レベル感をひと言添える
- 「まずはここから」「短時間で分かる」など、読者が得られるメリットを書き足す
こうしたひと言があるだけで、「自分はどこから見ればいいのか」が分かりやすくなり、クリック率も上がりやすくなります。
プロフィール・サービスページへの導線づくり
個人ブログのプロフィールページや、フリーランスのサービスページにも、ボックスメニューは相性がいいです。
- プロフィールページなら「経歴」「実績」「提供できること」「お問い合わせ」
- サービスページなら「メニュー一覧」「制作事例」「料金表」「よくある質問」
といった形でボックスメニューを置くと、訪問者が迷わず必要な情報にたどり着けます。
テキストだけで構成されたページは、どうしても「読むぞ」と気合を入れないと読み進めにくいので、ボックスメニューを挟み込んであげると、視線の流れをリセットする役割もしてくれます。
★初心者さん必見★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
クリックされるボックスメニュー文言と導線設計
次は、ボックスメニューの中身、つまりテキストの書き方や並べ方の話です。同じ場所に置いたボックスメニューでも、ラベルの付け方や並び順が変わると、クリックされ方も大きく変わります。
ラベルの付け方の基本
ラベルを書くときは、「カテゴリ名＋ひとことで伝わるベネフィット」をセットにするのがおすすめです。
例えば、こんなイメージです。
- NG例：「SWELL」「ブログ」「アフィリエイト」
- OK例：「SWELL設定｜デザインを整える」「ブログ収益化｜月1万円を目指す」
ラベルを見ただけで、
- どんなジャンルなのか
- その先でどんな良いことがあるのか
が伝わるように意識すると、ボックスメニューの役割がぐっと分かりやすくなります。
優先順位のつけ方と並び替え
ボックスメニューに項目を詰め込むほど、どれも読まれなくなる…ということはよくあります。
私がよくやる整理の仕方は、次のような感じです。
- まず、サイトで特に読んでほしい記事やカテゴリーを紙にすべて書き出す
- 「収益への貢献度」と「読者の満足度」の観点でS〜Cランクにざっくり分ける
- Sランクのものだけをボックスメニューに採用する
- 左上から右下に向かって、重要度の高い順に並べる
人の視線は左上から右下に流れることが多いので、一番読んでほしいコンテンツは左上、次に読んでほしいものはその右隣、といったイメージで配置していくと、クリックされやすくなります。
GA4などで効果測定する簡単な方法
少し慣れてきたら、ボックスメニューがどのくらいクリックされているかも数字で見てみると、改善のヒントが見えてきます。
細かい設定はここでは省きますが、Googleアナリティクスやクリック計測ができるプラグインを使って、「ボックスメニューのリンクがどれだけ押されているか」をざっくり確認してみるとよいです。
状況ごとの考え方をまとめると、次のようなイメージです。
| 状況 | 考えられる原因 | 見直したいポイント |
|---|---|---|
| ほとんどクリックされていない | 位置や色が目立たない、ラベルがあいまい | 設置場所、背景色、ラベルの書き方を変えてみる |
| 特定のボックスだけクリックが多い | そのテーマへのニーズが高い | 人気テーマ周辺のコンテンツを増やす、関連ボックスを追加する |
| スマホだけクリックが少ない | スクロールが長すぎる、タップしづらい | スマホの列数やボックスサイズ、ボックスの数を見直す |
完璧なボックスメニューを一発で作ろうとする必要はありません。
まずは設置してみて、少し時間をおいて数字をチェックし、気になったところだけ手直ししていく、というくらいの気持ちで付き合っていくと、負担なく改善を続けられます。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
よくある質問（FAQ）
最後に、SWELLのボックスメニューについて、よくある疑問をQ&A形式でまとめておきます。
Q1.SWELLのボックスメニューは記事本文とサイドバーのどちらに置くのがいいですか？
A. どちらか片方だけというより、「役割を分けて両方に置く」のがおすすめです。
記事本文の中では、「この記事を読み終わった人に次に読んでほしい記事」への導線としてボックスメニューを使います。
サイドバーでは、「ブログ全体の主要カテゴリー」や「サイトの案内板」としてボックスメニューを置いておくイメージです。
Q2.SWELLのボックスメニューで使うアイコンや画像のサイズに決まりはありますか？
A. 厳密な決まりはありませんが、「正方形に近い形で、小さめに表示してもつぶれないサイズ」を意識すると使いやすいです。
ボックスメニューブロック側に、列数やアイコンサイズなどの調整項目が用意されているので、まずは少し大きめの画像を用意しておき、実際の表示を見ながらサイドバーの設定でサイズを微調整してみてください。
Q3.SWELLのボックスメニューがうまく表示されないときはどうすればいいですか？
A. まずは、次のポイントを順番に確認してみてください。
- ボックスメニューブロックがブログパーツの中に正しく挿入されているか
- ブログパーツが「下書き」ではなく「公開」になっているか
- ウィジェットに貼った呼び出しコード（ショートコード）が途中で切れていないか
- キャッシュ系プラグインを使っている場合は、一度キャッシュを削除してみる
それでもうまくいかない場合は、SWELLの公式マニュアルや、ボックスメニューの解説記事と画面を見比べながら、一つずつ設定をチェックしていくと原因に気づきやすくなります。
まとめ｜SWELLのボックスメニューで読者の迷子を防ごう
この記事の内容を整理しておきます
- SWELLのボックスメニューは、画像（またはアイコン）とテキスト、リンクがセットになったナビゲーション用ブロック
- 記事中に直接挿入して使うことも、ブログパーツ化してサイドバーや記事下に共通表示することもできる
- スタイルやカラー、列数、アイコンサイズなどを調整することで、サイトの雰囲気に合ったデザインに仕上げられる
- 雑記ブログ、特化ブログ、ポートフォリオなど、サイトタイプに合わせて導線設計を変えると効果が出やすい
- ラベルの書き方や並び順を工夫し、アクセス解析でクリック状況を見ながら少しずつ改善していくことが大切
今日からできる最初の一歩としては、「サイドバーに置くボックスメニューを1つ作ってみる」ことです。まずは自分のサイトで特に読んでほしい記事やカテゴリーを4〜6個ピックアップし、シンプルなデザインでボックスメニューに整理してみてください。
しばらく運営してみて、クリックされているもの・されていないものを見ながらラベルを直したり、順番を入れ替えたりしていくと、SWELLのボックスメニューがどんどん頼れるナビに育っていきます。
私も最初は「それっぽいものを置いてみた」レベルからのスタートでしたが、何度か入れ替えを繰り返すうちに、回遊率や滞在時間が数字として変わるのを実感できました。
あなたのサイトでも、SWELLのボックスメニューを味方につけて、読者が迷子にならない心地よい導線づくりを始めてみてください。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
記事を読んだらコチラ
▼ ▼ ▼
