自分たちの工房は、自分たちのコードで

NAKASHIMA CRAFT は「ていねいに、長く」を合言葉にする小さな工房です。 それを最も雄弁に語るのは、何を発信するかではなく、自分たちのサイトそのものがどう作られているか ── そう考えて、公式サイトをゼロから組み直しました。

設計の判断

  • フレームワーク: Rust 製の Leptos (0.8 系) を CSR モードで採用
  • スタイル: Tailwind CSS v4 + daisyUI v5。nakashima / nakashima-dark のカスタムテーマで、紙のような質感を再現
  • ビルド: Trunk で WASM をビルド、HTML/JS/SVG を多段 minify
  • 配信: Cloudflare Workers Assets。apex (nakashima-craft.com) は Worker スクリプトで www. へ 301
  • アニメーション: CSS @keyframes + IntersectionObserver。WASM 側は最小限のロジックだけ

「Rust + WASM のサイトは重い」と言われがちですが、 release プロファイルで opt-level=z / lto / strip を効かせ、 WASM サイズと初期ロードを実用域まで圧縮しています。

実装でこだわった点

  • アクセシビリティ: スキップリンク、prefers-reduced-motion、フォーカス可視化を最初から設計に内包
  • SEO: WASM ロード前のクローラ向けに <noscript> フォールバックで主要情報を完全提供
  • 構造化データ: ProfessionalService + OfferCatalog で Google にサービス内容を明示
  • セキュリティ: CSP、HSTS、Permissions-Policy をすべて _headers で固定。SRI は意図的に切り、minify との両立を優先 (理由は Makefile に明記)
  • 運用: make dev ひとつで Tailwind watch + Trunk serve + 自動ブラウザ起動。make deploy で Cloudflare まで一直線

仕上がり

公開 URL は www.nakashima-craft.com。 本ギャラリー (Rust 自作 SSG) とブログ (同じく Rust 自作 SSG) と合わせて、 3 つのサイトが同じ温度感の言語で語られる体験を目指しました。

同じ工房から出てきたものなんだな、と一目で分かる ── それが、ロゴからサイトまで通して達成したかった「ていねいさ」のかたちです。