素敵なロゴ制作のため発注者がやること。デザイナーとのやり取りのコツ

先日完成したうちのロゴのお話です。

今回は自分のロゴということで、通常のロゴ制作よりさらに気合い入れて作成したので、その工程を保存しておきます。

ロゴは自分で制作したわけでなく、馴染みの敏腕デザイナーさんにお願いをしました。で、常々感じていたのですが、ロゴ制作ってデザイナー選びも大切ですが、それと同じぐらい発注者の対応も大切なのですよね。デザイナーと発注者の協調調和です。

通常ロゴ制作というと、何案か上がってくる→そこから一案選ぶ→ブラッシュアップする という工程が多いですが、割とあるのがこの工程の中でロゴがダサくなっていくという現象です。

デザイナーさんは決して案の中で「これが推しです！」と言うことはありません。ベストを選ぶのは発注者ですから。でもその発注者が、案の中で一番微妙なものを選んで、それをさらに微妙にする指示を入れてくることが多々あるのです。

もちろん格好良ければ良いわけでなく、その企業なり団体の意思が一番伝えられることが大切です。ただダサいし周りに意思も伝わらないロゴがなぜか出来上がっちゃうことあるので、そこは発注者として自分も作り手の一人であるという意識が必要です。

今回、その意識を持ち努力してみた結果、いつもとは違った工程になったのでそれをまとめていきます。

1.材料集め

この辺りは普通の工程ですが、まずはデザイナーさんに渡す資料作りです。ロゴの仕上がりはデザイナー次第。でもそれと同じぐらい自分が集める素材が重要です。最初の打ち合わせ前にできる限る資料を作っておきます。

よくプログラマーを「魔法使い」と言うことがありますが、デザイナーもまた魔法使いです。そうなるとロゴは魔具になりますが(笑)強い装備を作るためには良い素材を集めるのがRPGよろしく定番のルールですね。

素材集めには色々と方法があります。

• 社名の由来やそこから連想されるもの
• 現在の事業内容や今後の方針。伝えたいメッセージ
• 尊敬する企業や取引先の名刺などから参考になるロゴ。
• 街中をフィールドワークして見つけるロゴや看板、雰囲気・色使い。
• 好きな美術や映画
• 自分が普段好んで身につけるもの

などなど、直接ロゴにつながるものでなくとも、自分が好きなものや自分ルーツにつながるものはすべて素材になります。

これらを打ち合わせ前にマインドマップでもなんでも良いのでまとめておけると良いですね。

ポイントとしては今この瞬間だけを見るより、「過去」と「未来」を素材として出しておくことです。

「今この瞬間」というのは現在の事業内容だったり組織規模だったり、今自分はこういうことをやっています、という部分ですね。もちろん伝えるべき情報ですが、それ以上に過去・未来の情報量が必要です。

「過去」は自分の幼少期からのルーツ。その会社ないし組織を作った根源となる動機が伝わると良いです。幼稚園や小学校の時に何が好きだったかみたい話からでも広げていけるかもしれません。

「未来」は背伸びをした先にいる自分。ここは今回、僕が最初意識できていなかったポイントなのですが、過去と現在からだけ素材を集めると今の自分っぽいロゴが仕上がってくるのですよね。

それを見た時に何が足りない感をすごく感じたのですが、それが「未来」でした。自分が今後どうありたいか、です。単純にその組織が目指す未来などをまとめるのも良いですが、普段より少し背伸びをした場所にフィールドワークにいくと何かイメージが湧くかもしれません。

普段買っているブランドよりワンランク上のブランドの服や靴を見に行ったり、普段より良い土地の高いお店でご飯を食べてみたり（笑）

それが何の素材になるんだよ、と思うところですが、普段より良い場所にいった時の気持ちはもちろん、見かけたお店のロゴだったり模様だったりがヒントになったりするものです。

僕の場合は、ロゴのことを考えながら、ふと日本橋で映画「君の名は。」を見た時「あ、コードリンクの"コード"ってプログラミングだけのイメージでなく、"紐"ってイメージにもなるな。」と考えを広げた後に街中をうろうろしていたら偶然見つけたこの暖簾の紋が一番イメージに近い!なんて出会いがありました。

 

うちのロゴ考えるときに一番参考にしたこの暖簾、後からマンダリンオリエンタルのビルにあるものだと気がついた。なのでマンダリンのパワーを受けてやっていけるはず。#5つ星パワー

リョウさん(@code_link)が投稿した写真 - 2017 1月 2 6:43午前 PST

普段だったら新宿辺りで映画を見ているのですが、あえてそうじゃない土地を歩いたからこそのヒントでした。

2.デザイン案から広げていく

最初の話でロゴは最初のデザイン案から絞っていく、という話をしましたが今回一番違ったのがこの工程です。

下の図が実際にうちのロゴが出来るまでの流れなのですが、毎度全然変わってるといますね。ただ毎度1からやり直しているわけでなく、奥底にあるものは一緒っていうのは感じ取ってもらえるのではないでしょうか。

 

うちのロゴが出来るまで。

リョウさん(@code_link)が投稿した写真 - 2017 1月 13 7:24午前 PST

普通のロゴ制作は狭めていく流れですが、今回は広げていく流れでの制作となりました。それでは、どんな流れで広げていったかを解説していきます。

まずなぜ広げていったかというと、都度足りなさを感じたからで、そこに必要なエネルギーを加えていったからです。

そしてその足りなさというのは、デザイナーさんが表現できていない要素というより、こちらが伝えきれてない要素があったと言えます。

ではその足りない要素をどうすれば言語化して伝えられるかが、これからの話となります。

まずは自分の直感で判断

ともあれ最初のロゴ案が上がってきたら、まずは自分の直感で判断です。何となくでokなので、自分がどのロゴが好きでそれはなぜなのか。別のロゴはなぜ違うのか、というイメージを持っておきます。

画面上だけで見るのと、印刷して見るのとではイメージが違うので、紙で見るのも良いでしょう。紙ならそのままイメージしたものを言葉にできますし。僕の紙もこれぐらい文字で埋め尽くされました。

ただいきなりこんなに書いたわけでなく、最初は数行程度だけ書いたのが、寝て起きて改めて感じたものや、この後の工程で書き足したりしていった結果です。

数日間、ディスプレイの横や自宅のテーブルの上に印刷した紙を置いておくと、自然に目に入って自然と日常の中で考えやすくなりますね。

周りの人の意見を集める

自分が毎日考えるのと平行して、周りの人にも意見を求めましょう。一番大事なことです。

職場の人だけだと偏るでしょうし、家族や友達と食事でもしてる時に気軽なかんじで聞くのも良いです。

聞くコツとしては「俺はコレが良いと思うんだけど〜」などと自分の意見を事前に言わないことです。まずは純粋な相手の意見を聞きましょう。

そして、なぜそれを選んだのかをヒアリングしていきましょう。同じロゴを選んだ人でも、違ったポイントに良さを感じているかもしれません。違うロゴを選んだ人は、自分が感じた良さを逆に悪いと思ったかもしれません。

