スキルを数値化・視覚化してモチベーションを上げるサービス

## はじめに

日々の業務が忙しいと、なかなかスキル研鑽まで気を回せません

そんな日常の中でもモチベーションを保ってスキルを向上させていくためには、 **数値化** ・ **視覚化** が有効だと考えられます

スポーツが楽しいのは何故でしょう？

スコアや打率、防御率、奪三振数、ホームラン数、飛距離などなどの数字に一喜一憂するからです

ゲームが楽しいのは何故でしょう？

レベル、攻撃力、防御力、連勝数、フルコンボ、キルレートなどなどの数字に悲喜交々があるからです

競技の楽しみの一端は、間違いなく **数値化** が担っています

自己ベスト、日本記録、世界記録、多種多様な数字に挑み、それを越える快感はたまりません

そして、それらを表で比較したり、グラフで推移を見たり、様々な演出でより分かりやすく伝えるのが **視覚化** です

エンジニアのモチベーション維持にも、スキルの **数値化** ・ **視覚化** は欠かせません

というわけで、私が利用している　**スキルの数値化視覚化サービス** を紹介します

## Qiita

言わずと知れた Qiita 、このサイトです

https://qiita.com/

### Qiita の Contribution

Qiita の右上アバター画像をクリックすると、ドロップダウンが表示されます

その中から **マイページ** をクリックすると、自分のステータスや記事の一覧が確認できるマイページに移動します

![スクリーンショット 2023-11-07 16.26.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/096e85a4-cdfe-4fd0-642f-4c5521309371.png)

私の場合はこちら

https://qiita.com/RyoWakabayashi

マイページは以下のような画面になっています

![スクリーンショット 2023-11-07 16.29.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/9995b322-860d-263c-d1d6-609d21c9305f.png)

左上に **3245 Contributions** とあります

この数値は Qiita における貢献度を示し、記事投稿、いいね、ストックなどから計算される値です

https://help.qiita.com/ja/articles/qiita-contribution

Qiita でたくさん記事を書いて、たくさん「いいね」をもらって、たくさん「ストック」してもらうと Contributions の値がどんどん上昇していきます

RPG でいうところの **経験値** のような感覚です

無駄にレベルをカンストしたくなる私としては、素直にモチベーションアップに繋がります

### Qiita のバッジ

マイページの下 **獲得したバッジ** をクリックすると、獲得したバッジ一覧が表示されます

![スクリーンショット 2023-11-07 16.36.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/b2047ea6-cd4a-322a-f6be-b5afa9df51b3.png)

https://qiita.com/badges

私の場合はこんな感じです

![スクリーンショット 2023-11-07 16.38.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/657f5c05-7e20-a24e-0d8d-5be192d9683a.png)

バッジは一定の条件を満たすと付与されます

https://help.qiita.com/ja/articles/qiita-badge

ダンジョンでは必ず全ての行き止まりに行ってアイテム回収したい私としては、収集要素もモチベーションに欠かせません

イベントへの参加意欲も湧いてきますね

### Qiita Advent Calendar

もちろん、 Advent Calendar などのイベント自体、モチベーションを上げてくれます

https://qiita.com/advent-calendar/2023/elixir

![スクリーンショット 2023-11-07 16.41.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/1555acc0-c4e5-d772-cc11-82a3e2f47acd.png)

空いていれば埋めたくなる私としては、これも完走しないわけにはいきません

もちろん賞品も魅力的でモチベーションアゲアゲです

https://qiita.com/advent-calendar/2023/present-calendar#qiita_award

## GitHub

GitHub でも自分のスキルを視覚化できます

https://github.com/

### GitHub のプロフィール

GitHub の右上アバター画像をクリックすると左からメニューが出てきます

メニューの **Your profile** をクリックすると、プロフィール画面に移動します

![スクリーンショット 2023-11-07 17.12.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/0e7c8caa-2fef-154b-4876-f3765dddd2b2.png)

私の場合はこちら

https://github.com/RyoWakabayashi

