株式会社FPEC - FPEC Corporation | 安全は、 技術進歩の伴走者。
株式会社FPECは、可燃性ガスや危険物プラントの防災システムエンジニアリング専門企業です。消火・検知警報設備の設計から、CFD解析を用いた高度な災害シミュレーション(ガス拡散・爆発等)まで対応。プラントの保安防災をトータルでサポートします。
https://www.fpec1.co.jp/
📅公開日:2026/04/15
🙋♀️担当領域:ディレクション/デザイン
🎨使用ツール:Figma
🔗サイトURL:https://www.fpec1.co.jp/
プラント防災コンサルティング会社のFPEC様のコーポレートサイトのリニューアルに携わらせていただきました。チームで制作し、私は「事業内容」と「ご相談の流れ」ページの構成・デザインをメインで担当いたしました。
複雑な技術情報を整理し、唯一無二の専門性を正しく伝えるサイト刷新
全46ページにわたる事業内容ページのディレクション
ご相談の流れページのディレクション
「日本の安全を守る」という重要な事業にふさわしい、誠実なデザインに
Jitterで作成した「動く図解」で先進性を表現
事業内容詳細ページでは、読みやすさを重視したデザインをご提案
旧サイトは情報量が多く整理されていなかったため、ユーザーが知りたい情報をスムーズにキャッチアップできない状況にありました。
本プロジェクトでは「他社との差別化」を狙うのではなく、FPEC様がすでに持っている「絶大な信頼感」を正しく届けることを最優先に定義。膨大な情報をゼロから整理し直し、伝えたい情報が伝わる構成作りを意識しました。
ニッチかつ専門性の高い領域であったため、まずは全事業内容を徹底的に読み込み、ユーザーが直感的に理解できる構成を提案いたしました。
その後はクライアント様との対話を重ね、情報の整合性と、直感的な理解しやすさを両立。安易に文字数を削減すれば「見やすさ」は向上しますが、情報の欠落がユーザーの誤解を招き、結果としてクライアントが長年築いてきた信頼を損なうリスクも考えられました。
そこで、情報量を維持したまま、洗練された図解やアイコン、写真の活用によって理解をサポートする方向性で制作することに。情報密度を保ったままユーザーへ届けるための、新たな最適解を見出す機会となりました。
🔗事業内容一覧ページ
https://www.fpec1.co.jp/business/
新規問い合わせの向上にも寄与する、重要な「ご相談の流れページ」のディレクションも担当させていただきました。
リニューアル前は、業務開始までの手順を示す図解が複雑で、さらに2つあるサポートプランの違いも分かりにくいという課題がありました。
そこで、まずは情報を一つひとつ丁寧に紐解き、「お客様にとって本当に必要な情報は何か」を再定義。プランの差異を明確に整理し、迷いを感じさせないシンプルなデザインに落とし込みました。初めての方でも安心して相談できるよう、心理的なハードルを下げる構成にしています。
🔗ご相談の流れページ
https://www.fpec1.co.jp/process/
「信頼感=青」という既成概念にとらわれず、多くの事例を研究する中で「白と黒のコントラスト」が持つ力強い信頼感に着目しました。FPEC様の「揺るぎない誠実さ」を表現するには、白と黒を基調とした配色が最も効果的であると判断し、青はサブカラーとしてアクセントに留めています。
タイポグラフィにおいては、視認性と品質を両立させるため、和文に Noto Sans JP、欧文に Instrument Sans を採用。読みやすさを担保しつつ、セクションタイトルに用いたスタイリッシュな Instrument Sans が、サイト全体にモダンでハイクオリティな印象を与えています。
コンサルティングの「危険区域の精緻なリスク評価」ページには、Jitterで作成したインフォグラフィックを取り入れました。このサービスによって「危険区域が縮小し、非危険区域が広がる」ことを図解で表現しています。
このようにモダンな表現を取り入れ、先進性を感じさせる工夫も施しました。
事業内容詳細ページ(第四階層)には、サービスに少しでも興味を持ってくださったお客様が訪れると考えられます。その方々に少しでもストレスなくサイトを閲覧していただけるよう、様々なレイアウトや構成、デザインをご提案いたしました。