Developing Designer's Diary

未経験からUI/UXデザイナーを目指して勉強中です。

Webグラフィック制作物①音楽配信サービスLP(課題)

最近BONOの課題ばかりをブログに載せていますが

もちろん並行してデザイン学校の授業も受けています。

 

「コーディング」「Webグラフィック」「UI/UX」の3クラスを受講しているのですが

Webグラフィックの課題で制作した作品がいま2つほど溜まっているので、ここでまとめていきます!

 

先々週と先週で、それぞれ

  • 音楽配信サービスのLP(ファーストビューのみ)
  • 「××専門店」のWebサイト(複数ページ)

が課題に出ました。

どちらも期限が1週間(かつほかの授業の課題もあり。。)だったので、まったく妥協した点がなかったかといえばそういうわけでもないのですが…、

もちろんできる限り自分の理想に近づくよう頑張りましたし、

先生からもなかなか好評でしたので、紹介したいと思います。

 

1. 音楽配信サービスのLP(ファーストビューのみ)

お題

以下のように指定がありました。

 

  • illustratorのみ使用し、以下のWEBサイトのFV(ファーストビュー)を制作すること。 (PC版&SP版両方)
    • 【サービス名】
      • 音楽ライブ配信サービス 「L.CLIP」 「L.BOARD」 「L.MUSIC」 のいずれかから選択(変更可)
    • 【コンセプト】(変更可)
      • LIVE×LIFE アーティストのLIVE(生配信・音楽ライブ+一早い最新楽曲)を ユーザーのLIFE(通勤・おうち時間など日常)に届ける。
      • 非日常と日常をリアルタイムでつなぐ場を提供する。 (変更可)

加えて、授業で「このコンセプトの中でさらに、よりベーシックで万人向けなデザイン1案と、よりターゲットを絞ったデザイン1案を提出するように」と指定がありました。

 

制作物①

まず私が、ベーシックで万人向けなデザインとしてつくったものがこちらです。

PC版 ファーストビュー

スマートフォン版 ファーストビュー

ちょっと上記のデータはいま手持ちのもので、実際は細部を微修正したものを提出したのですが。。

 

コンセプトは、「”ライブミュージック”に対して、なんとなく『はっちゃけていてダサい』というイメージを持っているようなApple信者系(意識高い系)の人を『おっ』と思わせるデザイン」です。

ちょっと攻めた言葉で表現したので、プレゼンのときも笑われたんですが

要するにまぁ、落ち着いたかっこいいトーンの音楽配信サービスにしたかったんです。

参考にしたのはもちろんApple MusicのWebサイトです。

 

先生からのFB①

「すごく攻めている」「グレー背景に丸を並べただけという、大胆なまでのシンプルさ」「なかなかできない」「巨匠デザインなので何も言えない」

と高評価(?)でした。

また、「キャッチコピー(音楽でつながる。〜)」「サブ情報(新しいSNSサービス開始。)」「登録ボタン」「ログイン導線」の情報の重要度がきちんと文字組みに反映されていることについてもお褒めいただきました!

 

改善点としては、モチーフの球体にすごく目線が惹きつけられるので、コピーの位置は

もう少し上にもってきたほうがバランスがよくなるのではないかとアドバイスいただきました。

 

制作物②

続いて、「地下アイドルのライブ音源を聞くのに特化した音楽サービス」という設定で制作したのがこちらです。

PC版 ファーストビュー

スマートフォン版 ファーストビュー

(こちらも、実際に提出した完成版とは少し異なります…!)

 

上述の通り、「地下アイドル」の楽曲に特化したサービスという設定なので

とにかく「カワイイ!ラブリー!あざとい!」をイメージしてつくりました。

 

地下アイドルのわちゃわちゃした感じと、萌えアニメの文字が詰まったタイトルロゴの相性がすごくよさそうだなと思ったので

萌えアニメロゴっぽい、タイポグラフィで魅せるロゴにチャレンジしました。

萌えアニメっぽいロゴ(Pinterestより)

 

私は基本的に、制作物①のようなシンプルっぽい、幾何学的?な図形を使ったデザインが好きなので(デザインの技術がないからシンプルにせざるを得ないというのもある。。)もっと有機的な、人間味や愛嬌のあるデザインをできるようになりたいとずっと思っていまして。

成長のため苦手分野に挑戦してみたという背景もありました。

 

挑戦したはいいものの、やっぱりうまくできない。というか、どうやったらできるのか方法がよくわからない。

文字をアウトライン化して、そこから一画だけ色を変えるのとかもすごく四苦八苦しました。。。

 

ロゴに手こずって、けっきょく背景はあっさりした感じになりました。

要素が多くてごちゃっとしているほうがアイドルっぽさ、かわいさが出ると思ったので、音楽を再生中の画面をモチーフにしたカードをいっぱい並べています。

 

このカードも本当はもっといろんな色にしようか?とか思ってたのですが時間切れで、1色のままGOとなりました。

 

先生からのFB②

こちらもけっこう好評でした。

ロゴについて、「少し毒っけのある色使いなので、より『可愛さ』に深みが出ている、『可愛さ』を強調できている」と言っていただきました。

背景についても、もっとごちゃっとさせたかったとプレゼンで話したのに対し

「ロゴがにぎやかなのでこれぐらい落ち着いていたほうがいいかも」とおっしゃっていただきました。

こちらは特に改善点を言われなかったと記憶しています。

 

振り返り

今回、「写真を使わない」という縛りがある中でのデザインだったのですが

実は私は写真を使わないデザインのほうが得意です。

 

というのも、学生時代に大学でフリーマガジンのデザインをしていたのですが

写真が0枚の記事なども多かったのです。。。

(ちゃんとしたカメラを持っているメンバーが1人?ぐらいしかいなかった)

結果的に、文字だけでみやすいデザインを仕上げる訓練になりました。

あと、シンプルに私が、幾何学的・フラットなデザインが好きっていうのもあると思います。

 

逆に、写真の調整とか扱いは不慣れで苦手なので、そっちをもっと頑張っていかなきゃです。

 

そんな思いもあり、翌週の「複数ページのWebサイト」という課題では

写真を多く使ったデザインに挑戦しました。

少し長くなってしまったので次の記事にします!