SWELLで画像を重ねる方法｜初心者でもおしゃれブログに

SWELLで画像を重ねたいけれど、どのブロックを使えばいいのか分からなくて止まっていませんか。

「よく使う4パターン」を押さえておけば、難しいコードを書かなくても、十分おしゃれなレイアウトが作れます。SWELLで画像を重ねるテクニックを一緒に整理しながら、自分のサイトに取り入れていきましょう。

SWELLで画像を重ねる前に知っておきたい基本

SWELLでできる主な「画像を重ねる」4パターン

よく使うパターンを一覧にすると、次のようになります。

パターン	使うブロック・機能	主な用途
画像＋テキスト（記事内）	メディアとテキスト、画像ブロック	記事中の見出し直下、サービス紹介、プロフィール
画像＋テキスト（セクション）	SWELLブロック「フルワイド」、カバーブロック	LPや固定ページのセクション見出しやCTA
画像＋テキスト（トップ）	メインビジュアル設定	トップページのヒーローエリア
画像＋画像（ロゴなど）	メインビジュアル＋ブログパーツ	メインビジュアル上にロゴや装飾画像を重ねる

この4つのどれかに当てはまることがほとんどです。この記事では「どの場面ではどのパターンが向いているのか」も合わせてお伝えしていきます。

SWELL画像を重ねる基本テクニック（記事内編）

メディアとテキストで画像＋テキストを重ねる

記事内で、写真と文章を少し重ねたような、雑誌っぽいレイアウトにしたいときは「メディアとテキスト」ブロックが便利です。SWELLでは、このブロックに「ブロークングリッド」というレイアウトが追加されていて、画像とテキストが自然に重なった見た目を簡単に作れます。

大まかな手順は次の通りです。

テキスト側には段落だけでなく、ボタンや箇条書きなども自由に入れられます。サービス紹介やプロフィール、実績紹介など、「画像も文章も読んでほしい」場面でよく使われる組み合わせです。

項目	メリット	注意点
デザイン	画像とテキストがずれて重なり、テンプレ感が薄くおしゃれに見える	文字量が多いと、詰まって見えて読みづらくなる
操作性	1ブロックで完結し、プラグインやコードが不要	細かい余白を完全に思い通りにするには、追加CSSを使いたくなることもある
レスポンシブ	スマホでは縦並びになり、そのままでも読めるレイアウトになりやすい	画像とテキストの順番やバランスは、必ずスマホでも確認した方が安心

私の体感としては、「記事内でちょっと雰囲気を変えたいな」というときは、まずメディアとテキストを試すとほぼ解決することが多いです。

画像ブロックの「画像上にテキストを追加」を使う

「がっつりレイアウトを変えたいわけではないけれど、画像の真ん中に一言だけメッセージを重ねたい」というときは、画像ブロックの「画像上にテキストを追加」機能がちょうどいいです。SWELLの画像ブロックを選択すると、ツールバーにその項目が出てくるので、クリックするだけで画像の上にテキストエリアが現れます。

こんな場面で使いやすいです。

テキストが背景に埋もれてしまうときは、文字の背景に半透明の色を敷いたり、太字にしたりして調整します。「画像上にテキストを追加」を使うと、自動的にカバーブロックに変わるので、文字位置やオーバーレイの色も細かくいじれるようになります。

SWELL画像を重ねるデザイン応用（ブロークングリッド・フルワイド）

ブロークングリッドでレイアウトに動きをつける

メディアとテキストのブロークングリッドスタイルを使うと、画像とテキストの境界線が少し崩れたような、動きのあるレイアウトになります。画像が少し上に飛び出していたり、テキストボックスが画像にかぶっていたりすることで、「普通の2カラム」より一段こなれた印象になります。

ブロークングリッドを使うときのポイントをまとめておきます。

• 柄がごちゃごちゃしていない、余白の多い画像を選ぶ
• テキストは短めにして、改行でリズムをつける
• 左右の配置を交互に変えて、単調にならないようにする

