ヨネダ商店の窓悩み.comをスマホ対応しました。
既存の写真・配色・記事を引き継ぎ、179ページの表示を調整しました。
小さな画面でも読んで、相談先へ進めることを大切にした改善事例です。
スマホで読むと、文字と写真が小さい
窓悩み.comには、施工写真、窓の悩みへの回答、商品を比べる実験など、専門店ならではの情報が積み重ねられていました。担当者の顔が見えることも、このサイトらしさの一つです。
一方、改修前はパソコン向けの横幅を前提とした表示でした。スマホで開くと、横長の画面が全体的に小さくなり、文章や案内を読むには拡大が必要になります。
窓のことで困ってサイトを開いた方に、施工写真や説明を見てもらいたい。そのために、まず小さな画面での読みやすさを整えることにしました。
変えるのは、画面に合わせた並び方
今回の出発点は、今のデザインを活かしたままスマホに対応することでした。写真や記事を入れ替える全面リニューアルではなく、画面の広さに応じて表示を調整する方法を選んでいます。
青い空と緑の背景、窓の悩みを案内するイラスト、担当者の写真は引き継ぎました。スマホでは横並びの要素を縦に並べ、画像や文章が画面幅に収まるようにしています。
このように、同じホームページを画面サイズに合わせて表示する仕組みが、レスポンシブ対応です。これまでのサイトらしさを残しながら、読むときの負担を減らすための方法です。
トップだけでなく、下層ページも
トップページが読みやすくなっても、施工例や料金のページに進んだ途端に文字が小さくなると、調べる途中で困ってしまいます。
そこで、施工例、窓の悩みへの回答、会社案内、料金、お問い合わせなど、対象の179ページへ表示の調整を加えました。既存のページと記事を活かし、サイトの中を移動しても読み進められるようにしています。
内容を書き換えることと、スマホでの表示を整えることは、別々に考えられます。今回は、長く蓄積してきた説明や施工写真を残すことを優先しました。
読みやすさを、相談のしやすさにつなぐ
スマホで見直したいのは、本文の大きさだけではありません。写真が画面からはみ出さないか、案内を指で押せるか、電話やメールの相談先を見つけられるか。実際に使う順番で確認することが大切です。
このサイトでは、スマホの上部に担当者の写真、受付の紹介、電話とメールの案内が順に見えるようにしました。電話番号はタップして発信画面へ進める形にしています。
お問い合わせページも、小さな画面で入力欄を見られるように調整しました。フォームの送信処理は既存の仕組みを引き継いでいます。
179ページを、複数の画面幅で確認
2026年10月の対応時には、対象179ページを幅375・390・768・1280pxで表示し、横方向にはみ出していないことをブラウザで確認しました。スマホに近い幅だけでなく、タブレットやパソコンに近い幅でも確かめています。
あわせて、会社案内への移動、電話のリンク、問い合わせ欄への入力などを確認しました。
ここで確認したのは、表示と操作の変化です。問い合わせ数や受注数の増減を示す事例ではありません。
スマホ対応が、いま必要な理由
ホームページを紹介された方が、その場でスマホから開く。窓の結露が気になって、部屋で施工例を調べる。こうした場面では、小さな画面で説明を読めることが、その仕事を知ってもらうための入口になります。
良い施工写真や詳しい説明があっても、読むたびに拡大したり、画面を左右に動かしたりする必要があれば、内容を確かめる手間が増えてしまいます。スマホ対応は、すでにある情報を、見に来た方へ届けやすくするための改善です。
検索から訪れる方への配慮も必要です。Googleの公式案内では、インデックス登録にモバイル版のコンテンツを使用すると説明されています。スマホでも必要な本文や写真を見られる状態にしておくことは、検索向けの情報を整えるうえでも基本になります。
今のホームページを、活かして改善する
気に入っているデザインや、積み重ねてきた施工例があるなら、まずそれを活かす方法から考えられます。窓悩み.comでは、既存サイトの雰囲気を引き継ぎ、画面に合わせた見せ方を調整しました。
ただし、掲載内容や相談の流れまで見直したい場合は、スマホ対応に加えて情報の整理が必要です。表示を整えることと、内容を更新することを分けて考えると、今のサイトに必要な改善を選びやすくなります。
まず、ご自身のホームページをスマホで開き、本文を読めるか、写真を見られるか、相談先まで進めるかを確かめてみてください。今のデザインを残して直せるか迷ったときは、今あるホームページの改善を相談するからご相談ください。