Loading Park Labs...
Loading Park Labs...
LAB NOTE No.0162026.02.08開発
Park Labsのウェブサイトをちょこちょこ手入れしている。ここ数日でナビゲーションを作り直し、画像をWebPに変えた。そして2月8日の今日、ホーム画面にラボノートのマーキーを付けた。
2025年8月に初めて作ったときは、「実験の一覧を見せるポートフォリオ」として始めた。でも作っているうちに、サイト自体がひとつの実験になった。デザイン、パフォーマンス、SEO、国際化。全部が実験だ。
今このサイトがやっていること：
ナビゲーションは作り直した。前のナビが野暮ったかったので、ミニマルなスタイルで組み直した。モバイルのナビゲーションも別に気を配った。ボトムナビバー方式で、なかなかいい感じだ。
PNGで上げていた画像は、全部WebPに変えた。容量が半分以下になった。Cloudflare Pagesから配信しているので、これだけでも体感速度が違う。
実験カードにはリージョンバッジを付けた。各実験がターゲットにしている市場（グローバル、日本、韓国）がバッジで出るので、どの実験がどこを狙っているか一目でわかる。
ラボノートのマーキーは今日追加した機能だ。ホーム画面で最新のラボノートがゆっくり流れる。ホバーすると止まり、クリックするとそのノートに移動する。CSSアニメーションで実装した。
日本のコンテンツプラットフォームnote.comでも記事を書いているので、フッターとモバイルのサイドバーにソーシャルリンクを追加した。日本市場向けの実験があるから、日本のプラットフォームも並行するのが筋だ。
ラボノートを書く作業も自動化した。/noteというClaude Codeのスキルを作った。トピックを投げるだけで、自動採番、3言語のマークダウン生成、ビルド検証、コミットとプッシュまで一度に終わる。ノートを書くのがかなり楽になった。
韓国語、英語、日本語。next-intlで実装した。翻訳ファイルはもう800行を超えていて、これが意外と管理しにくい。実験をひとつ追加するたびに、3言語で説明を書かなければならない。
でも日本市場向けの実験があるので（今日の運勢、占い娘、ケアキロ）、日本語対応は欠かせない。
このサイトのデザインテーマは「未来志向の実験室」だ。黒い背景に半透明のカード、ネオンのグラデーション。ちょっとやりすぎかもしれないけど、実験室のコンセプトには合っていると思う。
ユニコーン進捗率のカードに、凸面ガラスの効果（convex glass）を入れてみた。inset shadowとgradientの組み合わせだけど、うまくいったかはわからない。
最初はハードコーディングだったけど、マークダウンベースに変えた。content/notes/フォルダにマークダウンファイルを置けば、自動でノートができる。メタデータはfrontmatterで管理し、gray-matterでパースしている。
カテゴリ、ムード、関連実験のタグ付けもできる。ノートが15本たまって、ようやくブログらしくなってきた。
メトリクスのダッシュボードはまだダミーデータなので、実データにつなぐ必要がある。実験ごとの詳細ページも改善して、Lighthouseのスコアも上げたい。ライトモードは…すでにダークなのに、追加するかどうか迷っている。
サイトを作るのがこんなに楽しいとは思わなかった。他の実験たちのホームになる場所だから、ずっと手入れしていかないと。