項目	おすすめの目安	備考
画像サイズ	正方形〜やや横長、長辺1000〜1200px前後	画質と読み込みの軽さのバランスが取りやすい
画像とテキストの比率	画像：テキスト＝4：6 または 5：5	テキストを増やしすぎると、画像の存在感が薄くなる
1ブロックの文字量	2〜4行程度	キャッチコピー＋短い説明くらいで抑えると見やすい

ブロークングリッドはページ中すべてで使うというより、「ここを特に見てほしい」というセクションでピンポイントに使うと、メリハリが出ておすすめです。

フルワイド・カバーブロックでセクション見出しを作る

LPやサービスページなど、セクションごとに背景画像を敷きたい場合は、SWELLブロックの「フルワイド」や、ブロックエディター標準の「カバーブロック」が活躍します。背景に大きく画像を表示し、その上に見出しや説明文、ボタンを重ねるだけで、それらしくまとまったセクション見出しが作れます。

フルワイドやカバーブロックを使う流れは、だいたい次のようなイメージです。

手順	やること	ポイント
1	フルワイドまたはカバーブロックを挿入する	セクションの先頭に置いて、区切りが分かりやすくなるようにする
2	背景画像を設定する	文字を乗せたい部分に余白がある写真を選ぶ
3	見出し・説明文・ボタンを配置する	中央寄せか左寄せか、サイト全体のトーンに合わせて決める
4	オーバーレイや文字色を調整する	一瞬で読めるコントラストになっているかをスマホで確認する

背景画像が明るすぎると、どれだけ大きくしても文字が読みにくくなります。迷ったときは、背景に少し暗めのオーバーレイをかけて、文字は白か薄いグレーにすると、大体うまくまとまります。

メインビジュアルでSWELL画像を重ねる方法（トップページ編）

メインビジュアルに文字とボタンを重ねる基本設定

SWELLのメインビジュアル機能では、背景画像をスライド表示にしたり、その上にキャッチコピーやボタンを重ねたりできます。カスタマイザーから「トップページ」→「メインビジュアル」と進み、スライド用の画像を登録したうえで、メインテキストやサブテキスト、ボタンテキストなどを入力していく流れです。

設定項目を整理しておくと、こんな感じです。

設定項目	内容	目安・ポイント
背景画像	スライドで表示したい写真やイメージ画像	人物なら顔に文字がかぶらない構図を選ぶと読みやすい
メインタイトル	サイトの一言キャッチコピー	10〜15文字前後に抑えて、シンプルに伝える
サブタイトル	補足となる説明文	1〜2行で完結する文章にする
ボタンテキスト	クリックしてほしい行動の一言	「詳しく見る」「サービス一覧」など、分かりやすい言葉にする

最初のうちは、どうしても文字を詰め込みたくなりますが、メインビジュアルは「雰囲気と方向性を伝える場所」と割り切った方がうまくいきます。説明はその下のセクションで補うイメージで、メインタイトルだけでも意味が伝わるかを意識してみてください。

メインビジュアルにロゴ画像を重ねる

もう少しデザインにこだわりたい場合は、メインビジュアルの上にロゴ画像や装飾用のPNGを重ねる方法があります。やり方はいくつかありますが、よく使われるのは、ロゴを配置したブロックをブログパーツ化し、それをメインビジュアルに呼び出すパターンです。

大まかな流れを整理すると、次の通りです。

ステップ	やること	補足
1	Canvaなどで透過PNGのロゴ画像を作る	背景を透明にして、余白を少し広めにとっておく
2	投稿か固定ページで、ロゴ画像を配置して位置とサイズを調整する	PCとスマホ両方の見え方を確認しながら決める
3	そのブロックをブログパーツとして登録する	ロゴ下にキャッチコピーを入れたパターンを登録しておくのもおすすめ
4	メインビジュアル設定から、表示させたいブログパーツを選ぶ	スライド枚数が多い場合は、ロゴを出す枚数も調整する

この方法を使うと、「背景は写真、上にロゴや肩書きの画像を重ねたヒーローエリア」が作りやすくなります。ロゴを大きくしすぎると画面が窮屈になるので、実際のスマホ画面を見ながら「ちょっと小さいかな？」くらいで止めるのがちょうどいいです。

SWELLで画像を重ねるときのSEO・表示速度・アクセシビリティ

テキストはできるだけ画像に焼き込まない

