例えば

• PCでは横長の画像を使うことで、情報を横並びに一覧表示でき、視認性と情報量を同時に高める
• スマホでは縦長の画像を使うことで、画面全体に映える迫力ある表示になり、ユーザーの視線を自然に上から下へ誘導できる効果がある

このように設計することで、

• 情報の優先順位が明確になる
• 余計な要素が減り、読みやすくなる
• 直感的に理解できる構成になる

結果として、「整っているWEBサイト」という印象を与えることができます。

スマホユーザーは、「流し読み」「短時間閲覧」が基本です。

デバイスごとに「ユーザー心理」が違うため、パーツの表示・非表示を使い分けることで、

• 滞在時間の向上
• 離脱率の改善
• CV率の向上

といった販促効果が期待できます。
このようなパーツの設定はant2 CMSで設定することができるので、具体的な設定方法をご紹介します。

それでは、「PCとスマホそれぞれで違う画像を表示する」具体的な設定方法を解説します。

たったこれだけの設定で、PCとスマホそれぞれに最適化された表示が実現できます。
ぜひ一度お試しいただき、デバイスごとに最適化されたWEBサイト作りに役立ててください。

ネガティブマージンを使うことで、以下のような効果が得られます。

1. セクションの一体感を出せる
   上下の余白を詰めることで、関連性の高いパーツをひとまとまりに見せることができます。
2. ダイナミックなレイアウトが作れる
   画像を次のセクションに少し重ねるなど、“動き”のあるレイアウトが可能になります。
3. 情報密度をコントロールできる
   余白を詰めることで、「コンパクトで整理された印象」を作ることができます。

特にスマホ表示では、縦スクロールの長さを抑える効果もあります。

ネガティブマージンは便利ですが、使い方を誤るとレイアウト崩れの原因になります。

これらの設定もant2 CMSで設定が可能です。具体的な例を見ていきましょう。

ant2 CMSでは、各コンテンツパーツの「マージン設定」から、上下のマージンにマイナス値を入力することができます。
設定したいコンテンツパーツのパーツ設定を開き、余白のマージンの入力欄に-10や-20といった形式で値を入力するだけで、ネガティブマージンを適用できます。

WEBサイトを制作している際に、「あと少し画像とテキストの距離を縮められたら...」というケースはあるのではないでしょうか。
ネガティブマージンを設定することで情報の緻密性を向上させることができます。

WEBサイトを制作している際に、「もう少し画像に動きや奥行きを出せたら...」というケースはあるのではないでしょうか。
ネガティブマージンを活用して複数の画像を意図的に重ねることで、デザインにリズムと個性を加えることができます。

今回は、ant2 CMSの「パーツのPC・スマホ使い分け」と「ネガティブマージン」という2つの機能をご紹介しました。

どちらも、難しいコーディングの知識がなくても、パーツ設定を少し工夫するだけで実現できるテクニックです。

デバイスごとに最適化された表示設定と、細かな余白調整を組み合わせることで、WEBサイト全体の完成度は大きく変わります。
「なんとなく作っていたWEBサイト」が、ユーザーにとって見やすく、行動しやすいWEBサイトへと変わるきっかけになれば幸いです。

小さな設定の積み重ねが、WEBサイト全体の完成度とユーザー体験の向上につながります。
ぜひ次回のWEBサイト制作の際に試してみてください。

デモ登録はこちら