ちなみに僕は、第一案・第二案共に自分が良いと思ったロゴを良いといってくれる人が少ない少数派でした（笑）

なので、自分が好きな方のロゴがダメだと思う理由や、別のロゴを良いと思う理由を多く聞くことができました。

周りの意見を良い意味で無視し、抽象的なイメージに変えていく

反対意見はとても貴重です。ただ今回は、あくまで最初に自分が直感で良いと思うロゴをベースに、ロゴの変更依頼点をまとめていきました。

ここはだいぶ難しいポイントだと思います。

自分と反対意見が多いからといってそれに流されるのもダメですが、反対意見を「お前はわかってない」とばかりに切り捨てるのもダメです。

主体性を持った上で、必要な意見だけを取り入れる必要があります。では「必要な意見」とは何かと言った時、それは聞いた意見の言葉そのものには宿っておらず、その裏に隠れています。

意見そのものじゃなくて、なぜその意見を持ったのかという"背景"が重要ということです。例えばロゴ案に対してよく言われる意見に「色が暗い」「力が弱い」みたいな言葉があります。

それを言われたからといってデザイナーさんに「色をもっと明るくしてください。」「もっとパワーあるかんじにお願いします。」というだけの発注をかけるのでのはダサいと思っています。(ついそう言っちゃうことも多いんですけど。)

なぜそのロゴが暗く感じるのかは、必ずしも色の明度だけが理由ではありません。例えば、下の図は同じ色ですが感じる明るさは違うかと思います。

同様に明るさ暗さだけの話だけでなく、他に言われた意見も、同様に目に見えるポイントだけで原因ではなく、全体的な雰囲気から醸し出されているということです。

それであるとすると、目につくポイントの変更依頼をすることが重要ではなく、どんな雰囲気であって欲しいかを伝えることが重要になってきます。そこで求められるのが集めた意見を"抽象化"していくことです。

具体的に今回のロゴ制作にあたり、どんな抽象化をしたかをまとめていきます。

第1案 今の自分のイメージ。

僕がベースとしたロゴはこちらでした。もう一方のロゴを選んだ人達の意見は「これだと研究所っぽい。」「もっと線を太くしたり波を強くした方が良いと思う。」「もう一方のロゴの方がパワーを感じる。」といったところでした。

それら意見や、同じロゴを選んだ人達の意見を総合して感じたことはこのロゴは「良くも悪くも今の自分を表しているのだ。」ということです。

この抽象化に正解はなく、「仮にそのロゴを何かに例えるとしたら何か。」という遊びのようなものです。

そうすると自然とそのロゴに何が足らないのかが見えてきます。抽象化の結果、このロゴには「過去」「現在」の情報は入っているけど、「未来」において自分がどうありたいのか、というイメージをデザイナーさんに伝えきれていなかったのだと感じました。

そして、その未来像というのは、もう一方のロゴにある円の形のようなイメージとはやはり違うな、とも思い、その辺りの考えや情報を伝え変更依頼としたのです。 

ちなみに変更依頼では、極力色や形に対する直接的な指示はしていません。イメージをできるだけ具体的に伝えて、そのイメージっぽくしてもらいたい、という言い方をしています。

ノンデザイナーの人が頭の中で作った理想の形なんていうのは、実際に形になると得てして大したことがないですし、何よりイメージだけで伝えた結果自分の想像とは全く違ったものが上がってくるのが楽しいんですよね。デザイナーさんマジ魔法使い。

第2案 AIのイメージと重ねた例

次の案の中では僕はこれをベースとして選びました。他にこれを良いと言った人はいなかったかもしれません。笑

僕の中では、自分の持つ強みが発展し結晶化したようなイメージでいたのですが、「色が暗い」「冷たい・排他的かんじがする」みたいな意見が多かったように記憶しています。

そんな意見を自分の中で噛み締めた際に出てきたイメージは「世の中の人工知能に対するネガティブなイメージみたいだな」というものでした。

そのイメージを元に、テクノロジーを世に還元するような父性的なエネルギーを加えた方が良いのであろう、といった考えにつながり、それを変更依頼の軸としたのです。

ロゴ作りを経て、自己のイメージを固めていく

以上が今回のロゴ作りの大枠の経緯となります。一般的にロゴ作りというと、すでに固まったイメージを形に起こすもの、というイメージが強いかもしれませんが、今回はロゴ作りの中で逆に自分の中の指針を固めていくことができました。

飲食店のロゴなどですでにがっちりイメージが決まっている際にはクラウドソーシングのコンペ形式で案を集めるのも良いですが、自身の中で今後の方針についてまだ言語化しきれていない際は今回のような製作方法も一つおすすめです。

ですが、都度案が上がってからのフィードバックにも時間がかかりますし、毎度新しくロゴを作っていただくようなものなので、デザイナーさんにも負担をかけます。

その辺りはまずベースとしてお互いの信頼関係あってのもの。時間をかけるべき点以外は極力先回りで情報を送るなど、気遣いをお忘れなく。

自分はデザインをわかってないと自覚する

ここまで振り返ってみて重要な点を2点に集約するとしたらこの2つになります。これが発注者・ディレクターに取って重要なことです。

• 自分がデザインに詳しくないと自覚すること
• それでも主体性は持つこと

先ほどの「色をもっと明るくしてください。」のような発言だったり、周りの人の意見を聞かなかったりというのは、自分が少なからずデザインに通じてると思ってる勘違いだと思うのですよね。

都度、僕がロゴの製作に関わっていて感じるのが、自分はデザインをわかっていないのだな、ということです。日頃web製作をしていて、それこそ自分でもPhotoshopやIllustratorなりに触れていると勘違いしてしまうのですが、本来デザインはそんな簡単なものではありません。

最近ではwebサイト製作ツールや、画像加工アプリなど、それっぽくデザインに触れた気になってしまうものが増え、勘違いする機会はますます増えてくるでしょう。

そんな中ロゴ製作はそんなツール頼りでは作れない、デザイン純度の高い仕事です。ですので、ここで改めてデザイナーへのリスペクトを思い出して取り組むべきお仕事と言えるでしょう。

リスペクトと主体性、その2点を意識し素敵なロゴ製作になりますことを。

最後に、今回素敵なロゴを制作していただきましたよあけデザイン様のサイトはこちらです。

仕事実績:コードリンクのロゴ | 熊本のデザイン事務所 | よあけデザイン
yoake-design.com

六本木アートナイト2016で感じた、変化してきたクリエイティブ

www.roppongiartnight.com

毎年「今年はどうすっかなー」と言いながらなんだかんだ行っている六本木アートナイト、今年も行ってきました。個人的に楽しみにしていた、たこ焼きシーケンサー(何を言っているのかよくわからない)が時間の都合で見れませんでしたが、ここ数年の中ではだいぶ満足した年でした。

www.roppongiartnight.com

六本木アートナイトは、3.11の大震災があった2011年には中止され翌年以降も震災復興というメッセージ性が強い作品が多かったように感じています。

