これは今あなたが見ているサイトです。テンプレートではなく小さなプロダクトとして作り、保守している Next.js 14 のプロジェクトで、コードベースは公開されているので、以下の内容はすべて検証できます。Lighthouse でデスクトップ 99/100、モバイル 97/100、アクセシビリティと SEO は 100 を記録しています。
中身
-
12 言語: サイトは英語、ドイツ語、スペイン語、フランス語、ヒンディー語、イタリア語、日本語、韓国語、ポルトガル語、ロシア語、トルコ語、中国語で利用できます。型付けされた言語コンテキストと翻訳マップが切り替えを駆動し、選択を記憶してページの
lang属性を更新するので、スクリーンリーダーと検索エンジンが正しい言語を読み取ります。コンタクトフォームを含め、すべての文字列が対応済みです。 -
速さを保つパーティクル背景: カーソルを追う点は canvas に描画しています。初期版は、マウスが動くたびに canvas の位置を測定してレイアウトの再計算を絶えず強制していたため、カクついていました。その測定値をキャッシュすることでカクつきがなくなり、パーティクルを遅延読み込みして初回描画から外したことで、デスクトップのスコアが 99 に届いた要因の大半になりました。
-
広告ブロッカーに静かに壊されないアナリティクス: サードパーティのドメインから読み込むアナリティクススクリプトは、uBlock や Brave といったブロッカーに黙って落とされ、何の警告もないままイベントの 20〜40% を失います。アナリティクスをサイト自身のドメイン経由でルーティングすることで、データをファーストパーティのまま欠損なく保ちます。プライバシーに配慮した統計は Umami が、残りは Google Tag Manager が担当します。
-
SEO の基本をきちんと: 人物と各プロジェクトの構造化データ、すべてのページの 12 バージョンにわたる正しい言語タグ、翻訳同士が競合しないための canonical URL、そしてプロジェクトごとに生成されるソーシャルプレビューカード。
-
アクセシビリティ: コンテンツへのスキップリンク、キーボードユーザー向けの可視のフォーカスアウトライン、AA を満たすテキストコントラスト、スクリーンリーダーから隠した装飾アニメーション、そしてスタイリングした div ではなく適切にナビゲート可能なマークアップとして作った言語メニュー。
-
コンテンツはただの Markdown: プロジェクトの追加は、正しい言語フォルダに Markdown ファイルを置くだけです。次のデプロイで、完全に型付けされた状態で、コード変更なしに表示されます。ページビューは、IP を保存せずハッシュ化する小さなサーバーレス関数が数えるので、Cookie も個人データもありません。
なぜ意味があるか
このサイトは、ほかのプロジェクトがどう作られているかの実例も兼ねています。パフォーマンス、プライバシーを尊重するアナリティクス、多言語対応、アクセシビリティが、検査できる一か所にまとまっています。リポジトリが公開されているので、コードを説明と照らし合わせて確認できます。