Park Labs ウェブサイト改善 - 少しずつ磨いている
ナビゲーションリデザイン、マーキーコンポーネント、画像最適化など、少しずつ手を入れている。作るほど直したいところが見えてくる。
Park Labsのウェブサイトをちょこちょこ手入れしている。
🔬 ただのサイトじゃない、実験室だ
最初は「実験リストを見せるポートフォリオ」として始めた。でも作っているうちに、サイト自体がひとつの実験になった。デザイン、パフォーマンス、SEO、国際化...全部が実験だ。
今このサイトがやっていること：
Park Labsのサイトは、きれいな会社紹介ページではなく、運営中の実験台にしたい。成功したものだけを並べるのではなく、途中のもの、失敗しそうなもの、まだ売上が出ていないものも置く。そうしないと「AIで1人がどこまで作れるか」というテーマが薄くなる。
だから、このサイトで一番大事なのは信頼感だと思っている。数字を盛らない。進捗を隠さない。サービスがまだ弱いなら弱いと書く。その上で、少しずつ改善している様子を見せる。AdSenseやSEOのためだけでなく、Park Labsというプロジェクト自体の信用に関わる部分だ。
🎨 最近の変更点
ここ数日で変わったこと：
ナビゲーションリデザイン
以前のナビが野暮ったかった。ミニマルスタイルで作り直した。モバイルナビゲーションも別途気を配った。ボトムナビバー方式で、なかなか良い感じ。
WebP画像変換
PNGで上げていた画像を全部WebPに変換した。容量が半分以下に減った。Cloudflare Pagesでサーブしているので、体感速度が違う。
リージョンターゲットバッジ
各実験カードにターゲット市場（グローバル、日本、韓国）をバッジで表示するようにした。どの実験がどこを狙っているか一目でわかる。
ラボノートマーキー
今日追加した機能。ホーム画面で最新のラボノートがゆっくり流れるコンポーネント。ホバーで止まり、クリックでそのノートに移動する。CSSアニメーションで実装した。
note.com連携
日本のコンテンツプラットフォームnote.comでも記事を書いている。フッターとモバイルサイドバーにソーシャルリンクを追加した。日本市場ターゲットの実験があるので、日本のプラットフォームも並行するのは当然だ。
ラボノート作成自動化
/note Claude Codeスキルを作った。トピックを投げるだけで自動採番、3言語マークダウン生成、ビルド検証、コミット/プッシュまで一発でできる。ノートを書くのがかなり楽になった。
小さな改善ばかりだけど、積み上げるとサイトの性格が変わってくる。最初は「作ったサービスの一覧」だったものが、少しずつ「何を考えて、どう直しているか」が見える場所になってきた。
特にラボノートマーキーは気に入っている。ホームに来た人が、静的なポートフォリオではなく、今も動いている実験室だと感じられる。最新ノートが流れるだけで、サイトに時間の流れが生まれる。
🌏 3言語対応
韓国語、英語、日本語。next-intlで実装した。翻訳ファイルがもう800行を超えていて、管理が意外と大変だ。実験をひとつ追加するたびに3言語で説明を書かなければならない。
でも日本市場ターゲットの実験があるので（fortune-today、uranai-musume、care-kiro）、日本語対応は必須だ。
3言語対応は思ったより重い。UIの短い文言だけならまだいいが、実験説明、ノート、SEOメタデータまで入るとかなり大変になる。翻訳が追いつかないと、どこかの言語だけ内容が薄く見える。これはAdSenseや検索にも影響しそうだ。
今後は、すべての言語を同じ密度にするより、まず主要市場の日本語を厚くし、英語・韓国語は重要ページから順に整える方が現実的かもしれない。理想は3言語全部を丁寧にすることだけど、ひとり運営では優先順位を決めないと続かない。
💎 グラスモーフィズムデザイン
このサイトのデザインテーマは「未来志向の実験室」。黒い背景に半透明カード、ネオングラデーション。やりすぎかもしれないけど、実験室コンセプトには合っていると思う。
ユニコーン進捗率カードに凸面ガラス効果（convex glass）を入れてみた。inset shadowとgradientの組み合わせだけど、うまくいったかはわからない。
ただ、デザインは気をつけないと自己満足になる。見た目が派手でも、読みづらければ意味がない。特にラボノートは文章が主役なので、カードやグローよりも、行間、コントラスト、モバイルでの読みやすさの方が大事だ。
今後は、トップページの世界観と記事ページの読みやすさを分けて考えたい。トップは実験室らしく、記事は落ち着いて読めるようにする。両方を同じテンションにすると疲れる。
📝 ラボノートシステム
最初はハードコーディングだったけど、マークダウンベースに変更した。content/notes/フォルダにマークダウンファイルを入れれば自動的にノートが生成される。frontmatterでメタデータ管理、gray-matterでパース。
カテゴリ、ムード、関連実験のタグ付けもできる。15個のノートが積み上がって、ブログらしくなってきた。
マークダウンにしたことで、更新の心理的ハードルが下がった。コードを触らずに文章を追加できるのは大きい。さらにfrontmatterで日付、カテゴリ、タグ、関連実験を持たせることで、後から一覧、検索、関連記事、構造化データにも展開しやすい。
課題は、短いノートが増えやすいことだ。自動化すると作るのは楽になるが、内容まで濃くなるわけではない。最近のAdSense対応でも、ここはかなり重要だと感じた。数だけ増やすより、読者が読んで何か持ち帰れるノートにする必要がある。
今後のラボノートは、最低限この型を意識したい。
この5つが入るだけで、単なる日報から実験記録に近づく。
🔎 SEOとAdSenseの視点
サイトを作っていると、つい見た目や機能に意識が向く。でも公開サイトとしては、検索エンジンや広告審査からどう見えるかも大事だ。
特に気をつけたいのは：
これは派手な改善ではない。でも、サイトの基礎体力のようなものだ。ユーザーにも検索エンジンにも、ここがちゃんとしていると安心感が出る。
🎯 次は？
サイトを作るのがこんなに楽しいとは思わなかった。他の実験たちのホームになる場所だから、ちゃんと手入れし続けないと。