ただ今年はその色がだいぶ無くなったきた印象がありました。こんな展示数年前だったらできなかったんだろうな、という直接的なものから、間接的なテーマとしても「破壊」を伴う作品が出てきていました。

ただそれは、そのような物事をもう忘れてしまった、というエネルギーではありません。あれから数年、安心や安全を意識し社会は回ってきたように感じていますが、それだけでは世の中回らない部分がある、という感覚です。

「このままではダメだ。」という感覚が、社会の中で産まれてきており、ではどうすれば良いのかというと、破壊と言うと大げさかもしれませんが、まずは物事を手放すという必要が出てきたよう感じます。

新しい作品というのは、その社会の兆候を写す鏡ではないのかなと。

これまでの作品は、元々あった作品の上に震災というテーマが乗せられていましたが、今はそれは大前提のテーマとなり、そこに何を乗せるか、ということを考える時代になってきたということです。

それと関連することで、先月あった「デザイン・コードSP」という番組の中で、オリンピックの卓球台に関する制作秘話がありました。

www.tv-asahi.co.jp

この卓球台、TVで試合を見ていて「すげーカッコイイなー」と思っていたのですが、実はこれも震災からの復興というのがベースのテーマにあるのです。

使われた木材が被災地のものということもありますが、この一見「X」に見える台の形は実は「支」という漢字を表しています。ただ良い意味でそれがわからないぐらい格好いいデザインなのですよね。

ここ数年の世の中の作品は、支えるといったテーマと作品自身があまり組み合ってないように思うところがあったのですが、その辺がかなりかみ合ってきた2016年を最近は感じています。

そんな時代、その上に新しく乗ってきたテーマが「破壊と再生」というのは非常に面白いなと考えることのできる六本木アートナイト2016でした。

来年もなんだかんだ行くのかなー。

よくわからないとわかった人工知能セミナーナイト

 

こちらの出版記念イベントに参加させていただいたので、その内容をメモがてら記事にしてみます。さっそくよくわからない！と評判が来ているらしい(笑)本書ですが、今回のセミナーの内容をお届けする中で別の目線を与えられれば幸いです。

peatix.com

第一部:AI教育論

第一部は著者である清水さん単独のお話。AI教育論といったところでしょうか。

まずAI、すなわち人工知能の「知能」とはなんなのでしょうか。それは本書の中にも解説があることですが、「知性=intelligence」その意味は「知識(knowledge)と技能(skill)を獲得(aquire)し、適用(apply)する」こと。それすなわち知性となります。 

いまのPCでもある部分では知性を得ることができていました。Google検索も知識を獲得し、それを活用するするという意味ではAIと言えるかもしれません。ただ今そのような限られた範疇だけでなく、その範囲が拡張してきているため昨今またAI業界が盛り上がってきているようです(第三次ブーム)。その大きな特徴は、認識スキルの急激な伸びです。 

具体的には、深層学習という分野の中で、画像を認識するロジックをAI自身が作り、いままで人間が頑張って作ってきた画像認識アルゴリズムの精度(60%ぐらい)を10%以上一気に超えてきたというのです。

ではAIになぜそれができるのか。それはAIに個性があるから。 

個性、というと大げさなのかもしれませんが、AIは初期のステータス設定がランダムなため、同じ学習をするにしてもその学習結果が一人一人異なるのです。そんなAI君達が何千何万人と一気に学習を進め、認識の精度を上げていく、と流れです。

そんなAI君達の中で優秀なテスト結果を出す個体の特徴というのは「良い間違いを重ねたAI」。AIに取って正解というのは＝間違いではないものを知る、ということなのです。

だから学習中偏った正解ばかり見てしまうと、いざ本番にちょっと違った問題を出された時に間違えてしまうとのこと。

まるで人間のようですね。同じ授業受けてもみんなテスト結果は違うし、真面目に黒板のノート取ってるんだけど応用問題になると全然わからない子がいる、みたいな。なによりAIは「間違う」ことができるから高い知性を得ることができるということ自体がすでに人間的です。

他にも人工知能の学習テクニックがいくつもあるのですが、どれも人間的なのがとても印象的でした。

蒸留

蒸留というAIの学習方法があり、それはざっくりいうと「良いAIを先生にすると、生徒のAIはもっと賢くなる」ということ。

生徒AIは、まず先生AIの答えをそのまままずは何も考えず、完コピしていく。そしてその後に学習をしていくと先生AIが3ヶ月かけて学んだことを、生徒AIは半日で学ぶことができるというのです。

人間でいうと、守破離みたいなかんじでしょうか。

生成敵対的学習

生成敵対的学習という手法もあり、これは「相手を騙そうとするAI」と「それに正しく答えようとするAI」を作りそれがお互いにライバルとして対決していくと学習速度が上がるというもの。

先ほどの話でも、如何によい間違いを積み重ねるかが重要、という話がありましたが、その良い間違い、というのをAI自身が作ってしまうということですね。

ブレイクスルー

これは学習方法ではなく学習過程の話なのですが、これもまた面白い話です。

AIの精度というのは、時間に正比例して伸びていくものでは決してなく、しばらく精度が伸び悩む時期が続きある時急に精度がスパーンと跳ね上がる時があるというのです。

もちろん全部のAIがみんなそうなるわけではなく、局所解をぐるぐる回るだけのやつもが多く、そんな子達は間引いたり別のランダムな値を与えてみたりみたいなことがあって、というお話のようですが。

そしてこれは3日経ってやってブレイクスルーが起きる、みたいな時間単位でもあるようで、それは少し前の今と比べて1/100のマシンスペックだったとしたら300日かかることだったみたいな話になってくるので、そもそものマシンのスペックの重要性をより感じることのできる現象でもあります。

そんなこんなで、どれも非常に人間的な学び方である、というのが面白いですね。

では、良いAIを育てるためにはなにが必要か。それは、良い学習データを人間が用意することにあります。すでに画像認識といった分野では、今プログラマーに残っている仕事は、AIに必要な学習データを作ることぐらいという話もありました。すでにプログラマー自身が仕事を奪われているのですね。笑

そして学習データのセット自体をAIがやってくる日というのもいずれやってくるのでしょう。

といったところで、AI教育論のまとめ。AIの教育に必要なものは以下の5つ。

• 良い教材
• 良い先生
• 良いライバル
• コツはそれぞれ
• 根気よく待ってブレイクスルーに期待する

AIは技術によって、人間の認知が拡張された未来が楽しみです。 

第二部:品川女子学院の漆校長との対談。これからのAIで社会で人間が学ぶべきことは？

そして第二部は、品川女子学院の漆校長と清水さんの対談形式に。

diamond.jp

品川女子学院は、授業にタブレット端末を導入するなど先進的な学習を提供されている中高一貫校。

学校教育とAIというと一見関係なさそうに見えますが、これからの時代いまある仕事の50%は失われる、と言われているこの時代、「今後来るAI社会の中で子供達に何を教えるべきか」というのは教育者達の大きなテーマである、ということです。

対談中、色々な面白いお話がありましたがここでは基本的にこのテーマに話を絞っていきたいと思います。

