sucreメインビジュアルは、サイトのいちばん最初に目に入る場所。
だからこそ、画像のサイズや色、文字の見え方など、
少しずつ調整しながら決めていきました。
この記事では、
SWELLでメインビジュアルに画像を設定する方法と、
実際に私が行ったスライド設定やオーバーレイの調整について、
作業の流れを記録としてまとめています。
同じように
「画像を入れたら暗く見える」「高さが高すぎる気がする」
と迷ったときの、ひとつの参考になればうれしいです。
メインビジュアルはどこ？【図で確認】
この画像では、
トップページ上部に表示されている 背景画像とキャッチコピーのエリア を
「メインビジュアル」として捉えています。その下に表示されている 記事スライダーやカテゴリ一覧 は、
メインビジュアルのあとに続くコンテンツ部分として考えています。テーマや設定によっては、
記事スライダーがメインビジュアル直下に表示されることもありますが、
役割としては別のものとして分けて考える方が分かりやすいと思います。
まずは、
「メインビジュアル」がどこの部分なのかを確認しました。
このあと、
高さや画像、文字など、具体的な設定項目を見ていきます。
メインビジュアルの高さ設定
🛠️ WordPress管理画面＜外観＜カスタマイズ＜トップページ＜メインビジュアル⚫︎画像
メインビジュアルの高さ設定
SP：50vh
→ スマホでは見やすく、圧迫感も出にくい
PC：30vw
→ 画面幅1600px前後で 約480px
→ 画像560pxの中で自然にトリミング
→ 高さが出すぎず、下のスライダーも見える
SP：50vh
→ スマホ画面の高さの50％を使用
→ 文字が読みやすく、圧迫感が出にくい
→ ファーストビューとしてちょうどよい高さ
PC：30vw
→ 画面幅（viewport width）の30％を高さに指定
→ 画面幅1600px前後で 約480px 表示
→ 画像（1600×560）の中で自然にトリミングされる
→ 高さが出すぎず、下のスライダーも見える
※ メインビジュアルは、強く目立たせるためのものではなく、
サイト全体へ入っていくための、最初の案内として使っています。
そのため、画面を大きく占有しすぎないよう、
メインビジュアルの高さは控えめに設定しています。
※ 画像は雰囲気づくりの役割。
実際に伝えたい内容は、テキスト設定で調整しています
スライド設定
SWELLのメインビジュアルは、
1枚の画像ではなく、「スライド」を組み合わせて作られています。
それぞれのスライドごとに、
表示する画像とテキストを設定します。
スライド画像［PC］
→ 1600 × 560 の画像を選択
スライド画像［SP］
👉 スマホ用の画像を入れる場所
※ 今は空欄
🔹 メインテキスト
🔹 サブテキスト
③ 下の項目は「今は使わない」
🚫 ブログパーツID
🚫 alt属性値
🚫 リンク先URL
🚫 ボタンテキスト
今回は、まずPC表示を中心に確認するため、
スライド画像［PC］のみ設定しています。
スマホ表示については、
表示のバランスを見ながら、
今後［SP用の画像］も追加していく予定です。
SP用の画像を設定しない場合は、
PC用の画像がスマホ表示にも使われます。
画像を設定する場所
✅ スライド画像［PC］
👉 ここに PC 用の画像を入れます
（1600 × 560 の画像）
✅ スライド画像［SP］
👉 スマホ用の画像を入れる場所
※ 今は空欄でもOK
（後で作ってから入れても問題なし）
入力するテキスト内容
🔹 メインテキスト
迷いながら、手を動かしながら
👉 一番伝えたい姿勢・空気感
👉 ここに置く言葉としてちょうどいい強さ
🔹 サブテキスト
作業と学びの記録
👉 サイトの説明
👉 何のサイトかが一瞬でわかる
- メインテキスト
→ 感情・姿勢・ストーリー - サブテキスト
→ 内容・目的・説明
※ メインビジュアルのテキストは後日見直しています。
設定や調整の過程は、こちらの記事にまとめています
👉Google検索に表示されたサイト紹介文にびっくりした話｜トップページの文章を見直した記録
オーバーレイカラーの調整
このメインビジュアルは、もともと色味が淡くやさしい背景のため、
オーバーレイのかけ方によって印象が大きく変わります。
上の例（変更前）
- オーバーレイカラー：黒
- 不透明度：0.2
黒のオーバーレイが強くかかることで、
全体がグレー寄りになり、元画像の色味がくすんで見えます。
下の例（変更後）
- オーバーレイカラー：白（#ffffff）
- 不透明度：0.05
白を薄く重ねることで、
元の色合いを保ったまま、やさしくトーンを整えることができます。
背景が明るくなり、文字も自然に読みやすくなりました。
変更ポイント
- 淡い背景画像の場合
→ 黒のオーバーレイは強くなりすぎやすい - 今回のようなデザインでは
→ 白 × 低い不透明度（0.05前後）
→ もしくは オーバーレイなし が最も自然
テキストの設定
🔹 テキストカラー
#333333
🔹 テキストシャドウカラー
#FFFFFF
🔹 テキストカラー
👉 濃いグレー
- 第一候補：
#333333（いちばん安定） - 少しやさしくしたいなら：
#444444
🔹 テキストシャドウカラー
👉 なし または ごく薄く
- 使うなら
#FFFFFF（白）を薄く - もしくは
シャドウなしでも十分読めます
Canvaでメインビジュアル画像を作成する
画像サイズの考え方（1600 × 560 にした理由）
メインビジュアル用の画像サイズは、
Canvaで「1600 × 560」で作成しています。
SWELLのメインビジュアルは、
高さを px ではなく、vw / vh（画面幅・高さの割合）で指定するため、
表示サイズは画面サイズに応じて変化します。
そのため、横にゆとりのある
1600 × 560 のような横長画像を使うと、
上下が多少トリミングされても、
変に切れたりせず、自然に表示されやすくなります。
実際にこのサイトでは、
PC表示を「30vw」に設定しており、
画面幅1600px前後の場合、表示される高さは約480pxになります。
この設定とも整合が取れるため、
1600 × 560 をメインビジュアル用の基本サイズとして選びました。
スマホ表示でも崩れにくい理由
スマホ表示では、
メインビジュアルの高さを「50vh」に設定する予定です。
この場合、画面の高さに応じて表示されるため、
画像は上下が少しトリミングされる前提になります。
1600 × 560 の画像であれば、
・中央に余白を持たせやすい
・文字を中央寄せしても切れにくい
という特徴があり、
スマホ用（SP）の画像をまだ用意していなくても、
大きく崩れずに表示させることができます。
※ 今回は、PC用の画像のみ設定しています。
スマホ用（SP）の画像については、
今後必要に応じて追加する予定です。
Canvaで作成したメインビジュアル画像をダウンロードする
下の図は、Canvaで作成した画像を書き出すときの
ダウンロード設定画面です。
メインビジュアル用の画像は、
Canvaで作成 → ダウンロード → WordPressにアップロード
という流れで準備しました。
ダウンロード設定画面
ダウンロード前にアニメーション設定に気づいた話
ただし、今回の画像はアニメーション付きで作成していたため、
そのままでは静止画像として使うことができませんでした。
ダウンロード設定画面を確認した際、
編集画面の上部に「秒数」や「アニメーション」の表示があることに気づき、
ダウンロード前にアニメーションを削除しています。
アニメーションを削除して静止画像として保存する方法については、
▶🔗Canvaでアニメーションを削除する方法｜静止画像として保存する手順にまとめています。
sucreメインビジュアルの設定は、
正解がひとつあるわけではなく、
少しずつ調整しながら決めていくものだと感じました。
これからも、
サイトの成長に合わせて
必要なところを見直していく予定です。
