DJの選曲にもレコメンドがあると楽じゃないか？それTraktorでもできませんかね!?
おはようございます。みなさまはDJですか？僕はどうでしょう。
KAI-YOUエンジニアのコウベ(@cabbagekobe)です。
さて、来たる10月29日にPOP TECH PARTYというイベントが開かれます。なんと1周年！
POP TECH PARTYとは
POP TECH PARTYとは、風呂グラマーとして知られるエンジニア masuidriveと、行政書士でフェチ東京創設者、近ごろはエンジニアと法律家をつなぐ勉強会StudyCode主催者の新井秀美、そしてKAI-YOUが共同開催する音楽イベントです。
「ゆるいつながり」をテーマとして、エンジニアを中心としたDJによる音楽とエンターテインメントを楽しみながら、技術話だけではなく音楽を通したコミュニケーションの場として本パーティを企画しました。
今まで来たことある人も、行けなかったようという方も、第4回ポプテクへ、ぜひ1周年のお祝いにきてください！ 参加DJは随時おしらせしまーす！
参加はFacebookから！
https://www.facebook.com/poptechparty/
という感じのイベントですが、私もDJとして末席に名を連ねさせていただいております。
楽しいイベントになること間違いなし！みんな来てください!!
そんなこんなでちょいちょいDJをやらせていただくこともあるのですが、そのDJ周りでやりたいことを書かせていただきます！
ちょっと長くなりそうなので何度かに分けて…
やりたいことの説明！
私はTraktorというソフトを使っていわゆるPCDJという形でDJを行います。
PCDJのソフト自体はいくつかありますが、その中にAlgoriddim（https://www.algoriddim.com）からリリースされているDjayというアプリがあります。
Mac版、Windows版だけではなくiOS、Androidと多数のプラットフォームに対応しております。
このDjayには特徴的な機能があります。
それは端末内の音源だけではなくSpotifyの音源を使用してDJができるということです！
（Spotify Premiumへの加入が必要）
また、マッチ機能というものがあります。
マッチ機能とは
楽曲にはアーティスト名・曲名・ジャンルという簡単なものから、キー（音程）や曲の速さ（BPM）などの情報があります。
これらの情報から割り出してくれているのかは不明ですが、マッチのタブを見るとMIXしても同じキーのもの、やBPMが近い楽曲などの不協和音になりにくい曲をリストアップしてくれます。
マッチで表示された曲リストからMIXしていたらスムーズなMIXが行えます！
例えばでIZ*ONEの日本デビューシングル、好きと言わせたいという曲を再生してマッチの画面を開くとこのようになります。
*ちなみにこちらに関してはThe Echo Nestというサービスを使っているようですね。（元々オープンソースの音楽レコメンデーションエンジンだったThe Echo Nestですが、2014年にSpotifyに買収されています）
これに近いレコメンドをTraktorから使えるようにするというのが目指すところになります！
とはいうもののThe Echo NestのAPIはもう使えなくなっているっぽいです。
The Echo Nest / Spotify Developer
ということで別の手段を使います。
その手段
Spotifyでは各楽曲にたくさんの情報が埋め込まれています。
参考： note.mu
このSpotifyのAPIから取得できる楽曲情報からレコメンドの機能を構築出来ないかなぁ。ということです。
まずはSpotifyのAPIを使用できるようにすることから始めましょう。（APIの使用に関してもPremium会員のみとなっています）
APIの申し込みはこちら（https://developer.spotify.com）からできますが、今回はAPIのテストをしてみましょう！
Console | Spotify for Developers
こちらでAPIの機能のテストができます。（適宜tokenを取得すれば適度に使えます）
Get Audio Features for a Track
上記の記事でも説明していたdanceability、energyなどはこちらを使って取得できます。
上で使った好きと言わせたいという楽曲ではこのようなデータになります。
{ "danceability": 0.532, "energy": 0.938, "key": 8, "loudness": -1.409, "mode": 1, "speechiness": 0.0568, "acousticness": 0.122, "instrumentalness": 0, "liveness": 0.245, "valence": 0.716, "tempo": 132.023, "type": "audio_features", "id": "4cb65NgJOppTj6Ip5THclm", "uri": "spotify:track:4cb65NgJOppTj6Ip5THclm", "track_href": "https://api.spotify.com/v1/tracks/4cb65NgJOppTj6Ip5THclm", "analysis_url": "https://api.spotify.com/v1/audio-analysis/4cb65NgJOppTj6Ip5THclm", "duration_ms": 239333, "time_signature": 4 }
また、その楽曲からDjayのマッチ機能でリストアップされた楽曲情報を取得します。
（複数取得する場合はこちらからやりましょう Get Audio Features for Several Tracks Get Audio Features for Several Tracks ）
{ "audio_features": [ { "danceability": 0.697, "energy": 0.874, "key": 5, "loudness": -2.15, "mode": 0, "speechiness": 0.045, "acousticness": 0.0122, "instrumentalness": 0, "liveness": 0.627, "valence": 0.775, "tempo": 132.022, "type": "audio_features", "id": "2FXd6kKCtBIc6UfN1gH1pA", "uri": "spotify:track:2FXd6kKCtBIc6UfN1gH1pA", "track_href": "https://api.spotify.com/v1/tracks/2FXd6kKCtBIc6UfN1gH1pA", "analysis_url": "https://api.spotify.com/v1/audio-analysis/2FXd6kKCtBIc6UfN1gH1pA", "duration_ms": 213886, "time_signature": 4 }, { "danceability": 0.678, "energy": 0.909, "key": 6, "loudness": -2.361, "mode": 1, "speechiness": 0.0639, "acousticness": 0.108, "instrumentalness": 0, "liveness": 0.301, "valence": 0.774, "tempo": 130.998, "type": "audio_features", "id": "0uLhtkg7MSN0ZFZUwOfE0w", "uri": "spotify:track:0uLhtkg7MSN0ZFZUwOfE0w", "track_href": "https://api.spotify.com/v1/tracks/0uLhtkg7MSN0ZFZUwOfE0w", "analysis_url": "https://api.spotify.com/v1/audio-analysis/0uLhtkg7MSN0ZFZUwOfE0w", "duration_ms": 249878, "time_signature": 4 }, { "danceability": 0.555, "energy": 0.852, "key": 6, "loudness": -3.761, "mode": 1, "speechiness": 0.0439, "acousticness": 0.557, "instrumentalness": 0, "liveness": 0.314, "valence": 0.652, "tempo": 132.078, "type": "audio_features", "id": "0wRfhRWNX6WEJmxp5ed4Dy", "uri": "spotify:track:0wRfhRWNX6WEJmxp5ed4Dy", "track_href": "https://api.spotify.com/v1/tracks/0wRfhRWNX6WEJmxp5ed4Dy", "analysis_url": "https://api.spotify.com/v1/audio-analysis/0wRfhRWNX6WEJmxp5ed4Dy", "duration_ms": 270093, "time_signature": 4 }, { "danceability": 0.661, "energy": 0.898, "key": 7, "loudness": -2.482, "mode": 1, "speechiness": 0.108, "acousticness": 0.151, "instrumentalness": 0, "liveness": 0.118, "valence": 0.891, "tempo": 130.981, "type": "audio_features", "id": "4phwwHkDrqeUMPoOY4vI6I", "uri": "spotify:track:4phwwHkDrqeUMPoOY4vI6I", "track_href": "https://api.spotify.com/v1/tracks/4phwwHkDrqeUMPoOY4vI6I", "analysis_url": "https://api.spotify.com/v1/audio-analysis/4phwwHkDrqeUMPoOY4vI6I", "duration_ms": 194840, "time_signature": 4 }, { "danceability": 0.684, "energy": 0.893, "key": 6, "loudness": -3.266, "mode": 1, "speechiness": 0.0576, "acousticness": 0.113, "instrumentalness": 0, "liveness": 0.316, "valence": 0.81, "tempo": 130.963, "type": "audio_features", "id": "1ptM5l7tbT3QCbvYjtBEpV", "uri": "spotify:track:1ptM5l7tbT3QCbvYjtBEpV", "track_href": "https://api.spotify.com/v1/tracks/1ptM5l7tbT3QCbvYjtBEpV", "analysis_url": "https://api.spotify.com/v1/audio-analysis/1ptM5l7tbT3QCbvYjtBEpV", "duration_ms": 248696, "time_signature": 4 }, { "danceability": 0.702, "energy": 0.972, "key": 5, "loudness": -1.812, "mode": 0, "speechiness": 0.094, "acousticness": 0.686, "instrumentalness": 0, "liveness": 0.368, "valence": 0.739, "tempo": 133.034, "type": "audio_features", "id": "4gCKSBVrsOay3HYj5AvBq2", "uri": "spotify:track:4gCKSBVrsOay3HYj5AvBq2", "track_href": "https://api.spotify.com/v1/tracks/4gCKSBVrsOay3HYj5AvBq2", "analysis_url": "https://api.spotify.com/v1/audio-analysis/4gCKSBVrsOay3HYj5AvBq2", "duration_ms": 305853, "time_signature": 4 }, { "danceability": 0.692, "energy": 0.847, "key": 5, "loudness": -1.947, "mode": 0, "speechiness": 0.0534, "acousticness": 0.0238, "instrumentalness": 0, "liveness": 0.441, "valence": 0.712, "tempo": 132.053, "type": "audio_features", "id": "4pZA1GWGfG4JoZ0rbb8yG2", "uri": "spotify:track:4pZA1GWGfG4JoZ0rbb8yG2", "track_href": "https://api.spotify.com/v1/tracks/4pZA1GWGfG4JoZ0rbb8yG2", "analysis_url": "https://api.spotify.com/v1/audio-analysis/4pZA1GWGfG4JoZ0rbb8yG2", "duration_ms": 216147, "time_signature": 4 } ] }
という感じのデータがでてきました。
なんとなくの分析としますと…
現在上記の情報に相関関係があるのかどうかわかりません。
（楽曲キーや、BPMとかは近いんですよ。けどそれだけでは意味がない！）
いかがでしたか？
相関関係に関してはわかり次第随時追加していく予定です。ここまでご覧いただきありがとうございます。
CJM（カスタマージャーニーマップ）って作ったことある？
今日は通勤中にトンボを見たのでもう秋って感じですが、皆様いかがお過ごしですか？
KAI-YOU開発部わたはる（haruchan_jpg）です。
突然ですがwebサイトを作るときにどんな目的を持って作ってますか？
受託制作であればクライアントの好みに合わせることはもちろんですが、せっかくお金と時間をかけて作るならちゃんと効果があるもの、要するにwebサイトを見てくれる人に対して働きかけるものを作りたいですよね？
じゃあどのようにすればそのようなwebサイトを作れるか？
サイトを訪れるユーザーをよく知ることです。
CJM（カスタマージャーニーマップ）とは？
カスタマージャーニーマップ（以下、CJM）とは、ユーザーの体験プロセスを旅になぞって可視化するものです。
商品の購入やサービスへの加入、問い合わせなど、最終的なゴール設定をしそこに至るまでの各段階・時間軸に合わせてユーザーの感情、アプローチ方法をマップに整理していきます。
CJMを作ると何がいいのか？
- ユーザーの行動を想像し、可視化しやすくなる
- ユーザー目線の発想ができるようになる
- マーケティングにおける意思決定が的確になる
- 自分たちが規定したペルソナに対してチーム内で共有しやすくなる
早速CJM作ってみる？
それでは、早速CJMを作ってみましょう！
KAI-YOU.netはオールジャンルメディア、信じられないことに想定読者層は全人類というふざけた仕様です。（弊社代表談）
が！一応いわゆるユースカルチャーを中心にコンテンツを制作しています。
現在の実際の読者層はこのような感じになっています。
これをもとにペルソナシートを記入していきましょう。
実際にペルソナシートを記入してみました！
ペルソナシートの項目ですが、細かければ細かいほどいいです。今回記入しているのは最低限といった感じですね。
※お名前とビジュアルイメージは弊社編集の森田くんからお借りしてますが、設定はまったく架空のものです。
初めてペルソナシートを作った時、え？名前やビジュアルイメージなんて必要？と思ったのですが、意外と重要なのです。
今回は私一人でペルソナシートを記入していますが、基本的にはチームで話し合って埋めていくのがベストです。
そしてチームで話し合う時に、名前とビジュアルイメージを共有しておくと「森田くんが〜」「森田くんだったら〜」みたいな友達にコンテンツを届けようって気持ちになれるんです。Webの向こう側にいる人を想像するのって難しいですが友達に見せるのだったらなんとなくその人の行動が読めると思います。
さて、次は実際にCJMを記入していきましょう。
CJMを記入してみました！
KAI-YOU.netは「腰を据えて読んでもらえるポップなWebメディア」を目指していますので、今回のコンバージョン設定は初めてKAI-YOU.netに訪れたユーザーに「ブックマークボタンを押させること」とします。初めてKAI-YOU.netに訪れた森田くんの行動を考えて定期的に訪れるリピーターになるまでのCJMを作ってみます。
なかなかざっくりした内容ですが森田くんがどんな状況で、どんなことを考えていて、どんなものを求めていて、どんな行動を起こすかを文字に起こしていきます。もちろんこういう風にスムーズに行動してくれたら嬉しいですが、なかなかこうはいかないのが現実です。
では、森田くんにこのような行動を起こさせられるかを考えるポイントを開発チームなりに書き出していきます。
- ページスピードは遅くないか？
- 特定の記事から他のコンテンツには遷移しやすいか？
- 森田くんが押したくなるようなアイキャッチを選べているか？
- 幅広いコンテンツを扱っていると見せられているか？
- 定期的にトップページに訪れた時に森田くんにとってコンテンツを見つけやすい設計になっているか？
色々と反省点が見えてきますね。CJMは作って終わりでなく、できれば何度も見返してもしかしたら森田くんはこう思ってないかも、こういう行動をしないかもと考えるのも重要です。
まとめ
CJMを作り方をざっくり説明してきましたが、作って終わりじゃ意味がないのがCJMです。
チームで共有して、もしかしたらこう思ってないかもしれない、こういう行動はしないかもしれないと考え、常に改善していくのがベストです。また、Google Analyticsにイベントを設定し、数値と照らし合わせて考えていくのも大切ですね。
友達に届けるようにWebサイトの設計、運用をしていきましょう〜。
以上、わたはるでした。
ディレクターだけどデザインやっててよかったこと
こんにちは。
KAI-YOU開発部わたはる（@haruchan_jpg）です。
前職ディレクターとして働いていた私ですが、 現在KAI-YOUでの業務は半デザイナー、半ディレクターのような感じになっています。
今日はデザインとディレクションについてです。
ディレクターとデザイナーの大きな違いは役割です。
ディレクターは指示を出して全体を管理する役、デザイナーは指示を元に実際にデザインを作る役です。
いわば現場監督と作業者ですね。
デザイナー出身でディレクターになる人もいれば、ディレクターからキャリアをスタートさせる人もいます。
私の場合はちょっと変則的で、キャリア自体はディレクターからスタートしているのですが 並行してデザインもやってました。 前職の時から半デザイナー、半ディレクターみたいな感じだったんです。（どこの会社も人が足りないよね）
先輩にキレられたのでデザインの勉強しました
そもそもなぜデザインをちゃんと勉強することになったかというと、前職でスケジュールの見積もりが甘すぎて先輩にはちゃめちゃ怒られたことがきっかけです。（怖かった）
営業受注
↓
クライアントとの打ち合わせ
↓
クライアント「急いでるんですがいつまでにできます？」
↓
私「（きちんと相談もしないで）●日までには！」
↓
デザイナーさんに伝える
↓
デザイナーさんが無理してくれる
↓
それが何度か続く
↓
先輩のディレクターさんとデザイナーさんにキレられる
（私とチーム組んでるデザイナーさんは優しい人なので言えなかった）
今考えると本当にデザイナーさんがかわいそうですね。ごめんなさい。
相談するのももちろんなのですが、実際に自分で作業してみてどれくらいかかるかっていうのを勉強してみようと思ったのが一番はじめのきっかけです。デザインの勉強ちゃんとしてみたら本当面白くて、最初はマイナスな理由からだったけどやってよかったなって思いました。ディレクションにも生きてくるし。
個人的にディレクターだけどデザインもやってよかったことはこちら
作業工数がどれくらいかなんとなくわかるようになった
これが最初の目的だったのでよかったなと思ってます。でも「なんとなく」なので絶対に相談はするようにしてます...。
完成形を想像しやすくなった
基本的にワイヤーフレーム（サイトの骨組み）は白黒で作りますが、自分の中で自分だったらこうするなぁっていう完成形を想像しやすくなりました。あと、どういう風に指示をしたらデザイナーさんがやりやすいか考えられるようになりました。
なんでそうしたのか？っていうのをデザイナーさんにきちんと聞けるようになった
自分だったらこうするな、ああするなっていうのがあるので、それと違ったデザインがきた時にどうしてそうしたのか？っていうのをデザイナーさんに確認するようになりました。 当然ながらそういう風にした理由ってきちんとあるので、なるほど〜となったり、意見をすり合わせてより良いものをクライアントに提案することができたり、制作のクオリティが確実に上がりました。
一緒に仕事してくれるデザイナーさんを尊敬できるようになった
デザインってすごい面白いんですけど、考えることいっぱいあってマジで面倒なんです（ぶっちゃけ）。だからこそ、デザイナーさんが自分の想像を超えるものを作ってきてくれた時、本当にテンションが上がるし、嬉しくなっちゃうんですよね。
良いディレクターは良いデザイナーだし、良いデザイナーは良いディレクター
これは弊社の代表のちゃんよね（@TYonemura）が言ってたんですが、私もそうだと思うなぁ〜〜〜ってなりました。
ディレクターとしてもっと成長したいし、デザイナーとしてももっとできることを増やしていきたいです。
それでは、わたはるでした。
