ワカシマガラス様（コーポレートサイト）｜Web制作実績 レスポンシブ対応｜制作実績

今回リニューアルのもう一つの目的として、「対応サービスをより詳細に伝えたい」というご要望をいただきました。そのためPCサイトでは、ヘッダーの「その他サービス」にメガメニューを設置いたしました。

メガメニュー内には、「カーフィルム施工」「ガラス研磨」「ガラス撥水・コーティング」など計7つの詳細ページをサムネイル画像付きの導線ボタンとして配置しました。メガメニューを見るだけで、提供しているサービス内容を把握することができ、気になるサービスがあった際も迷うことなく詳細ページへ遷移できる構成に仕上げています。

さらに、「お急ぎの方へ」ページの各サービス紹介コンテンツでは、「サービス」「含まれるサービス」「対応メーカー」「施工時間」という4つのメニューを、スクロールに追従するよう画面左側に固定表示しました。急いでいるユーザーが特に知りたい情報へすぐに遷移できる導線に仕上げることで、情報探索のストレスを軽減し、スムーズにお問い合わせへ進めるよう工夫を施しています。

スマートフォンサイトでは、「輸入車のガラス交換をしたい方」や「車のガラス傷を修理したい方」などの個人ユーザーをメインターゲットとしているため、スマートフォンとPCの使用比率を7：3に想定し、モバイルファーストで設計しております。

各サービスページをスクロールすると、画面上部にアコーディオンメニュー形式の目次が固定表示されるようにしています。情報量が多く縦長になりがちなスマートフォンサイトでも、目次を開閉できる仕様にすることで圧迫感を抑え、スマートフォン特有の閲覧ストレスを軽減することを意識しました。さらに、必要な情報へすぐにアクセスできるため、情報が見つからないことによる離脱を防止する効果があり、訪問ユーザーを逃さない設計となっています。

デザイン面では、自動車ガラス修理の専門店としてユーザーに安心感・信頼感を与えられるよう、全体のテイストや写真選定など細部にまでこだわっています。

トップページのメインビジュアルでは、写真が切り替わるタイミングにあわせて、ガラスの質感を連想させるダイナミックなアニメーションを採用しています。また、メインビジュアル直下の「選ばれる理由」コンテンツには、ガラスの輝きを感じさせるイラストを背景に使用し、導線ボタンのマウスオン時には斜めにスライドしながら色が変化するアニメーションを取り入れました。そうすることで、サイト全体に統一感を持たせ、専門店としてのブランドイメージ向上につなげています。

さらに、実際に輸入車の修理を行っている社員の方々を、弊社のプロのカメラマンがこだわりを持って撮影しました。現場のリアルな様子を捉えたお写真をサイト全体に配置することで、サービス内容を具体的にイメージしやすくし、ユーザーに安心感と信頼感を与えるデザインに仕上げています。

システム面では、お客様自身で新しいエリアページを作成できる「エリアページ」をオリジナルのCMSで自社開発しました。こちらのCMSでは、公開したい「都道府県」「市区町村」に関する情報を記載したCSVファイルをアップロードすることで、各エリアページを生成できるシステム設計となっています。そうすることで、狙ったキーワードでの自然検索流入の強化を手軽に行うことができます。