まず品川先生のお話に出てきたので良い子を育てる4つのしつけ。それは以下の4つ。

• 嘘をつかない
• 約束を守る
• 親切にする
• 勉強をする

以上が身についていると、大人になった際平均年収が80万強上がるというお話でした。

こういった不変的なものが身についていれば、これから時代が変わっても生き抜くことができるのではないか、という一つの説です。

その話の後に清水さんが言っていたことは、それらのうち特に「勉強をする」のはAIの方が得意だし必ずしもそれだけでは足らない、ということ。昨今の某電通の悲しい事件もありましたが、その4つを身につけている人が現時点ですでに不幸せになるケースが出ているわけです。

それであれば、清水さんとしては

• 遊ぶ
• さぼる
• 嘘をつく

といった「あいつ上手いことやってるよな」と言われるような人間らしいスキルが実際のところ求められているのでは、という話になりました。

凄く悪く言った形ではありますが、うまくいく経営者はこの3つができるわけで、それができないマジメな経営者は会社を畳んでいるわけです。そして今後従業員がどんどんAIになっていくのであれば、確かに今後さらに必要なスキルのようにも思えてきます。

ただここでの問題は、マジメに生きるべきか否かと言った細かい話では当然ありません。これらの話を通して、最終的に「人間にしかできないことは何か。」「今AIに足りないものは何か。」をすり合わせていくと見えてくる正解があるのです。

それはまるで理系らしくない話ですが、心とはなにか。意識とはなにか。という話へと繋がってきます。

本書の中でも出てくる今後のAIの課題として、どうすればAIに「意識」を実装できるかという問題があります。マシンスペックが足らないという基本的課題もありますが、それ以上にそもそもどうすれば意識が実装可能かを考える必要があります。

「記憶する」「考える」程度のことであれば今のAIでも可能ですが、「感じる」「表現する」というエモーショナルな能力に関しては「意識」という感覚が求められます。それがないとAIはただのおもちゃですし、それがない人間はクリエイティビティが発揮できません。

では「意識」とは何か。そこでキーとなるのが学校です。漆先生が今回対談者だったからというわけではないですが(笑) 学校というのは、ただ覚えたりテストを解くための施設ではありません。その学校生活の中で得られる経験こそが、自分の意識を育てていく過程になります。

人間で言えば、社会で上手くやっていく能力、と言われるものは意識と紐付いているとも言えます。意識が育っていれば、自分がどうあるべきかという問いに自然と答えられるわけですよね。

人間は今後よりたくさん良い経験を積むべきだし、AIは経験するという概念を強く持つべきである、なんて単純に言葉にしてしまうと質問を煙に巻いたようにも見えてしまいますが、結局それしか無いんですよね。

人もAIも、自分の人生を謳歌することで今後の楽しい社会が拓けるということです。

そんな抽象的な話になってくるので、具体的に今後どうすれば良いかと聞かれると、いざそうなってみないとわからないということ。笑

ただ、現場の最前線にいる人もわからないんだと知ることがまず重要なのでしょう。

そしてまず最初にそれを体感として身につけるのは、デジタルネイティブな世代でも無く、次のAIネイティブな世代の子達です。

僕らはその世代でないので、わからなくて当然、まずはそう受け入れことが重要なのです。

こんな面白AI話をより色々な目線から考えることができる本書。ぜひどーぞ。

よくわかる人工知能 最先端の人だけが知っているディープラーニングのひみつ

また、少し前まで生放送のタイムシフトもあったのですが、公開期間が終了してしまったようなので、対談内容が編集掲載されているこちらの記事もどうぞ。

ascii.jp

ぼからん・月刊うたらん・歌らん・奏らんのSongrium連続再生機能に対応しました。(PC限定)

こんにちわ、リョウです。

