Webサイトを「プロダクト」として作り直した

このサイトは長い間、サイトビルダー上の1ページでした。短い自己紹介と、アプリがひとつ、そしてApp Storeからリンクされているプライバシーポリシー。それで十分でしたが、自分のものではありませんでした。テストもバージョン管理も高速化もできず、変更はすべて他人のエディタでのクリック作業でした。

そこで、プロダクトを作るのと同じやり方で作り直しました。

まずデザインシステムから

サイトはページではなくトークンから始まります。インドのサフラン、日本の朱色、昼は和紙、夜は墨というパレット、文字と余白のスケール、そしていくつかのコンポーネント。各機能は --color-text や --color-japan-text のような役割だけを使い、生の色コードを書くとビルドが失敗します。ライトモードとダークモードは自然に揃います。

ビルド時に、2つの言語でページを生成

すべてのページはビルド時に、言語ごとに素のHTMLとして生成されます。英語は /、日本語は /ja です。文章は言語ごとにひとつのYAMLファイルにまとまっていて、レンダラーはすべてをデフォルトでエスケープするので、翻訳がマークアップを壊すことはありません。検索エンジンには hreflang 付きの本物のHTMLを、訪問者にはJavaScriptが動く前から使えるページを届けます。

URLは約束

旧サイトには、App StoreからリンクされているBudget Buddyのプライバシーポリシーのように、他の人が頼りにしているURLがありました。それらはまったく同じアドレスのまま残し、ひとつでも消えればユニットテストが失敗するようにしています。

本番の前にゲートを

公開する前に、同じ高速チェックを手元とCloudflareの両方で実行します。Lint、型チェック、ユニットテスト、そしてコンテンツのチェック（翻訳漏れ、リンク切れ、古いアイコンやSNSカード）。ChromiumとiPhoneのWebKitでのブラウザテストでは、ライト・ダーク両方のアクセシビリティも含めて全ページを確認します。どれかが失敗すれば何も公開されず、最後の正常なバージョンが残ります。

個人サイトには大げさな仕組みかもしれません。でも、こういう仕組みを作るのが好きですし、これで安心して改善を続けられます。**完璧じゃなくても、始めていい。**ただ、続けるならテストがあると心強いです。