ヒーローセクション（メインビジュアル）の画像サイズの検証

当事務所では、ヒーローセクション（メインビジュアル）の画像作成にあたり、
「どの画像サイズで作るのが最も安全で見やすいのか」
を把握するために、実際のブラウザ表示を使った検証を行っています。

ヒーロー画像は、テーマやブラウザ環境により表示範囲が変わり、
意図せず文字が切れたり、上下が大きくトリミングされたりすることがあります。

そのため、本記事では

• どのキャンバスサイズで作成すべきか
• どこまでが“文字が切れない安全領域”なのか

を明らかにするため、
検証のプロセスを段階的に記録していきます。

最終的な結論は、検証を進めながら本記事内で随時更新します。
興味のある方はぜひ参考にしてください。

前提

当事務所では、ヒーローセクションの表示方式として
「ウインドウサイズにフィットさせる」 を採用しています。

この方式は、どの端末でも ファーストビューが画面いっぱいに広がり、視覚的なインパクトと美しさを保てる という利点があります。

しかし一方で、ユーザーのブラウザ環境はさまざまであり、

• タブが表示されている
• URL（アドレス）バーが表示されている
• ブックマークバーの有無
• サイドバーの有無
• 下部ナビゲーションの有無（OS依存）

といった違いにより、上下方向の表示領域が変わり、文字が切れる可能性がある という課題があります。

すべての環境を網羅することは不可能ですが、
当事務所ではヒーロー画像内の「文字が切れない安全位置」を特定するため、
以下の項目について実際のブラウザ表示を用いた検証を行いました。

---

検証項目（ナビ透過あり／なし の両方で実施）

全画面表示で切れないか

ブラウザを完全なフルスクリーン（F11）にした状態で、
どの位置まで表示され、どこから切れ始めるのかを確認する。

---

タブ・アドレスバー・下部ナビゲーションが表示されている場合（基本環境）

もっとも一般的な閲覧環境である “通常のブラウザ表示” を想定し、

• 上部タブ
• URLバー
• 下部ナビゲーション（OS依存）

が表示されている状態では、上端・下端がどの程度削られるか を記録する。

---

ブックマークバーが表示されている場合

ブックマークバー（お気に入りバー）の有無で、
上方向がさらに狭くなるため、文字が切れ始める位置を検証する。

---

サイドバーが表示されている場合

ブラウザによっては、右または左にサイドバーを表示できるため、
横方向の安全領域 と 縦方向の変化 を確認する。

---

ナビゲーション透過あり／なしで比較

SWELL のヒーローセクションでは、
ナビゲーションメニューを「透過する・しない」を選択できます。

この設定により

• ヒーロー画像の見え方
• 文字が隠れる位置

が大きく変わるため、
透過あり・透過なしの両方で上記 ①〜④ の検証を行い、
それぞれの“文字が切れない安全範囲”を決定する方針 としました。

検証方法：1600×900 の画像に「縮小長方形」を重ねて判定

Canvaで 1600×900px の画像を作成し、
その上に各辺に対して 1％ずつ縮小した長方形 を複数重ねました。

それぞれ色を変え、
「実際のページでどの色まで見えるか」をチェックすることで
切れない高さ（安全領域） を特定します。

---

◆ 検証一覧

比率(%)	横幅(px)	縦幅(px)	ラベル	ナビ透過時	ナビ不透過時
100	1600	900	赤1	全画面表示でぴったり
96.04	1568	882	青1		縦|基本環境＋ブックバー＋サイドバーで半分ほど切れる（推定873px)
92.16	1536	864	黄1
88.36	1504	846	黒1
84.64	1472	828	白1	横|基本環境＋ブックバー＋サイドバーで半分ほど切れる（推定1456px)	縦|全画面表示で全部見える（828px)
81.00	1440	810	赤2
77.44	1408	792	青2
73.96	1376	774	黄2
70.56	1344	756	黒2	縦|基本環境で半分切れる（推定747px)
67.24	1312	738	白2
64.00	1280	720	赤3	縦|基本環境＋ブックバーで半分切れる（推定711px)
60.84	1248	702	青3
57.76	1216	684	黄3		縦|基本環境で半分切れる（推定675px)
54.76	1184	666	黒3
51.84	1152	648	白3
49.00	1120	630	赤4		基本設定＋ブックバーで全部見える（630px)
46.24	1088	612	青4
43.56	1056	594	黄4
40.96	1024	576	黒4
38.44	992	558	白4
36.00	960	540	赤5

