株式会社世良電設
コーディング外注対応／設備工事業コーポレートサイト
プロジェクト概要
プロジェクト概要
株式会社オーエスプランニング様からのコーディング外注として、電気工事会社「株式会社世良電設」様のコーポレートサイト制作に参画。
キービジュアル〜強み訴求、事業内容、採用、会社概要、問い合わせまでの情報設計が一気通貫でつながる構成のため、視線誘導（斜め帯・大見出し）とCTA（TEL/メール）が破綻しない実装精度を重視してフロントエンドを組み上げた。
また「お知らせ・施工実績」をInstagram連携で運用する設計のため、更新負荷を上げずに“動いている会社感”を継続的に出せるよう、表示崩れや回遊導線（該当セクションへの誘導）を含めて実装・調整を行った。
※デザイン：株式会社オーエスプランニング（https://osplan.jp/）
制作のポイント
-
強み訴求ファーストのヒーロー設計を崩さない実装
「CONNECTING LIFELINES」などの大きいタイポと斜め帯のレイアウトは、少しでもズレると一気に安っぽく見える。固定値頼みではなく、画面幅変化で破綻しやすい箇所（文字・画像・帯の重なり）を中心に、実機確認前提で調整しやすい構造で組んだ。 -
Instagramを“施工実績/更新”として機能させるための表示設計
Instagramの投稿一覧をそのまま埋めるだけだと、見え方が不安定になりやすい。サイト側のトンマナに馴染む見せ方（セクションの見出し・余白・導線）に寄せ、更新が続くほどページ価値が積み上がる構造を優先して実装した。 -
問い合わせの取りこぼしを減らすCTA設計（TEL/メール/受付時間）
メニューと同列に「問い合わせ」導線を置きつつ、フッター相当でもう一段強いCTA（TEL番号・メール導線・受付時間）を明示して、ユーザーが迷わず連絡できる状態を作った。
公開後の変化
更新コストを抑えた“施工実績の継続発信”を実現
お知らせ・施工実績をInstagram連携に寄せることで、サイト更新の工数を最小化しつつ、現場の動きが見える状態を維持できる構成になった（運用が止まらない設計）。
第一印象で「何の会社か」「強みは何か」が即時に伝わる導線
強み訴求→実績→事業内容→採用→会社情報→問い合わせ、という流れがナビ上もセクション上も揃っているため、閲覧者が目的の情報に迷わず到達できる。
スマホ閲覧を前提にした問い合わせ導線の強化
TEL・メールの導線が視認しやすく、営業時間も同時に提示されるため、スマホからの連絡ハードルが下がる（“電話するか迷う時間”を削る）。