#14　ホームページで使えるSWELLブロックエディター10選

こんにちは！webデザイナーの祥子です。

今日は、WordPress最強テーマSWELLで

webサイトを作る上でめちゃくちゃ使い勝手がいい

ブロックエディター13選をお届けします！

これからSWELLを買おうかな？と迷っている方や

買ったけどイマイチ使いこなせていない方。

そんな悩みを一撃で解決するのでぜひ最後までご覧ください。

第1選. フルワイドブロック

「まず最初にご紹介するのは『フルワイドブロック』。

ページいっぱいに広がるデザインが簡単に作れるブロックです。
特にフロントページを作る際に大活躍。

使い方は簡単！

「フルワイドブロックは、
背景色を変えてコンテンツと
メリハリをつけることができるので
セクションの区切りとして大活躍。

特に、視線を引きつけたい部分に使うのがgoodです！

おすすめテクニックは、次の３つ。

①背景にさりげない柄をつける
②柄と無地を交互にする
③背景に動画を入れて動きをつける
④柄ものの背景にカバーブロックを重ねる

こうした工夫をすることで、
フルワイドブロックをさらに
魅力的に使うことができます。

サイトの第一印象を
大きく左右する重要な部分なので
ぜひ活用してみてくださいね

---

第２選　投稿リスト

「投稿リストブロック」は、
ブログの記事一覧を簡単に表示できる
便利な機能。

表示する記事の順番を
「人気順」「新着順」に
切り替えることもできます。
例えば、次のような場面で活躍。

• １最新記事の一覧を表示
• ２カテゴリーを指定した
  記事だけを表示
• ３お知らせ一覧を表示

ブログを書く人には、
もちろんとても活用できる機能。
ホームページの場合は特に
「お知らせ」のセクションで
「投稿リスト」が大活躍します。

投稿ページのカテゴリーで
「お知らせ」というカテゴリーを作り、
「投稿リスト」の編集で右の
「Pickup」を選択。
「タクソノミーの条件設定」
→「カテゴリー」
ここで、「お知らせ」のカテゴリーを選ぶと
お知らせ記事だけを吸い上げてくれます。

ホームページにとって、お知らせは
ほぼ必須のコンテンツです。
ここが更新されているかどうかを
判断基準にするユーザーも一定数いるので
ぜひ「投稿リストブロック」を活用してください。

第３選　ブログパーツ

「ブログパーツブロック」は、
一度作ったコンテンツを
使い回せる便利な機能。
よく使うデザインや情報を登録しておけば、
何度でも簡単に呼び出せます。（図を挿入）

使い方は、

まず、ダッシュボードの左のバーにある
「ブログパーツ」という欄で
「新規作成」をクリック。
ここで繰り返し使いたい
コンテンツを作成し、保存。
編集ページで「ブログパーツ」
ブロックを追加し、
保存したものを選択

これだけで、
登録したコンテンツを簡単に挿入できます。

例えば、次のようなシーンで活躍。

• １お問い合わせボタンを統一する時
• ２サービス紹介や料金表など、
  複数のページで同じ情報を表示する時
• ３制作実績を一括管理する時

一つのブログパーツを更新すれば、
すべての挿入箇所が自動で更新されるので、
修正の手間も１回で済みます。

また、ブログパーツを作ると
自動でIDが発番されます。

こちらをショートコードでヘッダーや
ハンバーガーメニューに挿入して
サイトの細かいデザインを
カスタマイズする時にも
ブログパーツはとても役立ちます。

ちなみに、ブログパーツを活用して
ハンバーガーメニューを
カスタマイズする方法を

公式LINEから皆さんにプレゼントしているので
必ず受け取ってくださいね！

ブログパーツは、サイトの管理を
より効率的にしたり
サイトデザインをカスタマイズしたりする時に
とても大活躍します。

第４選　リッチカラム

「リッチカラムブロック」は、

複数のカラム（列）を使って、画像やテキストを
美しく並べることができるブロックです。
リッチカラムによって、
デザイン性の高いレイアウトを作成可能。

「リッチカラム」とは別で、

「カラムブロック」というものもあります。
「カラムブロック」はSWELLでなくても
WordPressにデフォルトで用意されたブロック。
ただし、間隔を指定したり
スマホでも3列以上の表示を
ワンクリックでさせることはできないので
より柔軟なカラムを作りたいときは
「リッチカラムブロック」を活用しましょう。

第５選　タブ

「タブブロック」は、
複数の情報をコンパクトにまとめ
クリックで切り替えられる便利な機能です。
ページが縦長になるのを防ぎ
スッキリと整理されたデザインを作ることができます。

これだけで、簡単にタブ切り替えの
機能をつけることができます。

