採用率との関係性
ブレイクポイントとは、PC、Tablet、SPなど、デバイスの画面サイズに応じてレイアウトを切り替えるためのしきい値を指します。
第2弾「オリエンシートのレスポンシブ表記に迫る」でご説明した通り、ブレイクポイントの画面サイズ間でレイアウト崩れが起きていないか事前にデザインを整えることは、差し戻しを防ぐための重要なチェックポイントです。
審査依頼に出されたデザインをできるだけ早く「次ラウンド用のデザイン案」に反映することをカスタマーは望んでいるので、それを叶えることのできるグロースハッカーは絶大な信頼を得られるでしょう。
ここでは、ブラウザ幅を縮小させた時のレイアウトの変化についてご紹介して参ります。
チェックポイント
- テスト対象がPC：ブラウザ幅を縮小させレイアウトがSPに変化するまでの幅で崩れがないか確認
- テスト対象がPC/SP：ブラウザ幅を拡大・縮小させPC/SPのレイアウト間で崩れがないか確認
チェック方法
テストオファー：練習用オファー④
テストページ：物件詳細
デザイン変更：パンくずリストの下にバナーを追加
- オリエンシートの該当スライド「テスト設定概要」の「対象デバイス」「対象ブラウザ」から、レスポンシブ表記とブレイクポイントを確認
- テスト対象がPC/SPの場合
- 対象デバイスに「PC/SPのレスポンシブサイト」が表記されている
- 対象ブラウザにPC/SPそれぞれのブレイクポイント値が表記されている
- テスト対象がPCかSPいずれかの場合
- 対象デバイスにいずれかのデバイスが表記されている
- ブレイクポイント値は未表記
- テスト対象がPC/SPの場合
- 投稿前にプレビューを開き、ブレイクポイントの画面サイズでレイアウト崩れが起きていないか確認
- 今回のサンプルデザインでは、パンくずリストの下に追加したバナーが原因でレイアウト崩れが起きていることを確認
- Chrome デベロッパーツールで該当箇所のHTML要素を確認
- クラス「sample-bnr」の横幅が「width: 1150px;」に固定されていたことが原因
- エディターに戻り、意図したデザインになるようソースコードを修正
- 再度「プレビュー」ボタンをクリックし、ブレイクポイントの画面サイズでレイアウト崩れが起きていないか確認
- 問題の箇所が改善されていたらデザインを投稿
0 コメント