tokistorage.github.io）を、LPへのリダイレクトから独立したコーポレートサイトに昇格させた。LPは159本のエッセイと525ページの詳細なサービス情報を持つ「図書館」であり、初めての訪問者には情報過多だ。コーポレートサイトは「玄関」として機能し、最小限の情報で全体像を伝え、LPやTokiQRへ送り出す。この分離は見栄えの問題ではなく、情報アーキテクチャの問題だ。
1. なぜ分離したのか
これまでtokistorage.github.ioにアクセスすると、/lp/にリダイレクトされていた。LPがトップページを兼ねていたのだ。
LPは悪いページではない。サービスの詳細、料金、技術仕様、159本のエッセイ、マニフェスト、提案資料——525ページのすべてがそこにある。しかし「すべてがある」ということは、初めて訪れた人にとって「どこから見ればいいか分からない」ことと同義だ。
図書館は素晴らしい場所だが、建物の玄関が書庫の中にあったら困る。必要なのは、広いロビーと案内板だ。
LPは図書館。コーポレートサイトは玄関。
訪問者はまず玄関に立ち、自分がどこに行きたいかを決める。
2. 何を作ったか
コーポレートサイトは6ページで構成される。
| ページ | 役割 |
|---|---|
index.html |
トップページ。ヒーロー、ミッション、サービスカード3枚、代表者概要 |
services.html |
サービス一覧。三層保管の概要、TokiQR、ウェディング |
about.html |
会社概要。ミッション、代表者経歴、会社情報、SNS |
| + 各ページの英語版（計6ページ） | |
LPの情報を圧縮してコーポレートに載せたのではない。コーポレートには概要だけを置き、詳細へのリンクでLPに送り出す。情報の重複を避けるこの構造は、メンテナンスコストの低減にも直結する。
3. デザインの差分
LPと同じカラーパレット（Toki Blue #2563EB / Hiragino Mincho + Sans）を使いながら、意図的に差をつけた。
| 項目 | LP | コーポレート |
|---|---|---|
| 最大幅 | 960px | 1080px |
| セクション余白 | 4rem | 6rem |
| カード | 背景色＋ボーダー | ボーダーレス、下線のみ |
| 装飾 | テキスト中心 | テキストのみ、装飾排除 |
| ナビゲーション | 固定ナビ＋サイドバー | フロストガラス固定ナビのみ |
要するに「同じブランドだが、密度が違う」。コーポレートはLPより余白が多く、情報密度が低い。初めての訪問者が3秒で「何の会社か」を理解できるよう設計した。
4. サブディレクトリ構成
GitHub Pagesでは、ユーザーページ（username.github.ioリポジトリ）がドメインルートに配置され、プロジェクトページはサブディレクトリとして配置される。この仕組みを活用した。
| URL | リポジトリ | 役割 |
|---|---|---|
tokistorage.github.io/ |
tokistorage.github.io | コーポレート（玄関） |
tokistorage.github.io/lp/ |
lp | LP・エッセイ（図書館） |
tokistorage.github.io/qr/ |
qr | TokiQRアプリ |
3つのリポジトリが独立してデプロイ・管理される。CSSもJSもアセットもすべて自己完結しており、あるリポジトリの変更が他に影響しない。これは外部依存性を増やさないという設計原則の自然な延長だ。
5. SEOへの影響
ドメインルートにコンテンツがなかった（リダイレクトのみだった）問題を解消したことで、いくつかのSEO上の利点が生まれた。
- robots.txtが正しく200を返す。以前は404（Site not found）だった
- sitemap.xmlをドメインルートに配置し、
sitemapindexでコーポレートとLPの両方を参照 - Organization構造化データをルートページに配置。Google検索結果でのナレッジパネル認識に寄与する
- hreflangで日英の対応関係を明示。言語切替がSEO上も正しく認識される
コーポレートサイトの構築は、見た目の問題だけでなく、検索エンジンに対する「会社の顔」を整える行為でもあった。
結果——公開翌日のインデックス
コーポレートサイトを公開した翌日、site:tokistorage.github.ioでGoogle検索すると、トップページがインデックスされていた。リダイレクト時代には一度もインデックスされなかったドメインルートが、独立したページを持った途端に認識された。
重要だったのは順番だ。159本のエッセイ、525ページのコンテンツ、メタ情報の整備、sitemap.xmlの構築——すべてを固めてからコーポレートサイトを公開した。中身が不完全な状態でインデックスされていたら、古い記述や欠落したメタ情報がGoogleに拾われ、後から修正しても反映に時間がかかる。コンテンツを整えてから世に出る。この順番が、最初の印象を最良の状態で渡すことを可能にした。
6. 自己完結性という一貫性
トキストレージの設計思想には「外部依存を増やさない」という原則がある。CDNからライブラリを読み込まない。フレームワークを使わない。CSSは自己完結。
コーポレートサイトも例外ではない。style.cssは1ファイルで完結し、LPのindex.cssとは完全に独立している。main.jsはナビのトグルとスクロールシャドウだけを担う50行のコード。ファビコンやOGP画像もasset/にコピーして、/lp/asset/へのクロスリポ参照を排除した。
3つのリポジトリは、3つの独立した島だ。
橋がなくても、それぞれが自立して機能する。
7. 結び——玄関は静かであるべきだ
玄関は静かであるべきだ。
情報の洪水は図書館に任せ、
玄関では「ここは何の場所か」だけを伝える。
コーポレートサイトに載せた情報は、525ページあるLPの1割にも満たない。それでいい。玄関に百科事典を置く必要はない。訪問者が「存在証明の民主化」というミッションを理解し、興味があればLPへ進み、TokiQRを試す。この導線が機能すれば、コーポレートサイトの役割は果たされる。
6ページ、1つのCSS、50行のJS。これが玄関のすべてだ。