SWELLで画像の上に文字を配置する方法！デザインとSEO対策

こんにちは。hakubi code 代表のてらだです。

SWELLを使ってWebサイトを制作していると、メインビジュアルやセクションの区切りで、魅力的な写真の上にキャッチコピーを載せたい場面は必ず訪れます。

しかし、いざ実装してみると
「スマホで見ると文字が画像からはみ出してしまう」
「文字色が背景に溶け込んで読めない」
といった壁にぶつかることも少なくありません。

私自身、クライアントワークの現場で、単に文字を置くだけでなく、SEOや読み込み速度、そしてブロークングリッドのような洗練されたデザインの両立に頭を悩ませてきました。この記事では、SWELLの標準機能を最大限に活かした基本的な実装から、CSSを用いた微調整、さらには検索エンジンに正しく評価されるための構造化の知識まで、プロの視点で徹底的に解説します。

• SWELL標準ブロックを使って画像上に文字を配置する正しい手順
• スマホ表示でもレイアウトが崩れない文字サイズと余白の調整術
• CSSを少し加えるだけで実現できる縦書きや中央寄せのデザイン
• 画像に文字を焼き込まずに実装することがSEOに有利な理由

SWELLで画像の上に文字を配置する基本手法

WordPressテーマ「SWELL」には、ノーコードで直感的に画像を扱い、その上にテキスト情報をレイヤーとして重ねるための強力なブロックが標準搭載されています。ここでは、デザインの目的別に使い分けるべき3つの主要なブロックと、プロが必ず行う設定の勘所について解説します。

カバーブロックで文字の可読性を上げるオーバーレイ設定

画像の上に文字を配置する際、最も汎用的で基本となるのが「カバーブロック」です。このブロックは、指定した画像を背景として、その手前に見出しや段落、ボタンなどのあらゆるブロックを入れ子構造で配置できるコンテナ（箱）の役割を果たします。

しかし、単に写真を敷いただけでは、写真の明暗によっては上の文字が全く読めなくなってしまいます。そこで重要になるのが「オーバーレイ（Overlay）」の設定です。SWELLのカバーブロック設定には、画像の明るさを変えずに、画像と文字の間に半透明の色付きフィルターを挟む機能があります。

フルワイドブロックの余白調整で画像デザインを整える

SWELL独自の強力な機能である「フルワイドブロック」は、画面幅いっぱいに背景を展開したい場合に最適です。カバーブロックと似ていますが、こちらはよりセクション（章）の区切りとしての意味合いが強く、上下の余白（パディング）を細かく制御できる点が大きな特徴です。

私がこのブロックを愛用する理由は、PCとスマホで個別に余白量を設定できるからです。例えば、PCでは上下にたっぷりと「80px」の余白を持たせて高級感を出しつつ、画面の狭いスマホでは「40px」に縮めてコンテンツの密度を高めるといった調整が、設定パネルの数値を選ぶだけで完了します。

フルワイドブロックで背景画像を設定した場合、背景色は自動的に「オーバーレイカラー」として機能します。「画像を設定したのに真っ暗になった」という場合は、背景色の設定を確認し、不透明度を調整してみてください。

メディアとテキストでブロークングリッドを作る手順

近年のWebデザインのトレンドとして、あえてグリッド（格子状の整列）を崩し、画像と文字を部分的に重ねる「ブロークングリッド」という手法があります。SWELLの「メディアとテキスト」ブロックを使えば、CSSを一切書かずにこの高度なレイアウトを実現できます。

手順は非常にシンプルです。「メディアとテキスト」ブロックを配置し、ブロック設定の「スタイル」から「ブロークングリッド」を選択するだけです。これにより、画像領域にテキスト領域が重なるような配置に自動的に切り替わります。

※PCでの閲覧を前提にしています。

さらに、「メディアの位置」を左右入れ替えるボタンを使えば、視線の誘導に合わせて最適なレイアウトを瞬時にテストできます。雑誌のような洗練されたデザインを作りたい場合、この機能は非常に強力な武器になります。

なお、前述のようにブロークングリッドはPCでの閲覧を前提にしています。スマホ幅で無理に画像とテキストを横並びにするとデザインが破綻することも多いので、「モバイルでは縦にする」のトグルはオンのままにしておくのが無難でしょう。
画像を左側にしても右側にしても、スマホ幅では自動で画像を上に配置してくれるのが便利なところです！

画像サイズとアスペクト比を最適化して表示崩れを防ぐ

「画像の上に文字」を配置するデザインにおいて、画像のサイズ選びはページの表示速度（LCP）とレイアウトの安定性に直結します。iPhoneなどで撮影した写真は4000pxを超えることがありますが、Web表示においてそこまでの解像度は不要であり、単に読み込みを遅くするだけです。

私は通常、フルワイド表示で使用する画像であっても、横幅は最大1920px（フルHDサイズ）にリサイズして使用することを推奨しています。また、画像のアスペクト比（縦横比）を16:9などに統一してトリミングしておくことで、スライダーなどで表示した際にガタつき（レイアウトシフト）が起きるのを防げます。

SWELLなどの高機能テーマを使っていても、素材自体の最適化は必須です。以下の記事では、スライダー実装時の画像サイズやLazy Load（遅延読み込み）による画像切れの問題についても解説していますので、併せて参考にしてください。

動画背景を使用して画像上に動的な文字表現を加える

静止画だけでなく、動画を背景にしてその上にキャッチコピーを乗せたいという要望も増えています。SWELLのカバーブロックは、背景にmp4などの動画ファイルを設定することが可能です。

