Work
BORDERCROSS 製品サイト
中小企業向けの業務ソフトウェア「BORDERCROSS」の製品サイトです。7つのモジュールと共通のアカウント基盤という、説明の難しい構成を伝えることが主題でした。
- お客様
- 伎冶商事合同会社
- 区分
- 自社運営
- 業種・分野
- 業務ソフトウェア(SaaS)
- 担当した範囲
- サイト設計/デザイン/文章/開発・公開
- 時期
- 2026年
Challenge
何を解こうとしたか
- モジュールが7つあり、それぞれ用途が違うため、まとめて説明すると何も伝わらないこと。
- 業務ソフトは導入の判断に時間がかかり、使う前に中身を確かめたい人が多いこと。
- 機能の一覧を並べるだけのサイトは、他社と見分けがつかなくなること。
Decisions
決めたこと
-
01
実際の画面をそのまま見せる
イラストや抽象的な図ではなく、製品の画面を載せました。業務ソフトを選ぶ人が最後に見るのは操作画面で、そこを隠すサイトほど問い合わせが減ります。
-
02
モジュールごとに入口を分ける
全体像のページとは別に、モジュールごとのページを立てました。訪問者の多くは「勤怠を何とかしたい」のように具体的な困りごとから来るためです。
-
03
青を基調にして、赤は警告にだけ残す
業務で毎日開く画面と同じ色の規則をサイトにも使いました。製品を開いたときに見た目が変わらないことが、そのまま安心につながります。
-
04
料金を先に出す
席数と月額を早い段階で示しました。業務ソフトの検討では、価格が分からないことが問い合わせをためらう最大の理由になります。
Colors & Type
色と書体
- 青 #1F5FCC ロゴ・ボタン・リンク
- 濃紺 #1A2332 見出し・本文
- 淡青 #EEF4FD 面の切り替え
- 赤 #D23B52 注意・警告の表示だけ
- Noto Sans JP
- 見出し・本文とも。製品画面と同じ書体に揃えました
Build
どう作ったか
- Astro + Cloudflare Pages。製品本体(Cloudflare Workers / D1)とは別のサイトとして作り、製品の更新に引きずられないようにしています。
- モジュールのページは設定ファイルから生成しており、機能が増えたときの追記が 1 か所で済みます。
この事例と同じ考え方・同じ作り方で、ご依頼いただいた制作にも取り組みます。作るものと毎月のことを選ぶと、その場で概算のお見積りが出ます。