ちょっと話題の記事

クラスメソッド開発ブログテーマをリニューアルしました

2013.03.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

みなさんこんにちは、クラスメソッド株式会社の野中です。

すでにお気づきだと思いますが、この度クラスメソッド開発ブログのテーマをリニューアルいたしました。
合わせてブログ名を「Developers.IO」と変更しています。

テーマのリニューアルは2回目となり一昨年の7月に行って以来です。まだ1年経っていませんでした。
というのも弊社は来期(7月が期初)で10年目を迎えることもあり、より成長していける環境作りの一環として軽く、見やすいUIを目指してリニューアルいたしました。

この記事では先日「クラスメソッドさんのブログ戦略」というタイトルで話題となったこともあり、リニューアルによる変更点と実装している機能が追加された経緯を紹介したいと思います。

10日程度でリニューアルを行ったため荒削りな部分もあります。引き続きブラッシュアップしてまいります。

主な変更点と追加点

  • ナビゲーションの増強
  • 2カラムから1カラム表示へ
  • ランキングの評価指標にPV、Twitter、Facebook、はてブを追加
  • 記事一覧の見出しの読みやすさを優先
  • 記事の執筆者ランクを表示(ランクとは執筆者の経験量を表すもの)
  • 全期、当月、当日の執筆状況を表示
  • 検索のカテゴリ指定が可能に
  • 執筆者アバターの追加(実装中)
  • 行間の調整

実装している機能が追加された経緯

ブログで実装されている機能がなぜ追加されたのか、その意図について紹介したいと思います。

プロフィールページ

弊社代表のプロフィール

プロフィールページ

経験値

ブログの立ち上げ当初は仕事が増えること、設立初期にも会社ブログがあり執筆は行われていましたが、いつの間にか書かれないものになってしまったこともあり若干の反発がありました。

ブログを楽しく書いてもらうという観点から簡易的なゲーミフィケーションの仕組みが作れないかと検討した結果、まず最初に経験値という仕組みができました。
経験値は主にソーシャル系のカウント数やコメント、PVなどが基準になっており、それらに特定の評価指数をかけたものが経験値になっています。

立ち上げ当初はなかなか経験値を獲得できず今ほど大量の経験値は獲得できないことが続きました。
四半期ランキングの2011年7月から2011年9月までの表彰ランキングから見ていくとソーシャル系のカウントで取得できている経験値が少ないことがわかります。

HP

HPは業務命令という都合上、書けていない方を見える化するための仕組みです。
書いた記事の数だけHPが回復します。

HPは直近の3ヶ月でどれだけ投稿できているかが目安になっていて、1本でも記事を書けていればHP1となります。
3ヶ月間1本も書けていないとHPが0となり、執筆ができていない人となるわけです。

もちろん業務の都合上書けない時もあります。

ランク

ゲーミフィケーションの一環として、経験値をシンプルに表すためランクを導入しました。
ランク20を超えると数万単位になってくるので、RPGの高レベルに近いなかなかレベルの上がらない状況が続きます(笑)。

必要な経験値を出すとこうなります。
ちなみに500はてブくらいの記事を書くと10,000程度の経験値が得られます。

  • 0-500
  • 1-650
  • 2-845
  • 3-1,098
  • 4-1,428
  • 5-1,856
  • 6-2,413
  • 7-3,137
  • 8-4,078
  • 9-5,302
  • 10-6,892
  • 11-8,960
  • 12-11,649
  • 13-15,143
  • 14-19,686
  • 15-25,592
  • 16-33,270
  • 17-43,252
  • 18-56,227
  • 19-73,096
  • 20-95,024
  • 21-123,532
  • 22-160,591
  • 23-208,769
  • 省略
  • 47-113,320,260
  • 48-147,316,338
  • 49-191,511,239
  • 50-248,964,611
  • 51-323,653,994

ランク51になるにはおおよそ500はてブの記事を32,365本書かないといけないわけですね。なんて鬼畜!

リボン

無いと何も思いませんが、あると揃えたくなるのがバッジといわれるものですね。
このブログではソーシャルでどれだけ評価されているかを表すためのバッジ(リボンという名称にしている)を付けています。

リボンははてなブックマークのカウント数、Twitterのつぶやき、Facebookのシェア・いいね!の合計値によって記事に付与されます。

ちなみに今あるリボンと必要なカウント数はこんな感じ。

アイコン 条件
green 合計値:75-149
red 合計値:150-299
silver 合計値:300-599
gold 合計値:600-899
w_gold 合計値:900-1199
black_gold 合計値:1200-1599
platinum_black 合計値:1600-1899
diamond_black 合計値:1900-2199
oreichalkos 合計値:2200-2699

今のところ一番下のリボンを持っているのは爆速で有名な小室氏だけ。

ジョブ

投稿しているカテゴリ数を基準に出していますが、あるとRPGっぽいというのが理由。

アバター

まだ実装途中ですが、他のブログと更に差別化するための仕組み
ドット絵で描かれたキャラクターにRPG風の業界ならではな武器やペット、装備が登場します。

ところが・・・ドット絵難しい!著作権こわい!パターン作るの大変(笑)
ということで、まだ絵を貼り付けただけになっています。早く条件によって変わるように実装したいですね。

今のところ弊社代表のアバターしかちゃんとしていません・・・みんな寒いのに裸に棍棒です。

dammy president

著作権的にアウトじゃ・・・ということで止めたベースのドット絵。私的利用を前提にiPhone5用壁紙としてどうぞ

tamanegi

white

その他のUI説明

記事の一覧

記事がどのように評価されているかを簡易的に把握することができるようにデザインされています。

記事一覧

新着記事

検索

カテゴリで絞り込み検索ができます。

検索画面

最後に

まだ荒削りな部分がけっこうありますが、見てくださる方、書いてくださる方にとって他のブログとは違った形で楽しんでいただけるようなブログにしていきたいと思います。
今後ともクラスメソッド開発ブログをよろしくお願いいたします。