タブの中には、いつも使っている
ブロックエディターを使用できるので
色々なブロックを組み合わせてみましょう。

タブの数は自由に増減でき、
内容に応じてカスタマイズ可能。

例えば、

商品の特徴を
「スペック・レビュー・Q&A」のように
整理することができます。

また、サービスプランを
「個人向け・法人向け」に分けて表示するなど
様々なアイデアを形にすることに役立つ
頼もしいブロックです。

情報量が多くなりがちなページで、
ユーザーが見やすい形に
まとめることができます。

ただし、デメリットとしては、
ユーザーが横のタブを
見落としてしまうリスクも予想されます。

そのため、重要な情報は最初のタブに設定して
クリックしなくても目につくような構成にして
対策しましょう。（図を挿入）

第６選　ステップ

「ステップブロック」は、
手順や流れをわかりやすく整理して
伝えるためのブロックです。
順番に沿って情報を見せることで、
ユーザーの理解を深めることができます。

後から順番を入れ替えることもできるので
修正も簡単です。

例えばこんなシーンで活用可能。

• １サービスの利用手順の説明
• ２購入までの流れの案内
• ３採用サイトなどで
  キャリアアップイメージの説明

特に、初めてご利用のユーザー向けに
説明をする場面で役立ちます。
webデザイナーさんのサイトでは
「制作の流れ」を掲示することもよくあるので
その際に「ステップブロック」が活躍します。

第７選　アコーディオン

「アコーディオンブロック」は、
クリックで開閉できるブロックです。
情報をスッキリまとめつつ、
必要なときに詳細を表示できるのが特徴。

例えば次のようなシーンでよく活用されています。

１よくある質問（Q&A）を折りたたみ形式で掲示
２商品やサービスの詳細情報を折りたたんで整理

アコーディオンブロックのメリットとしては
ページをスッキリさせながら情報量を
確保できるという点です。

特に、Q&Aが大量にあるサイトの場合だと
縦に長くなりがち。
そういう場合にアコーディオンブロックを入れると
ユーザーが必要な疑問だけを選択して
回答を見ることができます。

こうすることで、
ユーザーがスクロールする負担を少しでも軽減できます。

また、ちょっと高度なテクニックもご紹介します。

お客様の声などで、文章が長くなってしまう場合に

アコーディオンブロックを挟むことで
「Read More」をクリックすると全体が開くような
機能をつけることができます。

ただし、「Read More」に
アコーディオンを使う場合は
デフォルトのデザインだけだと
背景が不自然で無理やり作った感が出てしまいます。

なので、cssを入れて背景を透明にすることで
自然な形で機能を追加できます。
ここで使うCSSは
この動画を見てくれた方にだけプレゼントしています。
受け取り用の公式LINEからカタカナで
「アコーディオン」とメッセージをください。
すると、コピペして使えるコードをお送りするので
カスタマイズを時短しちゃってください。

第８選　FAQ

「FAQブロック」は、よくある質問と
その回答をスッキリとまとめられるブロックです。
ユーザーの疑問を解決できるので、
問い合わせ対応の手間を減らすことができます。

第７選でお伝えした
「アコーディオンブロック」と違って、

折りたたむことなく、
Q&Aを一目で伝えることができます。
デフォルトで用意された
デザインもとても使いやすいので
メインカラーに合わせることで
デザインの統一感も保てます。

「アコーディオンブロック」と
「FAQブロック」。
どちらともQ&Aに活用できるんですが、
どちらを使うかのポイントは
質問量で私は選んでいます。

質問量が多い場合は
アコーディオンでスッキリさせ、
質問量が5~6個程度の場合は
FAQブロックで
一発で確認できるデザインにしています。

Q&Aのセクションは
webサイトでは必須項目です。

Q&Aを設置するメリットは次の３つ

1. さりげなく、詳細説明を提供できる。
   Q&Aを活用すれば、
   ユーザーが知りたい情報を自然な流れで
   補足できます。
   メインのページではシンプルに伝えつつ、
   Q&Aではより具体的な説明を加えることで
   無理なく詳細情報をお伝え可能。
   結果として、ユーザーの理解が深まり
   安心感につながります。
2. 問い合わせ対応の負担を軽減できる
   よくある質問を事前にまとめておくことで
   同じ内容の問い合わせを減らし、
   対応の手間を軽減できます。
   特に、営業時間外でもユーザーが
   疑問を解決できるため、
   問い合わせへの負担削減だけでなく
   顧客満足度もUP。
3. ユーザーの信頼度を上げる
   疑問や不安を解消できる環境が整っていると、
   ユーザーは安心してサービスを利用できます。
   Q&Aで透明性のある情報提供を行うことで、
   信頼性の高いサイトとしての
   評価を得やすくなります。
   これによって、最終的な申し込みや購入の
   ハードルを下げる効果も期待できます。

