このサイト (notes.rewheel.dev) の SEO を点検したとき、技術的な項目はほぼ満点でした。sitemap も robots.txt も canonical も OGP も JSON-LD も揃っていて、Lighthouse の SEO スコアは全ページ 100。それなのに Performance だけが 58〜63 で止まっていました。
調べていくと、足を引っ張っていたのは Core Web Vitals の 2 つ — LCP (読み込みの速さ) と CLS (レイアウトのずれ) でした。そして犯人は、最初に疑った場所とは違うところにいました。LCP は日本語 Web フォントの読み込み方、CLS は本文の画像ではなくヘッダーのロゴ。この記事は、その犯人を実測で特定し、効かない対策を入れずに直すまでの記録です。
このサイト「Reinvent Notes」のトップページを開くと、車が走り抜けていくアニメーションが目に入ります。Docusaurus の hero に自前で実装したメインビジュアルで、SVG の線画を React コンポーネント化し、タイヤの回転と背景のパララックスをすべて CSS で動かしています。
派手なアニメーションライブラリは使わず、svgr (Docusaurus 同梱) と純粋な CSS だけで作りました。テーマのライト / ダーク切り替えにも追従し、prefers-reduced-motion を有効にしている人には静止画として見せています。
この記事は、Web 開発を始めたばかりの人でも最後まで追えること を目標に書きました。そのため「SVG とは何か」「viewBox とは」「CSS の mask とは」といった基礎から順番に説明し、その土台の上で実装を読み解いていきます。長くなりますが、一つひとつの仕組みが分かるように噛み砕いたので、気になる章から拾い読みしても構いません。
公開後にデザインを調整したため、現行の実装に合わせて本文を更新しました。主な変更は 3 つです。ビルを 2 層にして窓を抜いたこと、街路の標識・街灯などを車と同じ線画にしたこと、ループの境目で背景がカクッとずれる問題を直したこと。とくに 3 つ目は「無限ループの章」をまるごと書き直しています。
Claude Code を業務に取り入れ始めると、公式ドキュメントを読んでも「次に何を導入すべきか」「自分のレベルに合うのはどれか」が見えにくくなる段階があります。Anthropic 自身が出している機能だけでも 30 種類を超え、コミュニティが公開しているワークフローも 12 件以上、Boris Cherny や Thariq といった Claude Code 開発陣の Tips も 80 件以上が散らばっている状態です。
その整理に役立つのが、2026 年 3 月の GitHub Trending #1 を獲得した shanraisshan/claude-code-best-practice です。Shayan Raisshan 氏 (Claude Pakistan community 主宰、Claude Community Ambassador) が MIT ライセンスで公開・継続更新しているリポジトリです。執筆時点 (2026 年 5 月 25 日) で 445 ファイル、585 行の README を持つキュレーション集です。
このブログのドメインを notes.rasshii.dev から notes.rewheel.dev に変更しました。あわせてサイト名も「Tech Notes」から 「Reinvent Notes」 に、タグラインを 「車輪を再発明して学ぶ」 に改名しています。
「モデルを最新版に上げたのに、結局同じ間違いを繰り返す」「プロンプトを工夫してもどこかで頭打ちになる」。AI エージェントを業務に組み込もうとすると、必ずこの壁に当たります。これは多くの場合モデル本体の問題ではなく、モデルを取り囲む環境 (= harness) の設計品質に起因します。本記事では 2026 年 2 月以降に急速に体系化された ハーネスエンジニアリング (Harness Engineering) という考え方を、自分の ~/.claude/ 配下の構成例とあわせて整理します。
このブログを始めました。Docusaurus + Vercel で個人的な技術発信を続けていきます。