共立機巧株式会社様 コーポレートサイト

愛知県で公共施設や工場向けのポンプを製造・販売する共立機巧株式会社様のコーポレートサイトをフルスクラッチさせていただきました。企画・デザイン・コーディングを一貫して担当し、WordPressを用いて実装しました。
クライアント様からは、「何をしている会社なのか、どんな製品を扱っているかをもっと分かりやすく伝えたい。」「社内の担当者でもサイトのニュースや製品情報を簡単に更新できるようにしたい。」というご要望をいただきました。

課題

現状のサイトは10年以上のまま使い続けており、デザインが古くレスポンシブ非対応な状況でした。
また、CMSを実装されていないため、社内の担当者で情報を更新することが難しく、情報が古いまま放置されていたり新しい製品やお知らせが公開できておらず、ブランドイメージ低下を危惧されておりました。

ターゲット

取引先の20〜30代の若手社員、または新卒就活者や転職者を想定。

目的

取引先や求職者に対し、自社の製品が社会にどのように貢献しているのか、そしてどんな製品を取り扱っているのかを伝え、企業としての信頼感を高める。

サイト設計

情報の追加・編集をクライアント自身で簡単に行えるようにするため、WordPressで実装しました。

クライアントの要望に応じて、商品検索機能とお問い合わせフォームを実装しました。
商品検索機能では、訪問者が目的の商品やサービスを迅速に見つけられるよう、キーワード検索やカテゴリーでの絞り込みフィルターを導入し、検索精度を高めています。
お問い合わせフォームでは、セキュリティ対策としてスパム防止機能や自動返信メール機能を導入し、双方が安心して利用できるようにしました。
また、製品情報の追加や編集をできるように、WordPressにカスタム投稿タイプを実装しました。
これにより、クライアント様自身で情報を柔軟に更新・管理できるようにしました。

デザイン設計

インフラを支える歴史あるメーカーの信頼性を強調するため、堅実さを感じさせるデザインを採用しました。
見出しや装飾にはクライアントの企業カラーに合わせて緑色を採用し、深みのある#47A62Dは信頼性と安定感を与え、鮮やかな#2DA66Aは親しみやすさと活力を加えています。
トップページでは、メインビジュアルで製品の社会的な役割を視覚的に訴求し、製品情報は階層が深くならないよう、9種類のカテゴリーをトップページで一望できるようにしました。
製品情報ページにはカード型レイアウトを採用し、直感的でわかりやすいナビゲーションにしました。

使用ツール

Photoshop/Figma/VSCode/Wordpress

使用言語

HTML/CSS/jQuery/JavaScript/PHP

制作期間

企画：1週間
ワイヤーフレーム：2週間
デザイン：2週間
コーディング(WordPress含む)：3ヶ月

デザイン