DailyCocoda!#002 音楽アプリの新規登録画面

要件

002のターゲットユーザーはおしゃれ男子だそうです。
「#今日暇？」ってなにって思ったけど、フッ軽な人っていうことで勝手に解釈しました。

リサーチ - ターゲットユーザー（20代前半男性）について

軽く20代前半の男性についてのリサーチしてみました。

利用しているサブスクのサービスでは、音楽部門で、Spotifyの方が利用しているユーザー数が上なのかと思ってたんですが、意外にもAmazon Musicでした。
Prime会員だと月額780円になるのでちょっとお得（通常980円）だからなのかもしれないですね。（Spotifyの方は1アカウントで980円。）

あとは2020年に流行りそうなもの調査で見ると、ゲームが上位に来てたり、アニメ、YouTubeあたりを普段はそのあたりに時間を使っているのかなという印象でした。

■ 20代の使ってるサブスクランキング
https://lab.testee.co/subscription-19
調査日：2019年9月11日

■ LINEユーザーを対象にしたスマートフォンWeb調査
2020年に人気が出るかも！？と思うもの
https://www.linebiz.com/jp/column/research/20200109/
2019年12月度調査

リサーチ - 参考アプリ（Spotify、Apple music、LINE MUSIC）

次に参考アプリになってた３つのアプリについて見てみましたー！
全体的に彩度が高い色を使ってる印象がありますね。特に特徴的だったのが、Spotifyにみられるビビットな色のデュオトーンの写真でした。

参考：
「デュオトーン（Duo Tone）」のWebデザインが今っぽい！BtoB企業での採用事例
https://mtame.jp/design/DuoTone/

フォントについても軽く調べるとSpotifyはfont-familyに`Circular, Helvetica, Arial` を指定していました。

参考：
Circular font
https://lineto.com/typefaces/circular

リサーチ  - トップ、新規登録、ログイン画面について

Spotifyについてはトップがめちゃくちゃシンプルでした。もしかしたら、チュートリアル画面があるのかな？（会員なので、ログアウトしても表示されなかったです。）

LINEミュージックも同じくトップに学生さんの写真があるだけで、他はSpotify同様シンプルな構成でした。

制作 🍳

テーマとして考えていたのが、Spotifyのようなデュオトーンの写真を使ったトップにすることでした！

やったこととしては
- ワイヤーで要素を起こす
SpotifyやLINE MUSICの画面を元に作成しましたー
- 画像探し
ヘッドフォンとかをキーワードにして検索！
- 画像をデュオトーンに加工
加工は下記の記事を参考にやってみました。

参考：
Photoshopでデュオトーン を制作するチュートリアルをお届けします！
https://www.shutterstock.com/ja/blog/duotone-tutorial-photoshop

完成 🎉

色を入れて、フォントを変えてアイコンとかを足して、完成です！
色は彩度の高い色を取り入れて、音楽のアーティスティック感を出しました。

フォントはMontserrat（モンセラート）というフォントがSpotifyで使われていたCircularの代替フォントとして出てきたので、使ってみました。
（alternative font circularとかで検索すると出てくる）
https://fonts.google.com/specimen/Montserrat

facebookのアイコンはこちらから取得
https://ja.facebookbrand.com/facebookapp/assets/%E3%80%8Cf%E3%80%8D%E3%83%AD%E3%82%B4/

感想 🍨

デュオトーンの加工に映える写真を探すのに苦労しました。特に黄色の方で使っている女性の写真も、もうちょっと加工が映えるものを見つけられるとよかったのですが。。それかもうちょっと加工の方法でどうにかなったのかもしれないです。

他のパターンとして幾何学的（？）なこういう方向性のものも作ってみたかったんですが、時間がかかりそうなのでまた次回チャレンジしてみたいと思います。

参考：
cocoda!のページはこちら 🙌
ttps://cocoda-design.com/daily-products/27424