株式会社TANAVEL様の公式サイト

公開：2025年10月

URL：https://tanavel.co.jp/

ターゲット

兵庫・大阪・奈良・京都に在住で、大量の不要品やゴミ屋敷、遺品整理に悩んでいる方

製作範囲・期間

• コーディング：3週間
• WordPress化：1週間

実装ページ数

6ページ(ホーム、ブログ一覧ページ、各ブログ詳細ページ、プライバシーポリシーページ、Thanksページ、404ページ)

使用ツール

Figma、cursor、WordPress

工夫した点

1. ヘッダーナビからの各項目へのリンク挙動

ヘッダーナビゲーションのリンク先は、トップページ内の各セクション（SERVICE、PRICE、FLOW等）になっています。

トップページ内にいる時はクリックすると滑らかにスクロールして目的のセクションへ移動し、別のページ（ブログ記事など）にいる時はページを移動して該当セクションへジャンプさせる必要があるため、ナビゲーションクリック時のページがトップページかそれ以外かを認識し、挙動を変えるようにJavaScriptで制御しています。

これにより訪問者がどのページからでもストレスなく目的の情報へたどり着ける設計を実現しました。

2. 入力ミスを防ぐ問い合わせフォーム

問い合わせフォームでは、入力しているその場でリアルタイムにエラーチェックを行い、必須項目が埋まっていない間やメールアドレスの形式が間違っている間は送信ボタンをグレーアウトして押せないようにしています。

入力し直すとエラー表示が自動で消え、プライバシーポリシーへの同意を含むすべての条件を満たすと送信ボタンが有効化される仕組みです。

これにより「送信できませんでした」という残念な体験を防ぎ、入力の手戻りを減らすことで問い合わせのハードルを下げ、同時に不完全な情報での問い合わせを防ぐことで対応効率も向上させています。