画像編集ソフトでテキストを直接書き込んだ画像をそのまま使うと、検索エンジンからは「ただの画像」としてしか認識されませんし、スクリーンリーダーなどにも内容が伝わりません。SWELLには、メディアとテキストやフルワイド、画像ブロックのテキスト追加など、テキストをHTMLのまま重ねられる機能がそろっています。

基本的には、次のように考えるとよいです。

• キャッチコピーや説明文は、HTMLのテキストとして重ねる
• 画像の代替テキスト（alt属性）には、「何の画像か」を簡潔に書く
• 見出しとして意味を持つテキストは、hタグでマークアップしておく

これだけでも、検索エンジンにもユーザーにも優しい構造にかなり近づきます。

読みやすさとコントラストをチェックする

画像の上に文字を重ねるときに一番大事なのは、「パッと見て読めるかどうか」です。おしゃれでも、目をこらさないと読めない文字になっていると、ユーザーはすぐ離れてしまいます。

具体的には、次のポイントを意識してみてください。

• 人物や物体の上ではなく、なるべく余白部分の上に文字を置く
• 白文字を使うときは、背景を少し暗めのトーンにする
• テキスト背景に半透明のボックスを敷いて、コントラストを上げる
• 本文より少し大きめのフォントサイズにして、見出し感を出す

作ったあとに、自分のスマホで一度サッとスクロールしてみて、立ち止まらずに内容が頭に入ってくるなら、読みやすさの面では合格ラインだと思って大丈夫です。

画像サイズと表示速度にも気を配る

メインビジュアルやフルワイドを多用すると、どうしても画像の枚数やサイズが増え、ページが重くなりがちです。見た目を優先しつつも、読み込みの軽さは常に意識しておきたいところです。

私が普段心がけているのは、次のようなことです。

画像をしっかり圧縮しておくだけでも、体感速度はかなり変わります。デザインと表示速度はトレードオフに見えますが、工夫次第で両立しやすくなります。

よくある質問

Q1. メディアとテキストで画像と文字がうまく重なりません

A. まずは、ブロックのレイアウトが「ブロークングリッド」になっているかを確認してみてください。通常のレイアウトのままだと、画像とテキストは単に横並びのままなので、重なって見えません。

それでもイメージ通りにならないときは、画像サイズが小さすぎたり、テキストが長すぎたりすることが多いです。画像を少し大きめに差し替え、テキストを短くしてから再調整すると、急にしっくりくることがあります。

Q2. メインビジュアルの文字が背景画像と重なって読みにくいです

A. メインビジュアルで文字が読みにくいときは、背景画像の明るさと文字の乗せ方を見直してみてください。人物や建物の上に文字を置くのではなく、空や壁などの余白部分に文字を重ねるイメージでレイアウトすると、ぐっと読みやすくなります。

それでも厳しい場合は、オーバーレイの濃さを少し上げたり、文字の背景に半透明の色を敷いたりするのがおすすめです。ほんの少しの調整でも印象は大きく変わるので、スマホ画面を見ながら微調整してみてください。

Q3. CSSを使わずに、SWELL画像をもっとおしゃれに重ねる方法はありますか？

A. コードを書きたくない場合でも、「メディアとテキスト」「画像上にテキストを追加」「フルワイド」「メインビジュアル」の4つを押さえておけば、かなり表現の幅があります。まずはこの4パターンを組み合わせてページを作ってみて、それでも物足りなくなったところだけ、追加CSSで微調整するくらいがちょうどいいと思います。

まとめ：SWELL画像 重ねるテクニックでサイトの印象を一段アップ

この記事の内容を振り返っておきます

今日からの一歩としては、まず自分のブログの中から「ここ、画像とテキストを重ねたら良さそうだな」と思う場所を1カ所だけ選んでみてください。そして、メディアとテキストか画像ブロックの「画像上にテキストを追加」を使って、1ブロックだけ実際に作ってみるのがおすすめです。

一度手を動かしてみると、「このパターンならプロフィールにも使えるな」「サービス紹介にも応用できそう」と、応用のアイデアがどんどん出てきます。少しずつSWELLでの画像の重ね方に慣れて、自分らしいデザインを育てていきましょう。