MENU
  1. ホーム
  2. Gallery
  3. CTA

CTA

Gallery
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

二重のコンテナ設計：max-widthの階層化（.ctaと.cta-inner）によるレスポンシブ制御

ポイント: 外側の背景枠（.cta）と、内側のコンテンツ表示領域（.cta-inner）にそれぞれ異なる max-width を設定し、画面サイズがどれだけ広がっても縮まっても、常にFigmaの黄金比を維持したまま美しく収まる強固な二重構造を構築しています。

.cta {
  max-width: 1200px;
  margin-inline: auto;
  /* 背景色・角丸など */
}

.cta-inner {
  width: 90%;
  max-width: 760px;
  margin-inline: auto;
}

解説: このコードでは、青い背景のベース枠（.cta）の最大幅を1200pxに制限し、中央寄せ（margin-inline: auto;）を行っています。さらに、その内側にある文字やボタンを格納する要素（.cta-inner）に対して max-width: 760px; を重ねて指定しています。この階層化により、背景の広がりを維持しつつも、主要なコンテンツ（電話番号やフォーム誘導ボタン）は常にユーザーの視線が集まりやすい760pxの範囲内に収まり、高いコンバージョン率（クリック率）に貢献する情報設計を実現しています。

情報と装飾の徹底分離：疑似要素による背景アイコン管理とアクセシビリティ配慮

ポイント: 受話器のアイコン画像（.svg）をHTMLの <img> タグとしてではなく、CSSの ::before 疑似要素の background-image として呼び出すことで、スクリーンリーダーなどの音声読み上げに余計なノイズを一切挟まないクリーンなマークアップを実現しています。

.cta-tel::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background-image: url("../img/icon-tel.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

解説: Webアクセシビリティの観点に則り、「意味を持つコンテンツ」と「視覚的な飾り（装飾）」を完全に分離しています。受話器のイラスト自体はユーザーにとって「これは電話番号ですよ」と視覚的に伝えるための補助的な装飾であり、その横にある「0120-123-456」というテキストデータそのものがあれば情報は100%伝わります。
もしこれをHTMLに <img> タグとして挿入してしまうと、視覚障害者向けの音声読み上げソフトが「画像、0120-123-456」などと不自然に読み上げてしまい、ユーザーフレンドリーではありません。疑似要素と背景画像（background-image）の組み合わせで処理することにより、ロボットや音声読み上げには電話番号という「純粋なテキスト情報だけ」を提供し、目で見ているユーザーにはカンプ通りのデザインを提供するというコーディング手法です。

Gallery
目次