noteダッシュボードを“分析画面”から“ハブ”に作り直した話｜note運営｜ダッシュボード｜データ分析｜UXデザイン｜#300

前に「眺めたくなる画面にした」って記事を書いた。
あれからまた、触ってた。

今回は、見た目の話やない。
“何回も見に来たくなる場所にするにはどうするか” の話をしたい。

はぁ〜、また新しい記事を書いた。
……で、数日経ったら、静かに流れていく。

noteって、ここがちょっと切ないよな。

新しく書いた記事は見てもらえる。

でも、昔の記事は放っておくと、ゆっくり沈んでいく。

せっかく積み上げたログやのに、埋もれていくのはもったいない。

だから今回ワイが作りたかったのは、
ただの分析画面やない。

昔の記事に人を流せる“ハブ” や。

1.なぜ変えたのか

理由は、ざっくり言うと3つある。

1-1. 信頼は、きれいな実績より“生データ”で作る

実績をうまく見せる。
耳ざわりのいい言い回しをする。
それも大事なんやけど、正直それだけやと弱い。

ワイが思ったのはこれや。

信頼って、都合のいい数字だけ見せるんやなくて、
ちゃんと全部並べたときに生まれるんちゃうか。

伸びた記事も、伸びへんかった記事も。
今動いてる記事も、止まった記事も。

成功だけ切り抜くんやなくて、止まった記事まで含めて並べる。
そのほうが、むしろ「ちゃんと見てる人やな」って伝わる気がした。

1-2. ダッシュボードが“また来たくなる場所”である必要がある

ただの数字一覧って、一回見たら終わることが多い。

でも、何回も見に来たくなる場所やったら、
そこはもう単なる管理画面やない。

入口 になる。

昔の記事に流したいなら、
まずこのページ自体が面白くないとあかん。

1-3. 今回やりたかったのは、機能追加より“再設計”

前のダッシュボードも、数字を見るだけなら機能してた。
でも今回は、見るだけやなくて、

• この人、ちゃんとデータ見せてるな

• ちょっと昔の記事も見てみるか

• この反応してる人、誰やろ？

って、次の行動が起きる画面 にしたかったんや。

つまり今回やったのは、
ダッシュボード改善というより、note回遊の玄関づくり や。

2.今回、仕組みとして足したもの

見た目だけ塗り替えたわけやない。
ちゃんと「流すための仕組み」も足してる。

2-1.フォロワー推移を追加した

PVやスキは、その日の“点”や。
でも運営は“線”で見たほうが正体が見える。

今回の刷新では、フォロワー推移の時系列表示 を追加した。

単発の当たり記事やなく、
ちゃんと育ってるかどうかを見えるようにしたかった。

2-2.Hidden Gems を入れた

今回かなり大きいのがここ。

伸びた記事ばっかり並べると、どうしても「成功事例集」になる。

でも実際は、読まれてへんだけで、ええ記事 って普通にある。

そこで入れたのが、Hidden Gems。
実装上も、PVが低い記事から「スキ率が高いのにPVが少ない」ものを優先して拾う設計になっている。

いわばこれ、埋もれ記事の救出枠や。

「今の人気記事を見る場所」だけやなく、
「まだ出会えてない過去記事に会える場所」を作りたかった。

2-3.記事リンクをちゃんとつないだ

ランキングや一覧から、そのまま記事に飛べるようにした。

これ、地味やけどめっちゃ大事や。

「へぇ〜」で終わる画面と、
「じゃあ読んでみよか」になる画面の差って、こういう細部で決まる。

2-4.CTA導線を整理した

以前は、ランキング導線に少しUXのねじれがあった。
今回の実装では、ランキングタブへ遷移する動線 に修正した。

出口まで含めて設計する。
ここも今回かなり意識したところや。

3.UXとして変えたところ

正直、いちばん大きいのはここやと思ってる。

3-1.セクション順を“読者の視線”で組み直した

前は「あるものを置く」感じやった。
でも今回は、初めて来た人がどの順で理解するか を基準に並べ直した。

実装まとめでも、Hero → ランキングCTA → Growth → フォロワー推移 → 各種ランキング → Hidden Gems → 4分類 → Hall of Shame という順に再設計されている。

ダッシュボードって、何を見せるかも大事やけど、
実はどの順で見せるか のほうが効くことがある。

3-2.世界観を「深夜の実験ノート」に寄せた

ただの分析画面やと、どうしても無機質になる。

