アクティベーション
編集者
コンテンツデザイナーでは、セクションのサイズはコンテンツによって決まります。つまり、セクションの高さは固定されておらず、その中にある要素によって変わります。
選択したセクションサイズ(小・中・大)は、垂直方向のパディング、つまりセクション内のコンテンツの上下のスペースのみを定義します。最終的なセクションの高さは定義されません。
コンテンツなしのデフォルトセクションサイズ
以下の値は、コンテンツが追加されていない場合の最小セクション高さを示しています。コンテンツが追加されると、セクションサイズは自動で大きくなります。
デスクトップ
デスクトップデバイスでは、セクションは常にビューポート(ブラウザウィンドウの表示エリア)の全幅に広がります。例:およそ1440px。
| サイズ | トータル高さ | 垂直パディング | 幅 |
| 小 | 160px | 40px + 40px | 1440px: 100% ビューポート |
| 中 | 240px | 80px + 80px | 1440px: 100% ビューポート |
| 大 | 400px | 160px + 160px | 1440px: 100% ビューポート |
モバイル
モバイルでもセクションの垂直パディングは同じです。幅のみが変わります。標準的なモバイルの参考値として約375pxを使用:
| サイズ | トータル高さ | 垂直パディング | 幅 |
| 小 | 160px | 40px + 40px | 375px: 100% ビューポート |
| 中 | 240px | 80px + 80px | 375px: 100% ビューポート |
| 大 | 400px | 160px + 160px | 375px: 100% ビューポート |
セクションにコンテンツを追加すると、高さは上記の値を超えます。
セクション用画像ガイドライン
セクションに画像を追加する際は、次のガイドラインに従ってください:
- 画像解像度:高解像度の画像を使用してください。幅は最低でも1440pxを推奨します
- 画像の高さ:固定高さのデザインは避けてください
- アスペクト比:16:9やそれ以上の柔軟なアスペクト比を使用してください
- セーフエリア:重要なコンテンツは中央に配置してください
デバイスごとのトリミングを避けるため、重要なコンテンツは中央に配置してください。
クイックリンクブロック
クイックリンクウィジェットは固定レイアウトを使用します。画像の高さは固定されており、画像サイズは選択した列レイアウトとビューポートサイズによって決まります。
- 画像の高さ:140px
- カードの高さ:214px
- 画像の幅:列を100%フィル
デバイスごとのトリミングを避けるため、重要なコンテンツは中央に配置してください。
1列レイアウト
| ブレークポイント | 画像サイズ |
| モバイル(< 768px) | 335 × 140px |
| タブレット(768px–1439px) | 728 × 140px |
| デスクトップ(≥ 1440px) | 1300 × 140px |
2列レイアウト
| ブレークポイント | 画像サイズ |
| モバイル(< 768px) | 335 × 140px |
| タブレット(768px–1439px) | 356 × 140px |
| デスクトップ(≥ 1440px) | 642 × 140px |
コメント
0件のコメント
サインインしてコメントを残してください。