有限会社EOSplus様のコーポレートサイトを制作しました

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

納期: 約5ヶ月（2025年9月〜2026年1月公開）

課題

有限会社EOSplus様は、住宅から公共施設・生産施設まで幅広い建築領域の設備設計を担い、さらに Press（掲載実績） や Team（人・体制） も強みとしてお持ちでした。

一方で、Web上では魅力が十分に伝わり切らず、以下の課題が顕在化していました。

• 強みが一言で伝わりづらい
  「設備設計」「環境提案」「照明デザイン」など専門性が高く、初見ユーザーが理解するまでに時間がかかる。

• 実績・掲載情報の“探しにくさ”
  Works（実績）や Press（掲載）の量が増えるほど、導線や整理方法が重要になるが、一覧性・回遊性に改善余地があった。

• 採用ページの情報不足・応募動線の弱さ
  仕事内容／求める人物像／チーム体制など、応募判断に必要な情報がまとまっていないと離脱が起きやすい。

• 問い合わせの目的が分岐できない
  「依頼」「相談」「採用」など、目的が異なるユーザーが同じ入口に集まり、コミュニケーションコストが上がりやすい。

実施内容

課題を踏まえ、サイトを単なる「会社案内」ではなく “信頼形成と意思決定を前に進める営業・採用の基盤” として再設計しました。

1.情報設計（IA）
TOP / ABOUT / WORKS / PRESS / TEAM / CONTACT / RECRUIT の7導線で整理

2.コンテンツ設計

• ABOUTで「理念＋会社情報（沿革・実績・有資格者など）」を一括で信頼形成

• WORKSは“用途カテゴリ”で整理し、初見でも迷わない入口設計

• PRESSは掲載物を一覧化し、第三者評価（社会的証明）を最大化

• TEAMは“人の顔”を前面に出し、体制の厚みと安心感を可視化

• RECRUITは「仕事内容→魅力→人物像→体制→応募方法」の順に意思決定導線を構築

3.UI / デザイン
余白・タイポグラフィ・写真主導のミニマル設計（信頼感／品位／視認性）

4.問い合わせフォーム改善
問い合わせ目的（依頼／相談／採用／その他）を分岐し、対応の精度と速度を高める設計

成果

定量・定性の両面で、「迷わず理解できる」「意思決定しやすい」状態を実現しました。

• 目的別導線が明確になり、回遊性が向上
  Works / Press / Team が“根拠”として機能し、閲覧の流れが自然に繋がる構造に。

• 採用ページの情報密度が上がり、応募判断がしやすく
  仕事内容・やりがい・人物像・チーム体制を整理し、応募までの心理的ハードルを低減。

• 問い合わせの質が改善
  問い合わせ種類を分岐したことで、初動対応がスムーズになり、やり取りの往復を削減。

• ブランドの“格”が整い、紹介・採用・協業の場面で提示しやすいサイトへ
  ミニマルな設計により、専門性が高い領域でも「整っている会社」という印象形成に寄与。

• 納品後にマニュアルをお渡し社内で更新できる体制へ

  クライアント側で更新可能な運用体制の構築

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

• 既存情報の棚卸し（実績、掲載、チーム、採用、会社情報）

• 想定ユーザーの整理（依頼検討／協業検討／採用応募）

• 運用要件の確認（Studio前提）
  どの情報が増えるか、どの頻度で更新するか、誰が触る可能性があるかを整理し、更新しやすい構造へ落とし込みました。

情報・構成設計

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

• TOP：写真＋News＋Works＋Pressで“短時間で信頼形成”

• ABOUT：理念＋会社の根拠情報（沿革・実績・有資格者等）を整理して提示

• WORKS：用途カテゴリで入口を明確化（迷わず探せる）＋プロジェクトの広がりも可視化

• PRESS：第三者評価を一覧で見せ、信頼を積み上げる

• TEAM：顔と役割を見せ、体制の厚みを直感的に伝える

• RECRUIT：判断材料→募集要項→応募の流れを一本化

• CONTACT：会社情報＋アクセス＋フォームで迷いなく行動できる導線

主要な設計ポイント

1.「信頼が積み上がる順番」を設計（回遊設計）

設備設計は“専門性が高い＝初見で判断しづらい”ため、単に情報を置くのではなく、ユーザーの理解が進む順番を設計しました。

• TOPで空気感（写真）＋News/Works/Pressを配置

• Worksで実績の具体性を提示（「どんな案件をやっているか」）

• Pressで第三者評価を提示（「外部から評価されているか」）

• Teamで体制と人を提示（「誰がやるか」）

• 最後に Contact / Recruit で行動（相談・応募）へ

→ “会社案内”ではなく、意思決定を前に進めるサイト導線にしています。

2.「増える情報」ほど、運用しやすい構造に

News / Works / Press / Recruitは、公開後に情報が増え続けるカテゴリです。

ここを更新が重い設計にすると、価値が積み上がらず“止まる”ので、Studioの特性を活かして 更新が止まらない構造にしました。

• 一覧はカード設計で統一（追加しても崩れにくい）

• 文字量に上限を持たせ、タイトルと補足の2階層で収める

• 画像比率を揃え、追加時に見た目の品質が保たれるよう設計

→ Studio運用で起きがちな「追加するとガタつく」を潰し、“増えるほど強くなる”デザインにしています。

3.Worksは「探し方」をデザインした（カテゴリ入口）

実績が多い会社ほど、ユーザーは“全部は読めない”ので、最短で自分の関心に到達できる入口が必要です。

Worksを用途カテゴリで見せ、初見でも迷わない探索体験にしました。

• 「住宅／公共／学校／医療福祉／商業宿泊／工場・生産施設」等、用途理解で分岐

