Work
BORDERCROSS 製品サイト
中小企業向けの業務ソフトウェア「BORDERCROSS」の製品サイトです。チャット・プロジェクト管理・会議のキャンバス・ファイル・予定表の基本の 5 つと、広告費の分析や人事評価などの専門のモジュールを、1 本ずつ選べて、ひとつの ID で使えることを伝えるのが主題でした。最初の画面では、いつもの AI（Claude・ChatGPT）に頼むだけで社内の仕事が進むことを見せています。
- お客様
- 伎冶商事合同会社
- 区分
- 自社運営
- 業種・分野
- 業務ソフトウェア（SaaS）
- 担当した範囲
- サイト設計／デザイン／文章／開発・公開
- 時期
- 2026年
Challenge
何を解こうとしたか
- 製品が複数あり、それぞれ用途が違うため、まとめて説明すると何も伝わらないこと。
- 業務ソフトは導入の判断に時間がかかり、使う前に中身と値段を確かめたい人が多いこと。
- 機能の一覧を並べるだけのサイトは、他社と見分けがつかなくなること。
- 提供中の製品と準備中の製品が混ざっていて、並べ方を誤ると、まだ使えない製品まで使えるように見えてしまうこと。
Decisions
決めたこと
-
01
製品の画面を最初の画面で見せる
イラストや抽象的な図ではなく、製品の画面を最初の画面に置きました。トップでは、Claude・ChatGPT に頼むと BORDERCROSS に仕事の案（タスクの案）が並び、人が「採用」を押したものだけが反映される流れを、画面を再現して見せています。各モジュールのページの最初の画面には、見本の組織で撮った実際の画面を、パソコンとスマートフォンで並べました。業務ソフトを選ぶ人が最後に確かめるのは、操作画面だからです。
-
02
製品ごとに入口を分ける
全体像のページとは別に、モジュールごとのページを立てました。基本の 5 つは、機能・料金・他社の製品との比べ・乗り換え・使う場面・よくある質問・セキュリティまで、そのモジュールだけで読めます。訪問者の多くは「社内の連絡をひとつにまとめたい」のように具体的な困りごとから来るためです。準備中のモジュールには「提供予定」の札を付け、提供中のものと見分けられるようにしました。
-
03
青 1 色にして、製品の色はアイコンにだけ使う
主の色は青 1 色にし、地は白、区切りは薄い灰の帯と細い線だけにしました。モジュールごとの色は、名前の横のアイコンの小さな面にだけ使います。青と灰の地は、製品の標準の画面と同じ色です。サイトから製品を開いたときに見た目が変わらないことが、そのまま安心につながります。
-
04
料金を先に出す
最初の画面に「2名までずっと無料」を置き、すぐ下のモジュールのカードに 1 人あたりの月額を書きました。その下に「1 本から → 1 席にまとめて → AI を足す」の 3 段の料金を、選ばれる理由より先に置いています。各モジュールのページも、最初の画面に料金があります。業務ソフトの検討では、値段が分からないことが、試す・問い合わせるのをためらう大きな理由になるためです。
Colors & Type
色と書体
- 青 #1F5FCC ロゴ・ボタン・リンク
- 濃紺 #1A2332 見出し
- 灰青 #4A5566 本文
- 薄い灰 #F5F7FA 区切りの帯・面の切り替え
- Noto Sans JP
- 見出し・本文とも。見出しの太さは 700 までにし、極太の字は使いません
- Inter
- ロゴの文字・モジュールの名前・料金の数字
Build
どう作ったか
- Astro ＋ Cloudflare Pages。製品本体（モジュールごとの Cloudflare Workers / D1）とは別のサイトとして作り、製品の更新に引きずられないようにしています。
- モジュールの並び（トップの棚・上のメニュー・スマートフォンのメニュー・ページの下）は、設定ファイル 1 か所から出しています。準備中のモジュールの「提供予定」の札も同じ場所から出していて、提供を始めたときは、そこを変えるだけで全部の並びから札が外れます。
- 値段は料金の設定 1 か所から出し、ページには書き写していません。値上げやプランの見直しのときに、ページごとの直し漏れが出ません。
この事例と同じ考え方・同じ作り方で、ご依頼いただいた制作にも取り組みます。作るものと毎月のことを選ぶと、その場で概算のお見積りが出ます。