CaribSys
セントルシアのカストリーズに拠点を置き、カリブ海一帯で動いているデータインフラ企業のサイトです。読むのはほとんどがCIOや調達の担当者で、この会社を候補に残すかどうかを考えています。サイト全体をその一人に向けて組み立てました。中心にあるのは対応地域のマップです。
概要
CaribSysはスリナムとガイアナから小アンティル諸島を北上し、タークス・カイコス諸島までの範囲で、データインフラの設計から導入、その後の運用まで見ています。ただ、ウェブ上にあったのは仮置きのページで、サイトと呼べるものではありませんでした。そこで、この会社のストーリーをどう語るかという部分から任せてもらいました。なぜこの会社があるのか、実際に何を提供しているのか、そして本当に地域全体をカバーしているということ。もうひとつの要件は、読むページではなく体験として進んでいくサイトにすることで、制作の時間の多くはそこに使っています。土台はNext.jsで、コンポーネント単位のアニメーションはMotion、カウントアップやマップの線が描かれる動きのようにDOMを直接書き換える処理はanime.js、スクロールに連動する部分の下支えにLenisを敷いています。地図の形状はNatural Earthの海岸線データをd3-geoで投影したものです。検索まわりも後付けではなく最初から組み込みました。全ページを事前生成して本文をHTMLに載せ、タイトルと説明文はサイト共通の使い回しではなく1ページずつ書いています。本文がブラウザ側の組み立てではなくレスポンスに入っているので、検索エンジンがインデックスするのと同じように、AI検索が内容をそのまま引用できます。
制作内容
対応地域マップ
まず確認されるのは対応地域なので、地図はイラストで描かず、Natural Earthの海岸線データから投影しました。各拠点はCaribSysが実際に動いている都市の緯度経度どおりです。拠点をつなぐ線は一本の連続した曲線にしてあります。最初は円弧をつないでみたのですが、拠点ごとに角が立ってしまってやめました。マウスを乗せる、タップする、タブで移動する、どれでも左のパネルにその国の主要セクターと産業の基盤が出ます。クリックすると選択が固定され、URLにもそのまま入るので、営業の人は相手の国が開いた状態のリンクを送れます。市場も座標もセクターも説明文も、型付きのデータとして一か所にまとめてあります。途中でケイマン諸島が増えたときも、コンポーネントではなくデータを直すだけで済みました。
動きはふたつだけ
このサイトはあまり動きません。意図的にそうしています。要素は少しぼけながら浮かび上がり、見出しは単語ごとに現れる。使っているのはそのふたつだけです。セクションごとに違う演出を入れると、だんだん作品集のように見えてきます。業種の一覧ではカーソルが当たっていないカードをぼかし、ページの切り替えは5枚のパネルで画面を拭います。視差を減らす設定の方には、スムーススクロールごと切って完成した状態を出します。
一度の取材から会社の話を書く
社員の写真も、施設の写真もなく、会社のことを説明した文章もどこにも残っていませんでした。なのでAboutページは一回の長い打ち合わせから書き起こしています。なぜこの会社があるのか、地域のどんな空白を埋めようとしてきたのか、最初の相談から導入後のサポートまでどう進むのか、10年後も何をしていたいのか。5つのテーマを聞き取って、一般的なIT企業の説明ではなく、この会社の言葉になるように書きました。
同じ形で増やせるページ
ソリューション、業種、導入事例、インサイト、アセスメント。この5系統のページは全部同じ仕組みで動いています。それぞれに一覧とテンプレートがあり、どちらも同じデータを型付きのコンテンツモジュールから読むので、カードとその先のページの内容がずれません。画像はアセスメントの画面です。5種類の診断を名前で並べて、それぞれ何を見るのかを一行、何が出てくることが多いのかを一段落つけてあります。困っていることを文章で説明しなくても、これ、と指させます。使える写真がなかったので、右側は報告書を模した図版にして、選んだ項目に合わせて描き変わるようにしました。
ボタンの行き着く先
サイト上のボタンはすべて同じフォームに着きます。このフォームの役目は、読みやすいメールを sales@caribsys.io に届けることだけです。差出人が返信先に入るので、そのまま返信すれば相手に返せます。送信はResendを使い、メインのドメインではなく送信専用のサブドメインから出しています。フォームが荒らされても、傷がつくのはサブドメインの評価で、CaribSysが普段の業務連絡に使っているアドレスではありません。メールのヘッダーに入る値は通す前に整えていて、問い合わせ分野もフォームが出している選択肢と突き合わせて確認しています。
引き継ぎ
アカウントはすべてCaribSys名義です。ヘッダーやリダイレクト、ビルド設定は、ホスティングの管理画面ではなくリポジトリに書いてあります。リポジトリに入っているものは、移るときにそのまま持っていけるからです。公開の前日にコンテンツをSanityへ移したので、どのページの文言もクライアント側で直せて、2分ほどで反映されます。