SWELLで画像の上に文字を載せておしゃれに見せる4つの方法

SWELLでトップページやバナーを作っていて、「画像の上に文字ってどうやって載せるんだろう……」と管理画面の前で固まっていませんか。

この記事では、SWELLで画像の上に文字を重ねる代表的なパターンと、それぞれの使い分け、デザインやSEO、レイアウト崩れの対策まで、私の実体験も交えながらまとめてお伝えします。

結論から言うと、SWELLの標準ブロックと設定だけで、コードを書かなくても十分「プロっぽく見える」デザインは作れます。そのための考え方と手順を、順番に見ていきましょう。

Swellで画像の上に文字を載せるメリットと注意点

Swellで画像の上に文字を載せると何がうれしいか

見た目がおしゃれになる、というのはもちろんですが、それだけが目的ではありません。画像と文字を組み合わせることで、伝えたいことを短くギュッとまとめられるのが大きなメリットです。

メリット	内容
視線を集めやすい	写真とキャッチコピーをセットで見せられるので、ページを開いた瞬間にパッと目に入ります。
伝えたいメッセージを絞れる	画像の上に短い一言を載せることで、「このページで一番伝えたいこと」がはっきりします。
デザインの一体感が出る	背景画像とテキストをひとまとまりに見せられるので、LPのような統一感が出せます。
クリックやCVに繋げやすい	ボタンやリンクと組み合わせると、「ここを押せばいいんだな」と直感的に伝えられます。
テキストとしてSEOにも効く	画像に文字を焼き込まず、テキストとして配置すれば、検索エンジンもしっかり読み取ってくれます。

私もサービス用のLPをSwellで作ったとき、最初は「画像＋その下にテキスト」というよくある構成にしていました。ただそれだと、なんとなく普通のブログ記事っぽく見えてしまって、サービス感が弱かったんですよね。そこで画像の上にコピーとボタンを重ねてみたところ、一目で「何のページか」が伝わるようになり、申し込みも少しずつ増えていきました。

Swellで画像の上に文字を載せるときの注意点

一方で、Swellで画像の上に文字を重ねるときには注意したいポイントもあります。ただ重ねればいいわけではなく、やり方次第ではかえって読みにくくなったり、ページが重くなったりしてしまいます。

このあたりを頭に入れたうえで、「どのブロックでどう重ねるか」を考えていくと失敗しづらいです。次の章から、具体的な4つのパターンを順番に見ていきます。

Swellで画像の上に文字を重ねる4つの基本パターン

4パターンの全体像をざっくり比較

まずは、4パターンがどんな使いどころに向いているかを、ざっくり比較しておきます。

パターン	難易度	向いている用途	特徴
メディアとテキスト＋ブロークングリッド	ふつう	記事内のセクション、実績紹介	画像とテキストを少しずらして重ねる、おしゃれなレイアウト。
画像ブロックの「画像上にテキストを追加」	かんたん	カテゴリカード、バナー、LPの一部	既存の画像にそのままテキストを載せられるシンプルな方法。
フルワイドブロック＋背景画像	ふつう	セクション見出し、LPの区切り	横幅いっぱいに広がる背景画像の上に、見出しやボタンを載せられる。
トップページのメインビジュアル（カバーブロック）	ふつう	トップページのヒーロー画像	サイトの顔となるエリア。スライドやアニメーションも設定できる。

Swellで画像の上に文字を使いこなしたいなら、まずはこの4つを触ってみるのがおすすめです。それぞれの使い方を、もう少し具体的に見ていきましょう。

① メディアとテキスト＋ブロークングリッド

最初に紹介するのは、「メディアとテキスト」ブロックにSwell独自の「ブロークングリッド」オプションを組み合わせる方法です。記事の途中やサービス紹介のセクションで、ちょっとこなれた印象を出したいときにぴったりです。

• ブロックを追加し、「メディアとテキスト」を選ぶ
• 左側（または右側）に画像、反対側にテキストを配置する
• ブロックの設定パネルで「ブロークングリッド」をオンにする
• 余白や背景色を調整して、テキストのボックスが画像に少しかぶるように調整する

完全に画像の中央に文字を乗せるというより、「画像の端にちょっと重なるテキストボックス」を作るイメージです。ほどよく動きが出るので、いかにもなヒーロー画像より、落ち着いたおしゃれ感を出したい場面で活躍します。

• サービスや商品の紹介セクション
• ブログ記事の中で、印象的な写真と一緒にメッセージを伝えたい部分
• 実績紹介やプロフィールなど、文章もしっかり読んでほしいコンテンツ

画像の上に文字をがっつり重ねるというより、「寄り添わせる」感覚で使うと、読みやすさとデザイン性のバランスが取りやすいです。

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

