ORAL./BIO
科学と美学の分離を拒否する歯科研究ラボのための臨床グレードのデジタルプレゼンス — 4つの部門、妥協ゼロ、すべてのプロトコルを論文のように扱う単一ページReactアプリケーション。
ORAL./BIO Labsは一般的な歯科クリニックではありません。査読付きジャーナルに論文を発表し、NIHR助成の臨床試験を実施し、ラバーダム隔離下で25倍顕微鏡拡大による施術を行うバイオエミュレーション研究診療所です。大半の医療系ウェブサイトを蝕む無機質な退屈さに陥ることなく、このレベルの厳密性を伝えるデジタルプラットフォームが必要でした。目標：科学論文のように読め、ラグジュアリーブランドのように感じられるサイト。
The
Challenge
ほとんどの歯科サイトは二つの罠のどちらかに陥ります — 臨床的専門性を過小評価する温かみのあるストックフォト多用の患者ポータルか、研究者以外のすべての訪問者を遠ざけるテキスト過密なアカデミックページか。ORAL./BIOはどちらも必要としていませんでした。臨床プロトコル、進行中の研究助成、出版アーカイブを一つの機関の同等に重要な部門として扱う第三の選択肢が必要でした。3つの問題がプロジェクトを定義しました：
根本的に異なる二つのオーディエンス — 臨床プロトコルを評価する紹介歯科医と、出版履歴をレビューする研究者仲間 — に、別々のポータルに分割したりどちらの体験も薄めたりすることなく対応する必要があった
ラバーダム隔離、拡大下のコンポジット積層法、バイオアクティブセメント適用などの複雑な施術を、科学を過度に単純化したりストック画像に頼ったりすることなく、視覚的に魅力的に見せる必要があった
紹介ワークフロー — 従来はPDFファクスフォーム — を、必要書類チェックリスト（CBCT/DICOM、歯周チャート、STLファイル）付きのシームレスなインライン体験にデジタル化しつつ、サイト全体の臨床的権威を維持する必要があった
The
Solution
部門別のシングルページアプリケーションを構築しました — 4つの番号付き部門（Clinical、R&D/Lab、Archive、Referral）を縦型エディトリアルスクロールとして構成。各部門はテーゼステートメントで始まり、クリーンなタイポグラフィブロックでコンテンツを提示し、明確な次のアクションで締めくくります。サイトはマーケティングページではなく、モノグラフのように上から下へ読めます。
クリニカルグレーのパネルを配した白を基調としたキャンバスに、インタラクティブ要素と部門マーカーにのみ現れるシグネチャーティール（#0d9488）をアクセント。タイポグラフィが主要なデザインツール — マニフェストステートメントにセリフイタリック、ラベルとメタデータにモノスペース、本文にクリーンなサンセリフ。Framer Motionが装飾的ではなくオーガニックに感じられる繊細なエントランスアニメーションを駆動。美学は意図的に抑制：グラデーションなし、ヒーロースライダーなし、ストックフォトなし。
Viteで構築されたReact + TypeScript SPA、ユーティリティファーストのスタイリングにTailwind CSS、スクロールトリガーアニメーションにFramer Motionを使用。各部門はそれぞれ独自のコンテンツ構造を持つスムーズスクロールアンカーターゲット。出版アーカイブはタイプ別（ジャーナル記事、教科書チャプター、基調講演）のクライアントサイドフィルタリングをサポート。紹介フォームは完全カスタムのインラインコンポーネント — サードパーティの埋め込みなし、外部リダイレクトなし。
Inside
the Build
サイトは脱彩色のクリニックロビーをフルスクリーンの背景として開きます — カルーセルなし、アニメーションなし。セリフイタリックのマニフェスト引用（'We do not merely repair. We restore structural integrity.'）と単一のティールCONSULT_01ボタンのみ。ヒーローは一枚のフレームでブランドトーン全体を確立します：抑制による権威、沈黙による自信。追加できたすべての要素が意図的に省かれています。
DEPARTMENT 01は冒頭の一文で哲学を宣言します — 'We adhere to the Bio-Emulation manifesto.' 各プロトコル（絶対的フィールドコントロールのためのラバーダム隔離、高度なコンポジット積層法、25倍顕微鏡精度）は純白のSPAパネル上の番号付きエディトリアルブロックとして提示。デザインの選択は意図的でした：これらはマーケティングの箇条書きではなく、それにふさわしい重みをもって提示された臨床基準です。更新：2024年。
DEPARTMENT 02はラボのテーゼで始まります：'We do not guess. We measure.' 並行して：活動中のNIHR R01助成カード — ディープマージンエレベーションにおけるバイオアクティブセメント、ステータス：進行中（Phase II） — 別の研究ページなしでインライン表示。これは重要なアーキテクチャ上の決定でした：研究の信頼性にナビゲーションは不要であるべき。紹介歯科医が臨床プロトコルをスクロールした瞬間に見える必要があります。
DEPARTMENT 03はフィルタリング可能な出版リポジトリです — ジャーナル記事、教科書チャプター、基調講演 — RSSフィード付き。'パラダイムシフトを記録する。' タイポグラフィファースト、ビジュアルノイズゼロ、読む臨床医のために構築。アーカイブは装飾ではなく、部門01と02のすべての主張を検証する証拠レイヤーです。
DEPARTMENT 04は紹介歯科医に直接語りかけます — 'We operate as an extension of your practice.' ダウンロード可能な従来型紹介パッドPDF、必要書類チェックリスト（CBCT/DICOM、歯周チャート、STLファイル）、デジタル紹介フォームが一つの整然としたスクリーンに表示。このセクションは何年も変わらなかったファクスベースのワークフローを置き換えました。摩擦なし、ポータルなし、外部リダイレクトなし。
The
Results
サイトはORAL./BIOを研究サイドラインを持つ地域の歯科診療所から、その出版実績に見合うオンラインプレゼンスを持つ認知された臨床研究機関へと再ポジショニングしました。紹介歯科医はPDFをファクスする代わりにデジタル紹介フォームを完了し、出版アーカイブは世界中の研究者からのオーガニック検索トラフィックを促進しています。
Final
Reflection
ORAL./BIOは、臨床的権威が視覚的な複雑さではなくデザインの抑制を通じて伝達できるかどうかのテストでした。ほとんどの医療系サイトは、真の専門性の欠如をストックフォト、推薦カルーセル、信頼バッジで補います。ORAL./BIOは正反対の問題を抱えていました — 査読付き出版物、活動中の研究助成、顕微鏡精度のプロトコルを持つ診療所が、従来型の歯科サイトによって過小評価されていたのです。すべてのデザイン決定は意図的な引き算でした：ヒーロースライダーなし、チーム写真グリッドなし、患者推薦なし。代わりに、4つの部門 — それぞれテーゼステートメント、構造化コンテンツ、明確な次のアクションを持つ — がエディトリアルスクロールとして構成。紹介フォームがコンセプト実証でした：紹介歯科医が実際に使用するシームレスなインライン体験にデジタル化されたファクスワークフロー。結果は、研究機関のように読める歯科診療所のウェブサイトです — なぜなら、ORAL./BIOはまさにそれだからです。
こんなサイトを作りたいですか？
埋もれたくないビジネスのために、プレミアムなウェブサイトを作ります。プロジェクトについて教えてください。24時間以内にご連絡します。