第2弾「オリエンシートのレスポンシブ表記に迫る」 – Kaizen Platform ヘルプセンター

採用率との関係性

レスポンシブ表記とは、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を記載 */
}

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

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

すると、クラス「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; }
}

このように記載します。

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

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

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

読み込んでいます...