トラブルなんでも解決屋様（サービスサイト）｜Web制作実績 レスポンシブ対応｜制作実績

画面の大きいPC用サイトでは、お客様の強みをファーストビューで訴求できるよう、メインビジュアルにこだわりました。具体的には、若い女性やサラリーマンなど、異なる4人のターゲットが笑顔になっているお写真をメインビジュアルのデザインとして使用することで、トラブルを抱えて悩んでいるユーザーが、トラブルを解決した後の明るい気持ちを感じ、安心してお問い合わせいただけるように工夫しております。

また、画面下に「専門家にLINEで相談」と「オンラインカウンセリング」という2種類のCV導線を固定配置し、ユーザーがどのページからでもスムーズな流れでお問い合わせしていただけるようレイアウト設計も工夫しています。

一問一答形式の「オンラインカウンセリング」ページでは、ユーザーの相談内容や希望の予算を詳細に把握することができ、最適な専門家の手配がスムーズに行えるため、ご担当者様の業務効率化にもつながります。

モバイル用サイトでは、「離婚した元妻と復縁したい方」や「SNSでの誹謗中傷に悩んでいる方」など、特に40～50代の男性をメインターゲットに設定し、スマートフォンとPCの使用比率を8：2と想定しモバイルファーストで設計しております。

今回、目的の一つとして「お問い合わせを増やしたい」というご要望をいただきました。ユーザーの目的に合わせてお客様の強みをしっかりと訴求するため、「男女トラブル」「家族トラブル」「誹謗中傷トラブル」「法人トラブル」という4種類のサービスを、それぞれ個別のページとして作成しました。各サービスページでは、具体的なトラブル内容ごとのご依頼例や料金、トラブル解決のポイントなどを掲載することで、ユーザーに安心してお問い合わせいただくためのコンテンツにしました。

また、主要ページへの導線設計にこだわり、メインビジュアルの下に「男女トラブル」「家族トラブル」「誹謗中傷トラブル」「法人トラブル」という4種類のサービスページへの導線を配置して、ユーザーが最短導線で必要な情報にたどり着ける導線設計を行っております。さらに、各サービスを視覚的に差別化するため、男女トラブルは「ピンク」、家族トラブルは「オレンジ」など色分けをすることで、視覚的に差別化できるようユーザビリティを考慮しております。

ユーザーが抱えているトラブルが相談対象であるとわかることで安心してお問い合わせいただけるよう、トラブル事例を各サービスにつき5~10例掲載しました。モバイル用サイトでは、トラブル事例を横スクロールで見られるようにすることで、スマートフォンでも見やすいレイアウト設計になっています。

デザイン面では、トラブル解決の専門家としての「信頼感」がサイト全体から伝わるよう、メインカラーに「ネイビー」を使用し、知的さや真面目さが感じられるデザインを意識しました。また、メインターゲットとなる40~50代の男性に合わせて、ボタンの色をゴールドにすることで、「高級感」のある落ち着いた印象に仕上げました。

さらに、画面の狭いモバイル用サイトでも見出しが目にとまりやすいよう、文字の下に幅広の帯を引いたデザインに仕上げました。PCよりも文字のサイズを大きくし、ボタンもタップ領域の広い大きめのデザインにすることで、スマートフォンでも見やすいよう工夫をしています。

システム面では、ユーザーが相談内容を具体的にイメージできるよう、トラブルの事例や対処方法をまとめた「トラブル記事」をオリジナルのCMSで自社開発しました。こちらのCMSでは、トップページに押し出したい記事の表示を、専用の管理画面からボタンひとつで簡単に切り替えられるため、管理者様の負担を減らしながら、その時々でお問い合わせの多いトラブルに関連する記事を更新していただけます。

また、関連キーワードの検索でヒットしやすくするため、トラブルを未然に防ぐ予防策や対処方法をまとめた「トラブル記事」をオリジナルCMSで自社開発しました。投稿されたコラムは、「男女トラブル」「法人トラブル」などの各サービスページに連動して表示されるため、具体的な事例を知りたいユーザーの理解度を高めて、CV率アップへの後押しとなるコンテンツとしてご活用いただけます。