Webサイトを運用する上で、ABテストを実施してUX改善のPDCAを回し続けることは不可欠な取り組みです。ABテストを実施する際、改善すべき要素を特定して適切な仮説を立てることと、仮説検定の手続きを取り統計的に正しい評価を行うことがポイントとなります。ABテストの方法に加えて、効率的な改善につなげるためのノウハウを解説します。ABテストとはABテストとは、Webメディアをはじめとするオンラインプロダクトのパフォーマンスを改善するために、複数のクリエイティブやキャッチコピー、レイアウトなどの要素を一定期間並列して運用し、その成果を比較検証することです。医療や心理学、社会科学の分野での、２つのグループに対する効果や差異を検証するためのランダム化比較試験（RCT）にもABテストという言葉が使われることがあります。どちらも比較対象とするグループがランダムに抽出されたものであることと、観測された結果を仮説検定という統計的な手続きによって検証することが共通しています。ABテストとRCTは２つの要素の単なる比較ではなく、統一された条件下で比較対象とする要素の違いによる結果・効果の差異が統計的に有意なものであるかどうかを検証することを目的とするものです。以下では、デジタルマーケティングやウェブデザインなどオンラインプロダクトについて、デジタル環境下で行うABテストについて解説します。ABテストの目的とメリットABテストを行う目的は、エンゲージメントとCVRの向上を図るためにUXを改善することであり、既存のWebサイトの構成要素の一つひとつを改善・検証していくことで収益を向上させることです。新たに広告費用を投入して収益を増やすことと比べて、既存のWebサイトの要素の改善だけで収益を向上させることができるため、費用対効果の高いマーケティング施策のひとつと考えることができます。また、比較的短期間でPDCAを回すことができる取り組みであることから、要素の改善を積み重ねることで大きな収益をのばしていくことができ、Webサイト運用の勝ちパターンを学習していくことにもつながります。ABテストを行う対象デジタル環境下でのABテストでは、Webサイトや広告、アプリ、メルマガ、ニュースレターなどがテストを行う対象です。デザイン要素とタイトルや見出しなどのコピー要素、導線設計全体について複数のパターンを比較します。Webサイトユーザーの閲覧から、購入や申込みにつなげることを目的とするランディングページ（LP）やECサイトの商品ページなどがパフォーマンスに大きな影響を持つ要素であり、デザイン要素やコピー要素などを複数のパターンでABテストを行います。イメージや配色、CTAの色や大きさ、配置、ボディコンテンツの内容などが比較検討要素となります。広告LPへの入り口となる広告もABテストによる改善効果を得やすいもののひとつです。バナーであればデザイン全体とキャッチコピーがABテストでの比較要素となります。広告はインプレッションを獲得するための重要なパーツであり、対費用効果も把握しやすいため、パフォーマンスに問題がある場合は、ABテストを行って改善につなげることができます。メルマガメルマガで重視されるのは件名（タイトル）です。件名（タイトル）はメールの開封率に大きな影響を与えます。テキストベースの表現によって、いかにユーザーの関心をひくかが問われることになります。件名（タイトル）が重要になるという点では、スマートフォンの通知に表示されるLINE公式アカウントなどもABテストの対象となります。アプリアプリの場合は、デザイン要素以外に新たに加える機能のテストやコンテンツの比較にABテストが用いられます。例えば、ログイン時のチュートリアルのスキップの有無やメニューの表示方法の種類など、複数のパターンをABテストで検証することがCVとエンゲージメントを向上させることにつながります。ABテストを行う要素ABテストで比較する要素は、デザイン要素やコピー、入力フォーム、ユーザーの導線に関わるナビゲーションなどがあります。イメージ画像素材や配色はWebサイトや広告のイメージを決定づける要素です。ファーストビューのイメージ画像やページ全体の配色は、ターゲットとするユーザーの傾向の最大公約数を取る必要があります。性別や年齢層、扱う商材を勘案して画像や配色によって統一されたイメージを訴求することが求められます。レイアウトWebページを構成する画像やテキストブロック、バナーなどのボタン、ナビゲーション等の配置や大きさは、見やすさとともにWebサイトの使い勝手にも関わり、UX全体を左右します。特に、CTA（申し込みや購入に遷移させるためのリンクやボタン）の位置や大きさ、色に加えて、CTAに添えられるコピーやテキストによってCV（コンバージョン） に結びつく確率が大きく変わります。それらの要素のパターンを複数用意して比較することがパフォーマンスの改善に役立ちます。コピー（タイトル・見出し・本文）コピーはWebサイトの内容理解と取って欲しい行動に直接影響する要素であり、意図するメッセージを効果的に伝えることができるか、ユーザーの行動を促すことができるものかどうかが重要です。ひとつの単語によってクリック率が大きく変わるケースも少なくないため、タイトルや見出し、また、キャッチコピーはよく吟味する必要があります。入力フォーム申し込みや登録の入力フォームもABテストの対象となります。フォームへの入力はCV（コンバージョン）やリード（見込み客）を獲得するまでのユーザーが取る最終段階の行動です。入力項目が多すぎる場合やエラー箇所が分からず次に進めないなど、ユーザーにとって負荷がかかる入力フォームは、せっかく申し込みや登録する気になったユーザーを離脱させてしまいます。特にスマートフォンに表示させる入力フォームは表示領域が小さいために、入力項目の並びやページに分けるなど、ちょっとしたことで離脱率が大きく変わってきます。ナビゲーションナビゲーションに関するABテストは、ナビゲーションメニューの形式や配置、大きさなどのデザイン要素やメニュー項目のラベル設定などタイトルのわかりやすさのほか、階層による導線の設計が関わってきます。特定のページを見たユーザーのCVRが高い、反対に、特定のページを見たユーザーの離脱が多いといったケースでは、ここまで述べた要素に加えてサイト全体の導線に着目した変更が必要です。ABテストの方法Webページを対象としたABテストを行う場合、次の4つの方法が取られます。同一URLで行うABテストテストの対象とするWebページのURLは同一で、ページの要素だけを変える手法です。ABテストという場合、この手法を指すことが一般的です。ソースコードの書き換えが不要であり、比較する要素を用意するだけでABテストを実施できます。リダイレクトテスト（スプリットURLテスト）テストの対象とするWebページのURLを複数用意し、アクセスしたユーザーを複数のURLに振り分ける方法を取るものです。ページも複数作成する必要があります。どちらのURLのページを表示させるかは任意の配分でランダムに振り分けることもできます。多変量テスト単一ページ、または、複数のページをまたいだ、複数の要素の組み合わせを比較する場合に行うテストです。ABテストの検証方法ABテストの結果として現れた数値の差が、２つのパターンの違いによって生じたものと判断していいかどうかを統計的な手続きによって検証します。冒頭でRCTについて触れましたが、Webサイトの場合はユーザーからのアクセスがある程度大きいものであれば、Aのパターンを表示させるグループとBのパターンを表示させるグループは、それぞれランダムに選ばれたグループと見なすことができます。２つのパターンで得られた結果の差が誤差の範囲かそうでないかは、有意差を計算することで判断します。ABテストの比較対象とするサンプル数と結果の差から、確率的に得られる誤差の範囲を計算し、結果の差が有意水準を下回れば一方のパターンを選択することができます。これらの検証にはABテストができるツールを活用することが一般的であり、各社からABテストツールがリリースされています。%3Cdiv%20class%3D%22urlBox%22%3E%0A%20%20%3Cdiv%20class%3D%22detailBox%22%3E%0A%20%20%20%20%3Ch5%3E%0A%20%20%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Fqiqumo.jp%2Fcontents%2Fdictionary%2F3214%2F%22%20target%3D%22_blank%22%3E%E6%9C%89%E6%84%8F%E5%B7%AE%E6%A4%9C%E5%AE%9A%E3%81%A8%E3%81%AF%EF%BD%9C%E7%B0%A1%E5%8D%98%E8%A7%A3%E8%AA%AC%3C%2Fa%3E%0A%20%20%20%20%3C%2Fh5%3E%0A%20%20%20%20%3Cp%3E%E6%9C%89%E6%84%8F%E5%B7%AE%E6%A4%9C%E5%AE%9A%E3%81%AE%E3%82%AB%E3%83%B3%E3%82%BF%E3%83%B3%E8%AA%9E%E5%8F%A5%E8%A7%A3%E8%AA%AC%20%E6%9C%89%E6%84%8F%E5%B7%AE%E6%A4%9C%E5%AE%9A%E3%81%A8%E3%81%AF%E3%80%81%E6%AF%94%E8%BC%83%E5%AF%BE%E8%B1%A1%E3%81%A8%E3%81%99%E3%82%8B%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E5%B7%AE%E7%95%B0%E3%81%8C%E5%81%B6%E7%84%B6%E7%94%9F%E3%81%98%E3%81%9F%E3%82%82%E3%81%AE%E3%81%8B%E3%80%81%E5%81%B6%E7%84%B6%E7%94%9F%E3%81%98%E3%81%9F%E3%82%82%E3%81%AE%E3%81%8B%E3%80%81%E3%81%82%E3%82%8B%E3%81%84%E3%81%AF%E3%81%9D%E3%81%86%E3%81%A7%E3%81%AA%E3%81%84%E3%81%AE%E3%81%8B%E3%82%92%E7%B5%B1%E8%A8%88%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E7%A2%BA%E3%81%8B%E3%82%81%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%A7%E2%80%A6%3C%2Fp%3E%0A%20%20%20%20%3Cdiv%20class%3D%22link%22%3E%0A%20%20%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Fqiqumo.jp%2Fcontents%22%20target%3D%22_blank%22%3E%0A%20%20%20%20%20%20%20%20%3Cimg%0A%20%20%20%20%20%20%20%20%20%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-design-asset-files%2Fprojects%2FBmqMdEvrOX%2Fs-150x150_webp_75112393-83b6-40fe-a51b-9468889a835b.png%22%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Cp%3EQiQUMO%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%3C%2Fp%3E%0A%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22imgBox%22%3E%0A%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Fqiqumo.jp%2Fcontents%2Fdictionary%2F3214%2F%22%20target%3D%22_blank%22%3E%0A%20%20%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-design-asset-files%2Fprojects%2FBmqMdEvrOX%2Fs-1024x624_v-fs_webp_1771773b-36c3-4121-bb15-6aed7cf10587.png%22%20%2F%3E%0A%20%20%20%20%3C%2Fa%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cstyle%3E%0A%20%20.urlBox%20%7B%0A%20%20%20%20border%3A%201px%20solid%20rgba(0%2C%200%2C%200%2C%200.12)%3B%0A%20%20%20%20padding%3A%2024px%3B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20gap%3A%2048px%3B%0A%20%20%20%20border-radius%3A%204px%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20%7B%0A%20%20%20%20width%3A%20calc(100%25%20%2F%203%20*%202)%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20h5%20%7B%0A%20%20%20%20font-size%3A%2018px%3B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20line-height%3A%201.4em%3B%0A%20%20%20%20margin%3A%200%200%2018px%3B%0A%20%20%20%20color%3A%20%23333333%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20h5%20a%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20color%3A%20%23333333%3B%0A%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20h5%20a%3Ahover%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20color%3A%20%236495ed%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20p%20%7B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20line-height%3A%202.1em%3B%0A%20%20%20%20margin%3A%200%200%2024px%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20.link%20a%20%7B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20color%3A%20%236495ed%3B%0A%20%20%20%20gap%3A%2010px%3B%0A%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20.link%20a%3Ahover%20p%20%7B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20.link%20a%20img%20%7B%0A%20%20%20%20width%3A%2016px%3B%0A%20%20%20%20height%3A%2016px%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20.link%20a%20p%20%7B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20margin%3A%200%3B%0A%20%20%7D%0A%20%20.urlBox%20.imgBox%20%7B%0A%20%20%20%20width%3A%20calc(100%25%20%2F%203)%3B%0A%20%20%7D%0A%20%20.urlBox%20.imgBox%20img%20%7B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20aspect-ratio%3A%20auto%201024%20%2F%20318%3B%0A%20%20%20%20border-radius%3A%204px%3B%0A%20%20%7D%0A%0A%20%20%40media%20screen%20and%20(max-width%3A%20540px)%20%7B%0A%20%20%20%20.urlBox%20%7B%0A%20%20%20%20%20%20padding%3A%2021px%3B%0A%20%20%20%20%20%20flex-wrap%3A%20wrap%3B%0A%20%20%20%20%20%20gap%3A%2021px%3B%0A%20%20%20%20%7D%0A%20%20%20%20.urlBox%20.detailBox%20%7B%0A%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%7D%0A%20%20%20%20.urlBox%20.detailBox%20h5%20%7B%0A%20%20%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20%20%20margin%3A%200%200%2016px%3B%0A%20%20%20%20%7D%0A%20%20%20%20.urlBox%20.detailBox%20p%20%7B%0A%20%20%20%20%20%20margin%3A%200%200%2021px%3B%0A%20%20%20%20%7D%0A%20%20%20%20.urlBox%20.detailBox%20.link%20a%20p%20%7B%0A%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%7D%0A%20%20%20%20.urlBox%20.imgBox%20%7B%0A%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20order%3A%20-1%3B%0A%20%20%20%20%7D%0A%20%20%7D%0A%3C%2Fstyle%3E他のツール・手法との併用Webページを改善するための手法にはABテスト以外に、ヒートマップやアンケートなどを活用する方法があります。ABテストは運営者側が提示するパターンの差を定量的に把握するものですが、ヒートマップやアンケートを活用することで改善の必要な箇所の特定や、離脱の理由などを具体的に知ることができます。ヒートマップヒートマップはWebサイト上でユーザーが実際に取った行動を可視化するツールです。スクロールの量やクリックされた箇所、マウスの軌跡などを記録し、Webページ上で色分けして表示します。よく読まれている箇所、よくクリックされる箇所などユーザーが同じ行動を取る場所ほど濃い赤色で表示されることが一般的です。ユーザーのWebページ上での行動が可視化されるため、パフォーマンスに影響する要素を特定することができます。アンケートWebサイトの要素や使い勝手に対して、ユーザーに直接的な形で評価を求めるのがアンケートです。ヒートマップと同様に改善の必要な要素の特定や、パフォーマンスにつながらない理由を明らかにできる点が、定量的な結果しかわからないABテストとの違いといえます。Webアンケートツールを利用すれば、画像を表示させて比較評価を行うこともできるため、ターゲットにフィットするデザインの判断材料を得たり、ユーザーの評価の理由を言語化して捉えられるのがアンケートのメリットです。まとめABテストはWebサイトのパフォーマンス改善に欠かせない取り組みですが、改善すべき要素を特定できず仮説を立てられないケースや、仮説に従って作成した要素に有意な差が見られないといったケースも起こります。そういったケースではやみくもにパターンを作成してABテストを実施しても、効率的なUX改善には結びつきません。ABテストと合わせてヒートマップやアンケートを実施することで、より解像度の高い改善施策を効率的に実施することが可能になります。セルフ型アンケートツールQiQUMOはアンケートの質問項目や選択肢に画像を表示させることが可能であり、ABテストの仮説を立てる判断材料を得ることができます。QiQUMOはコンセプトテストやパッケージテストなどにも幅広く活用できるセルフ型アンケートツールです。Webマーケティングに欠かせないセルフ型アンケートツールQiQUMOを是非ご活用ください。%3Cdiv%20class%3D%22urlBox%22%3E%0A%20%20%3Cdiv%20class%3D%22detailBox%22%3E%0A%20%20%20%20%3Ch5%3E%0A%20%20%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Fqiqumo.jp%2Fcontents%2Fmarketing-research%2F%22%20target%3D%22_blank%22%0A%20%20%20%20%20%20%20%20%3E%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%AA%E3%82%B5%E3%83%BC%E3%83%81%E3%81%A8%E3%81%AF%EF%BD%9C%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%BF%9C%E7%94%A8%E3%81%BE%E3%81%A7%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%AC%3C%2Fa%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%3C%2Fh5%3E%0A%20%20%20%20%3Cp%3E%0A%20%20%20%20%20%20%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%AA%E3%82%B5%E3%83%BC%E3%83%81%E3%81%AE%E6%84%8F%E5%91%B3%E3%80%81%E7%9B%AE%E7%9A%84%E3%80%81%E6%9D%A1%E4%BB%B6%E3%80%81%E6%96%B9%E6%B3%95%E3%80%81%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%93%E3%81%A8%E3%81%AA%E3%81%A9%E3%82%92%E8%A9%B3%E7%B4%B0%E8%A7%A3%E8%AA%AC%E3%80%82%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%AA%E3%82%B5%E3%83%BC%E3%83%81%E3%81%AE%E5%BF%85%E9%A0%88%E6%83%85%E5%A0%B1%E3%81%8C%E8%A9%B0%E3%81%BE%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%0A%20%20%20%20%3C%2Fp%3E%0A%20%20%20%20%3Cdiv%20class%3D%22link%22%3E%0A%20%20%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Fqiqumo.jp%2Fcontents%22%20target%3D%22_blank%22%3E%0A%20%20%20%20%20%20%20%20%3Cimg%0A%20%20%20%20%20%20%20%20%20%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-design-asset-files%2Fprojects%2FBmqMdEvrOX%2Fs-150x150_webp_75112393-83b6-40fe-a51b-9468889a835b.png%22%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Cp%3EQiQUMO%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%3C%2Fp%3E%0A%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22imgBox%22%3E%0A%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Fqiqumo.jp%2Fcontents%2Fmarketing-research%2F%22%20target%3D%22_blank%22%3E%0A%20%20%20%20%20%20%3Cimg%0A%20%20%20%20%20%20%20%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-design-asset-files%2Fprojects%2FBmqMdEvrOX%2Fs-1024x318_v-fs_webp_2ff628be-be8d-4599-a7cb-8d74a0336369.jpg%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fa%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cstyle%3E%0A%20%20.urlBox%20%7B%0A%20%20%20%20border%3A%201px%20solid%20rgba(0%2C%200%2C%200%2C%200.12)%3B%0A%20%20%20%20padding%3A%2024px%3B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20gap%3A%2048px%3B%0A%20%20%20%20border-radius%3A%204px%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20%7B%0A%20%20%20%20width%3A%20calc(100%25%20%2F%203%20*%202)%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20h5%20%7B%0A%20%20%20%20font-size%3A%2018px%3B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20line-height%3A%201.4em%3B%0A%20%20%20%20margin%3A%200%200%2018px%3B%0A%20%20%20%20color%3A%20%23333333%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20h5%20a%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20color%3A%20%23333333%3B%0A%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20h5%20a%3Ahover%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20color%3A%20%236495ed%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20p%20%7B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20line-height%3A%202.1em%3B%0A%20%20%20%20margin%3A%200%200%2024px%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20.link%20a%20%7B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20color%3A%20%236495ed%3B%0A%20%20%20%20gap%3A%2010px%3B%0A%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20.link%20a%3Ahover%20p%20%7B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20.link%20a%20img%20%7B%0A%20%20%20%20width%3A%2016px%3B%0A%20%20%20%20height%3A%2016px%3B%0A%20%20%7D%0A%20%20.urlBox%20.detailBox%20.link%20a%20p%20%7B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20margin%3A%200%3B%0A%20%20%7D%0A%20%20.urlBox%20.imgBox%20%7B%0A%20%20%20%20width%3A%20calc(100%25%20%2F%203)%3B%0A%20%20%7D%0A%20%20.urlBox%20.imgBox%20img%20%7B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20aspect-ratio%3A%20auto%201024%20%2F%20318%3B%0A%20%20%20%20border-radius%3A%204px%3B%0A%20%20%7D%0A%0A%20%20%40media%20screen%20and%20(max-width%3A%20540px)%20%7B%0A%20%20%20%20.urlBox%20%7B%0A%20%20%20%20%20%20padding%3A%2021px%3B%0A%20%20%20%20%20%20flex-wrap%3A%20wrap%3B%0A%20%20%20%20%20%20gap%3A%2021px%3B%0A%20%20%20%20%7D%0A%20%20%20%20.urlBox%20.detailBox%20%7B%0A%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%7D%0A%20%20%20%20.urlBox%20.detailBox%20h5%20%7B%0A%20%20%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20%20%20margin%3A%200%200%2016px%3B%0A%20%20%20%20%7D%0A%20%20%20%20.urlBox%20.detailBox%20p%20%7B%0A%20%20%20%20%20%20margin%3A%200%200%2021px%3B%0A%20%20%20%20%7D%0A%20%20%20%20.urlBox%20.detailBox%20.link%20a%20p%20%7B%0A%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%7D%0A%20%20%20%20.urlBox%20.imgBox%20%7B%0A%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20order%3A%20-1%3B%0A%20%20%20%20%7D%0A%20%20%7D%0A%3C%2Fstyle%3E