SWELLのボックスメニューの作り方｜トップページを見やすく

2026年10月27日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

トップページに、アイコン付きのおしゃれなメニューを並べたいと思っていませんか。私は以前、カテゴリーへのリンクを文字だけで並べていたため、読者がほかのページへほとんど移動してくれない状態が続いていました。

この記事では、SWELLのボックスメニューの作り方を、使うブロックや設定項目まで具体的に初心者向けに解説します。実際の失敗談も交えるので、読みながら進めれば、読者が迷わず目的のページへ進めるメニューを作れます。

※まだエックスサーバーを契約していない方へ：今月は最大30%OFFの限定キャンペーンが開催されています。この記事の手順を見ながら進めれば、初心者でも最短10分で国内シェアNo.1の高速ブログを開設できますよ。

➡️【公式】エックスサーバーの限定特設ページはこちら

早めに申し込むほど、キャンペーンの割引をしっかり活かせます。

ニャフィ

アイコン付きのメニューを並べてみたいのにゃ！

たいがブログ

アイコンがあると、ぱっと見てわかりやすいですよね。

ニャフィ

デザインの知識がなくても作れるのかにゃ？

たいがブログ

ブロックだけで作れる手順を、5つのステップで解説しますね。

▼あわせて読みたい：ボックスメニュー以外にも便利な機能がそろったSWELLの使い心地は、こちらのレビュー記事で詳しく紹介しています。

SWELLのボックスメニューとは

ボックスメニューは、アイコンや画像と短い文字をボックス状に並べられるSWELLのブロックです。カテゴリーやおすすめページへの入り口を、ひと目でわかるデザインで作れます。

筆者は文字だけのリンクをボックスメニューに変えたところ、トップページからカテゴリーへ移動する読者が増えたと感じています。アイコンがあるだけで、読者は直感的に行き先を選べるのです。

アイコン付きのメニューを並べられる

ボックスメニューでは、各項目にアイコンか画像と短い文字を設定できます。列の数も調整できるので、項目の数に合わせてバランスよく並べられます。

トップページの案内役になる

トップページにボックスメニューを置くと、初めて訪れた読者の道案内になります。ブログのジャンルや主要なカテゴリーが伝わるので、興味のあるページへ進んでもらいやすくなります。

SWELLのボックスメニューの作り方

ボックスメニューは、「ボックスメニュー」ブロックを追加して、項目ごとにアイコン・文字・リンクを設定するだけで作れます。作る前に、並べる項目を決めておくとスムーズです。

筆者はCocoonを使っていたころ、アイコン付きのメニューを作るためにCSSを書き足す必要がありました。SWELLはブロックを選ぶだけで完成形が見えるので、デザインが苦手でも作れます。

置く場所を決めておく

ボックスメニューは、トップページの上部に置くのが定番です。記事の中に置いて関連するカテゴリーへ案内する使い方もでき、目的に合わせて場所を選べます。

アイコンと文字の雰囲気をそろえる

項目ごとにアイコンの種類やテイストがばらばらだと、まとまりのない印象になります。同じテイストのアイコンを使い、文字の長さもそろえると見やすくなります。

STEP

ボックスメニューブロックを追加する

トップページや記事の編集画面で「＋」ボタンを押し、「ボックスメニュー」と検索して追加します。最初からいくつかの項目が入った状態で表示されます。

STEP

アイコンと文字を設定する

各項目を選び、アイコンか画像と表示する文字を設定します。筆者は文字を長くしすぎてスマホで2行に折り返されたので、4〜6文字程度がおすすめです。

STEP

リンク先を設定する

各項目にカテゴリーページや記事のURLを設定します。リンク先を間違えると読者が迷ってしまうので、1つずつ確認しながら入力しましょう。

STEP

列数とデザインを調整する

右側の設定パネルで、パソコンとスマホの列数やボックスのデザインを調整します。項目が6つならパソコン3列・スマホ2列のように、割り切れる数にすると整って見えます。

STEP

スマホで見え方を確認する

プレビューでスマホ表示を確認し、アイコンや文字が小さすぎないかチェックします。実際のスマホでタップしやすいかも確かめておきましょう。

ボックスメニューで回遊率を上げるコツ

ボックスメニューは、並べる項目や置き方を工夫することで、読者にサイト内をもっと回ってもらえるようになります。ここでは、実際に運営しながら効果を感じたコツを紹介します。

筆者はトップページのメインビジュアルのすぐ下に、「サーバー」「テーマ」「ガジェット」「スクール」のボックスメニューを置いています。ブログで扱うジャンルがひと目で伝わるようになり、カテゴリーページへの移動が増えました。

項目は読まれてほしいページに絞る

項目を増やしすぎると、どこを押せばいいか迷わせてしまいます。主要なカテゴリーやおすすめ記事など、読んでほしいページを6〜8個程度に絞って並べましょう。

ブログパーツに登録して使い回す

作ったボックスメニューをSWELLのブログパーツに登録しておくと、トップページや記事の最後など、複数の場所で同じメニューを呼び出せます。修正も1か所で済みます。

ボックスメニューのチェックポイント

項目の文字が短く1行に収まっている
アイコンのテイストがそろっている
列の数で項目がきれいに割り切れる
すべてのリンク先が正しく開く

▼あわせて読みたい：せっかく案内した読者を表示の遅さで逃さないために、サーバー選びについてはこちらの記事で詳しく紹介しています。

よくある質問

使いたいアイコンが見つかりません。: アイコンの代わりに画像を設定することもできます。無料のデザインツール「Canva」で、シンプルなアイコン画像を作って使うのがおすすめです。
ヘッダーのメニューとはどう使い分ければいいですか？: ヘッダーのメニューはどのページにも常に表示される案内です。ボックスメニューは、トップページなどで目立たせて案内したいときに使い分けましょう。
リンクは新しいタブで開いたほうがいいですか？: 自分のブログ内のページなら、同じタブで開くのが基本です。外部サイトへのリンクを入れる場合だけ、新しいタブで開くようにすると親切です。
ボックスメニューで表示が重くなりませんか？: アイコンを使う場合は表示速度への影響はほとんどありません。画像を使う場合は、TinyPNGなどで圧縮してから設定すると安心です。