音楽アプリ「neumu」再生画面UIデザイン

2020年07月16日

制作物

前々回の記事で、XDを使ってニューモフィズムを作るという記事を書きましたが、そのニューモフィズムを使った音楽アプリの再生画面のUIデザインを制作しました。アプリ名は「neumu」で、シンプルに「neumorphism」と「music」を合わせた名前になっています。それでは、詳しくまとめていきます。下の画像が今回のデザインです。

デザインについて

デザインについて詳しくまとめていきます。

今回は、ニューモフィズムを取り入れるというのがテーマなのでニューモフィズムにがっつり寄せて作っていくことを特に意識しました。一応、若者でイマドキのイケてる人たちが使ってくれることをイメージしましたが、そこまでユーザーなどのこと意識せずに、好きなようにデザインしていきました。アイコンもIllustratorを使って自分で作りました。

あまり、要素が多すぎるとニューモフィズムを使っているということもあり、ごちゃついてよくわからなくなると考えたので、音楽アプリの再生に必要最低限の要素だけをいれました。また、要素同士の間が狭くならないようにも意識しました。ボタンの凹凸の違いがどうしてもわかりにくくなってしまうので、凸の時はアイコンの色は白にして、凹の時には、青にしてさらに周りに円のラインを入れて、違いが出るようにしました。

まとめ

今回、初めてのニューモフィズムを使った作品を作ってみました。自分の使ったことのない手法に触れてみるのも結構面白いですね。使い所はやっぱなかなか難しいですが、どこかでまた取り入れてみたいなと思います。また、今回はとりあえず音楽再生画面のみですがプレイリスト画面などを増やして、もう少しやってみます。

Pocket

related

オープンキャンパスのバナーデザイン

今回は、所属しているトライデントコンピュータ専門学校のオープンキャンパスのバナーを制作したので、まとめていこうと思います。このバナーの制作では、タイポグラフィをメインとしてデザインをしました。下の画像

制作物

2020.06.16

古民家カフェのWebサイトデザインを終えて

いつの間にか12月になり、一気に寒くなってきましたね。みなさん体調等、大丈夫でしょうか?こんにちは、小林健人です。 今回、学校の課題で古民家カフェ虎威殿のWebサイトデザインをしました。古民家カフェと

制作物

2019.12.04

ポートフォリオをリニューアルしました!

今回は、ポートフォリオサイトをリニューアルしましたので紹介していきます。 作品概要 作品名「koke portfolio」 URL(https://koke05.com/portfolio) 制作期間

制作物

2020.08.24

矯正歯科、こども歯科の名刺デザイン

今回は、授業の課題で矯正歯科とこども歯科の歯科医の名刺デザインを制作したので、詳しくまとめていきます。名刺は小さく載せる情報も少ないですがそのなかで適切に表現していかないといけないので個人的にはなかな

制作物

2020.06.03

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き