実装方法は静止画とほぼ同じですが、注意すべきは「ファイルサイズ」と「モバイルでの挙動」です。背景動画はユーザーの意図に関わらず再生されるため、可能な限り圧縮して軽量化する必要があります。また、動画の上に文字を乗せる場合は、静止画以上にコントラストの確保が難しくなるため、オーバーレイの不透明度を強め（50%〜60%）に設定するか、動画自体の明度を編集ソフトであらかじめ落としておく工夫が必要です。

SWELLの画像の上に文字を乗せる高度なCSS装飾

SWELLの標準機能だけでも美しいレイアウトは作れますが、「あと少し、ここを調整したい」というプロレベルのこだわりを実現するには、CSS（スタイルシート）の知識が不可欠です。
ここでは、私が実務で頻繁に使用する、SWELLと相性の良いカスタマイズコードを紹介します。

CSSで縦書きの文字配置を実装し和風デザインにする

和風の旅館や伝統工芸品のサイトなどで、メインビジュアル上のキャッチコピーを「縦書き」にしたいというニーズは根強いです。これはCSSの writing-mode プロパティを使用することで実現できます。

具体的には、対象となる段落ブロックの「高度な設定」＞「追加CSSクラス」に任意のクラス名（例: vertical-text）を付与し、カスタマイザーの「追加CSS」に以下のコードを記述します。

.vertical-text {
  writing-mode: vertical-rl;
  /* 右から左への縦書き */
  
  text-orientation: upright;
  /* 英数字も正立させる */
  
  letter-spacing: 0.1em;
  /* 文字間隔を適度に空ける */
}

このたった数行のコードで、サイトの印象を一気に「和」のテイストに変えることができます。フォントの選び方も重要ですので、Googleフォントの設定なども合わせて見直すとより効果的です。

スマホ表示で見やすい文字サイズに自動調整する方法

PCの大画面に合わせて設定した「40px」などの大きな見出しは、スマホの狭い画面では改行位置がおかしくなり、デザインを崩壊させることがあります。SWELL標準の設定でもデバイスごとのサイズ指定はある程度可能ですが、より細かく制御したい場合は「メディアクエリ」を使ったCSSが確実です。

/* クラス名"text-responsive"のフォントサイズを変更する例 */
@media screen and (max-width: 768px) {
  .text-responsive {
    font-size: 20px !important;
    /* スマホ時のサイズ */
    
    line-height: 1.4;
  }
}

このコードを使えば、PCではインパクトのある大きさを維持しつつ、スマホ閲覧時のみ適切なサイズに自動で縮小させることができます。ユーザー体験（UX）を損なわないためにも、スマホ実機での確認とこの微調整は欠かせません。

ちなみに、SWELLは基本的に「PC-タブレット：960px」、「タブレット-スマホ：600px」を境にメディアクエリが設定されています。CSSを使用するようになると必須の知識となるので、覚えておきましょう！

画像サイズが変わるトラブルの原因とカバーへの変換

よくあるトラブルとして、「画像の上に文字を追加しようとしたら、勝手に画像サイズが変わってしまった」という現象があります。これは多くの場合、単なる「画像ブロック」に対して無理やりテキストを重ねようとしているか、ブロックの変換機能を使った際にコンテナの幅設定がリセットされてしまったことが原因です。

画像ブロックのキャプション機能では、自由な位置に文字を置くことはできません。画像の上に自由に文字を配置したい場合は、迷わず最初から「カバーブロック」を選択するか、画像ブロックのツールバーにある「画像上にテキストを追加」アイコンをクリックしてカバーに変換してください。これにより、画像は「コンテンツ」から「背景」へと役割が変わり、サイズ変更の干渉を受けずに文字を乗せられるようになります。

文字入り画像ではなくHTMLテキストを使うSEO効果

最後に、技術的な側面だけでなく、SEO（検索エンジン最適化）の観点から「なぜSWELLの機能を使って文字を乗せるべきなのか」をお話しします。

PhotoshopやCanvaなどの画像編集ソフトで、文字を画像そのものに書き込んで（焼き込んで）アップロードする方法もあります。デザインの自由度は高いですが、検索エンジンのクローラーは、画像の中に書かれた文字をテキストデータとして正確に読み取ることができません（OCR技術は進化していますが、HTMLほど確実ではありません）。

一方で、SWELLのカバーブロック等で実装されたテキストは、ソースコード上では純粋な <h2> や <p> タグとして記述されます。つまり、デザインとしての美しさを保ちながら、検索エンジンに「ここに重要なキーワードがある」と正確に伝えることができるのです。
これが、画像化された文字を使わず、HTMLテキストとして実装すべき最大の理由です。

特に、急速に進歩している「AI検索」。今後は人間に伝わればよいのではなく、構造的にもしっかりとした形で整えられているサイトがより強みを発揮しやすい時代に突入していきます。
「AI検索に対する最適化：LLMO」 とSEOの関係など、こちらの記事にまとめていますので、よろしければご覧ください！

SWELLで画像の上に文字を重ねる設定の総まとめ

SWELLで「画像の上 文字」というキーワードの意図を実現するためには、以下のポイントを押さえることが重要です。

実装方法	適した用途	主な設定ポイント
カバーブロック	メインビジュアル、汎用的な背景	オーバーレイ設定で可読性を確保
フルワイドブロック	セクション区切り、背景装飾	PC/スマホ個別のパディング調整
メディアとテキスト	特集記事、ブロークングリッド	スタイル設定で「ブロークングリッド」選択

画像の上に文字を配置することは、単なる装飾ではなく、ユーザーに情報を直感的に伝え、かつ検索エンジンにも内容を理解させるための重要なテクニックです。
今回ご紹介したSWELLの標準機能とCSSカスタマイズを組み合わせれば、ノーコードの手軽さとプロ品質のデザインを両立させることができます。ぜひ、あなたのサイトでも試してみてください。