ウェブサイト／電気工事・設備保守

篠瀬電設工業

見えなくなる仕事を、
正面から見せるサイト。

静岡の架空の電気工事会社を題材にした、企業紹介のウェブサイトです。住宅の小さな工事から工場の受変電設備の更新までを、法人と個人の入口に分けて案内し、事業内容と施工実績から相談へつながる構成にしました。

作品を開く

架空の事業者を題材にした自主制作です。

法人と個人、
入口を分けて置く。

頼む側の事情が、法人と個人で大きく違う業種です。トップの早い位置に用件別の入口を置き、元請けの方は事業内容へ、自宅の困りごとは料金の目安へ進めるようにしました。

その先は強電・高圧受変電・省エネ・弱電・保守点検の5系統、点検の計画、施工実績、採用と続きます。会社を知ってから相談へ向かう順序です。

深い紺と白に近い地色を基調に、見出しは太いゴシック体を使用。ヘッダーは社名の銘板、6つのナビ、相談ボタンを、表示灯の付いた独立した箱としてブレーカーのように横一列に並べました。トップは全画面の映像から始まり、スクロールに合わせて現場の場面が進みます。

写真に重ねるコピーは不透明な紺の帯に載せ、人物の顔を避けて配置。本文は大小の四角い区画を細い罫線で仕切り、写真・数値・説明を組み合わせています。スクロールに合わせて罫線を光が流れ、届いた区画の縁が青く光ります。

施工実績のページでは、入力するたびに該当する事例だけが残り、件数の表示も変わります。工場・倉庫・ビル・福祉施設・住宅の5件を、用途や工事の内容から探せます。

お問い合わせは入力内容の確認画面まで進みますが、送信も保存もしないことをページ上に明記しています。料金の目安では、個人向けの小工事の価格帯を表にまとめ、金額の幅を棒で示しています。

スマートフォンでは現場の映像を左右を切り詰めて画面いっぱいに敷き、下から暗くなる地に、紺の帯に載せた見出しと相談ボタンを重ねています。ヘッダーは社名と「メニュー」の2つの箱だけにし、開くとナビの箱が盤面のように並びます。本文の区画は1列に積み替わります。