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