Quick Fixes / 既存サイトの小修正
その困りごと、
触って直せます。
「スマホで崩れる」「フォームが動かない」「文字が読みにくい」——既存サイトのよくある小さなつまずきを、実際に動くBefore→Afterで並べたデモ集です。各項目は「課題→対応→効果」とセットで、その場で切り替えて違いを確かめられます。
※ 本ページのデモ・数値（コントラスト比や速度の目安）はすべて説明用の例示です。送信フォームはデモ動作のみで、実際の送信・データ保存は行いません。電話番号も架空のサンプルです。
01 Responsive
スマホ対応化（横スクロール解消）
PC時代の固定幅レイアウトは、スマホで画面からはみ出して横スクロールが発生します。下のBefore枠を狭くすると文字が切れてはみ出し、Afterは幅に合わせて折り返します。
課題
固定 width の本文や表が、スマホ画面より広く、横スクロールやピンチズームが必要になる。
対応
<meta viewport> の追加、固定幅を max-width:100% へ、Flex/Grid と clamp() による可変化。
効果
スマホで等倍のまま読める。離脱が減り、来店・問い合わせの導線が機能する。
枠を狭めると横スクロールが出ます
同じ幅でも横スクロールなし
02 Form Validation
問い合わせフォーム設置・バリデーション
未入力のまま送れてしまう素朴なフォームを、必須・メール形式チェック付きの実動フォームに。下のフォームは本当に検証が動きます（送信は行いません）。空のまま、または不正なメールで送信を押すと、その場でエラーが表示されます。
課題
必須チェックもメール形式チェックもなく、空送信・誤記で問い合わせが届かない／返信できない。
対応
必須・メール形式の検証、送信時のインラインエラー、aria-invalid / aria-describedby で支援技術にも通知。
効果
入力ミスがその場で分かり、確実に届くフォームに。問い合わせの取りこぼしを防ぐ。
空欄でも・メール形式が変でも、そのまま送信扱いになってしまいます。
03 Performance / CLS
表示速度・画像最適化（レイアウトシフト解消）
寸法指定のない大きな画像は、読み込み完了の瞬間に下の文章を突き飛ばします（CLS＝レイアウトのガタつき）。下のBefore枠は「画像が後から入る」様子を再現し、Afterは aspect-ratio で場所を先取りするので文章が動きません。
課題
巨大画像・寸法未指定で、読み込み時に文章が飛ぶ（CLS）。表示も遅く、読もうとした瞬間に位置がずれる。
対応
width/height または aspect-ratio で場所を確保、loading="lazy" で遅延読込、適切なサイズ・形式に。
効果
読んでいる最中に画面が飛ばない。表示が軽くなり、誤タップやストレスを防ぐ。Core Web Vitals にも好影響。
コード差分（要点）：
/* Before：寸法もloadingもない */
- <img src="hero.jpg">
/* After：寸法を伝え、遅延読込・縦横比を固定 */
+ <img src="hero.jpg" width="1600" height="900"
+ loading="lazy" decoding="async" alt="店内の様子">
+ /* CSS */ img { aspect-ratio: 16 / 9; height: auto; }
※ 速度・CLSの数値は実装方針の説明用の例示です（例：CLS 0.25 → 0.00、初期表示の体感が軽くなる）。実測値は対象サイトでの計測が必要です。
04 Readability / Contrast
文字の可読性・コントラスト改善
「おしゃれだから」と薄いグレーにした文字や、詰まった行間は、読めない＝伝わらない原因に。下のトグルでBefore（薄い・小さい・詰まった）とAfter（WCAG AA以上・適切な行間とサイズ）を切り替えて見比べてください。
課題
薄いグレー文字・12px・行間が詰まっており、コントラスト比がAA基準（4.5:1）に届かず読みにくい。
対応
文字色をWCAG AA以上のコントラストへ、本文16px前後・行間1.85に。リンクは下線＋十分な色差。
効果
年齢や環境を問わず読める。但し書き・注意事項まで確実に届き、信頼感が上がる。
05 Tap-to-call
電話番号の tel: リンク化＆タップ領域
プレーンテキストの電話番号は、スマホで「長押し→コピー→電話アプリへ貼り付け」が必要で離脱の元。tel: リンクにすればワンタップで発信できます。下のAfterボタンは実際の tel: リンクで、タップ領域も48pxを確保しています。
課題
電話番号がただの文字。スマホでタップしても何も起きず、手入力が必要で発信前に離脱しやすい。
対応
<a href="tel:..."> でリンク化。タップ領域を高さ44px以上に確保し、押しやすく。
効果
スマホからワンタップで発信。今すぐ電話したいユーザーを逃さない。
TEL：03-1234-5678
タップしても反応なし。番号を覚える／手で入力する必要があります。
コード差分（要点）：
- TEL：03-1234-5678
+ <a href="tel:+81312345678">03-1234-5678 に発信</a>
/* CSS: タップ領域を確保 */
+ a[href^="tel:"] { display:inline-flex; min-height:44px;
+ align-items:center; padding:.7rem 1.4rem; }
06 Layout Fix
デザイン崩れ・レイアウト修正
固定幅やはみ出すボタン、折り返さない行は、狭い画面で枠を突き破ります。下のBeforeは width 固定とボタンはみ出しで崩れる例。Afterは min-width:0・flex-wrap・max-width:100% で整えています。トグルで切替できます。
課題
固定幅のカードやボタンが親枠からはみ出し、要素が重なる／横スクロールが出る／文字が切れる。
対応
Flex/Grid 化、min-width:0 で縮小を許可、flex-wrap で折り返し、ボタンを max-width:100% に。
効果
どの画面幅でもきれいに収まる。崩れによる不信感をなくし、操作しやすくなる。
点線＝幅330pxの表示枠（スマホ想定・Before/After共通）。カード幅380px・ボタン320pxの固定指定が枠より広いため右にはみ出し、横スクロールが発生しています（枠内を横にスクロールしてみてください）。
Beforeと同じ幅330pxの枠です。min-width:0 と折り返しの指定で、カードもボタンも枠内に収まります。
「ここだけ直したい」に、ピンポイントで。
このページの修正は、いずれも数時間〜の単発・部分対応が可能なものです。気になる箇所のBefore→Afterを実際に触ってから、お気軽にご相談ください。