構成案とコードは別の成果物
構成案をそのままコードにしようとすると、途中で情報が足りなくなります。案の段階では決まっていない要素があるためです。
- 画面幅が変わった時にどう並ぶか
- 文章が長くなった時にどう折り返すか
- 画像が無い場合にどう見えるか
- 押せる要素と押せない要素の区別
案を渡す前に、この4つを自分で決めておくと、作り直しが減ります。
案をコードにする時の落とし穴
| 案の段階 | 実装で起きること |
|---|---|
| 横に3つ並べる | スマホで潰れる。縦に並べる指定が要る |
| 文字を大きく | 長い見出しで2行になり、高さがずれる |
| 画像を背景に | 文字が読めなくなる組み合わせが出る |
| 余白を広く | スマホで1画面に何も入らなくなる |
いずれも「案としては正しいが、実際の条件で崩れる」型です。案を作る段階で条件を書き添えておくと防げます。
渡し方
案をそのまま渡すのではなく、次を添えてください。
- スマホでの並び方（縦に積むか、横のままか）
- 文字が長くなった場合の扱い
- 触ってよいファイルと、触ってはいけないファイル
- 既存の見た目を変えたくない箇所
3番と4番を書かないと、関連する箇所もまとめて直されることがあります。
作った後の確認
- スマホの幅で開く
- 見出しをわざと長くして崩れないか見る
- 画像を外しても意味が通るか見る
- 他のページに影響していないか、2〜3枚開いて確認する
2番と3番は忘れがちですが、実際の運用で必ず起きる条件です。作った直後のきれいなデータでは崩れが見えません。
既存のページに合わせる
新しく作るページを既存のサイトに馴染ませるには、案の段階で既存の形を渡すのが最短です。
- 既存ページを1枚見本として渡す
- 「この見た目に合わせて」と指定する
- 共通部分（ヘッダー、フッター、リンクの形）は作り直さず、既存を使う
共通部分を作り直すと、そのページだけ他と違う形になります。あとから全ページをそろえる作業が発生するので、最初から既存を流用してください。
触ってはいけない箇所を伝える
指示に範囲を書かないと、関連する箇所もまとめて直されることがあります。次を明示してください。
- 変更してよいファイル
- 触ってはいけないファイル（共通部分、設定ファイル）
- 見た目を変えたくない既存の要素
- 他のページに影響を出さないこと
これを書くだけで、後から差分を確認する時間が大きく減ります。
案の段階で決めておくと速い
実装に入ってから決めると作り直しになる項目です。案を作る時点で決めておいてください。
| 決めること | 決めないと |
|---|---|
| スマホでの並び順 | 横並びのまま潰れる |
| 見出しが2行になった時の高さ | 要素の高さがそろわない |
| 画像が無い場合の見え方 | 空白だけが残る |
| 押せる要素の見た目 | 押せることが伝わらない |
| 文字と背景の組み合わせ | 読めない箇所が出る |
いずれも実装してから気づくと、構成ごと変えることになります。案の段階で1行ずつ書き添えるだけで防げます。
実践ログから分かったこと
実際に起きたのは、案の通りに横3列で作ったところ、スマホで潰れて読めなくなったことでした。案の段階ではパソコンの画面しか想定していませんでした。
それ以来、案を渡す時に「スマホでは縦に積む」と書き添えるようにしています。実装してから直すより、渡す時に1行足すほうがはるかに速く終わります。
FAQ
構成案をそのまま渡してよいですか？
スマホでの並び方と、文字が長くなった場合の扱いを添えてください。案だけでは条件が足りません。
作った後に何を確認しますか？
スマホの幅、見出しを長くした場合、画像が無い場合の3つです。
他のページに影響しますか？
同じ指定が効いている場合があります。2〜3枚開いて確認してください。
デザインの良し悪しは判断できますか？
案は出せますが、判断は自分でしてください。実際の表示は必ず確認が必要です。