• 一覧の視線誘導は「画像→カテゴリ→タイトル」の順に固定

• 追加更新しても一定の品質を保つよう、カード内の情報を最小限に

 “見せたい実績”ではなく、“ユーザーが探したい実績”基準で組み立てています。

4.Pressは「社会的証明」を量で見せる（一覧性）

Press（掲載実績）は、BtoBで効く「第三者評価」の塊です。

ここは“丁寧に説明”よりも、一覧で量と幅を一目で見せる方が信頼形成に効きます。

• 見せ方はシンプルに（表紙 → 媒体名/号数/年）

• 一覧密度を調整し、スクロールで“積み上がり”を体感させる

• Studioで追加しやすい形式にして「掲載は増えるほど価値になる」設計へ

 Pressは“読むページ”というより、信頼を短時間で獲得するページとして設計しています。

5.Teamは「人」を主役にし、会社の温度を伝える

BtoBにおける専門サービスは最終的に「誰が担当するか」で判断されます。

Teamは、スペック情報だけでなく、安心感・誠実さ・チームの厚みが伝わるよう、写真の見せ方を中心に設計しました。

• ダークトーンで世界観を独立させ、ポートレートを主役に

• 肩書→名前→役割の順で読ませ、誰が何を担うかが一目で分かる

• 写真のトーンを揃え、ブランドの統一感を担保

 “採用のため”だけでなく、依頼側の安心材料にもなるページです。

6.Recruitは「判断材料→応募」の順に設計（情報の出し順）

採用ページは“募集要項を並べる”だけでは応募されません。

ユーザーが知りたい順に、概要→魅力→人物像→体制→応募の流れで組みました。

• 先にカードで要点を提示（仕事内容／魅力／人物像／チーム）

• 募集要項はアコーディオン等で整理し、情報過多で疲れさせない

• 応募方法は視認性高いCTAで明確化

Studioでも編集しやすい構造にして、募集内容の更新がしやすい状態にしています。

7.Contactは「目的別」＋「迷わせないUI」

問い合わせは“迷わせた瞬間に離脱”が起きます。

そこで、フォーム内で目的を分岐し、入力も最短で終わるよう整理しました。

• 問い合わせ種別（依頼／相談／採用／その他）を明確に

• 必須表示・入力順の整備で迷いを削減

• 会社概要・アクセス・フォームを1ページで完結

運用側の初動も速くなるため、ユーザー体験と業務効率を同時に改善します。

デザインの意図について

1.目指したのは「静かな信頼」＝余白と整列で“精度”を見せる

建築・設備領域は、派手さよりも 精度・誠実さ・堅実さ が信頼に直結します。

そのため、装飾を増やすのではなく、余白と整列で“仕事の丁寧さ”を伝える設計にしました。

• 余白は広めに取り、情報の格を上げる

• 文字と写真の整列で、視線の迷いをなくす

• パーツの数を抑え、コンテンツの信頼性を引き立てる

2.写真を主役にして「言葉より先に空気感」を伝える

設備設計は文章で説明すると難しくなりがちです。

そこで、ファーストビューやWorksの写真を主役にし、“どんな建築に関わっている会社か”を直感で理解できるようにしました。

• TOPは写真で第一印象を決定

• Worksは写真で興味を引き、必要なテキストだけ添える

• Pressは表紙で社会的証明を瞬時に理解させる

3.タイポグラフィで「読む順番」をつくる（階層設計）

テキスト量が増えるほど、デザインは“読みやすさ”が価値になります。

見出し→要点→補足の階層を明確にし、視線誘導で理解を助けました。

• 見出しは余白と字間で“品位”を作る

• 本文は行間を広めにし、読み疲れを防ぐ

• 小さな注釈はコントラストを落として主役を邪魔しない

4.ミニマルでも洗練された印象に

今回は「ミニマルでありながら、作り込みの質感が伝わる」バランスを狙っています。

• コンポーネントの統一（共通パーツ）で全体の質を担保

• 写真比率と余白ルールを定義し、追加しても崩れない

• シンプルな分、ディテール（間隔・整列・行間）で差をつける

5.白と黒のコントラストで「ページごとの役割」を切り替える

Teamページをダークトーンにするなど、ページごとに“体験の温度”を切り替えています。

これは装飾のためではなく、記憶に残すための演出です。

• 白：情報を正確に読む（About/Works/Contact）

• 黒：人の印象を残す（Team）

• 役割が変わると自然に気持ちが切り替わり、回遊が続く

制作途中での改善と調整

制作期間中は複数回メールで確認を行い、Topページの実例画像の見せ方やWorksページの詳細について繰り返し調整。

Studio上でプレビューしながら、ブレイクポイント別に以下を微調整しました。

• 見出し階層、行間、段落間のリズム

• 一覧（Works/Press）の密度と視線誘導

• スマホ時の画像比率・カラム落ち・タップ領域

• Recruitの情報量（読める量）と詳細表示のバランス

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

完成デザイン

完成版は、閲覧者が「実績→掲載→人→相談/応募」と自然に進める構造になっています。

さらにStudioで構築したことで、公開後も更新・改善が止まらない状態を作れた点が大きな価値です。

細かな工夫ポイント

• 追加更新で崩れやすい箇所（カード・一覧）の“崩れにくい設計”

• フォームの必須表示・種別選択で迷わせない

• 共通パーツ化で全ページの品質を一定に（更新コストを下げる）

• 外部埋め込み（Map等）を含めても、ページの余白設計が破綻しないレイアウト設計

今後について

将来的に社内にて自社サイトを更新する際に備え、基本的な操作手順をまとめた資料をご提供させていただきました。

今後も必要に応じて、更新などのサポートをさせて頂く予定です。

有限会社EOSplus
https://www.eosplus.net/