siteInspire ·アメリカ ·Picked 2026.10.18
Oath Biome
バイオテック（土壌微生物）のサイトデザイン参考 — エディトリアル・動画・課題から書く・ミニマル
出典：oathbiome.com ↗ 確認日 2026.10.18
Editor's note
編集部の視点
「土は危機にある」という一文と2本の動画で、技術の説明より先に課題を見せるバイオテックのサイト。
土壌に微生物を戻す技術を持つ Oath Biome のサイト。ファーストビューは、土の映像に「今日、私たちの土は深刻な危機にある」と重ねた動画と、研究者が語る動画の2本を横に並べ、それぞれに再生時間を添える。自社の技術はその後に、食料・水・気候への影響として説明される。ページ後半は関心分野を選べる問い合わせフォームで、法人形態（Public Benefit Corporation）をフッターに明記している。
- 01 ファーストビューに製品名を出さず、「土が危機にある」という課題から入る
- 02 2本の動画に再生時間（2:20min・3:37min）を添え、押す前に所要時間が分かる
- 03 問い合わせフォームで関心分野にチェックを入れさせ、問い合わせの中身を最初から仕分ける
Conversion
集客の工夫
- 動画で説明 （あり） ファーストビューに2本、再生時間つき
- 分野別の入口 （あり） 農業・草地・森林など5つの環境（Environments）
- 問い合わせフォーム （あり） 関心分野のチェック欄つき
- メール登録 （あり） ニュースレターの入力欄
- 法人形態の明示 （あり） Public Benefit Corporation とフッターに記載
- SNSへの導線 （あり） Instagram・TikTok・YouTube
- ヘッダーの追従 （なし） PC はなし、SP は上部に固定
- 電話番号の掲載 （なし） なし
課題 → 使命 → 技術の順に並べる
ファーストビューにあるのは製品ではなく、「今日、私たちの土は深刻な危機にある」という課題です。すぐ下で使命を一文で示し、技術はその後に出てきます。日本の技術系企業のサイトは自社 → 技術 → 用途の順になりがちで、読み手が「で、何が解決するのか」に辿り着く前に離れてしまいます。
動画の長さを、押す前に見せる
2本の動画には「2:20min」「3:37min」と再生時間が添えられています。小さな工夫ですが、所要時間が分かると再生ボタンを押す人は増えます。説明が難しい技術ほど、短い動画に任せる部分を増やすと効きます。
問い合わせを、入口で仕分ける
問い合わせフォームには関心分野を選ぶチェック欄が並びます。研究機関、農業者、投資家、メディアなど、立場の違う相手からの問い合わせが同じ窓口に来る事業では、最初から分類された状態で届くことが対応の速さにつながります。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #301912 見出し・本文（濃いブラウン）
- #111111 動画エリアの背景
- #566E5B モスグリーン（セクション背景）
- #103228 深緑（フッター）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・大きな本文 | FK Roman Standard | Newsreader |
| ナビ・ラベル・ボタン | ABC Diatype | Geist |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 70px / 300 | 1.00 | 40px / 300 |
| h3 | 70px / 300 | 1.00 | 40px / 300 |
| 本文（p） | 27px / 300 | 1.30 | 27px / 300 |
| ボタン | 15px / 400 | 1.38 | 15px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 研究・5つの環境・アフリカでの取り組み・メディアと研究の4項目。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー（動画2本） 課題を語る動画と、技術を語る動画を横に並べ、再生時間を添える。 動画／動画カード型
- 03 使命 微生物を土に戻し、食料・水・気候の課題に取り組む、という一文。 メッセージ／大きな一文型
- 04 課題の説明 産業的な農業で土の微生物が失われてきた経緯を、写真と文章で。 コンセプト／写真＋メッセージ型
- 05 3つの入口 研究体制・5つの環境・メディア掲載の3枚。 一覧／カード並び型
- 06 問い合わせ 大きな写真の上に、関心分野を選べる問い合わせフォーム。 行動喚起／メール登録型
- 07 フッター 法人形態の記載、全ページへのリンク、メール登録、SNS。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 技術や製品より先に、相手が困っている課題を一文で置く
- 02 動画には必ず再生時間を添える。押すかどうかの判断が早くなる
- 03 問い合わせフォームに関心分野のチェック欄を入れ、問い合わせを入口で仕分ける
- 04 社会的な目的を持つ会社なら、法人形態や認証を事実として明記する
FAQ
よくある質問
Oath Biome のサイトで使われているフォントは？
見出しと大きな本文に FK Roman Standard（セリフ体）、ナビやボタンに ABC Diatype（サンセリフ）を使っています。どちらも有料書体なので、無料で近づけるなら Newsreader と Geist の組み合わせが候補です。
製品名をファーストビューに出さないと、何の会社か伝わりませんか？
Oath Biome は課題の動画のすぐ下で、「微生物を土に戻す」という使命を一文で示しています。課題 → 使命 → 技術の順に1スクロールの中で答えが出るので、迷わせません。製品名を伏せたまま何画面も引っ張るのは逆効果です。
どんな業種の参考になりますか？
研究開発型の企業、環境・農業・医療など社会課題に取り組む事業、専門性が高く説明が難しい BtoB 企業に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はOath Biomeおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
