フォローする

第2弾「オリエンシートのレスポンシブ表記に迫る」

採用率との関係性

レスポンシブ表記とは、PCやSPなど、どのようなデバイス環境でテストするのかを記載したものです。

その中にはPCとSPの両デバイスを対象としたオファーや、
PCのみが対象となっていてもオリジナルサイトのブレイクポイントの仕様により
「画面サイズ400px以上をテスト対象とします」などオリエンシートに記載されているオファーもございます。

オリエンシートのレスポンシブ表記(画面サイズ)を意識することで
デザインが審査を通過しテストラウンドで回るまでの時間が短縮されますので、
その積み重ねがカスタマーからの信頼を得、結果皆さまの採用率が上がるのだと考えております。

ここではレスポンシブデザインをご投稿いただく際のチェック方法についてご紹介いたします。

ブレイクポイントとは?

PC、Tablet、SPなど、デバイスの画面サイズに応じてレイアウトを切り替えるためのしきい値をブレイクポイントと呼びます。

ブレイクポイントは基本、CSSで設定しますが、その際に「メディアクエリ」と呼ばれるクエリを使用することで、
しきい値ごとにそれぞれ異なるレイアウトを設定できます。
例えば下記のようにメディアクエリを使用します。

@media screen and (max-width: 768px) {
 /* 768px以下の画面サイズに適応するCSSを記載 */
}

@media screen and (max-width: 480px) {
 /* 480px以下の画面サイズに適応するCSSを記載 */
}

チェックポイント

  • オリジナルサイトのブレイクポイントを確認
  • ブラウザ幅を縮尺させ、テスト対象のブレイクポイント間を確認

チェック方法

前提:デザイン投稿前のレスポンシブチェック

  1. オリエンシートの該当スライド「テスト設定概要」の「対象デバイス」「対象ブラウザ」から、レスポンシブ表記とブレイクポイントを確認
    7f59ce23-d7b0-8510-a0a6-5496198cca43.png
  2. 投稿前にプレビューを開き、ブレイクポイントの画面サイズでレイアウト崩れが起きていないか確認
  3. 崩れていた場合、崩れが起きる画面サイズに対しCSSのメディアクエリを使いデザイン調整
    ※ブレイクポイント値はオリジナルサイトに準拠します

メディアクエリの使い方

例えば、ブラウザ幅をTabletサイズまで縮尺した際に下記キャプチャのような崩れを見つけた場合、
まずは該当箇所のクラス名と指定スタイルを確認いたします。

2019ee7a-a9c5-e86f-c468-553f99f3f2ec.png

すると、クラス「btn-gray-open」に対し「width:900px !important」が指定されていることが崩れの原因だとわかります。

そこで、メディアクエリを使って崩れを直していくわけですが、
ブレイクポイント値をオリジナルサイトに準拠する必要があるため、

@media screen and (max-width: 959px) and (min-width: 600px) {
 /* タブレット:959px〜600pxの画面サイズに適応するCSSを記載 */
}

今回のテストケースの場合はCSSタブに上記メディアクエリを記載し、
その中にスタイルを記載していきます。

@media screen and (max-width: 959px) and (min-width: 600px) {
  .btn-gray-open { width:500px !important; }
}

このように記載します。

3639359c-c2de-5aa7-c6d5-fde48831cc46.png

すると、先ほど記載したメディアクエリのスタイルが反映され、
ブラウザ幅をTabletサイズまで縮尺した際のレイアウト崩れが直ります。

更にブラウザ幅をSPサイズまで縮尺した際の崩れも、同じように、
メディアクエリでスタイルを指定することで直せます。

ちなみにSPの場合は幅をpx指定ではなく%指定することで
端末サイズによるレイアウト崩れを回避できます。

ヘルプページ:スマートフォンサイトで端末のサイズによってレイアウトが崩れてしまう
外部サイト:レスポンシブサイトにおけるブレイクポイントの書き方

 

採用率を上げる・修正を減らすTips

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。