でも今回作りたかったのは、
試して、転んで、また見直してる運営ログそのもの が伝わる場所やった。

今回のデザインコンセプトは「深夜の実験ノート」。

ちょっと暗くて、ちょっと熱があって、
数字の裏に人の気配がある。

そんな空気感を目指した。

3-3.コピーを“ワイ語”にそろえた

数字の横にある言葉が急に無機質やと、そこで体験が切れる。
今回はコピーも全部、自分の言葉に寄せた。

実装では、
Hero の「今日も ログ、 まわっとる。」
ランキングの「スキをくれた人、ここに刻んどくで。」
Hidden Gems の「まだ読んでへんやろ？」
など、文言統一した。

数字を見る場所やけど、
ちゃんとKITAcoreの空気が流れる画面にしたかった。

3-4.「見せる」から「読みたくなる」へ変えた

今回の本質はたぶんここや。

ただ数値を並べるんやなくて、

• 次に何を見たくなるか

• どこへ飛びたくなるか

• どうしたらまた開きたくなるか

この基準で設計し直した。

つまり、
ダッシュボードを改善したんやなくて、
note運営のログを“読む場所”に変えた。

3-5.おすすめページ

3-6.記事一覧ページ

4.ちょっと遊び心を詰めた

で、ここは語らせてほしい。

今回ワイ的にいちばん遊んだのが、スキランキング や。

ただ順位を出すだけでも機能としては成立する。
でも、それやとちょっと味気ない。

せっかくなら、

• 記事にスキしてくれた人を可視化したい

• その人にも流入させたい

• スキという行動そのものに、ちょっと意味を持たせたい

そう思って作った。

ランキング節に「スキをくれた人、ここに刻んどくで。」というコピーと、ランキングタブへの導線が置いた。

noteって、記事が主役なんはもちろんやけど、
反応してくれる人もまた、場を動かしてる存在やと思う。

誰がよくスキしてくれてるのか。
今月は誰が前に出てきてるのか。
その人のプロフィールに飛んだら、どんな世界が広がってるのか。

そういうのを見ながら、ちょっとニヤニヤできる場所にしたかった。

そして、ワイの記事からその人の世界にもつなげたかった。

しかも今回は、静止画の順位表で終わらせてへん。

ランキング専用タブに月次ランキングや成長レース表示があり、
月の中で誰が伸びたかを追える構成になっている。

これが入ると、順位表がただの結果発表やなくなる。

「今月この人よう見かけるな」
「このへんで一気に伸びたんやな」
「ちょっとプロフィール見に行ってみよか」

ただのデータやのに、ちょっとドラマが出る。
ワイはこういうの、かなり好きや。

▼ここでスキランキング一覧スクショ

スキしてくれた人たちを、ただの数じゃなく“見に行きたくなる存在”として見せる設計にした。

▼スキランキング推移グラフキャプション

順位だけやなく、月の中でどう伸びたかまで見ると、反応の流れにちょっと物語が出てくる。

5.まとめ

今回やったのは、ダッシュボード改善というより、
ハブを作るための再設計 やった。

意識したのは3つだけ。

• 信頼は、都合のいい切り取りやなく、データで作ること

• 昔の記事に流す導線を作ること

• そのために、このページ自体を“来たくなる場所”にすること

ダッシュボードって、ただの集計画面にもなる。

でも設計を変えると、運営そのものの玄関になる。

こういうの、あなたも作ってみたくならへん？
そして、ワイのログ、ちょっと見たくならへん？

そう思ったら、まずはハブページをのぞいてみてほしい。
そのうえで、前の改善ログも読むと、変化の流れがもっとおもろく見えるはずや。

#283 では「眺めたくなる画面」に寄せた話
#286 では GitHub Pages で“見える化”した流れを記事にした。
今回の再設計はその続編になっている。

スペシャルサンクス

これができるようになったのは、はしゃもさんのおかげ。

デザインや流動性の相談にのってくれたのは、ねんころさんのおかげ。

ほんま、ありがとう〜。

ワイのページはこちら

このシリーズの流れ

見た目を「眺めたくなる画面」に変えた話 → #283

GitHub Pagesで実際に動かした話 → #286

ほな、また。

#note #データ分析 #ダッシュボード #note運営 #アクセス解析 #回遊設計 #導線設計 #UXデザイン #GitHubPages #可視化 #日記 #仕事 #ビジネス #自分 #人生 #学び #記録 #改善 #継続 #発信 #アカリウム