栄智機器様（コーポレートサイト）｜Web制作実績 レスポンシブ対応｜制作実績

今回のリニューアルのもう一つの主要な目的として、「新規顧客からのお問い合わせを増やしたい」というご要望をいただきました。そのため、PCサイトの特徴である画面の大きさを活かし、仕事風景やLPガス機器のお写真を、ホームページの要所に大きく配置しました。そうすることで、事業内容を視覚的に伝えるとともに、誠実に仕事へ取り組む姿勢を印象づけています。

また、トップページには、複数枚のお写真が右から左に斜めに流れるスライダーアニメーションを配置しました。動きのあるビジュアルを取り入れることによってサイト全体に躍動感を与え、ユーザーの関心を引きつける設計に仕上げています。

採用情報ページでは、「地元に貢献している企業で働きたいと思っている学生」「人々の暮らしを支える仕事に転職したいと考えている方」などの個人ユーザーをメインターゲットとしているため、スマートフォンとPCの使用比率を9：1に想定し、モバイルファーストで設計しております。

ホームページ全体において、ブルーやグレーをメインカラーとしてデザインしている中、「採用情報」ページのみお客様のロゴに使用されているグリーンをメインカラーに採用しています。ターゲットの異なる他ページとメインカラーを変えることで差別化を図り、独立性を持たせる工夫を施しています。また、グリーンは「成長」「安心」「信頼」を想起させるカラーであり、求職者にお客様の誠実な社風を印象づけています。

さらに、こちらのページでは、「採用エントリー」への導線ボタンを画面右下に固定表示しました。そうすることで、ユーザーの応募意欲が高まったタイミングで、スムーズにエントリーできる導線設計に仕上げています。

デザイン面では、幾何学モチーフやお客様のロゴと同じ菱形のモチーフをデザインとして用いています。直線や規則性のある形状を基調とするデザインは、安定感や秩序を感じさせる視覚表現として機能し、ユーザーに信頼できる企業イメージを印象づけております。

また、トップページの「施工実績」コンテンツでは、スクロールに応じて背景色がホワイトからブルーに変化する演出を取り入れました。この動きにより、ページ全体に視覚的なリズムが生まれ、ユーザーの目を引きつける効果を生み出しています。そうすることで、自然と「施工実績」ページへの遷移を促す効果を高めています。

システム面では、管理者様がタイムリーに実績を更新できる「施工実績」をオリジナルのCMSで自社開発しました。こちらのCMSでは、「Before／Afterのお写真」「現場名称」「工事内容」など、ユーザーが知りたい情報を管理画面から簡単に登録できるシステム設計となっております。さらに、カテゴリーごとに事例を絞り込む機能も実装しており、気になる施工事例をスムーズに確認できる仕様にすることで、ユーザーにストレスを与えない快適な閲覧体験を実現しています。