田中瓦店のホームページ

ページの構成（上から順に）

1. 01最初の画面

   瓦屋根の写真に「瓦の屋根に、確かな技を。」の一文を重ね、対応エリア・受付時間・お見積もりが無料であることを3つの数字で添えました。「ご相談・お見積り」と電話のボタンも、ここに置きました。

2. 02当店について

   拠点の所在地、九州全域と山口県の対応エリア、受付時間、保有資格を、大きさの違う4つの枠にまとめ、一目で見渡せるようにしました。

3. 03サービス

   神社仏閣の修繕、古民家の再生、一般住宅の瓦工事の3つを、濃い色の面に番号付きのカードで並べました。

4. 04ご依頼の流れ

   ご相談、現地調査・お見積り、施工、お引き渡しの4段で、初めて依頼する方が先の見通しを持てるようにしました。

5. 05対応エリアの帯

   8つの県の名前を横に流れる帯で見せ、遠方の方にも対応していることが伝わるようにしました。

6. 06ご相談・お見積り

   お電話の番号と受付時間を大きく示し、その横にお問い合わせフォームを並べました。

1ページにまとめるときに工夫したこと

• 迷わず連絡できる

  相談のボタンを最初の画面と最後の節の両方に置きました。上部のメニューは常に表示され、電話番号のボタンからそのまま発信できます。スマートフォンでは、画面全体に開くメニューにしました。

• 瓦らしさを色と書体で

  瓦の藍黒、生成り、素焼きの朱の3色でまとめ、見出しには明朝体を、最初の画面には縦書きの一文を使いました。写真の上に細かな粒子を重ね、落ち着いた質感にしています。

• 表示の軽さと、動きへの配慮

  写真は画面の大きさに合わせて読み込み、お問い合わせフォームは、その節に近づいてから読み込みます。スクロールに合わせた表示の動きは、動きを控える設定の端末では止まるようにしました。

• 検索エンジンへの基本設定

  瓦工事店であることと所在地・対応エリア・保有資格を、構造化データで検索エンジンに伝えています。SNSで共有されたときの画像や、ホーム画面に追加したときのアイコンも用意しました。