SWELLメインビジュアル｜スマホ版は「縦長」より「正方形」が正解？あえて下を見せる「チラ見せ」の法則

「私のブログのメインビジュアル、スマホで見ると何が描いてあるかよく見えない……」 そんなふうに思うこと、ありませんか？

実は私もブログを始めたとき、メインビジュアルの設定にはかなり苦戦しました。 SWELLは高機能なので、設定する項目がたくさんあるのですが、正直「多すぎてどう使っていいかわからない！」と感じていたんです。

PC用とスマホ用で分けられるのはわかった、でも、色々試してみてもしっくりこない。 「結局、何が『オススメ』なのか、正解を知りたい！」 ずっとそう思っていました。

試行錯誤の末、Web制作の現場で活動する私がたどり着いた結論。 それが、スマホのメインビジュアルを「１：１」の正方形にすることです。

なぜ、流行りの「全画面（縦長）」でも、PCと同じ「横長」でもなく、正方形なのか？ 今日は、プロとして活動する中で見つけた「あえて下をチラ見せする」心理テクニックと、私の「SWELLでの推奨設定」について解説します。

陥りがちな「縦横比」の罠。PC画像はスマホに合わない

• PC画面：横に広い（16:9）
• スマホ画面：縦に長い（9:16など）

PC用の美しい横長画像を、そのままスマホ（縦長画面）に表示しようとすると、どうなるでしょうか？

• 小さく表示される：画面の幅に合わせると、高さが出ずに「細長い帯」のようになり、迫力がなくなる。
• トリミングされる：高さを出そうとすると、左右が勝手に切り取られてしまう。

これを防ぐために、SWELLでは「PC用画像」と「スマホ用画像」を別々に登録できるようになっています。

なぜ、私が「スマホ版メインビジュアルに 正方形（1:1）」をオススメするのか

スマホ用の画像を作る時、多くのデザイン指南書では「スマホ画面いっぱいの縦長サイズ（9:16）」が推奨されています。Instagramのストーリーのような比率ですね。

確かに、縦長の全画面画像は没入感があり、とてもおしゃれです。 しかし、「ブログ（読み物）」においては、それが弱点になることもあります。

全画面（縦長）のデメリット：行き止まりに見える

ファーストビュー（最初に表示される画面エリア）が画像だけで埋め尽くされていると、読者はこう感じます。

画面の下端まで画像があると、「この下に記事が続いている」ことに気づかないまま、ページを閉じてしまう（離脱する）人が意外と多いのです。 これをWebデザインの世界では「フォルス・フロア（偽の床＝ここが底だと思わせてしまう）」と呼びます。

せっかく下に良い記事や重要な情報があっても、スクロールされなければ存在しないのと同じ。 「気づかれない」ことは、ブログにとって致命的な機会損失になってしまいます。

正方形（1:1）のメリット：「チラ見せ」がスクロールを呼ぶ

そこで私が推奨するのが、「800px × 800px」などの正方形サイズです。

正方形の画像をスマホで表示すると、どうなるか。 今の一般的なスマホの画面比率だと、画面の下1/3くらいが余ります。

この余ったスペースに、「次のコンテンツ（新着記事の頭や、リード文）」がチラッと見えるようになります。

「お、下になにか書いてあるぞ？」 そう直感的に思わせることで、自然と指を動かしてもらう。 これが、没入感よりも「導線」を重視する、私のWeb制作における戦略です。

【保存版】SWELLメインビジュアル｜推奨サイズと設定方法

理屈がわかったところで、実際にSWELLで設定してみましょう。 難しいコードは一切不要です。

1. 画像を準備する（推奨サイズ）

私が実際に使っているサイズはこちらです。

• PC用画像：1920px × 1080px（王道の16:9）
  • モニターいっぱいに世界観を広げます。
• スマホ用画像：800px × 800px 程度（正方形 1:1）
  • 画面を占有しすぎず、かといって小さすぎない絶妙なバランスです。
  • ※Canvaなどで作る際は「Instagramの投稿サイズ（1080×1080）」で作ってもOKです。

2. SWELLのカスタマイザーで設定する

画像ができたら、あとはSWELLに入れるだけ。

WordPress管理画面から [外観] ＞ [カスタマイズ] をクリック

[トップページ] ＞ [メインビジュアル] を開く

「各スライドの設定」 という項目があります。

ここに、「PC用画像」と「SP（スマホ）用画像」をそれぞれ設定できる枠が用意されています。 ここに先ほどの画像をドラッグ＆ドロップするだけで、アクセスしたデバイスに合わせて自動で画像が切り替わります。

まとめ：デザインの正解は「読者の行動」が決める

おしゃれなサイトを作ろうとすると、ついつい「画面いっぱいの大きな写真」を使いたくなります。 でも、ブログの目的は「記事を読んでもらうこと」です。

どちらが正解かは、サイトの目的によって変わります。 もしあなたが「記事を読んでほしい！」と願うなら、ぜひ一度、スマホ画像を「正方形」に変えてみてください。

「あえて下を見せる」というおもてなし。 このひと手間で、読者の滞在時間が変わるかもしれませんよ。

あなたのブログを「理想の場所」にするために

今回ご紹介した「PCとスマホの出し分け」機能。 これはSWELLなら、難しい設定なしで直感的に使えます。

もし、今のブログテーマで「スマホの表示が崩れる…」「設定が難しすぎる」と悩んでいるなら、この機会にSWELLを試してみるのも一つの手です。

また、「理屈はわかったけれど、自分で画像を作る自信がない」「自分のサイトに合ったサイズやデザインを相談したい」という方は、ぜひ私に声をかけてください。 あなたのブログにぴったりの「顔」を、一緒に作りましょう。

---

▼ 私が実践した「サイト型リニューアル」の全貌はこちら