このページの中身
レイアウト
どこに置き、どこで折り返すか。幅は中身ではなく、レイアウトが決めます。
図の中身を文字で読む
- レイアウトで決めること どこに置き、どこで折り返すか
- 先に決まっていること 基礎 タイポグラフィ
- 枠を決める 版面と行長 グリッド
- 間を決める 余白
- 幅に応じる レスポンシブ 構図のパターン
- ここが効く先 UI部品 実装
このページから降りる#
この分野が答えになる場面#
全16件。ほかの分野もまとめて引くなら逆引きへ。
この分野が答えになる場面困り事から引く16 件
| こういうとき | 答え | いますぐ | 詳しくは |
|---|---|---|---|
| 1行を何文字にすればいいか | 和文は全角35〜45字、欧文は45〜75字。ただし文字数で幅を指定せず、レイアウトで決める。 | コードを開く | 版面と行長 |
| 縦の並びと横の並びのどちらにするか | 順序があるなら縦、比較させるなら横。読む向きと、比べる向きは違う。 | コードを開く | 構図のパターン |
| グリッドを何列にするか | 12列が扱いやすい。2・3・4・6に割り切れるので、大半の分割が作れる。 | コードを開く | グリッド |
| グリッドに乗せたのに窮屈に見える | 溝（gutter）が狭い。列幅の1/4前後を目安に広げる。 | .grid { gap: var(--space-6); } /* 列幅の1/4前後 */ | グリッド |
| 表が読みにくい | 縦罫を消し、横罫だけにする。数値は右揃えにして等幅の数字を使う。 | コードを開く | 構図のパターン |
| 要素の幅と余白が毎回ばらつく | 4か8の倍数の階段を作り、その中からしか選ばない。中間の値を作った時点で統一は崩れる。 | コードを開く | 余白 |
| 余白の刻みをどう作るか | 4 8 12 16 24 32 48 64 96 128。文字とラベルは4〜8、組の中は8〜16、組と組は24〜48。 | コードを開く | 余白 |
| 見出しの上下の余白が決まらない | 上を下の2〜3倍空ける。見出しは次の本文に属するので、前との距離を大きく取る。 | コードを開く | 余白 |
| 文章の右に意味のない空白が残る | 行長を文字数で決めない。版面をコンテナに与えて、見出しも本文も表も同じ右端に揃える。 | コードを開く | 版面と行長 |
| 広い画面で文章が間延びする | 隣に要素を置く。目次でも図版でも、置けば折り返しがその列幅で決まる。 | コードを開く | 版面と行長 |
| スマホで横スクロールが出る | 固定幅の要素か、はみ出す表か画像。幅375pxで開いて、右端を越えている要素を特定する。 | コードを開く | レスポンシブ |
| ブレークポイントをどこに置くか | 端末名で決めない。中身が崩れる幅で決める。375・768・1280は確認する幅であって分岐点ではない。 | コードを開く | レスポンシブ |
| スマホ用の別デザインを作るべきか | 同じHTMLで並びを変えるほうが保守が楽。別々に作ると必ずずれる。 | コードを開く | レスポンシブ |
| 余白が意図せず重なる、または消える | 上下marginの相殺が起きている。gapかpaddingに替えるか、flex/gridの中に入れる。 | コードを開く | 余白 |
| 画面いっぱいに広げるか、中央に寄せるか | 読ませるものは版面を決めて寄せる。見せるもの（写真・図）は端まで出してよい。 | コードを開く | 版面と行長 |
| カードにするかリストにするか | 画像が主役ならカード、比べさせるならリスト。カードは1画面に入る数が減る。 | コードを開く | 構図のパターン |
他の分野へ#
基礎 ／ タイポグラフィ ／ 色彩 ／ デザインシステム ／ UI部品 ／ UX・情報設計 ／ アクセシビリティ ／ モーション ／ 実装 ／ ブランディング ／ デザインスタイル ／ AIと制作 ／ SEO・公開と検索