作品 · ブランディング / Web / プロダクト / Claude Code · 2024

CraftBank

建設DXを進める CraftBank のブランド構築とそのプロダクトデザイン、およびデザインシステム構築

概要

「建設業を、時代と共に儲かりつづける業界に」というビジョンを掲げる CraftBank で、ブランドとプロダクトの両方を担当している。コーポレートサイト・サービスサイト・エンジニア採用サイトを設計し、経営管理システム「クラフトバンクオフィス」の UI/UX デザインとデザインシステムをつくった。直近では、デザイナーの作業時間を減らすために、プロダクトチーム用とブランドチーム用それぞれに Claude Code のディレクトリを用意し、幅広いデザイン業務を少ない工数で回している。

背景

建設業はかねてより、バックオフィス業務や多重請負構造など、業界内の特殊な常識によって複雑な業務体系が敷かれていた。CraftBank はこの問題を、DX の推進と伴走によって解決している。デザイナーとしては、プロダクトの使いにくさを下げ、ブランドの価値を高めることで貢献している。

方法

サイトは3つある。コーポレートサイトは「建設業に、儲かりつづける仕組みをつくる」という一文を大きく置き、現場と社員の写真を先頭に並べた。サービスサイトは、利用職人数・業種カバー・都道府県といった実数を FV に置いて、機能の説明より先に規模を伝える。

エンジニア採用サイトは、他の2つと意図的に色を変えた。難解な問題を解くことが好きな人を主なターゲットに置き、建設業のシステムが実際どれだけ複雑かを、読む前に見せる設計にしている。

プロダクトは、経営管理システム「クラフトバンクオフィス」の UI/UX を担当している。使うのは20代から70代まで、現場の職人はスマホ、経営者と事務はPC。同じ機能を、どちらで開いても同じ手順で使えることを条件に画面と導線を設計した。

さらにデザインシステムは、いま Claude Code で作成している。世界観・トークン・パターン・品質検証の4層に分け、それぞれに判断の根拠を文書として持たせる。人が増えても同じ判断ができる状態を、コードとドキュメントの両方で残すのが狙いだ。

結果

ロゴから画面の部品まで、同じ規則で説明できる状態になった。ブランドとプロダクトが別々に育つのではなく、ひとつの根拠を共有している。あとから誰が触っても、なぜそうなっているかが文書として残っている。