Works / Web Design / ふくふくリフォーム
ふくふくリフォーム ホームページ
「街の住医」として地域に寄り添うリフォーム会社のホームページを、会社案内をもとに、構成や文章、デザイン、SEO の設定まで担当しました。
- CLIENT
- 株式会社福田工務店
（ふくふくリフォーム） - ROLE
- 構成／デザイン／サイト構築／ライティング／画像加工／レスポンシブ対応／SEO 設定（AIにも伝わる情報の整理）
- TOOL
- AIおりこうブログ
課題
スタイルの自由度が低い専用ツール（AIおりこうブログ）の中で、「どんなことができるリフォーム会社なのか」を、初めて訪れた方にも分かりやすく伝える必要がありました。
提案
目を引く動きでクリックを誘うより、言葉で伝わることを大切にしました。見た目は静かでも、読み進めるうちに「この会社に相談してみよう」と思っていただけるよう、ひとつひとつの言葉と並びを整えています。
「何ができる会社か」が伝わる構成に
会社案内をもとに、冒頭のリード文や「わたしたちの選ばれる理由」など、会社の在り方が伝わる文章を自分の言葉で書き起こしました。そのうえで、サービスをカードの形でカテゴリーごとに分け、知りたいことにすぐたどり着けるようにしています。
検索や AI に、正しく伝わるように
どんな会社が、どこで、どんなリフォームをしているのか。人にも検索エンジンや AI にも読み取ってもらえるよう、サイトの中の情報を一つずつ整えています。
- 画像のファイル名に、施工の種類と所在地を入れる
- 画像のキャプションや代替テキストに、キーワードを入れる
- メタ情報に、所在地・会社名・リフォームに関する言葉を入れる
SERVICE
ふくふくリフォームができること
AWARD
コンテスト受賞実績
REASON
わたしたちの選ばれる理由
見出しの決まりごとを、すべてのセクションでそろえる
英字の小見出し、見出し、その下の短い青い線。この三つの組み立てを、「できること」「受賞実績」「選ばれる理由」など、すべてのセクションで同じにしました。どこまで読み進めても同じリズムで見出しが現れるので、初めて訪れた方でも迷わずに読み進められます。「選ばれる理由」では「理」の一文字だけを青にして、静かな中にも目が留まる場所をつくっています。
スタイルが効きにくい環境で、見た目をひとつずつ組み立てる
このサイトの仕組みでは、用意したスタイルがうまく反映されないことが多く、見た目の指定はカスタムHTMLの中に直接書き込む必要がありました。サービスのカードも、青い見出し帯や角の丸み、枠線の色まで、ひとつずつコードで組み立てています。書き方にはずいぶん苦戦しましたが、決められた仕組みの中でも、伝えたいことをきちんと形にできるようになったと思っています。
スマホでの見え方
結果
「サイト全体の動線が良くなり、どんなことができるリフォーム会社なのかが分かりやすくなった」
公開後、「AIに勧められて来た」というお客さまが続いています。
いまも手直しを続けていて、これから施工実績の独立したページをつくる予定です。コンテストの受賞実績からも、その施工事例をより深く見ていただけるページを加えていきます。
LINE DESIGNあわせて制作：LINEリッチメニューホームページと同じ色でそろえ、電話・LINE・地図への入口をまとめました →