---

検証結果：ナビ透過時（グローバルナビがメインビジュアル上にのるタイプ）

全画面表示

---

タブ・アドレスバー・下部ナビ表示（基本環境）

---

基本環境＋ブックバー

基本環境＋ブックバー＋サイドバー

透過時のまとめ

4つの検証を通し、いちばん小さいピクセルを拾うと
「横幅1456px　縦幅711px」に文字や大事な情報はおさめたほうが良い。という結論です。
イメージが湧かないかもしれないので、シマエナガが切れるか試してみました。青い背景が「1600×900」のキャンバスに「1456×711」の青背景を設置したものです（中央寄せ）
そのギリギリ4隅にシマエナガを並べました。切れるかどうか確認してみてください。また、今回は紹介のために切れるだろう部分を白にしましたが、実際は「切れても問題ない背景」を置くようにしましょう。

検証結果：ナビ不透過時（PC追従ヘッダー表示されているタイプ）

今回の検証は「ロゴ無し」です。ロゴを採用する場合は、ロゴの画像サイズにより安全域が異なります。
（ロゴサイズが32pxの場合は同じ結果になります。それより大きくする場合は検証が必要です）

透過の場合と同様に確認しました。

結果

全画面表示

横：切れない（1600px)

縦：白１が全部見える（828px)

タブ・アドレスバー・下部ナビ表示（基本環境）

横：切れない（1600px)

縦：黄3が半分見える（675px)

基本環境＋ブックバー

横：切れない(1600px)

縦：赤４が全部見える（630px)

基本環境＋ブックバー＋サイドバー

横：切れない（1600px)

縦：青１が半分見える（828px)

不透過時のまとめ

4つの検証を通し、いちばん小さいピクセルを拾うと
「横幅1600px　縦幅630px」に文字や大事な情報はおさめたほうが良い。という結論です。
透過時と異なり、横幅は1度も切れませんでした。
縦幅がかなり狭くなります。が、追従ヘッダーが表示されているため、その部分の背景に気を使うことなく全面にデザインできます。

まとめ

安全域を可視化しました。

・ウインドウサイズにフィットさせるほうが、どの機種でも画面いっぱいに表示されてかっこいい
・画面設定によってトリミングされることを理解しましょう
・文字や主要な画像は安全域に配置したほうが無難
・透過を選ぶ場合は、ロゴやナビゲーションが画像に干渉することを視野に入れてデザインしましょう

スマホと動画でも“考え方は同じ”です

スマホや動画でも 「横幅は入るが、上下は環境によって切れる」 という同じ考え方で調整できます。

スマホの場合

スマホは機種差が大きいため、
必ず上下は切れる前提で作ります。

1. PC版を先に完成させる（1600×900px)
2. スマホ用に1080×1920pxのキャンバスを用意
3. PC版の画像をコピペして配置する
4. スマホ実機で上下の見え方を確認
5. 配置を微調整する

この手順で何度か調整すればうまくいくと思います。

横が全部入る前提です。縦が実機の画面幅に応じて切れます。

---

● 動画の場合

動画も静止画と同じで
横幅が基準、上下は再生環境でトリミングされる前提 です。

作る比率は用途に合わせて２種類：

• 横長：16：9（PC、YouTube、HP埋め込み向け）
• 縦長：9：16（スマホ全画面、Instagramストーリーズ向け）

特に縦長動画は、
Instagramストーリーズの安全ガイドに合わせて作ると、
HPのヒーローにもほぼそのまま使えます。

文字は中央寄せにしておけば、
どの環境でも切れずに安全に収まります。

こちらに関しては、安全域を出すというよりは「やってみて、どこに合わせるのか」を自分の中で決めたほうがいいかなと感じました。

最終まとめ

ヒーロー画像は、「横幅は入り、縦は環境次第で切れる」仕様です。（横幅を圧迫するサイドバーが出ていると縦が基準になることもあります）
その前提を理解して、安全域に文字を置き、PC版で基準を整え、スマホや動画は実機で微調整する――。

この考え方さえ押さえておけば、
SWELLを使ってどんなサイトでも美しいヒーローを作れるようになります。
ぜひ、ご自身の制作スタイルに合わせて活用してください。