この記事の目的
figmaからのマークアップをおこなったあと、プルリク（マーリク）を提出する前に確認しておくと良いことをまとめました。
理由
- 新規ページなどを作成した際、レイアウトが崩れたままMRを出してしまうと、
レビュワーの指摘箇所がコードの内容やロジック以外の部分にも及んでしまう
事前にセルフレビューを行うことで
- レビューや修正にかかる時間・負担を解消
- 見落としを減らせるためバグを事前に防げる（フロント・サーバーサイド問わず）
- UIの品質低下を防げる
https://qiita.com/mokio/items/bf5b598136ada1728156
チェック項目一覧
コンテナ幅
- 要素を含んでいるコンテナの幅が正しくなっているか（レスポンシブ全てのパターン確認）
画像サイズ
- 横縦の長さ、比率があっているか
- レスポンシブにしたとき比率が崩れていないか
- 画像が異常に小さく、大きくなってしまわないか
コンテンツ幅
- 幅が決まっている場合、想定通りの幅で作成されているか
- 画面幅を縮めた時、width（固定幅）を指定してしまっているせいで画面外にはみ出てしまい意図していない横スクロールができてしまっていないか
フォントサイズ・色
- フォントサイズ(font-size)、太さ(font-weight)、高さ(line-height)、色(color)などが正しく設定されているか
- レスポンシブの際、文字の大きさが正しく変更されているか
余白
- 誤った余白を設定してしまっていないか
- 上下の要素でpadding、marginが加算されてしまい余計な余白がついていないか
- レスポンシブにしたとき切り替わるはずの余白の値が正しく変わっているか
整列
- 左右中央/上下中央/上揃え/下揃えなどがfigmaの通りに実装されているか
- 綺麗に並ぶはずの横/縦の要素同士がはみ出ていないか
カラムおち、文章崩れ
- 画面幅を変えたとき意図しないところで要素が落ちていないか
- 逆に落とすべきところで残ってしまっていないか
- 要素が潰れていないか
- 文字が変なところで改行され読みづらくないか
チェック項目詳細
今回使用した例： プロフェッショナルハブ topページ https://professional-hub.jp/
※ 説明で使用している略称や用語
- pc：パソコン
- tab：タブレット
- sp：スマートフォン
- レスポンシブ：https://www.crosswish.com/faq/1021/
- margin(要素の外側の余白)、padding(内側の余白)：https://blog.codecamp.jp/margin_padding
①コンテナ幅
チェック項目
- 要素を含んでいるコンテナの幅が正しくなっているか（レスポンシブ全てのパターン確認）
解決策のヒント
- figma上でshift+Rを押下するとコンテナ幅にルーラーが敷かれていることを確認可能
ルーラーの幅からはみ出てはいけない部分の確認に使用するとよい - 〇〇-containerというクラスを作成し、各画面でのmax-widthと外margin、paddingなどを設定すると後が楽
②画像サイズ
チェック項目
- 横縦の長さ、比率があっているか
- レスポンシブにしたとき比率が崩れていないか
- 画像が異常に小さく、大きくなってしまわないか
- 画面幅を狭めていった時にどんどん左の画像が小さくなってしまうなど
- 画面幅を狭めていった時にどんどん左の画像が小さくなってしまうなど
解決策のヒント
- figmaに乗っている通りの比率で拡大縮小させるやり方
width: calc( figmaの画像の横幅 / figmaのアートボードの横幅 * 100vw)
vw(ビューポートのサイズを基準とした単位)についてはこちら
注意：vwはスクロールバーを含めて計算されるため、使用の際は気をつけること。
CSSのvw単位の横幅指定で横スクロールバーが表示されてしまう原因と対処方法
- flexプロパティ（伸縮させるかどうかの指定が可能）をうまく利用する
③コンテンツ幅
チェック項目
- 幅が決まっている場合、想定通りの幅で作成されているか
（幅が決まっている場合row colのグリッドシステムは使用しない方がスムーズ） - 画面幅を縮めた時、width（固定幅）を指定してしまっているせいで画面外にはみ出てしまい意図していない横スクロールができてしまっていないか
https://vanillaice000.blog.fc2.com/blog-entry-492.html
解決策のヒント
- figmaをよく確認すること
- max-widthや%を使用する（状況に応じて選択すること）：参考サイト
よく特定の幅になっている要素
- ボタン
- ヘッダーの縦(height)
- 画像の縦横(width、height)
- 疑似要素で作るであろう箇所（今回であればpoint3の丸の箇所）
tips
基本的にはレスポンシブ対応をするため、「marginやpaddingが固定、要素は可変」のケースがかなり多い。
今回であれば
- 緑で囲まれたカードはpcの時横に３つ要素が並んでいる
- カード同士の余白が16pxある
- コンテナ幅が1088pxで決まっており、その外側は余白となる
上記の余りの幅がカードの幅となり、画面サイズによって可変となる。
また内側の要素については
- カードの内側にpadding
があるため、その余りが要素(文字など)の幅となる
なお今回のパターンでbootstrapを使用してしまうと、figmaで確認した際はカードの外側の余白が16pxとなっているため正しくならないし、内側の要素に関しても40pxのパディングになっているためd-flexを使用する方が早いし正確。
④フォントサイズ・色
チェック項目
- フォントサイズ(font-size)、太さ(font-weight)、高さ(line-height)、色(color)などが正しく設定されているか
- レスポンシブの際、文字の大きさが正しく変更されているか
(稀にタブレットやスマホでサイズが変わっているケースがある)
解決策のヒント
- figmaを各レスポンシブレイアウトでよく確認する
- 新規でページを作成する際、テキストには初めからユーティリティクラス(.font-middleのような)を用意し、必要なプロパティを用意しておくと後が楽
⑤余白
チェック項目
- 誤った余白を設定してしまっていないか
- 上下の要素でpadding、marginが加算されてしまい余計な余白がついていないか
- レスポンシブにしたとき切り替わるはずの余白の値が正しく変わっているか
見落としポイントよくある例(画像⑤のパターン)
- tab以下になった時のみにつけておきたいmarginがpcレイアウトの時にもついてしまっていて余計な余白が生まれてしまう
- tab→spにかけてmarginが40→32になっている必要がある
解決策のヒント
- figmaを各レスポンシブレイアウトでよく確認する
- bootstrapを使用している場合、
mt-1、pb-3などのクラスについて、正しいものを使用しているか確認 - マージン：マージンになってしまい、余白が相殺されているかも
https://moshashugyo.com/media/collapsing-margin
⑥整列
チェック項目
- 左右中央/上下中央/上揃え/下揃えなどがfigmaの通りに実装されているか
- 綺麗に並ぶはずの横/縦の要素同士がはみ出ていないか
解決策のヒント
- 上下中央、左右中央揃えのやり方はたくさんあるので「css 左右中央」等のワードで調べる
https://www.granfairs.com/blog/staff/centering-by-css
そもそもどこに配置されているか確認するには
figma上で、shiftを押しながら要素を選択していくとこんなふうに要素が四角く囲われる
この場合左の要素のちょうど真ん中に詳しくはこちらのボタンが配置されていることがわかるので、その通りに実装する
⑦カラムおち、文章崩れ
チェック項目
- 画面幅を変えたとき意図しないところで要素が落ちていないか
- 逆に落とすべきところで残ってしまっていないか
- 要素が潰れていないか
- 文字が変なところで改行され読みづらくないか
今回の場合は...
PC：３カラム（横に3つ並び）で縦積み
TAB：２カラムで縦積み
SP：縦に１カラムで縦積み
でないとNG
解決策のヒント
- figmaをよく確認すること
- 1〜2
- ブレイクポイントやメディアクエリに設定している画面幅が正しいか確認する
-
d-flexやrow、colが正しく設定されているか
- 3
- flexプロパティをうまく利用する
https://miyattiblog.com/explanation-of-flex-property/
- flexプロパティをうまく利用する
- 4
- デザイナーに今の状態でも大丈夫か質問する（正しく実装している前提）
- 上記確認しどうしても崩せない場合
- ブレイクポイントをもう一段階増やす
- letter-spacing(字間)プロパティを使用して少し文字を詰める
-
white-space: nowrap;を使用する
※ただし、このプロパティは要素の横幅関係なく改行を禁止してしまうため、要素から文章がはみ出る場合があります。
他にやり方がないかよく調査し、デザインにほぼ支障がない場合などの最終手段として検討してください。
https://web-engineer-wiki.com/html-css/dont-break/
その他
- レスポンシブレイアウトにおいて、デザイナーも想定外のことがあり得るので、レイアウトが崩れてしまっておかしいなと思ったら実装者からも確認すること
- 特にfigmaで作成されている各ブレイクポイント以外の画面幅になった時の想定が難しく、要素が極端につぶれてしまうなどの事象が時々起こります。そんな時は放置せず積極的に相談しましょう！
- MRの大きさを今一度確認する
- 丸々１ページ出来上がってから出すのではなく、セクションごとに区切って実装していったりするとレビュワーもフォーカスするべき内容が狭くなるため見落としを防ぐことができます。