UI/UX大幅改善 - カテゴリシステム構築

実験の数が増えてきて、ホームページがごちゃごちゃになり始めた。ただリストで並べてるだけだと何が何だかわからなくなってきたから、カテゴリシステムを作った。

最初は「作ったものを全部並べればいい」と思っていた。でも実際に並べてみると、見る側には文脈が足りない。占い、看護、ブラウザ拡張、AIニュース、画像変換。領域がバラバラすぎて、Park Labsが何をしている場所なのか伝わりにくくなっていた。

だから、UI改善というより情報整理の作業だった。実験が増えるほど、一覧ページはただのカタログではなく、思想を伝える場所になる。

🔄 今日やったこと

1. アプリカテゴリ分類

2. ホームページ再構成

3. Journey to Unicornリブランディング

カテゴリを入れたことで、各サービスの役割が少し見えやすくなった。fortune-todayはライフスタイル、care-kiroは業務寄り、population-simulatorはデータ可視化、ContentQuestはAIコンテンツ生成。名前だけでは伝わらない違いを、ラベルで補えるようになった。

一方で、カテゴリを増やしすぎると逆にわかりにくい。最初は細かく分けたくなるが、ユーザーは分類体系を覚えたいわけではない。ざっくり見て、何の実験なのかがわかればいい。ここは今後も調整が必要だ。

🧱 デザインで意識したこと

Park Labsのデザインは、一般的な会社サイトより少し実験的にしたかった。黒背景、半透明カード、グラデーション、実験室っぽい雰囲気。これはブランドとしては覚えやすいが、やりすぎると読みにくくなる。

特にカードUIは難しい。カードが増えると、それぞれが目立とうとして画面全体がうるさくなる。ステータス、カテゴリ、収益、ユーザー数、説明、リンク。全部を同じ強さで見せると、結局どこを見ればいいかわからない。

今回の改善では、まず状態が見えることを優先した。運営中なのか、ベータなのか、準備中なのか。収益が出ているのか。ユーザーがいるのか。Park Labsは透明性を大事にするサイトなので、見た目より状態の伝わり方を優先するべきだと思った。

💡 ハマったこと

モバイル確認を後回しにしたのは反省点だった。自分はデスクトップで開発しているから、つい横幅の広い画面で見てしまう。でも実際に見る人はスマホが多い。カードが縦に並んだとき、文字量、余白、ボタンの押しやすさが変わる。ここを最初から見ないと、あとで修正が増える。

コンポーネントも、最初は一つのカードに全部入れていたが、ステータス、メトリクス、カテゴリ、画像、アクションが増えると読みにくくなった。UIの複雑さは、そのままコードの複雑さにもなる。見た目の整理とコードの整理はつながっている。

🎯 今回の学び

結局、複雑に作っちゃダメだってことを改めて感じた。シンプルに作ったら逆に見やすい。一人で開発してるから判断が早いのは確実にメリットだ。

ただし、判断が早いことには危うさもある。誰かにレビューしてもらう時間がない分、自分の好みで進みすぎることがある。だからこそ、実際のページを見て、違和感があればすぐ直す習慣が必要だ。

次は、単なる見た目ではなく、実験ごとの詳細ページとメトリクスの見せ方を整えたい。Park Labsは「作っています」と言うだけでは弱い。何が進んでいて、何が止まっていて、何を学んだのかまで見えるようにしたい。