SWELLのメディアとテキストの使い方ガイド｜失敗しない設定6選

画像と文字がきれいに並んだブログやおしゃれなLPを見ると、「どうやってこのレイアウトを作っているんだろう？」と気になることはありませんか。

この記事では、SWELLのメディアとテキストの使い方の基本から応用までたっぷりとお伝えします。

順番に、やることがはっきり分かるように解説していきますね。

SWELLでメディアとテキストを使うと何ができる？

メディアとテキストブロックの基本機能を理解しよう

「メディアとテキスト」は、画像（または動画）とテキストを横並びで表示できるブロックです。WordPress標準のブロックですが、SWELLではデザインの選択肢が増え、見せ方にかなり幅が出ます。

標準のメディアとテキストと、SWELLで使った場合のイメージをざっくり比較してみます。

項目	標準のメディアとテキスト	SWELLで使うメディアとテキスト
レイアウト	画像＋テキストの横並びのみ	デフォルト・カード型・ブロークングリッドなど複数選べる
デザインの自由度	余白や装飾は最低限	余白・角丸・影・ボーダーなど細かく調整しやすい
画像と文字の重なり	基本的に重ねない	ブロークングリッドで一部を重ねた表現ができる
向いているシーン	シンプルな説明文の挿入	LPやサービス紹介、プロフィール、実績紹介など幅広い
スマホ対応	自動で縦並びになる	縦並びに加えて余白や文字サイズも調整しやすい

私の感覚としては、「標準＝必要最低限」「SWELL＝どう見せるかまで作り込める」といったイメージです。ブログを「ただの文字の羅列」から一歩進めたいとき、最初に触ってほしいブロックのひとつです。

どんな場面でメディアとテキストを使うと効果的？

メディアとテキストが特に威力を発揮するのは、読者に「イメージで伝えたい」場面です。たとえば次のようなところでよく使います。

メディアとテキストを続けて使うときは、画像の位置を左右交互に入れ替えると、読者の視線が自然にジグザグに動いてくれます。同じ情報量でも、「読む」というより「眺めながら理解できる」感覚に近づくので、最後まで読まれやすくなります。

SWELLのメディアとテキストの基本的な使い方ステップ

ブロックを挿入して画像とテキストを配置する流れ

メディアとテキストを使う大まかな流れは、とてもシンプルです。

• ブロックを挿入する
• 画像（メディア）を選ぶ
• テキストの内容を書く
• 配置や幅を整える

手順をイメージしやすいように、表にまとめておきます。

ステップ	やること	ポイント
1	「＋」ボタンから「メディアとテキスト」を追加	ブロック検索で「メディア」と入力するとすぐ見つかります。
2	画像側のエリアをクリック	あとから画像の差し替えもできるので、最初は仮の画像でもOKです。
3	画像をアップロード or メディアライブラリから選択	重要なセクションほど、それ専用に用意した画像を使うと説得力が出ます。
4	テキストエリアをクリックして文章を入力	見出し・本文・ボタンなど、複数のブロックを入れても問題ありません。
5	ブロック設定から位置や幅を微調整	大枠を作ってから、最後にまとめて調整するくらいの気持ちで大丈夫です。

最初のうちは、難しいことは考えず、「画像1枚＋短い説明文」のような、シンプルな組み合わせから慣れていくのがおすすめです。

画像側の設定で押さえておきたいポイント

メディアとテキストの印象は、使う画像でかなり変わります。なんとなく手持ちの写真を入れるのではなく、次のポイントを意識して選んでみてください。

とくにサービス紹介や実績紹介のような重要なパートでは、フリー素材をバラバラに並べるよりも、トーンの近い画像で統一したほうが一気にプロっぽく見えます。私も案件で、画像を差し替えただけで「急にちゃんとしたサイトに見える」と言われたことが何度もあります。

テキストエリアの作り方とコピーのコツ

