Swellでサイトを運営していて、「せっかく書いたお知らせ、たぶん誰も見ていないかも…」と感じたことはないでしょうか。
この記事ではお知らせ一覧とお知らせバーの設定方法を解説していきます。
ざっくり言うと、Swellのお知らせバーとお知らせ一覧をセットで設計してあげるだけで、コードを書かなくてもお知らせが自然と目に入りやすいサイトにできます。
Swellのお知らせバーとお知らせ一覧の全体像

ここでは、Swellのお知らせバーとSwellお知らせ一覧がどんな役割を持っているのか整理していきます。どの場面でどちらを使うとよいかも、一緒にイメージしてみてください。
Swellお知らせバーとSwellお知らせ一覧の違い
最初に、Swellのお知らせバーとお知らせ一覧のざっくりした違いを表にまとめます。
| 機能 | 主な役割 | 表示場所 | 向いている内容 |
|---|---|---|---|
| お知らせバー | 今いちばん伝えたい1つの情報を目立たせる | ヘッダーの上または下に横長で表示 | キャンペーン、重要なお知らせ、注目記事への導線 |
| お知らせ一覧 | 過去を含めたお知らせを一覧で見せる | トップページや専用ページのコンテンツエリア | 会社ニュース、リリース情報、定休日のお知らせなど |
お知らせバーは、「いま一番伝えたいことを1つだけ強調するための帯」のような存在です。ヘッダー付近に固定で出せるので、どのページを開いていても必ず目に入ります。
それに対してお知らせ一覧は、「いつ・どんなお知らせを出してきたか」をあとから確認できるニュースのアーカイブです。過去のお知らせもまとめて見てもらえるので、会社やサービスの動きが伝わりやすくなります。
イメージとしては、お知らせバーが「店頭の看板」、お知らせ一覧が「お店の中に置いてあるお知らせボード」という感じです。両方用意しておくと、今伝えたいこととこれまでの情報を、きちんと整理して見せられます。
Swellのお知らせ機能が役立つサイトのタイプ
Swellのお知らせ機能が特に役立つのは、次のようなタイプのサイトです。
- 店舗やサロンなど、営業日や臨時休業などを案内することが多いサイト
- オンライン講座やコミュニティなど、募集期間や締切があるサービスサイト
- 会社のニュースやリリース情報をまとめておきたいコーポレートサイト
- セールやキャンペーンをよく行うECサイトやアフィリエイトサイト
こうしたサイトでは、「見てもらいたいタイミングのお知らせ」が定期的に発生します。Swellお知らせバーとお知らせ一覧をうまく組み合わせると、管理画面から文章を変えるだけで告知を回していけるので、運用がかなり楽になります。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか? これら全部を暴露します。
Swellお知らせバーの基本とメリット

次に、Swellお知らせバーでどんなことができるのか、そして実際に使ってみて感じたメリットを整理します。
Swellお知らせバーでできること一覧
Swellのお知らせバーには、デザインや動き、テキストの内容などを細かく変えられる項目が用意されています。主な項目を一覧にすると次の通りです。
| 設定項目 | 内容 | 使い方のコツ |
|---|---|---|
| 表示位置 | ヘッダーの上または下に表示する | サイトの雰囲気やロゴとのバランスを見て場所を決める |
| 表示タイプ | バー全体をリンクにする、ボタン付きにする、横スクロールなど | しっかりクリックしてほしい内容はボタン付きが分かりやすい |
| テキスト | お知らせバーに表示する短い文章 | 1行で読み切れる長さにまとめ、難しい言い回しは避ける |
| リンク・ボタン | クリック先のURLやボタンラベル | お知らせ一覧や特設ページなど、詳しい説明がある場所につなぐ |
| 背景効果・色 | 背景色、グラデーション、ストライプ柄など | サイトのブランドカラーを軸にしつつ、少しだけ目立つ色にする |
ざっくり言うと、「どこに出すか」「どう見せるか」「何と書くか」をセットで決められるのがSwellのお知らせバーです。テキストとURLさえ用意しておけば、バナー画像を作らなくても、すぐ告知が出せます。
Swellお知らせバーを使うメリット3つ
私がSwellお知らせバーを実際に触ってみて「これは便利だな」と感じたポイントは、おおきく3つあります。
- サイト全体に一括で表示できるので、「このページにはお知らせを書き忘れていた」という抜け漏れを防ぎやすい
- あらかじめデザインされたパーツなので、自作バナーを作るよりも短時間で設置できる
- テキストを差し替えるだけで告知内容を入れ替えられるので、運用のハードルが低い
特に「お知らせページを作ったのに、そもそもそこに誰も来てくれない」と感じている人には、お知らせバーは心強い機能だと思います。ページの上部に常に出しておけるので、スクロールしなくても読者の目に入りやすくなるからです。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか?
その全貌を知りたくありませんか?
Swellでお知らせバーを設定する手順

