2026.05.13
こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
ant2 CMSでWEBサイトを制作する際、「パーツ設定」をどこまで活用できていますか？
「なんとなく設定している」「デフォルトのまま使っている」という方も多いのではないでしょうか。実は、表示設定や余白設定をほんの一歩踏み込んで使いこなすだけで、WEBサイト全体の完成度や購買率・お問い合わせへの誘導率は大きく変わります。
今回は、
について解説します。
制作現場で実際に使っているノウハウをもとに、明日からすぐ試せるポイントをまとめました。ぜひご覧ください。
PCとスマホでパーツの表示・非表示を切り替えることで、単なる「レスポンシブ対応」にとどまらず、デバイスごとの閲覧環境に合わせたデザイン設計が可能になります。
そこで、PC用とスマホ用で表示するパーツを分けることで、それぞれのデバイスに適した余白・画像サイズ・文字量・配置を調整できます。
結果として、見た目の美しさだけでなく、読みやすさや操作のしやすさも向上し、ユーザーにとってストレスの少ないページづくりにつながる重要なデザイン設定です。
例えば
このように設計することで、
結果として、「整っているWEBサイト」という印象を与えることができます。
スマホユーザーは、「流し読み」「短時間閲覧」が基本です。
デバイスごとに「ユーザー心理」が違うため、パーツの表示・非表示を使い分けることで、
といった販促効果が期待できます。
このようなパーツの設定はant2 CMSで設定することができるので、具体的な設定方法をご紹介します。
それでは、「PCとスマホそれぞれで違う画像を表示する」具体的な設定方法を解説します。
PC表示、スマホ表示させるパーツをそれぞれ追加します。
PC用
スマホ用
PCではPC用のコンテンツパーツのみが表示され、スマホではスマホ用のコンテンツパーツのみが表示されます。
PC表示
スマホ表示
たったこれだけの設定で、PCとスマホそれぞれに最適化された表示が実現できます。
ぜひ一度お試しいただき、デバイスごとに最適化されたWEBサイト作りに役立ててください。
ネガティブマージンとは、通常、余白設定では「10px」「30px」などプラスの数値を入れますが、実はマイナス値（例：-20px）を入力することが可能 です。
これがいわゆる「ネガティブマージン」です。
ネガティブマージンを使うことで、以下のような効果が得られます。
特にスマホ表示では、縦スクロールの長さを抑える効果もあります。
ネガティブマージンは便利ですが、使い方を誤るとレイアウト崩れの原因になります。
ネガティブマージンを設定する際は、いきなり「-50px」ではなく、-5px、-10px、-15pxなど、段階的に調整するのがコツです。
PCでは良くても、スマホで崩れるケースはよくあります。
必ず両方で確認しましょう。
「なんとなく詰める」ではなく、「一体化させたい」「視線を止めたい」など、目的を明確にして使うことが重要です。
これらの設定もant2 CMSで設定が可能です。具体的な例を見ていきましょう。
ant2 CMSでは、各コンテンツパーツの「マージン設定」から、上下のマージンにマイナス値を入力することができます。
設定したいコンテンツパーツのパーツ設定を開き、余白のマージンの入力欄に-10や-20といった形式で値を入力するだけで、ネガティブマージンを適用できます。
WEBサイトを制作している際に、「あと少し画像とテキストの距離を縮められたら...」というケースはあるのではないでしょうか。
ネガティブマージンを設定することで情報の緻密性を向上させることができます。
「パーツ設定」＞「余白」＞「マージン(外側)」の距離を詰めたい方向にマイナスの数値を入力し、「保存」＞「OK」の順番でクリック
今回は、下のテキストパーツに上方向のネガティブマージンを設定しました。
画像とテキストの距離が縮まり、情報としての緻密性が高まりました。
このように、ネガティブマージンを活用することで、既存のレイアウトを大きく変えることなく、細かな余白調整が可能になります。
「もう少しだけ詰めたい」という微妙なニュアンスにも対応できるのが、この機能の大きな魅力です。
設定前
設定後
WEBサイトを制作している際に、「もう少し画像に動きや奥行きを出せたら...」というケースはあるのではないでしょうか。
ネガティブマージンを活用して複数の画像を意図的に重ねることで、デザインにリズムと個性を加えることができます。
①「テキスト」パーツを追加し、上部のエディターから「イメージ挿入/編集」をクリック ＞「サーバーブラウザー」から任意の画像を選択
②幅に指定したい数値を入力
※スマホでも指定した幅で表示されるため、パーツ設定からスマホ表示を「非表示」に設定してください。
画像を設定した「テキスト」パーツの「パーツ設定」＞「余白」に、「マージン(外側)」＞「上」に、-120 を入力し、「左」には120を入力します。
ネガティブマージンだけでなく、通常のマージンと掛け合わせることでよりデザインに柔軟性を持たせることができます。
画像が重なることで、パーツのデザインに奥行きが生まれ、ページ全体に印象的なデザインを表現することができます。
スマホ表示ではレイアウトが崩れる場合があるので必ず確認するようにし、崩れる場合はコンテンツパーツをPCとスマホで表示を切り替えてデザインを調整します。
設定前
設定後
今回は、ant2 CMSの「パーツのPC・スマホ使い分け」と「ネガティブマージン」という2つの機能をご紹介しました。
どちらも、難しいコーディングの知識がなくても、パーツ設定を少し工夫するだけで実現できるテクニックです。
デバイスごとに最適化された表示設定と、細かな余白調整を組み合わせることで、WEBサイト全体の完成度は大きく変わります。
「なんとなく作っていたWEBサイト」が、ユーザーにとって見やすく、行動しやすいWEBサイトへと変わるきっかけになれば幸いです。
小さな設定の積み重ねが、WEBサイト全体の完成度とユーザー体験の向上につながります。
ぜひ次回のWEBサイト制作の際に試してみてください。
