Park Labs ウェブサイト改善 - 少しずつ磨いている
ナビゲーションリデザイン、マーキーコンポーネント、画像最適化など、少しずつ手を入れている。作るほど直したいところが見えてくる。
Park Labsのウェブサイトをちょこちょこ手入れしている。
🔬 ただのサイトじゃない、実験室だ
最初は「実験リストを見せるポートフォリオ」として始めた。でも作っているうちに、サイト自体がひとつの実験になった。デザイン、パフォーマンス、SEO、国際化...全部が実験だ。
今このサイトがやっていること：
🎨 最近の変更点
ここ数日で変わったこと：
ナビゲーションリデザイン
以前のナビが野暮ったかった。プレミアムミニマルスタイルで作り直した。モバイルナビゲーションも別途気を配った。ボトムナビバー方式で、なかなか良い感じ。
WebP画像変換
PNGで上げていた画像を全部WebPに変換した。容量が半分以下に減った。Cloudflare Pagesでサーブしているので、体感速度が違う。
リージョンターゲットバッジ
各実験カードにターゲット市場（グローバル、日本、韓国）をバッジで表示するようにした。どの実験がどこを狙っているか一目でわかる。
ラボノートマーキー
今日追加した機能。ホーム画面で最新のラボノートがゆっくり流れるコンポーネント。ホバーで止まり、クリックでそのノートに移動する。CSSアニメーションで60fpsスムーズに。
note.com連携
日本のコンテンツプラットフォームnote.comでも記事を書いている。フッターとモバイルサイドバーにソーシャルリンクを追加した。日本市場ターゲットの実験があるので、日本のプラットフォームも並行するのは当然だ。
ラボノート作成自動化
/note Claude Codeスキルを作った。トピックを投げるだけで自動採番、3言語マークダウン生成、ビルド検証、コミット/プッシュまで一発でできる。ノートを書くのがかなり楽になった。
🌏 3言語対応
韓国語、英語、日本語。next-intlで実装した。翻訳ファイルがもう800行を超えていて、管理が意外と大変だ。実験をひとつ追加するたびに3言語で説明を書かなければならない。
でも日本市場ターゲットの実験があるので（fortune-today、uranai-musume、care-kiro）、日本語対応は必須だ。
💎 グラスモーフィズムデザイン
このサイトのデザインテーマは「未来志向の実験室」。黒い背景に半透明カード、ネオングラデーション。やりすぎかもしれないけど、実験室コンセプトには合っていると思う。
特にユニコーン進捗率カードの凸面ガラス効果（convex glass）がお気に入り。inset shadowとgradientの組み合わせで作ったけど、実際に飛び出して見える。
📝 ラボノートシステム
最初はハードコーディングだったけど、マークダウンベースに変更した。content/notes/フォルダにマークダウンファイルを入れれば自動的にノートが生成される。frontmatterでメタデータ管理、gray-matterでパース。
カテゴリ、ムード、関連実験のタグ付けもできる。15個のノートが積み上がって、ブログらしくなってきた。
🎯 次は？
サイトを作るのがこんなに楽しいとは思わなかった。他の実験たちのホームになる場所だから、ちゃんと手入れし続けないと。