ここからは、Swellでお知らせバーを実際に表示させるまでの流れと、クリックされやすい文章の考え方を順番に見ていきます。
Swellお知らせバーの基本設定ステップ
まずは、お知らせバーをオンにして表示させるまでの全体の流れを確認しておきましょう。
| ステップ | 作業内容 | 操作場所のイメージ |
|---|---|---|
| 1 | カスタマイザーを開く | 管理画面の「外観」メニューからカスタマイズ画面を開く |
| 2 | お知らせバー設定に移動 | 「サイト全体設定」の中にある「お知らせバー」を選ぶ |
| 3 | 表示位置を決める | ヘッダーの上か下か、もしくは非表示にするかを選択する |
| 4 | 表示タイプを選ぶ | 全体リンク、ボタン付き、スクロール表示などから選ぶ |
| 5 | テキストとリンク先を入力 | 告知内容となる文章、URL、ボタンに表示する文言を設定する |
| 6 | 色や背景効果を調整 | 背景色や文字色、グラデーションなどを微調整する |
画面左側の設定を上から順番に見ていくだけなので、慣れてしまえば作業自体はとてもシンプルです。私は、まずテキストとリンクだけを設定した基本的なバーを作り、そのあとで背景やボタンなどを足していくやり方がやりやすいと感じました。
クリックされやすいSwellお知らせバーの文章テンプレ
お知らせバーで一番悩みがちなのが「何て書けばクリックしてもらえるのか」という文章です。目的別に、使い回しやすい形をいくつか用意しておくと迷いにくくなります。
| 目的 | テンプレ例 | 補足のポイント |
|---|---|---|
| 新着記事の紹介 | 「新しい記事『◯◯◯』を公開しました。詳しくはこちら」 | 記事タイトルをそのまま入れると、どんな内容かイメージしやすい |
| キャンペーン告知 | 「◯◯キャンペーン実施中です。くわしくはお知らせ一覧をご覧ください」 | 期間がある場合は「◯日まで」など期限も一緒に入れる |
| 重要なお知らせ | 「システムメンテナンスのお知らせです。ご利用の前にご確認ください」 | 少しかための言葉にして、重要度が伝わるようにする |
| イベント案内 | 「◯◯セミナーの参加受付中です。お申し込みはこちらから」 | 「〜はこちらから」で締めると、リンク先を示しやすい |
最初から完璧なコピーを狙う必要はありません。まずはこうした型に、自分のサービス名や企画名を当てはめてみて、反応を見ながら少しずつ言い回しを変えていくくらいの感覚で大丈夫です。
やってしまいがちなSwellお知らせバーのNG設定
便利なSwellお知らせバーですが、設定しだいではかえって読みづらくなってしまうこともあります。ありがちなNGパターンを事前に知っておくと安心です。
- 文章が長すぎて1行では読み切れず、途中で折り返しが何行も続いてしまう
- 背景色が派手すぎて、本文よりもそちらばかり目立ってしまう
- いつの情報か分からないお知らせを、内容を変えずに出しっぱなしにしている
- お知らせバーから飛んだ先のページが、お知らせ一覧ではなく古い単発記事のまま放置されている
これらを避けるために、最低限「1行で読める長さにまとめる」「サイトのトーンに合う色にする」「役目を終えたお知らせは差し替える」という3つだけでも意識しておくと、かなり印象が良くなります。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
Swellでお知らせ一覧を作る2つのパターン