各ランキング投稿者様方のツイート等ですでに告知されておりますが、下記ランキング動画で紹介されている動画のSongrium( http://songrium.jp/ )さんを利用した、連続再生のために影ながら協力をさせていただきました。

• 週刊VOCALOIDとUTAUランキング
• 週刊ニコニコ歌ってみたランキング
• 週刊ニコニコ演奏してみたランキング
• 月刊UTAUオリジナル曲ランキング(2015/07/05 追記)

というわけで、本日22時ジャストに投稿予約完了。予約なのには訳がある

— sippotan (@sippotan) 2015, 6月 15

【お知らせ】週刊ぼからん復活に併せて、今号より週刊歌らん内で紹介した動画をSongriumで手軽に視聴出来るようになります、Songriumと歌い手・ボカロDBとランキング動画のコラボレーション企画です、ぜひご活用下さい！詳細は後日BLOG記事にまとめます

— 歌らん＠ロストレガシー最強決定戦優勝 (@weekly_utaran) 2015, 6月 15

【お知らせ】週刊ぼからん復活に併せて、歌らんと同じく今回から週刊奏らん＆わならじ！内で紹介した動画をSongriumで手軽に視聴出来るようになります！Songriumと歌い手・ボカロDBとランキング動画のコラボレーション企画です、歌らん・ぼからん・奏らん合わせてぜひご活用下さい！

— KohMei (@KohMei1012) 2015, 6月 15

本日再開された「週刊VOCALOIDとUTAUランキング」 http://t.co/JmbFmNiJ6f から新たに、Songriumの連続再生機能でぼからんを楽しめるリンク http://t.co/JN61UlYv0r が掲載されました！ #songrium #vocaloid

— Masataka Goto / 後藤真孝 (@MasatakaGoto) 2015, 6月 15

(2015/07/05 追記)

【ニュースリリース】月刊UTAUオリジナル曲ランキング、Songriumを用いた紹介楽曲の連続再生に対応 http://t.co/Sr61kNjwmY

— 鈴木せりふ (@ceripher) 2015, 6月 29

週刊VOCALOIDランキングさんの復活に合わせました今回からの企画ですが、下記リンクをクリックしていただければ、下記ランキング動画さんのランクイン動画を連続で視聴しつつ、関連動画や派生作品等も合わせてチェックすることができます。(残念ながらPCオンリー)

• 週刊VOCALOIDとUTAUランキング　#402・344
• 刊ニコニコ歌ってみたランキング #345 [6月第3週]
• 週刊ニコニコ演奏してみたランキング #23 [6月第1週]

歌い手DB・ボカロDBを運営する僕は、この再生リストを生成部分で影ながらうにょうにょと動かせていただきました。

各ランキング動画のバックナンバー・ランクイン動画一覧は、こちらのページ掲載していますので、ぜひご覧くださいませ。 http://nicodb.jp/r/

歌い手DB・ボカロDBの作り方。デザインや技術周りの話

どもども。サイト更新の筆が進まないので、そのうち書こうと思っていた、歌い手DB・ボカロDBの技術的な話をしようかと思います。基本、web系の技術なんて全然わかんないよーという人向けで。

歌い手DBを作るのに必要な技術

まず当たり前っちゃ当たり前なのですが、このサイトは僕一人で作成しています。

では、このサイトを作るにまずどんな技術か必要なのかの一覧です。

【デザイン周り】

・サイト全体のデザイン → Photoshopというソフトを使う

・ロゴ・アイコンのデザイン → Illustratorというソフトを使う

・デザインをサイトに起こす(コーディング) → HTML・CSS・JavaScriptという技術を使う

【プログラム周り】

・ニコニコ動画からデータを収集して、計算・保存する → PHPという技術を使う

・収集したデータをデザインと合わせて表示する → PHPという技術を使う

【マーケティング周り】

・Googleで歌い手名/ボカロ名で検索した時に、上位に表示されるよう頑張る → SEOという知識を使う

こんなかんじで一口にサイトを作ると言っても、色々な知識が必要だったりするのです。

デザイン周りの話

Photoshop・Illustratorについて

フォトショ・イラレなどと略したりしますが、デザインに携わらない人でもこのソフトの名前は聞くのでないでしょうか。

• Photoshop → 元々は写真加工ソフト。でもwebデザイン作成ソフトとしてもこれがスタンダードになってる。
• Illustrator → ポスターとか名刺みたいな紙デザインでよく使うソフト。webでもロゴのデザインなんかで使う。

超ざっくりですが各ソフトの特徴はこんなかんじ。

web系のデザインといったらほぼ全員といっていいほど、プロもこのソフトを使っています。(同じ会社が出している、Fireworksというwebデザイン専用のソフトもあるのですが更新が止まってしまいました。)

値段は各ソフト昔は1本18万ほどしたのですが、最近ではCCというバージョンが出て各ソフト月2000円程度で使えるようになりました。学生ならさらにそれより50%以上安くなっています。

そんなわけでかなり値段としての敷居は下がってきている昨今です。

用途についてもうちょっと突っ込むと、PhotoshopとIllustrator、何が違うのよって話を具体的に話すのは中々難しいのですが、webの場合こんな分業をされていることが多いです。

• Photoshop → サイト全体のレイアウトの作成・写真の加工
• Illustrator → ロゴやアイコン画像の作成

Illustratorでレイアウトを作ることも可能なのですが(実際全部Illustratorでやる人もいます)、多くの場合Illustratorでロゴやアイコンを作り、それを使ってPhotoshopでレイアウト作成ってのがほとんどかと思われます。

どちらのソフトも元々はwebデザイン用途ではないのですが、どちらもwebデザイン用にバージョンアップを繰り替えしているので、今ではどっちでもレイアウト作成できるっていうのが今の実情かと思います。

ただ昔は特にPhotoshopの方がwebデザインに向いているとされていたので、情報をぐぐったりするとPhotoshopの情報が多いし、流れで今でもPhotoshopというかんじですかね。

サイト全体のデザイン(Photoshop)

そんなわけでサイト全体のデザインの話になるのですが、今回サイトのデザインを作るにあたりPhotoshopは使ってませんｗ

ただの手抜きなので、今回歌い手DB・ボカロDBはよく言えばシンプル、悪く言えば手抜きなデザインになっています。

Photoshopによるサイト全体のデザインっていうのは、簡単に言えば「下書き」です。なので、歌い手DB・ボカロDBぐらいのデザインであれば下書きをすっ飛ばしていきなり書くこともできる、というイメージですね。

実際、webサイトのデザインというのは、こんな行程で進められることが多いです。

ワイヤーフレーム(枠組み)の作成
↓
カンプ(完成イメージ)の作成 *ここでPhotoshopを使う
↓
コーディング(デザインをサイトに起こす)

なので今回は、手書きでざっくりとサイト全体の枠組みを決めて、そのまま随時パーツを作りながらコーディングをしてしまいました。

複数人でサイトを作る際には、デザインカンプの作成をデザイナーが、コーディングをコーダーが、という形で分業することも多いので、基本はちゃんとカンプを作ることがほとんどです。

というかお仕事になると、「やっぱイメージと違うから直して。」という要望が出ることがほとんどなので、カンプ(完成イメージ)の段階であーだこーだ話をすることが大事ってのも大きかったりします。

ロゴ・アイコンのデザイン(Illustrator)

みんな大好きこのキャラクターはIllustratorという、Photoshopと同じadobe社が出しているソフトで作られています。

僕は基本、絵とかあまり書けない人間なのですがソフトの使い方がある程度わかればこれぐらいいけますよってかんじ。

サイト全体のデザインがさっぱりしているのに、ある程度ちゃんとして見えるのはこのキャラだったりアイコンのおかげなのですよね。

ドーン!と一枚良いかんじの写真だったりキャラ絵があれば、それっぽく締まって見えるっていうのは結構大事なテクニックです。

最近では、「Bootstrap」といったある程度のサイト作成知識があれば、それなりに今っぽいサイトが作れるよ、というツールもあるのですが、それだけで作ったサイトが今風なのになんかダサく見えるっていうのは、こういった写真や絵のパワーを使っていないからだと思っています。

なので細部なのですが、サイト作成の中では結構重要な要素ですよっと。

PhotoshopやIllustratorの学習方法

この本・サイトを見るとが良いですよ、というのがあると良いのですがこれが良書ってのが中々無いのですよね、この業界…

先にIllustratorでいえば、僕はスクールで学びました。

→Illustrator基礎講座

元々Photoshopはある程度触れたのですが、Illustratorも学ぼうと色々本を探したのですが、これってものがなくてしょんぼりしていたところにこちらのスクールがあり非常に助かりました。

一方でPhotoshopは結構独学です。先のIllustrator講座のPhotoshop版にも参加し、かなり補強してもらったのですが、それまではなんとか頑張って独学してました。

学習の遍歴でいうと、こんな流れ。

学生自体、絵の色塗りのために本一冊買ってなんとなく頑張る
↓
web系の会社でバイト時代、デザイナーさんの仕事を横目で見てなんとなく盗む。
↓
別のweb系の会社で働いている時、デザイナーさんの仕事を(略
↓
Photoshop講座で学ぶ

あとは合間合間に、歌い手DBとはまた違う趣味サイトを作って勉強してました。

今でもたまにPhotoshopの本はぱらっと立ち読みするのですが、実際のサイト作成フローを教えてくれるものはほぼないのかなーと思っています。

ただIllustratorよりはPhotoshopの方が、いくつかの本やwebサイトの情報を見て独学しやすいはず。ソフトの使い方がある程度は直感的なので。

本についてはamazonの評価を見るよりは書店で立ち読みしながら探した方が良いですよ。amazonのレビューはすでにある程度知識がある人のものだったりするので、実際に見て自分のレベルにあったものが一番です。

コーディング(HTML・CSS・JavaScript)

さて続いてですが、いわゆるHTMLなんかを書いて、実際にwebサイトを作る作業を総称してコーディングと呼びます。

HTML → サイト全体の基本の枠組み。
CSS → 枠組みに対する装飾。枠を並べたり色をつけたりする。
JavaScript → サイトの中でシュンシュン動いている部分はだいたいこれが動かしている。

プログラムを書く、という行為には近いのですが、HTMLやCSSを書くハードルはそれなりに低いので、デザイナーさんが自分でコーディングを行うケースも多いです。

というか「webデザイナー」という際には、書けて当然ぐらいの雰囲気です。紙系の仕事メインのデザイナーさんだと、あくまでデザインだけやって、コーディングは別の人がやるというケースも多いです。

僕はこの辺もほぼ独学でやってきた人間なので、おすすめできる書籍などないのですが、最近は無料の動画学習サイトなどもあるのでこのあたりが良いかなーと。

ドットインストール　HTML入門

あとはデザインもコーディングもそうですが、自分が作りたいものと似たサイトを見つけ、それをどうパクr…参考にするかを考えると早いかと思います。

僕も今でも何かサイトを作るとなると、参考サイトをがっつり探して、その要素をうまいこと整理して使っていくことが多いです。先人に学びましょう。

捕捉:CSS3とかJavaScript・jQueryってやつ

サイト全体のデザイン(Photoshop)の部分で、歌い手DB・ボカロDBはPhotoshopでのデザインをすっ飛ばした手抜き、のような話をしましたが、通常そうやってサイトを作るとかなりしょぼくなります。

それなのにうちのサイトがなぜそれなりにちゃんとして見えるのかというと、そこにはこのCSS3・jQueryという技術が大きく生きています。

この点について文字だけで説明するとやっかいなので、実例を交えながらCSS3・jQueryでどんなことができるのかを説明してみます。

---

これらのボタンはCSS3による装飾で作られています。従来のCSSではこのように角丸をつけることはできませんでした。なので角丸があるボタン1つ作るだけでもPhotoshopで角丸のボタン画像を作る必要があったのです。

また、このボタンにマウスを重ねた時にボタンの色が薄くなるのもCSSの効果ですし、今回は利用していませんがボタンの色を単色にせずグラデーションをかけるのもCSS3で行うことができます。

さらに凝ったボタンを作るのであれば、Photoshopでそのデザインを制作する必要があるのですが、これぐらいであればCSS3だけでの再現ができるのです。

---

この背景色が交互に灰色・白色となっている部分もCSS3が生きています。従来のCSSではこのような場合、1行目を灰色・2行目を白色・3行目を灰色…と個別にしていく必要があるのですが、CSS3では奇数個目を灰色・偶数個目を白色という指定することができるので、かなり手間が減ります。

あとついでにサムネイル画像の四隅がさりげなく角丸になっているのも、先ほどのボタンと同じくですがやはりCSS3の効果です。

角丸にすれば良いってものでもないのですが、程度を調整すればこの方が綺麗なことは多いです。デザインとかあまりしない人がカーブの大きい角丸を多用して、逆にダサくなっているのもそれはそれでよく見る光景だったりもします。

---

スマホから見た時、最下部に出るこのメニューですが、サイトを開いた段階では表示されておらず、ある程度スクロールしてはじめて表示されるかと思います。

このように動的な動きをしてくれるのが、jQueryです。

---

こちらの並び変え機能もjQueryによって作られています。この動き好きでよく意味もなく並び変えボタンを押しまくっていますｗ 違うページに遷移することなく、そのページ内で動きがあるものはだいたいこのjQueryが動いていると思ってもらえれば良いです。

こんなかんじで今っぽいデザインや機能をそれなりに手軽に実装することができるのが、CSS3やjQueryなのです。

捕捉2:レスポンシブWebデザインとかいうやつ

最近、webサイト製作の世界では、レスポンシブWebデザインという手法があります。

昨今webサイトを作るとなると、PC版だけでなくスマホ版を作るのはほぼ必須なのですが、1つのサイトを作る時にPC版・スマホ版と2パターン作る必要があるのです。

そこで出てくるのがレスポンシブWebデザインという手法なのですが、これはPC版・スマホ版と別々のデザインを作るのでなく、1つのデザインでPCから見てもスマホから見ても、サイズなどをうまいこと調整し対応するというものです。

大学のサイトでも、京都大学や早稲田大学なんかも最近レスポンシブWebデザインに対応しています。

• 京都大学
• 早稲田大学

PCから開いて、ウインドウのサイズを横に狭くするとレイアウトが変わるのが分かるかと思います。

別にPCスマホ2パターン作るより、レスポンシブWebデザインを作る方が優れているわけでもないです。1パターンだけ作ればよい分、一見作るのが楽になる気もするのですが、それはそれで色々別の手間が増えるのですよねｗ

個人的には今でも凝ったものを作る時には、PCスマホ2パターン分けた方が良い派です。

などと言いつつ、歌い手DB・ボカロDBではレスポンシブWebデザインを採用しています。これはなぜかと言うと、特に最初に作成した歌い手DBは、スマホユーザーがメインになると思ったためです。

元来レスポンシブWebデザインというと、PCサイトのデザインをスマホでも見れるようにするという考え方が多いです。しかし、歌い手DBではスマホサイトのデザインをPCでも見れるようにしておこう、と主従が反対の考え方をしています。

元々歌い手DBはスマホデザインだけでよいかな、ぐらいに考えていたのですが、さすがPCで見づらいのはなーということで、スマホデザインをついでにPCでも見れるようにしたのが、今回作成したデザインなのです。

あ、ちなみにこのレスポンシブデザインも、先に出てきたCSS3の力を大きく利用して作られています。

プログラムの話。ニコニコ動画からデータを収集して、計算・保存・表示する

さてさて、デザインの話はこれぐらいにしておいて、続いてはプログラムの話。

先に簡単な概要からですが、歌い手・ボカロDBの中でプログラムはどんな働きをしているのでしょうか。

• ニコニコ動画から動画のデータを集める
• 集めた動画のデータを整理・計算する
• 計算したデータを保存する
• 保存したデータをサイト上で表示する

ざっくり分けてればこんなところです。プログラムというと小難しい話に聞こえますが、分けて考えればこんなものです。やろうと思えば人の手でもできることでしょう。

例えば歌ってみたのデータが集めたいのであれば、ニコニコ動画にアクセスして動画の情報をエクセルにでもぺたぺたコピペをし、集計用の関数を組めばデータ上、歌い手DBと同様のものを作ることができます。

とはいえ、今現在でも歌ってみたタグがついた動画は70万件以上あります。それを手作業で集めるのはちょっと骨が折れますね。しかも動画は日々再生数か増え、新しい動画も投稿されるのでどんどん更新もしないといけません。

さすがにそれはやってられないよねー、という話になるのでその辺をプログラム君にやってもらおう、となるわけです。

プログラムでニコニコ動画のデータを集める方法

さてでは、プログラムでニコニコ動画を集めるにはどうすれば良いのか。それは大まかに2つの方法に分かれます。

• 1.スクレイピングという手法を使う
• 2.APIを利用する

1.スクレイピングという手法を使う スクレイピングとは何か。簡単にいえばプログラムによる自動のコピーです。

仮に自分の手でニコニコ動画の情報を集めようとしたら、各動画ページを開いて再生数など必要な情報をコピーすると思います。それをプログラムにやってもらうのがスクレイピングという手法です。

歌い手DBでも、「歌ってみた」タグの検索結果ページをスクレイピングして毎日データを集めています。

便利な技術ではあるのですが、一方で著作権的な問題に繋がりやすい技術であったりもします。

著作権とは別方向ですが、以前には岡崎市立中央図書館事件という、図書館のwebサイトへスクレイピングをしていた方が、大量のアクセスによる業務妨害容疑で逮捕された事件もありました。実際は、障害に繋がるほどのアクセスでもなく、サイトのバグが大きな要因だったようで不起訴になったようですが。

こんな風に書くと怖くかんじもしますが、実際のところGoogleなんかの検索エンジンも全世界のサイトに向けてスクレイピングをしているわけなのですよね。

2.APIを利用する そんな、こちらが一方的にデータを拾いにいくスクレイピングとはまた違うのが、APIの存在です。

APIは運営側が、利用規約を定めた上で自社サイトのデータを公開しているものです。ニコニコ動画もAPIを公開しており、イメージいえば運営さんが各動画のデータをエクセルのような形式で提供してくれている、と思ってもらえれば良いかと思います。

そのAPIにプログラムを通じてアクセスすれば、スクレイピングのように各動画ページにたくさんアクセスをすることなく、まとめてデータをもらうことができます。

歌い手DBの場合、「どの動画のデータが欲しいか」までは検索結果ページへのスクレイピングで判断し、「各動画の実際のデータ」はAPIにアクセスすることで取得しています。

ニコニコ動画によくあるランキング動画もこのAPIのデータを使ったものがほとんどかと思います。それこそプログラム知識がなくとも、「ニコニコランキングメーカー」というソフトを使うことでAPIを通じたデータを取得することができるのですよね。

⇒ニコニコランキングメーカー

APIは様々な大手サイトが提供しています。例えばTwitterクライアントもTwitter社が提供しているTwitterAPIによって作られているわけです。

集めた動画のデータを整理・計算・保存する。プログラム言語の話。

データを集めた後はプログラムの基本ですね。歌い手・ボカロDBの場合、あとは足し算なり割り算なりをして、投稿ユーザーごとの累計再生数などを出しデータベースに情報を保存しています。

いまさらながらですが、歌い手・ボカロDBでは、PHPというプログラム言語・Codeigniterというフレームワーク・Mysqlというデータベースってやつを利用しています。

PHPはweb系に適したプログラム言語です。最近のwebサイトであれば、PHPかRubyという言語でプログラムが書かれていることが大半でしょう(他にはPerl、Pythonあたり)。それ以外のプログラム言語でもweb系のものが作れないわけではないのですが、webに最適化されている有名なプログラム言語といえばこの2つなのですよね。

世間ではRubyの方が生産性が高いと言われることが多いですが、初見の人の敷居が低いのはPHPかなと思います。敷居が低いが故に、僕のような本職でない人が触ることも多く、PHPを使うような奴はぐぐった情報を安易にコピペして危ないものを作ってばっかだと揶揄されることも多かったりします。結局は言語の優劣でなく、使い手の問題なのですよね。

初心者向けの情報は多いわけですし、ブログシステムとして有名な「WordPress」もPHPで作られているので、プログラム使ったwebサイトを作りたいなーという人はPHPで良いんでないでしょうか。

あ、ここでもPHPの僕の学習方法は独学ですｗ デザインはスクールに通ってますが、プログラムは完全に独学、もうちょっとちゃんと学びたいものです(´ｰ｀)

よくある初心者向け本を見つつ、最初の頃一番役にたったのはこの本でしょうか。もう絶版なんですけど。

あ、あと先ほど紹介したドットインストールというサイトにもPHP編があります。

ドットインストール　PHP入門

データをデザインと合わせて表示する

そんなこんなで集計したデータを、コーディングしたサイトのデザインと合わせて表示すれば歌い手・ボカロDBは＼完成／

プログラムってやりたいです！って人たびたびいるのですが、多くの場合先ほどのドットインストールの途中などで飽きてしまうことが多いかと思います。

それはデザインなんかと違って、成長度合いが自分で判断しづらいし、学習段階で今やってるものが今後どう生きていくのかがわかりづらいからなのですよね…

簡単にいえばプログラムの学習ってかなり退屈なのです。なのでプログラムの勉強をしたいのであれば、ある程度自分が作りたいものを明確にして、まずは最低現そのサイト作成に必要な知識だけを身につけると良いと思います。

教科書を見て1から10まで順番に学んでいくのでなく、必要なものだけをつまんで、段々と足りない知識を補っていくスタイルが良いでしょう。

Googleで歌い手名/ボカロ名で検索した時に、上位に表示されるよう頑張る

サイトをただ作れば良いわけでもないのが、サイト運営の世界。多くの人に見てもらいたいのであれば、当然宣伝もしないといけません。

歌い手DB・ボカロDB共にTwitterでたくさんの方々に広めていただいていますが、実は先行して運営している歌い手DBの場合、現在新規アクセス流入の半分以上がTwitter経由でなくGoogle・Yahooといった検索エンジンだったりします。

「歌い手データベース」というサイト名で検索いただくことももちろんありますが、それ以上に「歌い手」や「○○(歌い手名) 歌ってみた」などのキーワードで検索をしてもらえているのが大半です。

このように検索エンジンからアクセスを獲得する際に考える必要があるのが、SEOという手法です。

SEOは「検索エンジン最適化」と訳されますが、とにかくまあ検索エンジンに好まれるサイトにしましょうということです。

このSEOは大きく分けて2つの対策に分けられます。それが「内部対策」と「外部対策」です。

内部対策 → サイトの中身をGoogleに対して見やすくすること。ページごとにちゃんとタイトルを設定したり、ページごとをちゃんとリンクさせたり。
外部対策 → 一言で言えば他のサイトからのリンク。色々なサイトからリンクされている=色々な人から評価されている。

自分でやることといえば基本的には内部対策です。知り合いのサイトやブログさんに、自分のサイトへのリンクを掲載してください！とお願いするのはかなり大事ですが、逆に言えばそれぐらいしか外部対策でできることは普通ないので。

内部対策で大事なのは、事前のサイトの設計です。歌い手DBでは、「○○(歌い手名) 歌ってみた」などのキーワードでの検索が多いと書きましたが、これは大前提として、歌い手さんごとの個別ページが存在するからこそのことなのですよね。

なので仮に歌い手DBが、ランキングページや歌い手さんの一覧表だけで構成されていたら、そのようなキーワードでアクセスされることはありえません。

ただ無意味に中身の無いページを量産するのは最悪ですが、ある程度幅広くページを持つことで検索されるキーワードの幅を広げることができるのです。

最終的には、「歌い手データベース」「ボカロデータベース」と検索してくれる人がほとんどになったらそれが最強とは思うのですが、あまり認知されていない段階では、うちのサイト名を知らないでも来てくれる窓口を作っておく必要かあるのですよね。

……

言いたいことはもっとたくさんあるのですが、とりあえず歌い手DB・ボカロDBを作る際に用いた技術だったり考え方っていうのは大ざっぱにすると以上です。

一人でも良いのでこの記事を多少なり参考に、自分が作りたかったサイトを作る切っ掛けになれば幸いです。

乱文を最後までご覧いただき、ありがとうございました。

ボカロデータベースという、ニコニコ動画のボーカロイドまとめサイトを作った話。

歌い手データベースという、ニコニコ動画の歌ってみたまとめサイトを作った話。 という記事を先日アップしたばかりですが、ボカロ版も作成をしたのでお知らせ。

ボカロデータベース

歌い手データベースもそうですが、動画単位でなく投稿者単位でのランキング作りをしています。というのも、ニコ動のランキングは動画単位なので、界隈の全体感が掴みづらいよなーと思っていたためです。

ランク順のボカロP一覧なんかを見ると、人気な方々の全体感が掴めるのでないかなと思われます。こうして見るとなんだかんだとニコ動初期の頃から投稿を続けている方が多く、驚き尊敬です。

• 本日の期待の新人
• 本日のもっと評価されるべき

辺りは新しい人の発掘に。まだ公式ランキングに載らない方々のちょっとした励みにもなれたら幸いです。

この辺り完全に歌い手DBからの流用なので、後々ガシガシ変えていくかもしれないですが。

2015/05/19追記 「期待の新人」は、初回投稿1年以内・最新動画投稿4日以内・ある程度再生されてる・逆にある程度以上再生されてたら除外といった基準で、完全に自動作成です。 「もっと評価されるべき」も似たかんじですが、初回投稿日等の制限はなく、表示に必要な再生数などの閾値が大きくなっています。

他にも、

• 初音ミク/鏡音リンなどでカテゴリ分けしたい。
• デザインを、歌い手DBと差別化していく。
• ランクの計算式が、(累計再生数+累計コメント+累計マイリス数)×マイリス率 は適当なのでどうにかしたい。
• ボカロDBと歌い手DBを連携させていく。
• というか、ボカロまとめサイトってすでにあるし需要あるのか？
• 「歌い手DB」の対になるサイトなら「ボカロDB」でなくて「ボカロPDB」だけど語呂が悪かった。

などなど考えるところは様々あるですが、一先ずデータの収集は完了し形になったので公開をしました。

これから順次機能追加していきますので、なにかありました@ryryoまでご連絡くださいませ。

それではどうぞボカロDBをよろしくお願いします。 →ボカロデータベース

歌い手データベースという、ニコニコ動画の歌ってみたまとめサイトを作った話。

昨年の8月、歌い手データベースというサイトをオープンしました。 http://nicodb.jp/u/

作ったあと紹介の記事など一切書いていなかったので、今さらながら書いておこうと思います。

このサイトはすごい簡単にいえば、ニコニコ動画の歌ってみた・歌い手のまとめサイトです。変わったところで言えば、歌い手さんごとに今までアップした動画の累計再生回数などがわかるようになっているとこでしょうか。

意外と公式ではその辺りがわからないので歌い手さん達に好評いただき、Twitterで同時多発的に紹介いただき、その日は一日で約7万PVがありました。

(一日だけ伸びてその後大したことないのがよくわかりますね！)

↓そらるさんという、メジャーデビューもされている有名歌い手さんにもツイートされた図

ハッハッハ RT @remyu0817: そらる歌い手ランク2位やん http://t.co/LaXfaWRGDn

— そらる＠冬コミ火曜日東シ-74a (@soraruru) 2014, 11月 18

こちらも含め、この時にはtwitterで歌い手の方々等200～300人前後？にご紹介いただき、感謝感謝なしだいでした。

作った経緯とか

• 最近の「歌ってみた」がよくわからなかったから。
• 欲しいけど無かったから。

この2点が、サイトを作った大きな理由です。

正直ここ数年の歌ってみた界隈ってよくわからなかったのです。

元々、自分の中の「歌ってみた」というと、メルトやブラックロックシューターなどのイメージが大きく、「歌い手」が前に出ているというよりは、ミクさんありきでそれこそ誰が歌っているのはあまり意識していませんでした。(この時期は、投稿者プロフィールページなども存在しなかったと思いますし。)

それがmagnet辺りでニコニコも腐女子のものになったか・・などと思いつつ、カゲロウデイズ辺りでもうこれわかんねぇなとなり、しまいには歌い手がメジャーデビューっていうけど、この方誰?、というそれなりにニコ動初期ユーザーの方あるあるであろう流れをたどっています。

なので今どんな人や曲が人気なのか等調べてみようかと思ったら、wikiやブログなどのまとめサイトはほぼ数年前に更新が止まっているものばかりで、じゃあ調べついでにサイトでも作ろうかと思ったのが、ざっくりとした作成の経緯です。

最近、ニコニコ系の情報サイトって新しいものを見ないよなぁとも常々感じていたので、ぼちぼち自分が作る番か、とか思いつつ。

ちなみに当サイトの「殿堂入り」カテゴリを見ると、累計のマイリスト数が多い順に歌い手さんを見れるのでたいぶ人気どころがわかります。

歌ってみたのユーザーは若い

そしてサイトを作ったりしていく中で感じたことですが、改めながらこのジャンルのユーザーって投稿者も視聴者も圧倒的に若いなーと。

サイト作りがてら、何度か歌い手ライブにも行きましたが、JCJKが両手に物販グッズを抱えながら友達と走回っている光景を見ると、「これが今のニコ動か」とか「インターネットすげぇな」とか色々感じるところがあります。

一方で昔からいる投稿者の中で今も人気な方(もはや歌い手というか、プロデューサー的側面が強いですが)、halyosyさん ・ ゴムさん（HoneyWorks）などを見ると、様々な変化があって今の現状があるのでしょう、と。お二人とも2ch時代からのネット活動と聞きますし、ただリア充にネットの遊び場が取られているだけ、というわけでもないのかなと思います。

一古参として、今のニコニコはつまらない論もわかるのですが、この歌い手DBを作るのは楽しんでやっていますし、その効果でtwitter( @ryryo )のフォロワーも若いユーザーさんが増えなんだかんだと楽しいｲﾝﾀｰﾈｯﾂライフを送っている昨今です。

Special Thanks

■ユミソラ( @YumiSora )さん

サイト製作にあたり、Illustrator講座・JavaScript/jQuery 講座等で大変お世話になりました。サイトへの直接のアドバイスや、Twiiter上での告知とても助かっています。

■歌らん( @weekly_utaran )さん・nin( @nin_siawasesa )さん

週刊ニコニコ歌ってみたランキング・セカセカしないでたまには新着歌ってみたでも見ようよで、5年以上歌ってみたを見てきたお二人に、新参者を温かく迎えていただきとても感謝しています。目に見えない部分でも色々フォローいただきありがとうございます。

■歌い手DBをご覧の歌い手さん、歌ってみた好きの方々

Twitter等でサイトを広めていただいたり、ご意見ご感想をいただけたりとサイト製作のかなりのモチベーションになっています。これからも歌い手DBをさらに進化させていきますので、ぜひまたお暇な際には覗いてもらえればと思います。

今後ともどぞよろしくです。