空白は、コンテンツを明確に区切り、情報を優先し、あらゆるアクションを活用することでサイトを改善します。 これらは必ずしも白い領域ではありません: この用語は、その色に関係なく、任意の空のスペースを指します よく投与され、それは読みやすく、目をガイドします 投与量が少ないと、逆に空虚な印象を与えたり、不必要にスクロールさせたりする可能性があります。
正しい方法は、コンテンツの優先順位から始めて、テキスト、地図、画像、セクション、ボタンの間に一貫した間隔スケールを適用することです。 「空っぽさを加える」ことではなく、ページを理解しやすくすることです。
ウェブデザインで「ホワイトスペース」と呼ぶものは何でしょうか?
白空間、または負の空間は、要素の周囲に自由に残された領域です。白、紺、ベージュ、またはサイトの背景色を使用できます。 2 つの相補的な形式で存在します。
マイクロスペース
テキストの行、その文言のアイコン、地図の端の内容、またはフォームの 2 つのフィールドを分離します。これらの小さな偏差は、読みやすさに直接影響します。
マクロスペース
それは大きなグループを分けます: バナーと製品の選択、2 つのセクションまたは引数とその行動の呼びかけ ページの一般的なリズムを構造化します。
なぜ空白はサイトを改善するのでしょうか?
彼らは訪問者のベンチマークを与えます 前のセクションから隔離されているが、それが紹介する段落に近いタイトルは、すぐに新しいブロックの開始として理解されます スペースに囲まれたボタンは、それを巨大にする必要がなく出てきます。
- 読み: 行、段落、リストはナビゲートしやすくなります。
- 階層: 重要なコンテンツは二次情報とは区別されます。
- 理解: リンクされた要素は近くに見え、さまざまな主題が分離されています。
- モバイル快適性: タッチゾーンはタイトではなくなり、クリックエラーが減少します。
- 知覚: 通常、構成はより管理され、プロフェッショナルであるように見えます。
ホワイトスペースの利用の具体例3つ
これらの概略的なデモンストレーションは、ページの内容を変更せずに、間隔によってページの認識がどのように変化するかを示しています。これらは、実際の顧客プロジェクトを表すものではありません。
例 1: ナビゲートが簡単な製品シート
タイトル、価格、ニュース、株式は互いに競合します。
関連する要素は近くに留まりますが、ボタンは透明な呼吸の恩恵を受けます。
例 2: ページのセクションを分離したほうがよい
グループは同じブロックに属しているようで、階層があいまいになります。
セクション間のスペースは内部スペースよりも大きく、構造はすぐに理解できます。
例3:モバイルでの快適性を向上
コンテンツはほとんどエッジに触れ、アクションはテキストと融合します。
辺縁、間隔、ボタン領域により、ルートがより明確になります。
7 ステップで空白を使用するには?
- 情報を分類します. 訪問者が何を見て、理解し、そして何をすべきかを決定します。
- 一緒に進むものをグループ化します. 価格と購入ボタンは同じセットに属しているように見えます。返品条件は二次ブロックを形成する可能性があります。
- 異なるグループを分離します. タイトルとテキストの間よりも、2 つのセクション間のスペースを大きくします。
- 単純なスケールを選択してください. たとえば、テーマやタイポグラフィーに適応するために、開始点として 8、16、24、32、48、64 ピクセルを示します。
- コンポーネントの内側の世話をします. カードは、そのエッジ、タイトル、画像、ボタンの間に規則的なマージンを維持する必要があります。
- 縦のリズムをコントロールします. どこにでも同じ広いスペースを適用するのではなく、コンパクトなシーケンスと鋭い呼吸を交互に行います。
- 実際の画面でテストします. エディター内の孤立したセクションだけでなく、コンピューターと電話でページ全体を確認してください。
ページの種類に応じてどのようなスペースを提供する必要がありますか?
| ページ | 優先的に換気すること | 警戒点 |
|---|---|---|
| 家 | 約束、ビジュアル、メリット、選択 | 高すぎるセクションを避け、製品へのアクセスを遅らせます |
| コレクション | タイトル、フィルター、グリッド、製品カード | カードを梱包せずに、目に見える製品を十分に保管してください |
| 製品シート | ギャラリー、価格、バリエーション、購入、再保険 | 決定的な情報をボタンの近くに保ちます |
| バスケット | 製品、合計、納品、検証 | メインボタンをセカンダリブロックで離さないでください |
| 条項 | 段落、見出し、リスト、ビジュアル | 長いテキスト行の幅を制限します |
モバイルで空白を管理する方法は?
モバイルはコンピュータの単純な圧縮バージョンであるべきではありません 幅は欠落していますが、高さは利用可能なままです: ブロックは通常列の上を通過し、それらの垂直方向の間隔は不可欠になります。
- 画面の端にテキストを貼り付けることなく、サイドマージンを削減します。
- ページを不必要に長くする非常に大きな装飾スペースを削減します。
- ボタン、フィールド、タッチ リンクを明確に区切ります。
- 大きなテーブルを見やすい縦型カードに変形します。
- 長いタイトルはすぐに数行を占めてしまうので、チェックしてください。
優先すべきはルートの継続性です。 に専念するガイド shopify でのモバイル エクスペリエンス 詳細 その他の便利なチェック.
最も一般的な間隔エラー
スペースが少なすぎる
- テキストは端に貼り付けられていました
- カードとボタンは区別が難しい
- 目に見える休憩のないセクション
- 再保険 情報 積み上げ
スペースが多すぎる
- 意図のない広い空きエリア
- リモート関連情報
- 過度のスクロール
- 未完成のページ印刷
間隔を改善するにはどのサービスを選択する必要がありますか?
迅速な診断
選んでくれ 無料ミニ監査 最初に目に見える主な問題を見つけて優先順位を決定したい場合。
見直し対象既存店舗
ラ shopify リデザイン 間隔がより大きな構造、画像、またはパスの問題の一部である場合に適しています。
新しいプロジェクト
ラ shopify ストア 作成 設計により階層と間隔システムを統合できます。
Shopify 外 サイト
ショーケースやその他の Web プロジェクトについては、 のサービスを参照してください プロフェッショナルなウェブサイトの作成.
範囲、期限、価格はサービスと関連するページによって異なります。 SiteQuiVend は、サービス ページで公開されている公式を提示し、開始前に適切なフレームワークを確認します。
空白を確認するためのチェックリスト
- 各セクションには特定可能な目的があります。
- 関連する要素は視覚的にグループ化されます。
- 別々のセクションはより強い分離を持っています.
- カードの内側の余白は規則的です。
- 段落は密すぎるブロックを形成しません。
- メインボタンには呼吸ゾーンがあります。
- サイドマージンはモバイルでも快適に保たれます。
- 大きな空白はそのアクションから情報を切り取りません。
- ページは全長にわたってリズミカルなままです。
- レンダリングは幅 375 ピクセルでチェックされました。
ウェブサイト空白に関するFAQ
空白は白でなければならないのでしょうか?
いいえ これはコンテンツの周囲またはコンテンツ間の空の領域です。視覚的なアイデンティティと一致する任意の背景色を使用できます。
白い空間は空間を無駄にしているのでしょうか?
表面積を利用しますが ベンチマークを提供します 関連要素から離れたり ページを長くしたりして 利益を得られない時にのみ 問題になります。
2 つのセクションの間にどのマージンを使用する必要がありますか?
普遍的な価値はありません。タイポグラフィーやテーマに適応した一貫したスケールは、孤立した数字よりも重要です。セクション間のスペースは、タイトルをテキストにリンクするものよりも大きくなければなりません。
モバイルに多かれ少なかれスペースを置くべきでしょうか?
一般にサイドマージンは小さくなりますが、垂直方向の間隔はコンテンツを分離し、触覚的な相互作用を容易にするのに十分な間隔を保つ必要があります。
ページがあまりにも風通しの良いものであるかどうかをどうやって知ることができますか?
訪問者がボタンに情報をリンクするために頻繁にスクロールする必要がある場合、関連するブロックが独立しているように見える場合、または空の領域が機能していない場合、その間隔はおそらく過剰です。
コンテンツを削除せずにページをエアアウトするにはどうすればよいですか?
テーマごとに情報をグループ化し、段落を短くし、リストを使用し、一貫したカードを作成し、自然な状態を保ったときにアコーディオンで二次情報を明らかにします。
空白は自動的に売上を向上させますか?
いいえ、旅をより明確にすることはできますが、売上は供給、交通量、価格、信頼、コンテンツ、ショッピング体験にも依存します。
Shopify テーマの間隔のみを改善できますか?
対象を絞った調整の場合ははいですが、構造、ページ テンプレート、またはパスにも問題がある場合は、より広範囲にわたる見直しが望ましいです。
より良いガイドのためのスペースを作成します
間隔が良いと、それ自体に注意を向けることなく構造が明らかになります。まず、関連するコンテンツをグループ化し、途中でステップを明確に区切って、通常のスケールを適用します。次に、コンピューターとモバイルですべてを確認します。
これらの調整にもかかわらずページが読み込まれたままの場合、問題は情報の階層またはボリュームにある可能性があります。 SiteQuiVendは、ターゲットを絞った修正、Shopifyの再設計、または再設計が必要かどうかを判断するのに役立ちます。