続いて、Swellお知らせ一覧をトップページや専用ページに表示する方法を見ていきます。やり方は大きく分けて2通りあり、「カテゴリーを使う方法」と「カスタム投稿タイプを使う方法」です。
カテゴリーでSwellお知らせ一覧を作る方法
一番手軽なのは、通常の投稿に「お知らせ」というカテゴリーを作り、そのカテゴリーだけをSwellお知らせ一覧として表示するやり方です。
- 投稿のカテゴリー設定で「お知らせ」というカテゴリーを新しく作る
- お知らせとして出したい記事だけ、「お知らせ」カテゴリーにチェックを入れる
- トップページや固定ページに、Swellの「投稿リスト」ブロックを挿入する
- 投稿リストブロックの設定で、表示するカテゴリーを「お知らせ」に絞り込む
この方法の良いところは、追加プラグインなしで完結する点です。ブログ記事とお知らせを同じ「投稿」で管理できるので、WordPressにまだ慣れていない人でも迷いにくいと思います。
その一方で、「お知らせだけ入力項目を変えたい」「お知らせ一覧だけデザインを大きく変えたい」といった細かなカスタマイズは、カテゴリー方式だと少しやりづらい場面もあります。
カスタム投稿タイプでSwellお知らせ一覧を作る方法
もうひとつの方法は、「お知らせ専用の投稿タイプ」を用意するやり方です。プラグインなどで「news」や「information」といったカスタム投稿タイプを追加し、それをSwellお知らせ一覧として表示するイメージです。
- カスタム投稿タイプを作れるプラグインを導入する
- 「お知らせ」用の投稿タイプ(例:news)を作成する
- お知らせはその投稿タイプで新規作成していく
- トップページや固定ページで、投稿リストブロックの対象をその投稿タイプだけにする
カテゴリー方式とカスタム投稿タイプ方式の違いを、ざっくり比較すると次のようになります。
| 方法 | メリット | デメリット | 向いている人 |
|---|---|---|---|
| カテゴリー方式 | プラグイン不要で手軽、仕組みがシンプル | ブログ記事と一覧の管理が同じなので、記事数が増えると埋もれやすい | まずは簡単にSwellお知らせ一覧を作りたい人 |
| カスタム投稿タイプ方式 | お知らせ専用の入力欄やデザインを用意しやすい | 初心者には少し難しく、プラグインの管理も増える | 本格的なコーポレートサイトをSwellで運用したい人 |
Swellで「ひとまずお知らせ一覧が表示されれば十分」という段階であれば、カテゴリー方式で始めるのがおすすめです。すでにクライアントワークなどでSwellに慣れていて、情報設計を細かく作り込みたい場合は、カスタム投稿タイプ方式も検討してみるとよいと思います。
Swellお知らせ一覧のデザインとカスタマイズ

ここからは、Swellお知らせ一覧を「見やすく、読みやすく」仕上げるためのデザイン面のポイントを整理します。投稿リストブロックの設定を変えるだけでも、かなり印象が変わります。
投稿リストブロックの基本設定(Swellお知らせ一覧)
Swellの投稿リストブロックでは、レイアウトや表示項目を細かく切り替えられます。お知らせ一覧向きの設定例をまとめると、次のような形になります。
| 設定項目 | おすすめ設定 | 理由 |
|---|---|---|
| レイアウト | テキスト型またはシンプルなリスト型 | ニュース一覧のように、文字情報を中心に見せられる |
| カラム数 | 1カラム | 日付とタイトルを横一列で読みやすくするため |
| 表示順序 | 新しい順 | 直近のお知らせを優先的に見せたいから |
| サムネイル | オフ | お知らせ一覧では画像よりも本文の内容が大事なため |
| 日付表示 | オン | いつのお知らせかがひと目で分かるようにするため |
同じ投稿リストブロックでも、「ブログ一覧のカード型」と「お知らせ一覧のテキスト型」では、情報の受け取り方がかなり違います。Swellお知らせ一覧では、できるだけシンプルなテキストレイアウトにして、日付とタイトルがスッと目に入るようにしておくのがおすすめです。
コーポレートサイト風Swellお知らせ一覧にするポイント
会社の公式サイトのような、落ち着いた雰囲気のSwellお知らせ一覧にしたい場合は、次のようなポイントを意識すると一気にそれらしくなります。
- 1行の中に「日付」「カテゴリ」「タイトル」が並ぶデザインにする
- タイトルは長くても2行以内で折り返すように、文字数をある程度そろえる
- 行間や上下の余白を少し広めにとり、一覧でも窮屈に見えないようにする
- 「お知らせ」「プレスリリース」「メディア掲載」など、分類用のカテゴリをあらかじめ決めておく
表示項目の組み合わせとしては、たとえばニュース一覧なら「日付+カテゴリ+タイトル」だけを出す、イベント情報ならそこに1〜2行の抜粋を足す、といったイメージです。Swellお知らせ一覧の見た目は、こうした細かい調整の積み重ねで整っていきます。
最初に1パターン作ったら、投稿リストブロックの設定を少しずつ変えながら、2〜3パターンくらい試してみてください。自分のサイトの雰囲気に合うSwellお知らせ一覧のスタイルが、きっと見つかるはずです。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
Swellお知らせバーとお知らせ一覧の連携アイデア

