絆様（サービスサイト）｜Web制作実績 レスポンシブ対応｜制作実績

今回のリニューアルの主要な目的として、「自社サイトの集客を強化して、お問い合わせを増やしたい」というご要望をいただきました。そのため各サービスページでは、プランごとの余白を十分に確保することで情報の区切りを明確にし、サービス内容をしっかりと理解できるデザイン設計にいたしました。

また、各プラン内では「基本料金に含まれるサービス」「選べるオプション」「基本料金」といった情報を整理し、それぞれにホワイトの背景を用いることで視認性を向上させています。情報量が多くなりがちなサービスページにおいても、要素ごとの情報の整理とコントラストを意識したデザインにすることで、必要な情報を的確に得られる設計を実現しています。

スマートフォンサイトでは、「遺品整理を必要としている方」「身近な人が急に亡くなり、どうすればいいかわからない方」などの個人ユーザーをメインターゲットとしているため、スマートフォンとPCの使用比率を9：1に想定し、モバイルファーストで設計しております。

お問い合わせ導線として、画面右上には「お急ぎの方へ」ボタンを、画面下部には「電話」「LINE」「メール」という3つのお問い合わせボタンを固定表示しました。そうすることで、突発的なトラブルで早急な対応が求められる場面においても、ユーザーが自身に合った方法で迷うことなくお問い合わせできる導線を実現し、お問い合わせ数増加を後押ししています。

また、トップページ中部に配置した解決事例コンテンツでは、実際の作業料金や作業内容、リアルタイム作業実況といった詳細情報をアコーディオン形式で表示しています。初期表示では必要最低限の情報に留めることでページの縦長化を防ぎつつ、詳細を知りたいユーザーは深掘りできる設計に仕上げています。

さらに、ハンバーガーメニュー内には、6つの主要サービスをサムネイル画像付きの導線ボタンとして配置しました。文字情報だけでは伝わりにくいサービス内容も、視覚情報を加えることでイメージしやすくなると同時に、タップ範囲を広げることで操作性を高めたデザインとなっています。

デザイン面では、あしらいの角を丸くすることで全体にやわらかさを持たせ、ユーザーに対して優しく安心感のある印象を与えるデザインにしました。また、イラストをサイト全体にバランスよく配置することで、親しみやすさを演出しました。文字情報が多くなりがちなサービス内容においても、イラストを適宜取り入れることで情報を視覚的に理解できるよう仕上げています。

さらに、メインサービスである「遺品整理」には企業カラーでもあるブルーを採用し、「特殊清掃」はグリーン、「火災清掃」はオレンジと、サービスごとに明確なカラー設計を行っています。色による明確な区別を設けることで、ユーザーがサービスの違いを判断しやすいデザインにしました。

システム面では、管理者様がタイムリーに更新できる「作業事例」ページをオリジナルのCMSで自社開発しました。こちらのCMSでは、「Before」「After」のお写真や「作業料金」「作業時間」「地域」など、ユーザーが知りたい情報を管理画面から簡単に登録できるシステム設計となっております。

また、遺品整理・特殊清掃・火災清掃などのサービスごとや、＃特急作業や＃夜間対応などのタグごとに事例を絞り込む機能も実装しており、気になる作業事例をスムーズに確認できる仕様にしています。

検索エンジンは、ページ上部の情報をより重要な要素として評価する傾向があるため、狙ったキーワードを適切に含めたコンテンツをページ上部に配置しています。同時に、ユーザーが求めている情報を上部に掲載することで、検索順位の向上と離脱防止の両方を対策しています。