出典：cominvi.com.mx ↗ 確認日 2026.10.22
Editor's note
編集部の視点
掘った距離・採掘量・雇用・案件数を数字で並べ、安全方針と社員の声・求人までトップで見せるメキシコの坑道掘削の請負会社。
メキシコ・グアナフアトに本社と整備工場を置く、地下鉱山の請負会社 CoMinVi のサイト。ファーストビューは坑内を走るトラックの写真に「Your trusted partner in underground mining（地下鉱山の信頼できるパートナー）」と「これまでに100万メートル以上」の一言、右下に「サービス」「技術」への入口カード2枚。続いて掘った距離・採掘量・間接雇用・直接雇用・進行中の案件・完了した案件の6つの数字、5つの工程、扱う鉱物、安全方針、360台以上の重機、社員の声と求人、14社の取引先が並ぶ。英語とスペイン語を切り替えられる。
- 01 掘った距離・採掘量・雇用・案件数の6つの数字で、会社の規模と実績を一目で伝える
- 02 安全方針をトップの独立したセクションにし、取引先と働く人の両方に向けて示す
- 03 社員の声と部署ごとの入口、求人ボタンをトップに置き、採用サイトを別に作らずに人を集める
Conversion
集客の工夫
- 実績の数字 （あり） 100万m・2,000万t・間接雇用5,100・直接雇用1,700・進行中7件・完了36件
- サービスの説明 （あり） 設計・地山の補強・坑道の掘進・採掘・運搬の5つを1文ずつ
- 安全方針 （あり） トップに独立したセクション
- 設備 （あり） 360台以上の重機を6種類で紹介
- 採用への導線 （あり） メニューに Join the Team、社員の声と求人ボタン
- 取引先 （あり） 14社の名前を並べる
- 言語の切り替え （あり） 英語・スペイン語
- 電話のリンク （なし） 番号は載っているが tel: リンクではない
実績を、6つの数字で見せる
会社紹介のすぐ下に、掘った距離100万メートル・採掘量2,000万トン・間接雇用5,100人・直接雇用1,700人・進行中7件・完了36件の6つの数字が並びます。20年以上の経験や本社の所在地を文章で書くより先に、仕事の規模が一目で伝わります。
安全方針を、トップで伝える
サービスと扱う鉱物の紹介に続いて、「SAFETY POLICY（安全方針）」が独立したセクションとして置かれています。事故や職業病は予防できるという考えと、安全で健康な職場をつくる約束です。危険の伴う仕事ほど、安全への姿勢は取引先にも働く人にも大事な判断材料になります。360台以上の重機の紹介も、同じ信用を支えています。
採用の入口を、トップに置く
トップの後半には「OUR STRENGTH IS OUR PEOPLE（強みは人）」として社員のひと言、5つの部署、「SEE OUR JOB OFFERS（求人を見る）」のボタンがあります。メニューにも「Join the Team」があり、会社案内と採用を同じサイトでつなげています。最後に14社の取引先の名前を並べ、実績の裏づけにしています。
チェック項目は 2026.10.22 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #151515 見出し・本文・ボタン
- #EBF0ED 淡い面・部署のボタン
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文 | Helvetica Now Display | Inter Tight |
| セクション番号・ラベル（等幅） | PP Supply Mono | Space Mono |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 16px / 700 | 1.00 | 15px / 700 |
| h2 | 11px / 300 | 0.90 | 12px / 300 |
| h3 | 20px / 700 | 1.10 | 19px / 700 |
| 本文（p） | 48px / 700 | 1.00 | 31px / 700 |
| ボタン | 16px / 400 | 1.00 | 15px / 400 |
実測値（PC 1440px・SP 375px、2026.10.22 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左にロゴ、右にメニュー。開くとサービス・技術・安全・会社・ブログ・問い合わせ・採用と、英語・スペイン語の切り替え。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー 坑内のトラックの写真に一文と「100万メートル以上」。右下にサービスと技術への入口カード2枚。 ファーストビュー／全面写真＋コピー型
- 03 会社概要と数字 本社と整備工場の所在地、20年以上の経験、6つの数字。 会社情報／スペック表型
- 04 サービス 設計・地山の補強・坑道の掘進・採掘・運搬の5つ。 一覧／カード並び型
- 05 扱う鉱物 金・銀・鉛・銅・亜鉛を元素記号と採掘量つきで。 会社情報／スペック表型
- 06 安全方針 事故や職業病は予防できるという考えと、安全で健康な職場の約束。 コンセプト／写真＋メッセージ型
- 07 重機 360台以上の中から、グレーダー・テレハンドラー・削岩機など6種類を説明つきで。 商品／グリッド型
- 08 社員の声と採用 社員のひと言、5つの部署、求人ボタン。 推薦／利用者の声型
- 09 取引先 14社の鉱山会社の名前。 信頼／ロゴ帯型
- 10 フッター 採用・資料・プライバシー・メール・電話番号。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 BtoB の会社は、施工量・案件数・社員数など実績を数字で並べ、規模を一目で伝える
- 02 安全や品質の方針を、会社案内の奥ではなくトップに1つのセクションとして置く
- 03 採用したい会社は、社員の声と求人ボタンをトップに置き、メニューにも採用の入口を入れる
- 04 取引先の名前を出せるなら並べ、実績の裏づけにする
FAQ
よくある質問
CoMinVi のサイトで使われているフォントは？
見出しと本文は Helvetica Now Display、セクション番号やラベルには等幅の PP Supply Mono を使っています。無料で近づけるなら Inter Tight と Space Mono が候補です。
建設や工事の会社のサイトに、数字を並べる意味は？
取引先にとっても求職者にとっても、「どれだけの仕事をしてきたか」は数字が一番伝わります。CoMinVi は掘った距離・採掘量・雇用・案件数の6つを並べています。施工件数・創業年数・保有車両の台数など、自社で数えられるものから始められます。
どんな業種の参考になりますか？
土木・建設・解体・運送・設備工事など、取引先の信用と人手の確保の両方が課題になる BtoB の会社に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はCoMinViおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Site of the Day