次は、もっとも分かりやすい「画像の上に文字」パターンです。通常の画像ブロックを使い、ツールバーのボタンからテキストを載せられる機能ですね。

• 画像ブロックを追加し、使いたい画像を設定する
• 画像ブロックを選択した状態で、上のツールバーから「画像上にテキストを追加」をクリックする
• 画像の上にテキスト入力欄が出てくるので、キャッチコピーなどを入力する
• ブロックの設定パネルから、テキストの位置や背景のオーバーレイ、余白などを調整する

この操作をすると、内部的には「カバー」系のブロックと同じような挙動になり、画像の上に文字を自由に配置できるようになります。テキストの位置を中央や左下に変えたり、背景に半透明の色を乗せたりと、見た目を細かく整えられるのが特徴です。

• カテゴリカードや記事一覧のバナー
• プロフィールやサービス紹介への導線バナー
• LPの中に差し込む、小さめのキャッチコピー付き画像

「これからこのページに進んでほしい」という導線を作るときに、Swellで画像の上に文字とボタンをまとめて置けるので、とても重宝します。

③ フルワイドブロック＋背景画像

3つめは、Swellの「フルワイド」ブロックに背景画像を設定する方法です。横幅いっぱいに広がる帯のようなエリアに文字を載せられるので、LPの区切りやセクション見出しに向いています。

• Swell専用ブロックから「フルワイド」を挿入する
• ブロック設定で背景画像を選び、必要に応じてオーバーレイを設定する
• 中に見出しブロックや段落、ボタン、ボックスメニューなどを配置する
• 上下の余白（パディング）を調整して、ヒーロー感のある高さに整える

「このセクションは特に読んでほしい」という部分に使うと、ページ全体がぐっと引き締まります。Swellで画像の上に文字を載せつつ、コンテンツも一緒にまとめて見せたいときにぴったりです。

④ トップページのメインビジュアル（カバーブロック）

最後は、Swellサイトの顔になるトップページのメインビジュアル部分です。ここでも、画像の上に文字とボタンを重ねる考え方は同じです。

• 管理画面からカスタマイザーを開き、トップページの「メインビジュアル」設定に進む
• 背景に使う画像（スライド表示にするなら複数枚）を設定する
• メインタイトル・サブタイトル・ボタンの文言を入力する
• フィルターやオーバーレイの濃さを調整して、文字が読みやすくなるようにする

メインビジュアルは、Swellで画像の上に文字をもっとも大きく見せる場所です。背景の雰囲気も大事ですが、まずは「文字がちゃんと読めるか」「ボタンの文言で何をしてほしいかが伝わるか」を優先して作り込んであげると、トップページ全体の印象がぐっと良くなります。

デザイン崩れを防ぐ「読みやすい」Swellの画像の上に文字のコツ

オーバーレイと色の組み合わせで可読性を上げる

まずは、背景画像と文字色の組み合わせから整えていきましょう。同じレイアウトでも、オーバーレイの有無や色で読みやすさが大きく変わります。

背景画像の雰囲気	文字色の例	オーバーレイ色・不透明度の目安	コメント
明るめで情報量が多い写真	白	黒系オーバーレイ 40〜60%	写真の情報が多いほど、オーバーレイを少し濃いめにすると読みやすくなります。
暗めで落ち着いた写真	白	黒系オーバーレイ 20〜40%	雰囲気を残しつつ、文字だけを軽く浮かせるイメージ。
空や白背景が多い写真	黒〜濃いグレー	白系オーバーレイ 20〜40%	シンプルでスッキリした印象にしたいときに使いやすい組み合わせ。
カラフルで派手な写真	白	ブランドカラー＋黒を少し混ぜた色	そのままだと騒がしくなりやすいので、色を一枚かぶせて落ち着かせます。

オーバーレイは「画像の上に薄い色付きフィルムをかぶせる」ようなイメージです。Swellで画像の上に文字を載せたとき、「写真に目が行きすぎて文字が入ってこないな」と感じたら、まずはオーバーレイを試してみるのがおすすめです。

文字量と改行は「少なめ・短め」を意識する

次に、画像の上に載せる文字の量と改行位置です。ここを欲張りすぎると、一気に読みにくくなってしまいます。

• 一番伝えたいメッセージは、7〜15文字くらいにしぼる
• サブコピーは1〜2行までにして、それ以上は画像の下の本文で説明する
• 読みやすい位置で改行し、1行に詰め込みすぎない

たとえば、次のようなイメージです。

• 悪い例：「Swellで画像の上に文字を載せる方法を」「全部まとめて解説します」
• 良い例：「Swellで画像の上に文字を載せる方法を」「まとめて解説します」