ここでは、Swellお知らせバーとお知らせ一覧を別々に使うだけでなく、「セットで活かす」ための連携パターンを紹介します。
お知らせバーからSwellお知らせ一覧へつなげる導線設計
Swellお知らせバーのリンク先をお知らせ一覧ページにしておくと、「お知らせバーで興味を持った人が、さらに詳しい情報を一覧から見てくれる」という流れを作りやすくなります。
- お知らせバーのテキストに「くわしくはお知らせ一覧をご覧ください」など、一言だけ誘導文を添える
- お知らせ一覧ページの冒頭で、「現在掲載している主なお知らせ」を数行でまとめておく
- お知らせ一覧の記事内から、さらに詳しい説明ページや関連ブログ記事へ内部リンクを貼る
お知らせバーを入口、お知らせ一覧をまとめページと考えると、サイト内で読者が迷いにくくなります。私も、バーのリンク先を単発の記事ではなくお知らせ一覧に変えたところ、一覧ページの閲覧数が分かりやすく増えました。
サイトタイプ別Swellお知らせバーと一覧の使い方
サイトのタイプによって、Swellお知らせバーとお知らせ一覧の役割は少しずつ変わります。代表的なパターンを表にまとめました。
| サイトタイプ | お知らせバーの使い方 | お知らせ一覧の使い方 |
|---|---|---|
| 個人ブログ | 注目記事や人気記事、特集ページへの導線として使う | ブログの更新情報や小さめのお知らせを時系列で並べる |
| コーポレートサイト | 重要なお知らせや障害情報など、最優先で伝えたい内容を表示する | 会社ニュース、採用情報、プレスリリースなどを整理して掲載する |
| 店舗・サロン | 臨時休業や営業時間変更など、来店に関わる情報を出す | キャンペーン、定休日、イベント情報などを一覧で残しておく |
| オンラインサロン・講座 | 募集開始や申込締切などのタイミングを告知する | 開講スケジュールや過去のお知らせをまとめてアーカイブする |
同じSwellお知らせバーとお知らせ一覧でも、「このサイトでは何を一番に伝えたいのか」を決めておくだけで、使い方はかなり変わってきます。一度、紙に書き出して整理してから設定すると、方向性がぶれにくくなります。
★初心者さん必見★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
よくある質問(Swellのお知らせバーと一覧)

最後に、Swellお知らせバーとお知らせ一覧について、よくいただく質問をQ&A形式でまとめておきます。
Q1.Swellお知らせバーとSwellお知らせ一覧、どちらを先に設定すべきですか?
私なら、まずはSwellお知らせ一覧から用意することをおすすめします。
理由は、お知らせ一覧がない状態でSwellお知らせバーだけを設置すると、「このお知らせはどこに詳しく書くのか?」というリンク先に迷ってしまうからです。
先に「お知らせ一覧ページ」や「お知らせカテゴリーを絞った投稿リスト」を用意しておき、そのあとで「一覧の中から今いちばん大事なお知らせ」をSwellお知らせバーでピックアップする流れにすると、運用がかなり楽になります。
Q2.ブログだけのサイトでもSwellお知らせ一覧は必要ですか?
必ず必要というわけではありませんが、私個人としてはSwellお知らせ一覧を作っておくと便利だと感じています。
ブログだけのサイトでも、「サイトの方針変更」「お問い合わせフォームの変更」「ちょっとしたキャンペーン」など、通常の記事とは別にまとめておきたい情報が意外と出てきます。
そういった内容をSwellお知らせ一覧としてひとまとめにしておくと、読者も「大事なお知らせはここを見ればいいんだ」と理解しやすくなります。Swellお知らせバーは、その中から特に重要なものを一時的に目立たせるためのスポットライトのように使うと分かりやすいです。
Q3.Swellお知らせバーを常に表示しておくのは良くないですか?
Swellお知らせバーを常に表示していても問題はありませんが、内容が古いまま残っていると良くありません。
いつの情報か分からないお知らせがずっと出ていると、「このサイトは更新されていないのかな?」と感じられてしまい、信頼感が下がる原因になります。
もしSwellお知らせバーを常時表示したい場合は、「今も有効なお知らせ」だけに絞るか、「Swellお知らせ一覧への入り口」として半固定で使うのがおすすめです。そして、役目を終えた告知はお知らせ一覧には残しつつ、バーからはこまめに外すようにしましょう。
Swellお知らせバーとお知らせ一覧のまとめ
ここまでの内容を整理します
- Swellお知らせバーは、今いちばん伝えたい情報を目立たせるための「看板」のような存在
- Swellお知らせ一覧は、これまでのお知らせを時系列で整理して見せるための「アーカイブ」
- まずはカテゴリー方式でSwellお知らせ一覧を作り、必要に応じてカスタム投稿タイプ方式も検討する
- Swellお知らせバーの文章は、「何を」「いつまでに」「どうしてほしいか」を1行で伝えることを意識する
- サイトのタイプに合わせて、お知らせバーとお知らせ一覧の役割分担を決めると、運用がぐっと楽になる
今日からできる一歩としては、まず「お知らせ用のカテゴリー」をひとつ作り、Swellの投稿リストブロックで簡単なお知らせ一覧を表示してみてください。そのうえで、その一覧の中から「今一番読んでほしい1本」を選び、Swellお知らせバーに短い文章とリンクを設定してみましょう。
これだけでも、お知らせが読者の目に触れる回数はかなり変わってくるはずです。少しずつ試しながら、自分のサイトに合うSwellお知らせバーとお知らせ一覧の形を一緒につくっていきましょう。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか? これら全部を暴露します。








