- HTML/CSS
そのアニメーション、本当に必要ですか？─ 「動きすぎて気持ち悪い」を防ぐCSSの書き方
おはようございます！株式会社ファストコーディングの働くおかんです。 先日、上の子（小学生）と一緒にあるキャンペーンサイトを見ていたんです。画面を開いた瞬間、ロゴがくるくる回って、背景がグラデーションでうねって、テキストが […]
- HTML/CSS
フォームのエラーが直った瞬間、入力欄を1回だけ光らせる ─ ポジティブフィードバックでCVR改善
こんにちは、株式会社ファストコーディングのBigViです。最近、夫と一緒にオンラインで旅行の予約をしました。フォームに入力していて、電話番号の形式が違うってエラーが出ました。直したのに、直したかどうかわからなくて不安でし […]
- HTML/CSS
「出荷指示書、毎回FAXで送っていませんか？」─ kintoneで出荷管理をペーパーレス化する
皆さんこんにちは。kintoneアプリエンジニアのtomiokaです。 先日、食品メーカーのお客様から「出荷ミスを減らしたい」と相談がありました。 従業員80名ほどの会社で、受注が入ると営業担当がExcelで出荷指示書を […]
- HTML/CSS
「担当者が辞めたらプロジェクトが止まった」を防ぐ仕組み ─ フロントエンド制作会社が見た引き継ぎの落とし穴
株式会社ファストコーディングで営業を担当しています長谷川と申します。お客様とお話ししていて気づいたことや、フロントエンド開発・コーディング制作界隈で最近流行っていることを書いていこうと思っております。どうぞ宜しくお願いし […]
- HTML/CSS
「配車表をExcelで回すのが限界です」─ kintoneで配車管理をデジタル化する
運送会社の配車管理をExcel＋LINEからkintoneに移行する方法を解説。車両・ドライバー・案件の3アプリ構成、JavaScriptによる配車ダッシュボードや空きドライバー自動抽出、Webhook通知など、実案件で効果が出たカスタマイズ事例を紹介します。
- HTML/CSS
“キーボードだけで使えるUI”を最小コードで ─ Roving TabindexとFocus Trapの実装法
Roving TabindexとFocus Trapの2パターンで、キーボードだけで操作できるアクセシブルなUIを実装する方法を解説。メニュー・タブ・モーダルのフォーカス管理をReactとVueの両方のコード付きで紹介します。外部ライブラリ不要、約100行で実装可能です。
- HTML/CSS
比較表で”違い”にだけ動きを ─ 差分セルの一時ハイライト
比較表で「違い」がわかりにくい問題を、差分セルだけを一瞬ハイライトするCSS＋JavaScriptで解決。IntersectionObserverで表の表示を検知し、data-diff属性のセルを300msフラッシュさせる実装方法を、HTML・CSS・JSのコード付きで解説します。A/Bテストでは滞在時間が75%増、CTAクリック率が約42%...
- HTML/CSS
“動かすけど軽い” FLIPアニメーション設計 ─ React/Vueで60fpsを維持する実装法
カードの並び替えやフィルタ後のリスト再配置で60fpsを維持するFLIPアニメーション設計を解説。GoogleのPaul Lewisが提唱したFirst→Last→Invert→Playの4ステップで、transform主体のGPU合成アニメーションを実現します。ReactのuseLayoutEffect、VueのTransitionGroupでの実装例とパフォーマンス対...
- HTML/CSS
疑問→回答の距離を縮める ─ FAQの自動スクロール＆ワンショット展開
FAQページで「答えが見つからない」問題を解決！URLハッシュを使った自動スクロール&ワンショット展開の実装方法を解説。detailsタグとJavaScriptで特定のQ&Aに直接誘導し、サポート問い合わせを37%削減した実例も紹介。UX改善とCVR向上に効果的なFAQ実装テクニックです。
