コズデザイン一級建築士事務所

コズデザイン一級建築士事務所Webデザイン01
web direction, photo direction, web design, web development

概要

大阪を拠点に上質な空間デザインを手掛ける、株式会社 COS design(コズデザイン)様のコーポレートサイトリニューアルを担当しました。

COS design の philosophy は、「まだ言葉にならない想いに寄り添うこと」。
その姿勢を英訳した“Forming the unspoken – from COS” を、今回の Web リニューアルの核として据えています。

建築事務所としての信頼性と、“言葉にならない想い” を丁寧にすくい上げる同社の姿勢を、Web 上で誠実に翻訳することを目指し、情報設計・デザイン・実装まで一貫して担当しました。

COS design一級建築士事務所スマホWebデザイン03
COS design一級建築士事務所スマホWebデザイン02

背景

COS design 様からは、Webサイトのリニューアルをご検討され、弊社お問い合わせフォームよりご相談をいただきました。

既存サイトは BtoC 向けの構成が中心で、法人顧客が求める情報や専門性が十分に伝わりにくい状態でした。

  • BtoC 実績が中心で、ターゲットが法人に最適化されていない
  • トーンがややカジュアルで、建築事務所としての信頼性が弱い
  • BIM や SERVICE の情報が不足
  • トップページの情報量が少ない
  • ブログ記事が少なく、SEO の基盤が弱い
  • 「大阪 建築設計」「BIM」「意匠設計」などの主要キーワードで上位表示が難しい

さらに、COS design 様が本来持つ「技術・実績・設計思想・対話姿勢を通じて、ユーザーの不安や期待に寄り添いながら、安心と納得の空間づくりを実現できる」という強みが、
Webサイトには十分に反映されていないという課題もありました。
こうした状況を踏まえ、BtoB 視点での再構築、情報の深度化、印象設計の刷新、SEO 基盤の強化をリニューアルの大きな方向性として設定しました。

COS design一級建築士事務所スマホWebデザイン01

ターゲット

COS design 様が主に支援するのは、保育園・医療施設・社会福祉施設・オフィス・工場・倉庫・マンション管理者など、法人層を中心とした幅広い事業者です。
彼らが抱える課題は、

  • 信頼できる設計事務所に依頼したい
  • 法的基準や安全性を満たした設計が必要
  • 予算内で進めつつ、長期的な維持管理も考えたい
  • 実績のある会社に任せたい

その背景には、
“任せたいけれど、関わりたい” という本音があります。

  • 押しつけられたくない
  • 専門用語で置いていかれたくない
  • 自分たちの想いを大切にしてほしい
  • 一緒に確認しながら進めたい

COS design 様は、この“葛藤”に寄り添い、専門性と対話性の両立を大切にされています

Philosophy

COS design の設計思想の中心には、“なぜ?”という問いから始まる思考 と “あなたの想い”に寄り添う姿勢があります。

  • なぜそうなるのか
  • なぜそう思うのか
  • なぜそうしたいのか

言葉にならない想いを丁寧にすくい上げ、確かな理由(COS)をもとに未来を共に描く。
その姿勢を象徴する言葉が、“Forming the unspoken – from COS” です。
建築家の個性を押し出すのではなく、お客様の個性を輝かせる空間づくりを目指す。
BIM や VR を活用し、誰にでも分かりやすい設計を行う。
この哲学を Web 上でどう表現するかが、本プロジェクトの核でした。

COS design一級建築士事務所AboutページWebデザイン

Webサイトコンセプト

空間設計の価値(技術・実績・思想・姿勢)を、Web で合理的に伝える。
そして、BtoB 顧客が「この人たちとなら一緒に考えられそう」と感じる構造へ。

  • 白基調・シンプル・スタイリッシュ
  • 余白を活かした静かな印象
  • トップページに“目次的な構造”を持たせる
  • BIM・SERVICE の情報を強化
  • 記事更新を前提とした SEO 基盤の構築

COS design の哲学と、ターゲットの不安・期待に寄り添うWeb体験を設計しました。

デザインと演出

目指したのは、余白の扱いが美しく、静けさと信頼感を感じるサイトです。

  • 白基調 × 余白 × 静けさ
  • トップページは“目次的な構造”
  • スクロールに合わせた控えめなフェード演出
  • 日本語フォントは「秀英角ゴシック銀」を採用
  • カラーは“土壌”をイメージしたブラウンを基調に設計(「クライアントが抱く小さな想いの種を否定せず、大切に受け止める“土壌”でありたい」という想いを反映)

COS design の哲学である「まだ言葉にならない想いに寄り添う」を損なわないよう、静かで丁寧なトーンを大切にしました。

COS design一級建築士事務所スマホWebデザイン05
COS design一級建築士事務所スマホWebデザイン06

情報設計と UX

ユーザー配慮と SEO が両立したサイトを目指し、情報構造を再設計。

  • SERVICE の内容を拡充し、法人ユーザーが求める情報を整理
  • BIM の説明を追加し、専門性を分かりやすく可視化
  • 実績(works)の情報量を増やし、判断材料を強化
  • 記事更新を前提とした CMS 設計で、継続的な発信を支援

また更新運用のしやすさを考慮した 管理画面の構造設計を行なっています。
実績(works)、記事(article)、サービス(service)はそれぞれ更新しやすいように設計しており、現在も多くの記事を継続的に追加いただいています。

これらの取り組みにより、ユーザーにとって分かりやすく、検索エンジンにも評価されやすい情報構造へ整えました。

実装アプローチと技術的対応

トップページのスライドショーでは、空間の広がりを感じられるよう、横方向にゆっくりと動く演出を実装しました。
COS design 様が大切にする「静けさ」や「余白」を損なわず、空間の奥行きを自然に感じられるよう調整しています。
また、長期運用を見据え、セキュリティ対策として必要なプラグインの導入や不要機能の削除を行い、安全性と軽快さの両立を図りました。
実績ページでは、COS design 様の丁寧な仕事がより伝わるよう、控えめながらも質感を感じられる演出を採用。写真の美しさを損なわず、世界観を静かに支える動きを意識しています。

COS design一級建築士事務所スマホWebデザイン07
COS design一級建築士事務所スマホWebデザイン09

クレジット

client: COS design
web direction, photo direction, web design, web development: 多々良直治(cahier)
photography: Aiko Miyake(kiwi) [事務所写真、スタッフ写真]

編集後記

事務所写真・スタッフ写真は、フォトグラファーの三宅さんに撮影いただきました。
いつもながら丁寧で美しい仕事に助けられています。

納品後、スタッフの杉本さんから
「社内でのお披露目会でも好評で、見やすくなった・写真が綺麗といった声が多かった」
と嬉しいメッセージをいただきました。

代表の松本さまからも、
「10周年を迎えるタイミングで立派な Web ができたので、次の10年も選ばれる設計デザインを提供していきたい」との言葉をいただき、制作に携われたことを改めて光栄に感じています。



考え方

  • 目的(Webサイトを用いて解決したいこと)
  • ターゲット(誰に見てほしい・届けたい)
  • 目標(Webサイトをつくった後、どうなったら成功?)
  • ブランドの信念・想い
  • 認知してほしい、目指したいイメージや姿

こういったことを対話しながらWebサイトのアイデアを共に考えます。

そもそもあれなんだっけ?と調査したり、こういうのがいいんじゃないのと仮説をたて、
進んで行く方向性・テーマを決めて、Webサイトを作っていきます。

一緒にチームを組んで、同じ目標に向かい、試行錯誤しながら進めていければと思います。