テキスト側は、単に説明文を流し込むのではなく、構成を決めてから書くと読みやすさが段違いになります。基本の形として、次のようなパターンを意識してみてください。

• 小見出し（H3やH4など）
• 2〜3行の導入文（リード）
• 箇条書きで特徴やメリット
• 必要ならボタンで行動を促す

それぞれの要素で意識しておきたい点を、表に整理しました。

要素	書き方の例	意識すること
見出し	例：ブログ運営をラクにするSWELLの機能	「自分に関係ありそう」と思ってもらえるキーワードを入れる。
リード文	例：SWELLなら、設定の手間を減らしながらデザイン性も高められます。	長くなりすぎないように、結論からシンプルに書く。
箇条書き	例：「記事作成に集中できる」「装飾に迷わない」など	1項目を短く区切り、リズムよく読めるようにする。
ボタン文言	例：SWELLの詳細を見る	クリックしたあと何が起こるか、具体的にイメージできる言葉にする。

メディアとテキストのブロックは、操作よりも「そこにどんなコピーを書くか」で印象が大きく変わります。少し時間をかけて、読者にとって分かりやすい言葉を選んであげると、成果にもつながりやすくなります。

SWELL独自レイアウトで画像と文字を重ねる使い方

カード型スタイルで「それっぽいボックス」を作る

まずはカード型スタイルです。これはメディアとテキスト全体をカードのようなボックスにして、背景から少し浮かせたような見た目にするスタイルです。

それぞれのスタイルのざっくりした違いをまとめると、次のようになります。

スタイル	見た目のイメージ	合うシーン
デフォルト	シンプルな横並び	ブログ本文内の説明、テキスト中心の箇所
カード型	角丸のボックスにまとまったレイアウト	サービス紹介、料金プラン比較、プロフィール
ブロークングリッド	画像とテキストが一部重なった印象的なレイアウト	LPの強調したいセクションやコンセプト紹介

カード型は、「ここはちょっと特別な情報ですよ」と読者に伝えたいときに使うと効果的です。影や角丸を強くしすぎると重たく見えるので、SWELLの初期設定をベースに、余白を少し増やすくらいから試してみるとバランスを取りやすいです。

ブロークングリッドで画像とテキストを重ねる具体手順

ブロークングリッドは、SWELLのメディアとテキストの中でも人気の高いスタイルです。「画像と文字が少し重なった、雑誌のようなレイアウト」を作りたいときにぴったりです。

実際の流れは、次のようなイメージです。

• メディアとテキストブロックを挿入する
• 画像とテキストをそれぞれ入れる
• ブロック設定からスタイルを「ブロークングリッド」に切り替える
• 画像とテキストの位置や余白を微調整する

ブロークングリッドを使うときに、私が必ずチェックしているポイントは次のとおりです。

• 背景と文字色のコントラストが十分かどうか
• テキストの行数が多すぎないか（3〜4行程度に収める）
• 画像の柄や情報量が多い部分に文字が被っていないか
• スマホ表示でも文字がつぶれずに読めるか

実案件では、トップページのコンセプト紹介や、ブランドの世界観を伝えるセクションでブロークングリッドを使うことが多いです。写真の雰囲気と短いコピーを組み合わせると、シンプルでも印象に残りやすいセクションが作れます。

レイアウトの選び方と並べ方のコツ

「どのスタイルを選べばいいか分からない」というときは、見た目だけでなく、そのブロックに持たせたい役割から考えると決めやすくなります。

• 落ち着いて読み込んでほしい情報 → デフォルトスタイル
• ひとまとまりの情報として目立たせたい → カード型
• ぱっと見で印象を残したい → ブロークングリッド

複数のメディアとテキストを連続して使う場合は、次のような並べ方がおすすめです。

• 1つ目：画像左＋テキスト右（基本形）
• 2つ目：画像右＋テキスト左（視線の流れを変える）
• 3つ目：カード型やブロークングリッドで少し強調する