GitHub では下画像のようなプロフィールを作成可能です

![スクリーンショット 2023-11-07 17.21.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/f6164868-862b-0bdc-cad5-15fa4707ba30.png)

自分のアカウントIDと同じ名前のリポジトリーを作成し、そこに REAME.md を作ればプロフィールページとして表示されるようになります

https://docs.github.com/ja/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme

私の場合は以下のようなコードで実装しています

https://github.com/RyoWakabayashi/RyoWakabayashi/blob/main/README.md?plain=1

```markdown
# Hi 👋, I'm Ryo Wakabayashi

![views](https://komarev.com/ghpvc/?username=RyoWakabayashi&label=Profile%20views&color=0e75b6&style=flat)

## Languages and Tools

<p align="left">
  <a href="https://developer.apple.com/swift/" target="_blank">
    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/swift/swift-original.svg" alt="swift" width="40" height="40"/>
  </a>
  <a href="https://elm-lang.org/" target="_blank">
    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/elm/elm-original.svg" alt="elm" width="40" height="40"/>
  </a>
  <a href="https://www.python.org" target="_blank">
    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg" alt="python" width="40" height="40"/>
  </a>
  <a href="https://nodejs.org" target="_blank">
    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg" alt="nodejs" width="40" height="40"/>
  </a>
  <a href="https://elixir-lang.org" target="_blank">
    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/elixir/elixir-original.svg" alt="elixir" width="40" height="40"/>
  </a>
  <a href="https://www.tensorflow.org" target="_blank">
    <img src="https://www.vectorlogo.zone/logos/tensorflow/tensorflow-icon.svg" alt="tensorflow" width="40" height="40"/>
  </a>
  <a href="https://opencv.org/" target="_blank">
    <img src="https://www.vectorlogo.zone/logos/opencv/opencv-icon.svg" alt="opencv" width="40" height="40"/>
  </a>
  <a href="https://jupyter.org/" target="_blank">
    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/jupyter/jupyter-original.svg" alt="jupyter" width="40" height="40"/>
  </a>
  <a href="https://www.postgresql.org" target="_blank">
    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/postgresql/postgresql-original.svg" alt="postgresql" width="40" height="40"/>
  </a>
  <a href="https://www.elastic.co" target="_blank">
    <img src="https://www.vectorlogo.zone/logos/elastic/elastic-icon.svg" alt="elasticsearch" width="40" height="40"/>
  </a>
  <a href="https://www.ansible.com/" target="_blank">
    <img src="https://www.vectorlogo.zone/logos/ansible/ansible-icon.svg" alt="ansible" width="40" height="40"/>
  </a>
  <a href="https://www.terraform.io/" target="_blank">
    <img src="https://www.vectorlogo.zone/logos/terraformio/terraformio-icon.svg" alt="terraform" width="40" height="40"/>
  </a>
  <a href="https://www.docker.com/" target="_blank">
    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/docker/docker-original.svg" alt="docker" width="40" height="40"/>
  </a>
  <a href="https://aws.amazon.com" target="_blank">
    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/amazonwebservices/amazonwebservices-original.svg" alt="aws" width="40" height="40"/>
  </a>
  <a href="https://github.com/" target="_blank">
    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/github/github-original.svg" alt="github" width="40" height="40"/>
  </a>
</p>

## GitHub Status

![Ryo Wakabayashi's GitHub stats](https://github-readme-stats.vercel.app/api?username=RyoWakabayashi&count_private=true&show_icons=true&theme=cobalt)

## Trophy

[![trophy](https://github-profile-trophy.vercel.app/?username=RyoWakabayashi&no-frame=true&theme=juicyfresh&row=2&column=4)](https://github.com/ryo-ma/github-profile-trophy)

## GitHub Streak

[![GitHub Streak](http://github-readme-streak-stats.herokuapp.com?user=RyoWakabayashi&theme=jolly&date_format=%5BY.%5Dn.j)](https://git.io/streak-stats)

## GitHub Summary Cards

[![](./profile-summary-card-output/vue/0-profile-details.svg)](https://github.com/vn7n24fzkq/github-profile-summary-cards)
[![](./profile-summary-card-output/vue/1-repos-per-language.svg)](https://github.com/vn7n24fzkq/github-profile-summary-cards) [![](./profile-summary-card-output/vue/2-most-commit-language.svg)](https://github.com/vn7n24fzkq/github-profile-summary-cards)
[![](./profile-summary-card-output/vue/3-stats.svg)](https://github.com/vn7n24fzkq/github-profile-summary-cards) [![](./profile-summary-card-output/vue/4-productive-time.svg)](https://github.com/vn7n24fzkq/github-profile-summary-cards)
```