意味の切れ目で素直に改行してあげたほうが、読み手の頭にスッと入ってきます。私も最初はあれこれ盛り込みたくなって文字だらけにしてしまい、「結局何を言いたいのか分からない」と反省したことがあるので、ここは意識して削るくらいがちょうどいいです。

PCとスマホで崩れないレイアウトを選ぶ

最後に、PCとスマホ両方で見たときに崩れにくいレイアウトの組み合わせを整理しておきます。Swellで画像の上に文字を重ねると、どうしてもスマホのほうが窮屈になりやすいので、事前に想定しておきましょう。

ブロック	PCレイアウトのポイント	スマホレイアウトのポイント
メディアとテキスト	ブロークングリッドで画像とテキストを少し重ねる	縦並びにして、画像→テキストの順番にすると読みやすい
画像上にテキスト追加	幅と高さに余裕を持たせ、文字が詰まりすぎないようにする	文字サイズを一段階小さくし、行間を少し広めに取る
フルワイド	左右の余白より上下の余白をしっかり取り、見出しを目立たせる	スマホ用のパディングを別で調整し、縦長になりすぎないようにする
メインビジュアル	文字とボタンのサイズを気持ち大きめにして存在感を出す	2行目以降がギチギチにならないか、プレビューで必ず確認する

Swellにはデバイスごとに余白や文字サイズを変えられる設定もあるので、「PCでちょうどいい」ではなく「スマホでちょうどいい」を基準に微調整してあげると、全体としてバランスが取れます。

用途別：Swellで画像の上に文字を使うレイアウトレシピ

ブログトップ・サイトの顔になるヒーロー画像

まずは、ブログやサイトのトップに表示されるヒーロー画像です。ここは、Swellで画像の上に文字をもっとも大きく見せる場所なので、しっかり作り込んでおきたいところです。

項目	設定の目安・ポイント
使用ブロック	メインビジュアル設定（カバーブロック）またはフルワイド＋背景画像
背景画像	サービスやブログの雰囲気が伝わる1枚。あまり情報量が多すぎないものを選ぶ。
メインコピー	7〜15文字程度で、「誰に何を提供するサイトか」を一言で伝える。
サブコピー	1〜2行で、特徴やベネフィットを具体的に補足する。
ボタン	「無料で試す」「詳しく見る」など、押したあとの行動がイメージしやすい文言にする。
オーバーレイ	背景がにぎやかな写真なら黒系30〜50％など、文字がはっきり見える濃さに調整する。

私も最初は「背景写真＋ロゴだけ」のトップページにしていたのですが、それだと何のサイトか分かりづらく、直帰率も高めでした。メインコピーとボタンを画像の上に重ねる構成に変えたところ、「誰向けのサイトか」「何ができるのか」が一瞬で伝わるようになり、そこから記事を読んでもらえるようになりました。

カテゴリカード・バナーでの画像＋文字

次に、カテゴリカードやバナーでの使い方です。記事一覧やサイドバーに並ぶ小さなブロックこそ、Swellで画像の上に文字を載せてあげると、クリックしてもらいやすくなります。

• カテゴリカードやバナーに使う画像を選ぶ
• 画像ブロック（またはバナーリンクブロック）を挿入する
• 「画像上にテキストを追加」でカテゴリ名や短いコピーを載せる
• 必要に応じてボタンや矢印アイコンを配置する

このときのポイントは、「文字を詰め込みすぎないこと」と「画像全体をクリックできるようにしておくこと」です。

• テキストは「カテゴリ名＋ひとこと」くらいにしぼる
• ボタンを置く場合も、ラベルはシンプルにする
• カード全体がリンクになっていると、スマホでもタップしやすい

画像だけのカードより、「どんな内容に飛ぶのか」が一目で伝わるので、回遊率アップも期待できます。

LPのセクション見出しに使う背景画像＋文字

最後に、LPや商品ページのセクション見出しとして使うケースです。ここでは、フルワイドブロック＋背景画像の組み合わせが使いやすいです。

よくある流れはこんな感じです。

• フルワイドブロックに、やさしめの背景画像やテクスチャを設定する
• 中央にセクション見出しと短い説明文を置く
• その下に通常のコンテンツブロックで本文を続ける

項目	設定の目安・ポイント
背景画像	抽象的なテクスチャや、少しぼかした写真など主張控えめなもの。
見出し	「こんな悩みはありませんか？」のような問いかけ形式も相性が良い。
テキスト量	見出し1行＋補足1行までにしぼる。
上下の余白	PCではやや広め、スマホでは少し狭めにして読みやすさを優先する。
オーバーレイ	背景に応じて30〜50％程度で微調整し、文字がしっかり読めることを最優先にする。

