ケンブリッジフィルターサービス株式会社様のコーポレートサイトを制作しました

サービス: Studioサイト制作代行

納期: 約2ヶ月（2025年10月〜2025年11月公開）

課題

• 既存のWebサイトが古く、業務内容や製品情報が十分に伝わっていなかった
• 特に業務内容と製品紹介のセクションを充実させたいというニーズがあった
• 社内での更新作業がしやすいサイト運用体制の構築が必要だった

実施内容

• ワイヤーフレームの作成とデザインのすり合わせ
• Studioを活用したコーポレートサイトの制作
• レスポンシブ対応による各デバイスでの最適表示
• 製品情報の整理とわかりやすい導線設計
• 納品後の基本操作ガイドの作成

成果

• 業務内容と製品情報を明確に伝えられるサイトへリニューアル
• 2025年11月28日にサイト公開とサーバー移管を完了
• クライアント側で更新可能な運用体制の構築

担当者コメント

2025年10月から約2ヶ月にわたり制作を担当した、ケンブリッジフィルターサービス株式会社様のコーポレートサイトがフルリニューアルされました。

クライアント企業は、空調フィルターの販売から交換・洗浄・測定・清掃まで、一貫したメンテナンスサービスを提供されています。

取り扱い製品数は100点を優に超え、「空気」という目に見えない重要なインフラを確かな技術で支える企業です。

プロジェクトの背景

クライアントは、業務領域が広い一方で、既存サイトでは情報整理が不十分であり、ユーザーに十分に伝わっていないという課題がありました。

特に、企業として強みとなる事業内容と製品情報の掲載量が少なく、ユーザーが必要な情報に到達しづらい構造に。

本プロジェクトでは、クライアントが届けたい「業務内容」と「製品情報」を明確かつ分かりやすく伝えることを主目的とし、ユーザー視点で迷わず情報にアクセスできるサイト構造を構築し、最終的には問い合わせ増加につながる導線設計を意識しました。

また、ノーコードツール「Studio」を用いて構築することで、公開後の更新性や運用のスピード向上も視野に入れています。

事前に行った調査・情報整理

想定されるユーザーが求める情報を洗い出し、閲覧順序や必要な導線を把握するための調査を実施。

同時に、同業他社サイトの情報量・見せ方・ナビゲーションを比較し、サイト全体の情報設計方針を固めました。

情報・構成設計

制作にあたり、次の点を整理・設計した上で制作に着手しました。

• 業務内容と製品情報を中心とした情報階層の整理

• ユーザーが迷わず進める導線を意識したワイヤーフレーム作成
• 視覚的訴求力を高める画像活用型レイアウト案の複数検討
• 読みやすさを担保する背景色・コントラストの最適化
• Studioの「アニメーション」を活用した動きの設計
• ビジュアルの方向性を共有するためのムードボード作成

主要な設計ポイント

導線を重視したワイヤーフレーム制作

ユーザー導線とコンテンツの優先順位付けに注力し、導線を考えた情報アーキテクチャ（IA）を精査。

画像中心のレイアウト検討

製品や業務の理解を促すため、ビジュアル要素を中心とした複数のレイアウト案を作成。

文字情報に頼らず直感的に理解できるデザインを重視しました。

読みやすさを支えるコントラスト調整

ロゴでも仕様されているカラーを元に、背景色と文字色のコントラスト比を適切に設定。

特に技術説明が多いページでは、可読性向上を最優先に調整を行いました。

ムードボードによる方向性の共有

ターゲット層に「信頼感」を与える色・フォント・写真スタイルを整理し、デザインの基準軸となるムードボードを作成し担当者様に共有させていただきました。

デザインの意図について

今回のデザインでは、「情報が多い企業サイトでも、誰が見ても迷わず理解できること」を最重要視。

空調フィルターという専門性の高い分野を扱う企業のため、情報量が多く、従来サイトではユーザーが目的の情報にたどり着きにくいという課題がありました。

これを改善するために、次の3つを軸にデザインを行いました。

1. どんなユーザーでも読みやすく、理解しやすい構成にすること

業務内容や製品情報はどうしても難しい内容が多くなります。そこで、

• 余白を広く取って読みやすくする
• 見出しや段落の構造を整理し、内容を把握しやすくする
• 画像で先にイメージがつかめるようにする

といった工夫を行い、専門的な内容でもストレスなく理解できるようにしました。

2. 製品の特徴がひと目で分かるレイアウトにすること

100種類以上の製品を扱う企業のため、「多すぎて分かりにくい」という状態を避ける必要がありました。

そのため、

• 製品画像のサイズをそろえて見やすく統一
• まず画像で特徴が分かり、テキストは補足として機能
• 主要カテゴリを分かりやすく整理して、迷わずアクセスできる構造に

と設計し、製品理解のハードルを下げました。

3. 企業の信頼性と誠実さが伝わるデザインにすること

空気を扱う企業だからこそ、「清潔感」「誠実さ」「技術力」が自然と伝わるトーンを大切にしました。

具体的には、

• 落ち着いた配色でクリーンな印象を表現

• 大きめの余白で丁寧な企業姿勢を演出
• 読みやすいフォントで信頼感を補強

といった工夫を行っています。

さらに、今回の制作ではノーコードツール「Studio」を使用し、

• ページの読み進めがスムーズになるよう、必要な箇所にだけアニメーションを採用
• スマートフォンでも崩れないレイアウトを丁寧に調整

することで、デザインの意図がそのままサイト体験に反映されるよう構築しています。

最終的にこのデザインは、「分かりやすい」「迷わず情報にたどり着ける」「企業の信頼性が伝わる」という３つの効果をバランス良く実現することを狙ったものです。

制作途中での改善と調整

制作期間中は複数回メールで確認を行い、業務内容ページの説明方法や製品カテゴリの構成について繰り返し調整。

いただいた業務内容リスト・作業風景・製品画像をもとに、画面構成と表現方法を最適化しました。

また、Studio上ではリアルタイムのプレビュー共有が可能なため、細かな修正もスムーズに進められるのが特徴です。

完成デザイン

メインビジュアルは、企業の誠実さ・クリーンさ・落ち着いた印象が伝わるトーンで構成。
業務内容・製品情報がひと目で理解できるよう、シンプルかつ視認性重視のデザインとしました。

Studioのアニメーションによって、自然な動きで読み進められる設計を実装しています。

細かな工夫ポイント

• 背景色と文字色のコントラスト最適化
• 製品画像の統一ルールを整備し、情報アクセス性を向上
• 情報量が多いページほど余白を広く設定
• スマートフォンでも崩れにくいレスポンシブ設計
• Studioの「レスポンシブ管理」によるデバイス最適化

いただいた声や反応

クライアント様からは「情報が整理され、伝えたい内容が正しく伝わるようになった」という評価をいただきました。また、業務内容ページの分かりやすさについて特に高い評価をいただきました。

将来的に社内にて自社サイトを更新する際に備え、基本的な操作手順をまとめた資料をご提供。今後も更新などのサポートをさせて頂く予定です。

ケンブリッジフィルターサービス株式会社
https://cfservice.co.jp/