左右を交互に切り替えるだけでも、「同じパターンが続いて飽きる」という印象を防ぎやすくなります。全体の流れを俯瞰しながら、「どこを強めに見せたいか」を意識してレイアウトを選んでみてください。

メディアとテキストのデザイン調整とスマホ表示のポイント

余白・行間・フォントサイズを整える

画面を見たときに「なんだか窮屈だな」と感じるときは、多くの場合、余白が足りていません。SWELLでは、セクションごとの余白や文字まわりの設定を細かく調整できます。

あくまで目安ですが、次のようなバランスを意識すると整って見えやすいです。

項目	PCでの目安	スマホでの目安
セクション上下の余白	本文の行間の1.5〜2倍程度	本文の1〜1.5倍程度
見出し下の余白	本文1行分くらい	本文0.5〜1行分
行間	やや広め（デフォルトより少しゆとりを持たせる）	PCと同じか、少しだけ広め
文字サイズ	本文16〜18px前後	本文14〜16px前後

実際には、サイトのフォントや雰囲気にもよるので、プレビューを見ながら微調整していくのが一番確実です。「もう少し余白がある方が読みやすいな」と感じたら、思い切って広げてみてください。

スマホで崩れないための設定チェック

メディアとテキストは、スマホでは縦並びになることが多いブロックです。SWELLの設定で「モバイルでは縦に並べる」といった項目があれば、基本的にはオンにしておくと安心です。

スマホ表示でチェックしておきたいポイントは、次のとおりです。

• 画像とテキストの順番が不自然になっていないか
• 画像が大きすぎて、スクロールが長くなりすぎていないか
• テキストがびっしり詰まっていないか（5〜6行で一度区切るイメージ）
• ボタンが画面の端にくっつきすぎていないか

私はメディアとテキストを作ったら、エディターだけでなく、必ず実機かブラウザのスマホ表示で確認するようにしています。PCでは気にならない小さなズレが、スマホだとストレスにつながることが多いからです。

配色とアクセシビリティを意識したデザイン

画像に文字を重ねるレイアウトは、おしゃれに見える一方で、読みづらくなりやすいレイアウトでもあります。見た目だけでなく、「ちゃんと読めるかどうか」という視点も持っておきたいところです。

配色まわりで意識しておきたいポイントは、次のとおりです。

• 明るい写真の上にそのまま白文字を乗せない（オーバーレイや背景色で工夫する）
• 文字の下に模様や柄がこないよう、画像の位置を調整する
• 重要なテキストは、画像の上ではなく余白のあるテキストエリア側に置く
• 色だけでなく太字やアイコンも使って情報を伝える

状況別におすすめの設定をざっくり整理すると、こんなイメージです。

状況	推奨する設定	避けたい設定
写真が明るい	濃い背景色＋白文字、または黒文字	写真の上にそのまま白文字だけを重ねる
写真が暗い	白文字＋必要に応じて薄いオーバーレイを敷く	細く小さいフォントで長文を載せる
テキストをしっかり読ませたい	単色の背景か、情報が少ない写真の位置に置く	情報量の多い写真の上に長い文章を重ねる

SWELLのカラーパレットを使えば、ブランドカラーに合わせた配色も作りやすいので、「かっこいいけれど読みにくい」状態にならないよう、少しだけ慎重に調整してみてください。

SWELLメディアとテキストの活用アイデアとパターン集

サービス紹介・プロフィール・実績紹介のパターン

私が実際のサイト制作でよく使うメディアとテキストのパターンを、用途別にまとめました。

用途	画像側	テキスト側の構成	ポイント
サービス紹介	サービスの雰囲気が伝わるイメージ写真やアイコン	見出し＋3つのメリット＋ボタン	LPの中核セクションとして使いやすい構成です。
プロフィール	顔写真や似顔絵イラスト	名前＋肩書＋短い自己紹介	信頼感を出したい場合は、視線がこちらを向いている写真がおすすめです。
実績紹介	実際の成果物のキャプチャやグラフ	実績タイトル＋背景＋結果	数字や実際の変化を具体的に書くと説得力が増します。
お客様の声	顔写真 or シルエット画像	コメント＋名前（イニシャルでも可）	複数並べる場合は、画像の形やサイズを揃えるときれいです。

