AI火花検知による火災防止システムのサービスサイト制作

画像認識AIとサーモセンサー技術で、火花・火・煙・熱を瞬時に検知する火災防止システム「Spark Eye」のサービスサイトを制作しました。
リチウムイオン電池の発火事故の増加など、火災リスクは多くの現場で深刻な課題となっています。Spark Eyeは、一瞬の火花さえ0.05秒以下で検知し、IoTによる警報・自動消火制御やクラウドでの可視化までを一気通貫で実現する先進的なシステムです。一方で、AI・サーモセンサー・IoT・クラウドと多くの技術が組み合わさるため、その価値は伝え方を誤ると複雑で分かりにくくなってしまいます。そこでサイト制作では、「技術の説明」に終始せず、「この仕組みが現場の火災リスクをどう減らすのか」を軸に情報を整理することをテーマにしました。
現場が抱える具体的なお悩みから入り、システムの概要・機能・スペック・他製品との比較・導入事例・お客様の声へと、検討担当者が知りたい順に理解が深まる構成に。とりわけ他製品との比較表では、検知対象・速度・可視化・コストといった判断材料を一目で見渡せるようにし、社内検討を後押しします。最終的に資料請求・お問い合わせへ自然につながる、BtoBのリード獲得を見据えたサービスサイトを目指しました。

制作について

ディレクター

防災という社会性の高いテーマだからこそ、「危機感を正しく伝えること」と「冷静に技術を信頼してもらうこと」の両立を意識しました。冒頭で現場のリアルなお悩みを提示して自分ごと化してもらい、そこからSpark Eyeがどう解決するのかを、機能・スペック・比較・導入事例と段階的に裏付けていく構成にしています。専門性の高い情報を扱いながらも、検討担当者が「これなら導入を相談したい」と感じ、問い合わせまで迷わず進める導線を設計しました。
デザイナー

「先進性」と「安心・信頼」を軸にデザインしました。火災という緊張感のあるテーマを扱うため、不安を煽りすぎず、あくまで冷静で頼れる印象になるよう色味やトーンを調整。AIやセンサーといった先端技術の頼もしさが伝わる、シャープで整然としたビジュアルにまとめています。スペック表や他製品との比較表など情報密度の高いパートは、視線の流れを意識して整理し、専門的な内容でもストレスなく読み解ける視認性を大切にしました。
フロントエンドエンジニア

カメラ性能や部品構成、他製品との比較表など、数値・項目の多い情報をどの画面でも崩さず見せることに注力しました。とくに比較表は、PCでの一覧性を保ちながら、スマートフォンでも各項目が読みやすく伝わるよう再構成しています。多機能なシステムゆえに情報量が多いサイトですが、表示が重くならないよう最適化し、資料請求・お問い合わせのボタンへはどのセクションからでもすぐにたどり着けるよう配置しました。