自己勘定の石油トレーダーのための7言語サイト。「この会社は実在し、確認できるのか」という一つの問いに、最初の画面で答えるよう設計した。
01背景
Marqevonは、石油の現物を自己勘定で取引する会社である。生産者と製油所から買い、製油所、販売業者、航空会社、公益事業者、産業需要家に引き渡す。サイトが語りかける相手は、まず取引相手、次に銀行と貿易金融のパートナー、次に採用候補者、そして報道機関と規制当局である。
仕事は最初から仕様書主導で進めた。46 KBの仕様書が、実装に入る前に情報設計、デザインシステム、15ページすべてを確定させた。その冒頭は通常のブリーフを退けている。この業界でウェブサイトの役割はマーケティングではなく、検証可能な正当性を示すことだ、と。
02課題
現物コモディティ取引には詐欺の問題があり、その詐欺には語彙がある。非公式のブローカーは、見覚えのある証書の略語や委任の肩書き — TTT、TTV、DTA、ATB — で自らを名乗る。正当な中規模の自己勘定トレーダーでも、そのどれか一つを使えば同類に見えてしまう。
だからサイト全体が、一つの問いに答えなければならなかった。しかも7言語で、そのうち2言語は右から左に書かれる。
「この事業体は実在し、確認できるのか。それとも、またひとつのブローカー連鎖の隠れ蓑なのか。最初の画面のうちに答えが明らかになるよう設計すること。」
03リサーチ
競合ベンチマークでは、目指すデザインを最大手のトレーディングハウス群と中規模の同業数社に照らして採点した。見つかった空白は、取りにいく価値があった。大手のどこも不正防止の姿勢を明示的に打ち出しておらず、自社がしないことも語っていない。
この発見はスローガンではなく構造になった。FAQの「私たちがしないこと」のグループ、独立した検証を率直に歓迎する姿勢、そして文章で決して使ってはならない用語のリストである。
04アプローチ
仕様書は方向性を一行で定めた。「信頼の上に成り立つ市場のための精密機器」。機関投資家向けのエネルギーデスクと検証済みの検査書類のあいだに位置づけ、避けるべきものも名指しした。クリーム地にセリフ体とテラコッタ、黒地にアシッドグリーン、そして細罫だけで成り立つ美学である。
仕事は競合ベンチマーク、仕様書、実装の順に進み、その後クライアントのフィードバックを一度受けた。フィードバックは、どれかを適用する前に、まずコードと照らして監査した。
クライアントのフィードバックに含まれた約67の指示のうち、33が監査を通ってカードになった。8は先に修正が必要で、22は未決の判断待ちで止まり、4は質問だった。
05ソリューション
仕様書は力を注ぐ場所を示している。「大胆さはここに注ぎ、ほかはすべて静かに保つ。」シグネチャーは3つの要素からなる。信頼性に関わる主張に添える参照チップ、細罫で区切った等幅フォントの検査証明書のように組んだデータマニフェスト、そしてすべてのページの下端に置く等幅フォントの識別バーである。
カラーパレットはそのために組まれている。深い石油色の地、海の鋼色、書類の紙色、唯一のアクセントとしての真鍮色、アシッドグリーンから十分に離した「検証済み」のティール、そして警告にだけ使う錆色。IBM Plex Monoが、すべての数字、参照、チップを担う。
基盤はPayload 3.85とNext.js 16.2、next-intl、MongoDBで、10のコレクションと4つのグローバルを持ち、nginxで配信する。買い手の審査フォームは問い合わせごとに点数を付け、デスクに知らせる。
製品：3つの等級、それぞれを仕様書で定義。
06主要な意思決定
その大半は、サイトが言わないと決めたことに関わる。
デザインされて見えるトレーディング会社は、マーケティングとして読まれる。視覚的な自信はすべてシグネチャーの仕組みが担い、ほかの面はすべて静かに保つ。だから読み手の記憶に残るのはマニフェストになる。
CIでは2つのガードが動く。一つはサイトの文章に含まれる詐欺の経路の語彙とアメリカ式の綴りで失敗し、もう一つは物理方向のレイアウトユーティリティ、ハードコードされたフォント、未翻訳の文字列で失敗する。後者はすでに実際の見落としを捕まえた。翻訳から漏れていたアクセシビリティ用のラベルである。
法的リスクを伴う問いは、デザイナーが決着をつけるものではなかった。書面のメモでクライアントに回し、推奨した文言の一つはそこで退けられ、契約条件に基づく、確約を含まない表現が選ばれた。
077言語
英語、フランス語、アラビア語、スペイン語、日本語、中国語、ペルシア語のすべてが、メッセージキーを完全に一致させている。最新のコミット時点で、各ファイルに222のキーがある。アラビア語とペルシア語はCSSの論理プロパティで動くため、レイアウトは作り直すのではなく反転する。
使ってみて初めて見えた細部が2つある。カスケードレイヤーの中に書いた言語ごとのフォント切り替えが気づかないうちに上書きされていたため、今はレイヤーの外に置いている。また、マニフェストは等幅数字を使うので、右から左の文章やCJKの文章の下でも等幅の列がそろう。
ペルシア語：同じヒーローを反転。
08全ページ
デプロイ済みサイトの英語版全ページを、2026年9月26日に幅1440ピクセルと幅390ピクセルのスマートフォンで記録した。最上位の16ページ、バイヤー適格性確認フォーム、2件の求人、12本の分析記事、3つの法務ページである。
内側のページも象徴的なページと同じ細罫のデータマニフェストと等幅フォントの識別バーを備え、スマートフォンでは各ページが1列に積み重なり、ナビゲーションはメニューボタンの奥に収まる。ホームページでは、市場価格のパネルを隠している。
09成果
サイトはデプロイされ稼働しているが、公開はしていない。ドメインはなく、意図的に検索対象から外し、会社の実体情報はまだプレースホルダーのままである。適用済みのフィードバックはプッシュしていないコミットにあり、サーバーには載っていない。アクセス解析はなく、あるのはコンテナのヘルスチェックだけである。
10学んだこと
「詐欺の経路の符丁を話さない」をガードとして書き込んだことで、それは誰かが覚えておくべき意図から、リポジトリの性質へと変わった。
コンテンツのガードは文章とメッセージのファイルを走査するが、フォームの選択肢リストは見ない。そのため買い手の審査フォームは、禁止した用語のうち2つを今も引き渡しの選択肢として示している。会社が相手を審査する唯一のページで、自ら禁じた符丁を話しているのである。
参照チップは登記簿やLEIインデックスの名前を示すが、どちらにもリンクしていない。実際の記録を指し示すまで、このシグネチャーの仕掛けは検証に見えるだけである。まさにプロジェクトが避けようとした失敗だ。
7言語は、クライアントのガバナンス文書が言語の問題を未決と呼ぶ数週間前に出荷されていた。完成しガードで守られた仕事を消すほうが高くつく誤りなので、残したのは正しかった。だが、その判断はキーが生まれる前に書面にしておくべきだった。
取引実績：商務・法務の確認を経た後にのみ公開し、取引相手の名前は決して出さない。
4ページのペルシア語のフィードバック文書を、カードのボードに置き換えた。各カードは依頼を訳文付きで引用し、まず実際のコードと照合した。誤った前提に立つ依頼は、誰かが実装する前に正した。
法人名、登記情報、会社を支える人々は事実であって、デザインではない。会社が確認するまで、それぞれは見える形で「追って提供」のまま残り、チームページは実在の人物しか公開しないと平易な言葉で述べている。
アラビア語：同じヒーローを反転。