同じメディアとテキストでも、画像の選び方とテキストの構成を変えるだけで、まったく違う役割を持たせられます。まずは1つ、自分なりの「鉄板パターン」を作っておくと、量産もしやすくなります。

他ブロックとの組み合わせでできること

SWELLでは、メディアとテキスト単体だけでなく、ほかのブロックと組み合わせることで、さらにリッチなセクションが作れます。

たとえば、「セクションタイトル（大きめの見出し）→メディアとテキストで説明→ボタンで行動を促す」という流れを一つの塊として作っておくと、LPやトップページの構成でとても使い回しがしやすくなります。

再利用ブロック・パターン化で制作を効率化

「これはうまくいったな」と感じるメディアとテキストのレイアウトができたら、そのままにせず、再利用できる形にしておきましょう。毎回ゼロから作るより、圧倒的に効率が上がります。

具体的には、次のような工夫ができます。

• 用途別（サービス紹介・プロフィール・LPセクションなど）にブロックパターンとして保存する
• 見出しのサイズや余白の取り方は共通化し、画像と文章だけ差し替える運用にする
• よく使う配色をカラーパレットに登録しておく

こうして「型」を用意しておくと、メディアとテキストの使い方で迷う時間が減り、文章や企画そのものにエネルギーを使えるようになります。ブログ運営でも仕事でも、地味ですがかなり効いてくるポイントです。

よくある質問（FAQ）SWELLのメディアとテキストの使い方

Q1. メディアとテキストブロックが見つからないのですが？

A1. ブロック追加の検索窓に「メディア」と入力しても出てこない場合は、クラシックエディターを使っていたり、編集画面がブロックエディターになっていない可能性があります。

SWELLはブロックエディターとの組み合わせを前提としたテーマなので、まずはブロックエディターが有効になっているか確認してみてください。その上で、再度「メディアとテキスト」を検索すると見つかるはずです。

Q2. ブロークングリッドの設定が表示されません。どうすればいいですか？

A2. ブロークングリッドは、SWELLのメディアとテキストに用意されているスタイルの一つです。メディアとテキストブロックを選択した状態で、右側の設定パネルから「スタイル」や「レイアウト」の項目を確認してみてください。

もしそれでも表示されない場合は、テーマやプラグインのバージョンが古かったり、何かと競合している可能性もあります。そのときは、SWELLの公式マニュアルやサポート情報もあわせてチェックしてみると安心です。

Q3. SWELLのメディアとテキストでSEO的に注意しておくべきことはありますか？

A3. メディアとテキストというブロックそのものが直接SEOを決めるわけではありませんが、次のような基本は押さえておくと良いです。

• 画像ファイル名やaltテキストに、内容と関連するキーワードを入れる
• 画像の上に文字を重ねるときは、コントラストを確保して読みやすくする
• 画像サイズを必要以上に大きくせず、ページの表示速度を落とさないようにする

SWELLはもともと表示速度を意識して作られたテーマなので、こうした基本的なポイントさえ押さえておけば、メディアとテキストのレイアウトを使うこと自体が大きなマイナスになることはありません。

まとめ｜SWELLのメディアとテキストの使い方を今日から実践しよう

この記事の内容をまとめます

今日やってみてほしい最初の一歩は、メディアとテキストを使った「サービス紹介用レイアウト」を1つ作ってみることです。画像とテキストの組み合わせを一つテンプレート化しておくだけで、その後のLPづくりや記事装飾がぐっと楽になります。

SWELLのメディアとテキストの使い方を、自分なりの「型」として体に覚えさせておくと、どんなサイトでも応用しやすくなります。少しずつ試しながら、自分にとって使いやすいパターンを見つけていきましょう。