特にトロフィーはランクが上がると嬉しいですね

![スクリーンショット 2023-11-07 17.35.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/7c1d3a6f-6197-9cd9-f347-7b182782c48e.png)

### GitHub の Achievements

プロフィールページの左側に Achievements が表示されています

Achievements の文字をクリックすると、一覧ページに遷移します

私の場合はこちら

https://github.com/RyoWakabayashi?tab=achievements

![スクリーンショット 2023-11-07 17.38.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/de8dacf0-45e3-29a1-4b12-ec01114b04dd.png)

**x2** などの数字は、一定数を超えると上がるランクのようなものです

Pull Shark は Pull Request がたくさんマージされると貰えるので、業務で GitHub を使っていれば自然と手に入るはず

各バッジをクリックすると詳細が表示されます

![スクリーンショット 2023-11-07 17.39.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/85bb7473-ca9e-d428-53fb-8e5d32a88eef.png)

Starstruck のバッジはリポジトリーについたスターの数です

私の Elixir 学習用リポジトリーはいつの間にか中々のスター数になっていたようです

https://github.com/RyoWakabayashi/elixir-learning

各 Achievements の説明はこちら

https://github.com/Schweinepriester/github-profile-achievements

## LAPRAS

LAPRAS はエンジニアの様々なアウトプットを数値化してくれるサービスです

https://lapras.com/

例えば Qiita の記事や GitHub のリポジトリー、 connpass でのイベント参加数などを集計して、経験値として視覚化してくれます

https://talent-help.lapras.com/ja/articles/2866783-%E5%90%84%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E7%B4%90%E3%81%A5%E3%81%91%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF

### LAPRAS のアクティビティー

私の直近のアクティビティーがこんな感じです

![スクリーンショット 2023-11-07 18.04.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/ea224fd3-7a80-2d6d-f9a2-50dda2927ec7.png)

EXP = 経験値に対して Marvelous!! と褒めてくれます

さらに経験値の上昇値ランキングも表示しています

個別のアクティビティーについて、どの程度経験値が上がったのかも一覧表示してくれます

直近では Figma の記事が 100 いいねを突破したので、 LAPRAS でも + 100 EXP になっています

https://qiita.com/RyoWakabayashi/items/7abf561dcd49d0884c86

### LAPRAS の AI レビュー

Qiita の記事に関しては、 AI が内容をレビューして点数をつけてくれます

![スクリーンショット 2023-11-07 18.10.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/90abec10-450a-25d8-faf1-e981cb86e472.png)

これはメチャクチャ面白いので、是非みなさんやってみましょう

JAWS FESTA の参加レポートは結構気合を入れて書きましたが、そこそこの評価でした

https://qiita.com/RyoWakabayashi/items/755510f53426656252b0

いつも **「改善点としては、技術的な用語や略語について説明を追加することで、より多くの読者が内容を理解しやすくなるでしょう。」** と言われてしまいます

### LAPRAS のポートフォリオ

技術力以外にもビジネス力や影響力を数値化してくれます

私のポートフォリオはこちら

https://lapras.com/public/OCE3NRU

![スクリーンショット 2023-11-07 18.13.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6169c27c-dff2-a544-c997-2abe228e26cf.png)

