架空の企業を想定した自主制作のコンセプトサイトです。受注案件ではなく、ここで紹介している企業は実在しません。
ORAL./BIO
歯科研究ラボのための、4つの部門で構成したシングルページのReactサイト。臨床プロトコルの一つひとつが論文のように読める。
ORAL./BIO Labsは、バイオエミュレーションを研究する歯科クリニックだ。査読付き学術誌に論文を発表し、NIHRの助成を受けた臨床試験を行い、25倍の顕微鏡とラバーダム防湿のもとで処置を行う。その厳密さを医療系サイトにありがちな無機質さなしに伝え、学術論文のように読めながら上質さも感じられるサイトが必要だった。
直面した
課題
歯科のサイトの多くは、臨床の専門性を伝えきれないストック写真だらけの温かい患者向けポータルか、研究者以外を遠ざける文字だらけの学術ページのどちらかになる。ORAL./BIOでは、臨床プロトコル、進行中の研究助成、論文アーカイブを、一つの機関の対等な部門として扱う必要があった。プロジェクトを形づくった課題は3つある。
臨床プロトコルを確認する紹介元の歯科医と、発表実績を見る研究者という、まったく違う2つの読者に、サイトを別々のポータルに分けずに応える。
ラバーダム防湿、拡大下でのコンポジット積層、バイオアクティブセメントの応用といった処置を、科学を単純化せず、ストック画像も使わずに、見て面白いものにする。
ふだんはFAXで送るPDFの紹介状を、必要書類（CBCT/DICOM、歯周チャート、STLファイル）のチェックリスト付きのインラインフォームとしてページ上に移し、サイトのほかの部分と同じ臨床的なトーンに揃える。
前提と
制約
このビルドが答えようとしたことと、意図的に止めた場所。
- ブリーフ
- 架空のクリニックのための自主制作。信頼の根拠が発表論文にあるクリニックを、ほとんどのクリニックサイトが使うストック写真なしで見せる、という前提を自分たちで設定した。
- スコープ
- 部門を別ルートにせず同じページに収めたViteのシングルページアプリで、ビューごとのメタデータはreact-helmet-asyncが扱う。論文アーカイブはコード内の型付き配列なので、毎月論文を出すクリニックならすぐに手狭になり、CMSに置き換えることになる。
- 未接続
- デジタル紹介フォームはどこにも送信しない。FAXの代わりにサイト上で紹介がどう機能しうるかを示すためのものだ。患者データを扱う本物の受付導線にするのは、規制のかかる別のプロジェクトになる。
導いた
解決策
番号付きの4部門（Clinical、R&D/Lab、Archive、Referral）を縦に一続きで読むシングルページアプリを構築した。各部門は主張を示す一文で始まり、内容を簡潔な文字組みで示し、次の行動で終わる。ページは上から下へ、専門書のように読める。
ほぼ白の地に臨床的なグレーのパネル。ティール（#0d9488）は、操作できる要素と部門の目印にだけ使う。デザインの主役はタイポグラフィで、マニフェストにはセリフのイタリック、ラベルとメタデータには等幅、本文には癖のないサンセリフを使う。Framer Motionで控えめな登場アニメーションを加え、グラデーション、ヒーロースライダー、ストック写真は使っていない。
Viteで構築したReactとTypeScriptのシングルページアプリで、スタイルはTailwind CSS、スクロールに応じたアニメーションはFramer Motionが担う。各部門は独自の構成を持つスムーズスクロールのアンカーだ。論文アーカイブはブラウザ内で種類（Journal Articles、Textbook Chapters、Keynote Lectures）ごとに絞り込め、紹介フォームは外部の埋め込みもリダイレクトもない自作のインラインコンポーネントになっている。
Inside
the Build
サイトは、彩度を落としたクリニックのロビーの全画面写真で始まり、カルーセルもアニメーションもない。その上にセリフのイタリックの引用（'We do not merely repair. We restore structural integrity.'）と、ティールのCONSULT_01ボタンが一つだけ置かれる。ヒーローはそれで全部で、以下に続く抑えたトーンをここで決めている。
DEPARTMENT 01は「We adhere to the Bio-Emulation manifesto.」で始まる。各プロトコル（完全な術野管理のためのラバーダム防湿、高度なコンポジット積層、25倍の顕微鏡精度）は、白いパネルの上に番号付きのブロックとして置かれ、臨床基準として書かれ、「Updated: 2024」と記されている。
DEPARTMENT 02は、ラボの主張「We do not guess. We measure.」で始まる。その横に、進行中のNIHR R01助成のカード（Bioactive cements in deep margin elevation、Status: Ongoing、Phase II）を、研究ページを別に作らずインラインで置いた。紹介元の歯科医は、臨床プロトコルを読み進めた先ですぐに研究実績を目にする。
「Documenting the paradigm shift」と題したDEPARTMENT 03は、Journal Articles、Textbook Chapters、Keynote Lecturesで絞り込める論文アーカイブで、RSSフィードもある。ほぼ文字だけで組み、読むことを好む臨床医に向けた。DEPARTMENT 01と02の主張を裏づける役割も担う。
DEPARTMENT 04は、紹介元の歯科医に直接語りかける。「We operate as an extension of your practice.」すっきりした一画面に、ダウンロードできるTraditional Referral Pad PDF、必要書類のチェックリスト（CBCT/DICOM、歯周チャート、STLファイル）、デジタル紹介フォームが収まり、ポータルも外部へのリダイレクトもない。紹介はFAXよりもサイト上にあるべきだ、というのがこのセクションの主張だ。
得られた
成果
Viteのシングルページアプリなので、まず外枠が届き、中身は後からJavaScriptで描画される。下の2行は、その負荷が端末によってどう違うかを示している。デスクトップのCPUは描画の負荷を吸収するが、スロットリングしたスマホでは描画までにはっきり時間がかかる。
、公開中のサイトを Lighthouse 13.0.3（各プリセット3回計測の中央値）で実測した値です。
最後の
振り返り
ORAL./BIOでは、視覚的な複雑さよりも抑制のほうが臨床の権威を伝えられるかを試した。医療系サイトは、ストック写真、体験談のカルーセル、信頼バッジに頼りがちだ。このクリニックは逆の問題を抱えていて、普通の歯科サイトでは査読付き論文、進行中の助成、顕微鏡レベルのプロトコルが過小評価されてしまう。そこでヒーロースライダー、スタッフ写真のグリッド、患者の声を外した。サイトは一続きのスクロールで読む4つの部門で、それぞれ主張と次の行動を持ち、紹介フォームはFAXのPDFの代わりにデジタルの紹介がどう見えるかを示している。完成したサイトは、歯科医院というより研究機関のサイトのように読める。
こんなサイトを作りたいですか？
中小企業のためのウェブサイトを、日本語と英語で設計・制作しています。プロジェクトについてお聞かせください。24時間以内にご返信します。