- UI/UX
フォームのエラーが直った瞬間、入力欄を1回だけ光らせる ─ ポジティブフィードバックでCVR改善
こんにちは、株式会社ファストコーディングのBigViです。最近、夫と一緒にオンラインで旅行の予約をしました。フォームに入力していて、電話番号の形式が違うってエラーが出ました。直したのに、直したかどうかわからなくて不安でし […]
- UI/UX
比較表で”違い”にだけ動きを ─ 差分セルの一時ハイライト
比較表で「違い」がわかりにくい問題を、差分セルだけを一瞬ハイライトするCSS＋JavaScriptで解決。IntersectionObserverで表の表示を検知し、data-diff属性のセルを300msフラッシュさせる実装方法を、HTML・CSS・JSのコード付きで解説します。A/Bテストでは滞在時間が75%増、CTAクリック率が約42%...
- UI/UX
滞在時間を伸ばす！マイクロインタラクションのコーディング実例
CSSだけで実装できるマイクロインタラクションの実例を紹介。ボタンホバー、フォームフォーカス、スクロール連動フェードイン、カードの浮き上がりエフェクトの4つをコード例付きで解説。prefers-reduced-motionによるアクセシビリティ対応や、導入判断の基準も整理しています。
- UI/UX
疑問→回答の距離を縮める ─ FAQの自動スクロール＆ワンショット展開
FAQページで「答えが見つからない」問題を解決！URLハッシュを使った自動スクロール&ワンショット展開の実装方法を解説。detailsタグとJavaScriptで特定のQ&Aに直接誘導し、サポート問い合わせを37%削減した実例も紹介。UX改善とCVR向上に効果的なFAQ実装テクニックです。
- UI/UX
興味を持ちそうなタイミングで実績をチラ見せ（トースト表示）
第2セクション到達時に実績をさりげなく表示するトースト通知の実装方法を解説。IntersectionObserverとCSS・JavaScriptで、UXを損なわない配慮（1.5秒表示、音なし、1回のみ）により社会的証明効果を高める技術を紹介します。
- UI/UX
“次にすべきこと”が現れる ─ 説明文読了で次のCTAを淡くスライドイン
IntersectionObserverで読了を検知し、適切なタイミングでCTAボタンをスライドイン表示させるUX改善テクニック。JavaScriptとCSSアニメーションを使った実装方法とCVR向上の効果を解説します。
- UI/UX
価格比較で”選ばせる”─ 中央の列をハイライト
スマホの価格表で離脱率67%の問題を解決。横スクロール時に中央のプランだけをハイライト表示する実装で、プラン選択率が52%向上した事例を紹介。CSS変数とJavaScriptを使った実装方法をコード付きで詳しく解説します。
- UI/UX
CVに繋げるUI/UXデザインのポイント（３）
こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 今回もCVに繋げるUI/UXデザインのポイントをご紹介します。CVを妨げる要因は色々ありますが、ユーザーにとって初めて訪れたサイトやサービス […]
- UI/UX
CVに繋げるUI/UXデザインのポイント（２）
こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 前の記事で、CVに繋げるデザインを作るためには、ユーザーの見えない心理を掴み、情報設計することが大切であると説明しましたが、今回はそれををい […]