私は LAPRAS にビジネス関係の情報をほとんど記載していないためビジネス力が低く、 SNS のフォロワーが少ないので影響力が低いです

Qiita の記事は一生懸命書いていますが、まだまだ評価としては低いですね

## Bright

Bright はスキルをグラフやチャートで視覚化してくれます

https://bright-fun.org/

:::note info
実は Elixir で作られています

（ダイレクトマーケティング）
:::

### Bright のスキルパネル

Bright では、詳細なスキルについて自分のレベル感を入力していきます

- `○`: 実務経験がある、もしくは依頼されたら短期間で実行できる
- `△`: 知識はあるが、実務経験が浅く、自信が無い（調査が必要）
- `-`: 知識や実務経験が無い

私の ELixir スキルパネルはこんな感じ

![スクリーンショット 2023-11-07 18.43.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/d18c6fb3-c145-4d08-1ab0-3b6371c3abc3.png)

自分に足りないものが分かるので、今後の学習の道筋になってくれます

まだまだ色んな項目で **実務経験がある** と言えるほどではないので、平均レベルが妥当ですね

### Bright の成長パネル

成長パネルでは時系列での成長を折れ線グラフで、分類毎のスキルをレーダーチャートで表示してくれます

私の ELixir 成長パネルはこんな感じ

![スクリーンショット 2023-11-07 18.28.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/1cae7491-8453-54f3-fc60-92a9c09c3f30.png)

私の場合、インフラが AWS に極端に偏っていて、他のクラウドをほとんど使っていないため低いです

## X （旧 Twitter）

言わずと知れた X （旧 Twitter） です

https://twitter.com/

「いいね」や「フォロワー数」がダイレクトにモチベーションを上げてくれます

特に嬉しいのが、 Qiita 　マイルストーンが 10 いいねなどのタイミングでポストしてくれること

https://twitter.com/qiita_milestone

そして、 Qiita 人気記事で「本日のすごい人」としてポストしてくれること

https://twitter.com/q_hayari

ちなみに私のアカウントはこちら

https://twitter.com/nakaji573

ほぼ Elixir に関することしか呟いていません

:::note info
アカウントIDは[昔ハマっていたゲームのキャラクター](https://popnmusic.fandom.com/wiki/Nakaji)、かつ昔のあだ名から

大昔に作って放置していたアカウントを昨年から再始動したものです
:::

## CodersRank.io

CodersRank.io は GitHub の情報を元にプログラマーをランキングしてくれるサービスです

https://codersrank.io/

これは普段使っていないのですが、本記事を書くに当たって「スキル 数値化 サービス」で検索したら 
@y-temp4 さんの記事が出てきたので登録してみました

https://qiita.com/y-temp4/items/eee174b23317414cba9a

私のプロフィールはこちら

https://profile.codersrank.io/user/ryowakabayashi

![スクリーンショット 2023-11-07 19.01.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/c03f9da0-59b6-a992-316d-40ae02323936.png)

積み上げグラフが美しいですね

そして、 CodersRank.io の目玉はなんと言っても開発者ランキングです

https://profile.codersrank.io/leaderboard/developer

国や都市など、指定した範囲内での自分の順位を見ることができます

私の世界ランクは 13,750 位でした

![スクリーンショット 2023-11-07 19.03.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/7a33b4f3-fedf-ad2f-2b5a-9602bfe9eb64.png)

そして、私の日本国内ランクは 88 位です

![スクリーンショット 2023-11-07 19.05.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/9e59d84e-198d-c094-c514-23599e19dabb.png)

そしてそして、なんと **大分県内では開発者の TOP** です！！

**県内一のエンジニア** を名乗っても嘘ではありませんね

![スクリーンショット 2023-11-07 19.06.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/3c8466c8-1d31-dd6f-77d4-20f3f529456a.png)

:::note warn
参加者一人中の一位です
:::

## まとめ

スキルを数値化・視覚化してくれるサービスはたくさんあります

自分のモチベーションを上げてくれるサービスを見つけて、どんどん活用していきましょう