マルユウエナジー様（コーポレートサイト）｜Web制作実績 レスポンシブ対応｜制作実績

今回、リニューアルの主要な目的として、「ご契約前の方や住居者向けのナビゲーションを充実させたい」というご要望をいただきました。そのため、導線を分かりやすく整理できるよう、PC画面の右上にハンバーガーメニューを固定表示しています。ハンバーガーメニュー内では、「各種お手続き・サポート」「ガス料金・使用量確認」「マルユウエナジーについて」という3つの主要ページへスムーズにアクセスできるよう、サムネイル付きの導線ボタンを大きく配置しました。また、その他のページへの導線ボタンにはアイコンを配置することで、それぞれのページ内容を視覚的に分かりやすくデザインしています。このように、ユーザーの目的に応じたページ導線を工夫することで、ガスをご契約前の方も、すでにご利用中の方も、一目で必要な情報にたどり着ける設計にいたしました。

スマートフォンサイトでは、「ガス料金の支払い方法や各種手続き方法を知りたい方や引っ越し先で、これからガスを契約したい方」などの個人ユーザーをメインターゲットとしているため、スマートフォンとPCの使用比率を8：2と想定し、モバイルファーストで設計しております。
画面の小さいマートフォンサイトでも、スムーズにガスに関する手続き方法を確認できるよう、ハンバーガーメニューの隣に「各種お手続き・サポート」ページへの導線ボタンを書類のアイコン付きで固定表示いたしました。そうすることで、仕事や育児、引っ越し作業などで忙しいターゲットユーザーが、すばやく「各種お手続き・サポート」ページに遷移し、目的に合った手続き方法を簡単に確認できる導線設計に仕上げています。

デザイン面では、「人の暮らしに寄り添う」というサービスの特性をふまえ、ホワイトをベースカラーにやわらかく温かな印象を与えるデザインにしました。さらに、「各種お手続き・サポート」ページでは、契約や申し込みへとつながるフォームコンテンツに、ポップなイラストや視認性の高いカラーを使用しております。このような工夫を施すことで、ユーザーが内容を確認する中で目に留まりやすく、自然とお問い合わせを後押しするデザインに仕上げました。一方で、解約に関する導線は極力シンプルにまとめ、必要な情報がすっきりと伝わるように設計することで、ユーザーの状況や気持ちに配慮したデザインを実現しています。