依頼内容
まもなく創業80周年を迎える電気設備会社の株式会社良電社様より、コーポレートサイトおよび採用サイトのリニューアル、ならびに会社案内パンフレットの制作をご依頼いただきました。
今回のリニューアルでは、募集要項や会社情報の更新に加え、採用サイトにおいては、社会インフラを支える良電社様の仕事のやりがいや、実際に働く社員様の声を反映し、良電社様の魅力がより伝わる内容へと刷新。
あわせて、電気設備工事の現場を含む写真撮影、社員様へのインタビュー、座談会の実施までトータルで対応いたしました。
ワイヤーフレーム（WF）検討
全体設計として、公開後も社内でスムーズに更新・運用ができるよう、WordPress導入を前提とした投稿しやすい構成をご提案いたしました。
〈コーポレートサイト〉
良電社様が地域イベントへ参加された様子や各種取り組みの報告、日々更新される施工実績など、企業活動の最新情報をタイムリーに発信できる構成を重視。
ページ数や運用負荷を考慮しながらも、情報発信の幅を最大限確保できるよう、投稿のしやすさと拡張性を両立した構成をご提案いたしました。
〈採用サイト〉
メインターゲットは高校生・大学生を想定し、「人」や「仕事」の魅力が直感的に伝わるコンテンツ構成を重視。良電社様らしさが伝わるよう、社員の皆様に多数ご出演いただく前提で設計いたしました。
また、募集要項、社員インタビュー、社内風景の写真、動画コンテンツなど、今後の追加・更新を見据え、WordPress上で柔軟に編集できる構成へ最適化しています。
UI/デザイン（コーポレート）
〈ラフ制作〜トンマナ設計〉
老舗企業としての信頼感を軸に、先代から受け継がれてきた想いをどのように視覚化するかを検討いたしました。特にロゴマークに込められた「力」と「和」という理念に着目し、ロゴを単なる装飾要素として扱うのではなく、サイト全体のデザインの起点となる存在として設計しています。
A案：ロゴコンセプトを軸に役割を分けたデザイン
ロゴのコンセプトである、
・「力（豊富な経験に裏打ちされた確かな技術）」をコーポレートサイトに
・「和（強いチームワーク）」を採用サイトに
それぞれ割り当て、共通のブランド軸を保ちながらも、伝えるメッセージを明確に分けた設計案です。
B案：ターゲットにあわせて見せ方を大きく変えるデザイン
コーポレートサイトと採用サイトで、構成やビジュアル表現を大きく変え、それぞれのターゲットに最適化した見せ方で差別化を図る設計案です。
両案を比較検討することで、ブランドの一貫性と、ターゲットへの伝わりやすさのバランスを重視したトンマナ設計を行いました。
この2つを元に擦りあわせていき、最終的に「B」の内容で決定しました。
〈デザイン作成〉
デザイン制作では、リニューアル感をしっかりと感じられることを前提に、ユーザーが求める情報へ迷わずたどり着ける導線設計を重視いたしました。構成はできる限りシンプルにしつつ、視線誘導や余白設計によって情報の優先度を明確化。従来の信頼感はそのままに、新鮮さと現代性を感じられるデザインを目指しています。
結果として、初めて訪れるユーザーにもわかりやすく、既存の取引先には「進化している企業」という印象を与える設計といたしました。
また、Webサイトの操作に不慣れな方にも配慮し、読みやすい文字サイズに設計いたしました。さらに、イラストアイコンを交えた説明文を掲載し、情報が伝わりやすい構成にしています。イラストアイコンにはGIFアニメーションで動きを加え、単調な印象を避けました。
〈イラスト作成〉
イラストおよびアイコンは、電気工事に共通するイメージの統一感を大切にしながら制作いたしました。配線工事・通信・空調・消防設備など、それぞれの業務内容が一目で伝わるよう、形状や線の太さ、テイストを揃えつつ、役割の違いが直感的に理解できる表現を意識いたしました。情報の補足としてだけでなく、視覚的にもサイト全体の世界観を支える要素として機能するよう設計いたしました。
UI/デザイン(採用サイト)
〈ラフ制作〜トンマナ設計〉
顧客と求職者とでは閲覧者のペルソナが大きく異なるため、コーポレートサイトから採用サイトへ遷移したことが明確に伝わるよう、両サイトのテイストをあえて別物として差別化いたしました。
カラー設計では、基本カラーを水色に設定し、そこから青・緑、さらに青と相性の良い黄色を差し色として取り入れました。
ランダムに多色を使用するのではなく、ベースカラーを主軸に色を振り分けることで、カラフルでありながらも統一感のあるトーンにまとめました。また、採用サイトでは入社後に自分が働く姿をよりイメージできるよう、人や職場の空気感の表現を重視いたしました。トップページのメインビジュアルでは、人物以外の要素を白で構成することで、視線が自然と人物に集まるようデザインしています。
また、採用サイトでは「入社後に自分が働く姿」をよりイメージできるよう、人や職場の空気感の表現を重視いたしました。トップページのメインビジュアルでは、人物以外の要素を白で構成することで、視線が自然と人物に集まるようデザインしています。
〈デザイン制作〉
大掛かりなアニメーションを使わずとも印象的なサイトになるよう、静止しながらも動きを感じさせる要素の自由配置や、フェードインによる要素の登場を取り入れ、訪れたユーザーに少しでも印象を残せるよう意識いたしました。
写真選定においては、年齢層や性別のバランスを重視。ベテラン社員に偏りすぎると固定化された印象になりやすく、若手社員に偏りすぎると良電社様の強みである「歴史があり信頼性の高い会社」という印象が弱まってしまいます。そのため、どちらかに偏ることのないバランスの取れた構成を心がけました。これにより、歴史がありながらも若手社員に任される裁量が大きい会社であることが伝わるビジュアル表現を目指しました。
パンフレット制作
コーポレートサイトと採用サイト、両サイトの内容を盛り込んだ構成でデザインを制作いたしました。
ふたつのサイトを踏襲した形でのデザイン制作の予定でしたが、ふたつのサイトのデザインをそれぞれ踏襲する予定でしたが、テイストが異なるため、それぞれのサイトの良さを活かしながらも統一感を持たせたシンプルなデザインにまとめました。
ベース・アクセントカラーにはコーポレートサイトで用いているネイビーとオレンジを採用し、紙面全体に堅実さを持たせています。一方、「データで見る良電社」のグラフには採用サイトで使用されているカラフルな色味を取り入れ、明るい印象も与えています。情報はブロックごとに整理し、必要な情報を見つけやすく読みやすいデザインに仕上げています。
実装
〈CMSを用いたコンテンツの更新〉
クライアント様が簡単にコンテンツを更新できるよう、WordPressを導入しております。
実装前に、今後更新が発生しそうな箇所を予めヒアリングし、お知らせ、施工実績、募集要項の内容や、動画、社内イメージ写真などを更新できるようにしております。管理画面もできるだけわかりやすい構成にする前提で設計し、あわせて操作マニュアルも制作いたしました。
株式会社良電社 コーポレート・採用サイト