Q&Aを適切に活用することで、
ユーザーにとって使いやすいサイトを実現。
信頼感を高めながら問い合わせ対応の効率化も
図ることができるので
ぜひ「アコーディオンブロック」や
「FAQブロック」を活用しましょう！

第９選　リンクリスト

「リンクリストブロック」は、
複数のリンクを一覧表示できる便利なブロック。
これによって、メニューや関連ページへの誘導を
スムーズに行うことができます。

リンクを追加・削除するのも簡単なので
サイトの成長に合わせて更新できます。

また、カラムブロックと組み合わせることで
2列の横並びのリストを作ることができます。

サービスが細かく分かれているクライアントさんでは
このリンクリストを使って
サービスの目次のように使うことも可能です。

また、ヘッダーのお問い合わせボタンとしても
リンクリストを活用できます。

第１０選　ボックスメニュー

「ボックスメニューブロック」は、
画像やアイコンを使って、
視覚的にわかりやすいメニューを作れるブロックです。

ボックスメニューブロックでは画像も
一緒に載せることができて視覚的にアピール可能。
ユーザーが次にどこへ進めばいいか迷わない
ようにするのに効果的です。

ボックスの数は、編集で簡単に数を調整可能。
PC・タブレット・SPでそれぞれにお好みの数を
表示させることができます。

ちなみに素材サイトの「シルエットAC」との
相性がとても良いのでおすすめです。

第1１選　バナーリンク

「バナーリンクブロック」は、
視覚的に目を引くバナーを設置できます。
特定のページや外部サイトへ誘導できるブロック。

商品ページやサービスページへの
誘導バナーを設置したり
期間限定キャンペーンや特集ページへの
リンクを目立たせたりと、

ユーザーの動線をスムーズにするのに活躍します。

バナーリンクブロックを活用して、
サイト内の重要なページへ
スムーズに誘導しましょう。

第1２選　ふきだし

「ふきだしブロック」は、
会話形式のデザインを簡単に作れるブロックです。
親しみやすさを演出したり、
重要なポイントを強調するのに役立ちます。

話し手ごとに異なるアイコンを使うことで、
視覚的にわかりやすい会話形式が
簡単に作れます。

例えば、

説明記事で、キャラクターを使って
情報をわかりやすく伝えたり、

レビューや体験談を、対話形式で
読みやすくしたりできます。

また、よく使うふきだしはセットを
作り置きしておけるので
ワンクリックで呼び出すことも可能。

ふきだしブロックは特に、
テキストだけの記事よりも
ユーザーに親しみのある記事を
作ることができます。

第1３選　SWELLボタン

「SWELLボタンブロック」は、
デザイン性の高いボタンを簡単に作れるブロックです。
webサイト制作の中でも一番使う
ブロックじゃないかと思います。

デザインのカスタマイズも簡単。
ダッシュボードの「SWELL設定」の欄から
ボタンデザインを変更でき、
角の丸みを変えたり、カラーを
グラデーションにすることもできます。

また、個人的にとても便利だなと思っているのが

編集上でクリック数の測定ができることです。

これによって、
どこのボタンでどのくらい遷移したかがわかり
マーケティングにも役立ちます。

エンディング

SWELLは元々ブログ用に作られたテーマですが
今日ご紹介したブロックをうまく組み合わせることで
企業サイトや個人事業主の
サービスサイトを作ることができます。

また、webサイトは作るだけではなく
しっかりと効果が出やすい構成・コンテンツで
作る必要があります。

これからwebデザイナーとして、
お客さんの売り上げに貢献したい！
そして自分自身もwebデザイン1本で稼いでいきたい！

そんなあなたは
概要欄のリンクをタップ。
私の公式LINEとお友達になってください。

今なら

webデザイン起業で落とし穴を回避するすための
【スタートアップ徹底解説動画】
【効果を最大化する
webサイトの作り方】特別講義
【この通りに聞くだけ！】
失敗しないヒアリンシート
など豪華12大特典をプレゼント中！

さらに、人数限定の
個別ロードマップ作成会を
無料で開催しています。

私がサポートをした方からは

「WordPressの初案件を
単価10万円で受注できた」
「サイトの問い合わせが2倍増えて
クライアントさんに喜んでもらえた」

という嬉しいお声がどんどん届いています。

あなたもお悩みを解決して
webデザイナーとしての一歩を
一緒に踏み出していきましょう。
まだの方は必ず登録してくださいね。

この動画が参考になったら
チャンネル登録・高評価も
よろしくお願いします。
今日も最後までご覧いただき
ありがとうございました。

またね〜