このように、Swellで画像の上に文字を使って「章の見出し」を作っておくと、長いLPでも今どの話を読んでいるのか分かりやすくなり、最後まで読んでもらいやすくなります。

よくあるトラブルとSwellでの直し方

画像サイズが変わった・トリミングされてしまう

まず多いのが、「画像上にテキストを追加したら、画像の見え方が変わってしまった」というケースです。

症状	主な原因	対処法の例
画像の上下がカットされている	カバー系の表示で画像が「cover」扱いになっている	重要な部分が中央に来るようにトリミングし直す、あるいは構図を調整する。
スマホでやたら縦長になってしまう	高さの最小値が高く設定されている	ブロック設定で高さを調整し、必要なら最小高さの指定をオフにする。
元の画像ブロックに戻したい	「画像上にテキストを追加」でカバー系のブロックになっている	ブロック変換メニューから通常の画像ブロックに変換し直す。

特に、上下が少しカットされるのは不具合ではなく仕様に近い動きなので、「大事な被写体は真ん中寄りに配置しておく」と覚えておくと安心です。どうしても元の比率を保ちたい場合は、通常の画像ブロックのまま使うか、CSSで細かく調整する方法もあります。

スマホで文字がはみ出す・改行がおかしい

次に多いのが、「PCではきれいなのにスマホで見ると文字がはみ出している」というパターンです。

特に、中央寄せのテキストはスマホでは横幅がきゅっと狭くなるため、行数が増えがちです。Swellのプレビューでスマホ表示に切り替えながら、「指でスクロールせずに内容が読み取れるか」をざっくり確認してみてください。

背景画像の読み込みが重くなってしまう

最後は、画像をたくさん使った結果、ページの読み込みが重くなってしまう問題です。かっこよさを求めるあまり、つい背景画像を増やしすぎてしまうんですよね。

表示速度は、読者のストレスにも、検索エンジンからの評価にも関わってくる部分です。Swellで画像の上に文字を活用しつつも、「本当にここは写真が必要か？」と一度立ち止まって考えるクセをつけておくと、サイト全体の質が上がっていきます。

よくある質問（FAQ）

Q1. 画像の上に文字を書くなら、画像に直接文字を入れてもいいですか？

基本的にはおすすめしません。画像編集ソフトで文字を合成してしまうと、検索エンジンからは「ただの画像」としてしか認識されません。スクリーンリーダーでも読み上げられないので、アクセシビリティの面でも不利です。

Swellで画像の上に文字を載せたいときは、この記事で紹介したようにカバー系のブロックやフルワイドブロックを使い、テキストとして配置するのがベターです。そのほうが、後から文言を変えたり、ABテストをしたりもしやすくなります。

Q2. Swellで画像の上に文字を載せると、必ずオーバーレイを入れたほうがいいですか？

必ずしもオーバーレイが必要というわけではありませんが、背景に情報量の多い写真を使う場合は、入れておいたほうがほぼ確実に読みやすくなります。特に人やモノがたくさん写っている写真は、そのまま白文字を載せるとまず埋もれてしまいます。

悩んだときは、「とりあえずオーバーレイありで作ってみて、物足りなければ少しずつ薄くする」という順番で調整してみてください。Swellなら、管理画面から簡単に濃さを変えられるので、実際の見え方を確認しながら微調整できます。

Q3. どの方法でSwell 画像の上に文字を載せればいいか迷います

迷ったときは、「どこに表示するか」で選ぶのが分かりやすいです。

• トップページのヒーロー画像 → メインビジュアル設定 or フルワイド＋背景画像
• カテゴリカードやバナー → 画像ブロックの「画像上にテキストを追加」
• 記事内のちょっとおしゃれなセクション → メディアとテキスト＋ブロークングリッド

この3パターンだけでも十分戦えるので、まずはそれぞれ1パターンずつ試してみて、「自分のサイトの雰囲気に合う使い方」を探ってみてください。

まとめ：Swellで画像の上に文字を味方につけよう

要点をコンパクトに整理します

今日からの最初の一歩としては、まずトップページかLPの中から「ここは特に見てほしい」という場所を1つ決めてみてください。そして、そこで使う背景画像を選び、Swellで画像の上に文字を7〜15文字ほど載せてみましょう。オーバーレイや文字サイズを、PCとスマホの両方で読みやすくなるよう調整していくと、自分なりの「ちょうどいい塩梅」が見えてきます。

一度コツをつかんでしまえば、同じ考え方で他のセクションやバナーにも応用できます。Swellで画像の上に文字を上手に使いこなして、あなたのサイトの世界観を、より直感的に伝えていきましょう。