【モジュールの余白】コンテンツ幅

Webデザイナーとして入社して2年、少しずつサイト構築の案件を担当する機会が増えてきました。
新規構築案件では、サイト内で使用するモジュールすべての余白を指定する必要があります。
毎回手探りで考えていると膨大な時間が掛かってしまうため、モジュール作成の際の業務効率化における考え方の指針をまとめておきます。

まずは余白についての考え方をご紹介します！

余白についての考え方

余白を指定する際のポイント

1. モジュールの余白は各モジュール同士の関係によって決まる
2. 各モジュールの余白の関係を理解して指定する必要がある

余白は以下の順番でモジュールごとに指定していくとわかりやすい！

コンテンツ幅 → リスト → 汎用 → ボタン → 見出し → ボックス・パネル・テーブル → メディア・カラム → コンテンツ

これらの余白に関しては、”モジュールの余白シリーズ”と題して、
全8回に分けてまとめていきます！

第1回目の今回は、「コンテンツ幅」について考えていきましょう！

コンテンツ幅とは

コンテンツ幅とは…ここではページ内のコンテンツが入るエリアの横幅のことを指します。
基本的にはサイト全体で共通するサイズが指定されています。

コンテンツ幅を決める時のポイント

ユーザーの環境を考慮して決める

〈コーポレートサイト、採用サイト、LPなどBtoCのコンテンツの場合〉
不特定多数の消費者がユーザーとなるため、ディスプレイ解像度のシェア率などの統計に沿って決める。

〈社内システムのデザインの場合〉
社内の人間がユーザーはとなるため、閲覧環境を考慮して決める。

今回のまとめ

モジュールの余白を考えるときは…
他のモジュールとの関係性を考慮して指定しよう！

コンテンツ幅を決めるときは…
ユーザーの環境を考慮して決めよう！

次回は「リストモジュール」の余白についてご紹介します！