株式会社エムアップホールディングス

はじめまして！
EMTG デザイン&QC部 デザイン企画グループの那須野です。

２０１９年も終わりですね〜。皆さんはどんな1年を過ごしたのでしょうか？

８月にEMTGに入社しましたが、それからの時の流れが早すぎて怖いです。たぶん私だけ時空が歪んでる。
元々デザインの勉強をしていたのではなく未経験からデザイナーになりました。
毎日のように覚えること・初めての経験があり、いろんな制作に取り組んでいます。

最近では、デザインの筋トレをしようと思い、世の中にあるかっこいいサイトや人気アプリのトレースをしたり、
架空のバナー・ロゴやコアプリのデザインなどなど何かしら作るようにしてます！




架空のロゴとバナーです。
配色や効果の付け方、バナーのサイズ展開・情報の強弱の付け方を意識しました！
（先輩方、暇で暇で仕方がない時にフィードバックください。）


私のことはこれぐらいにして、今回は所属するデザイン&QC部 デザイン企画グループが何をしているかについて紹介します!

実はこの話題、ひっそりとシリーズ化されておりまして
第一弾は佐藤さんがデザイングループのとある1日の流れを、
第二弾は後藤さんが毎週金曜日に行なっている勉強会について書いてくださっています。

今回はその第三弾として、EMTGのデザイナーが何を使っているかどのように進めているのか、私がどんなことを学んでいるのか紹介します。


ーーーーーーーーーーー

まずはツールから！
世の中のデザイナーが使うツールは様々ありますが、デザイングループではAdobe製品のPhotoshop、Illustrator、XDたまにSketchを使います。




ツールも日々アップデートされるので、使い方の勉強も必要です。

これらを使ってデザイン作業をして、修正→確認後デザインが固まったら、次はコーディングです。

EMTGのデザイナーはデザインするだけでなくコーディングも行います！
HTML・CSS 、JavaScriptといったコードを書いてカンプ通りにデザインを再現したり、動きをつけるなどして調整していきます。

この時はブラウザの開発ツールで確認しながら、CSS で見た目の調整を行いました。




（隠しまくりぼかしまくりで何をやってるかわからないと思いますが、雰囲気を感じ取ってください）

ーーーーーーーーーーー

デザインからコーディングまでの流れはこんな感じです。

実は先日コーディングを担当したサイトがオープンしたばかりなんです！

私に与えられたのは、先輩が作成したデザインカンプの通りにコーディングを行うというミッション。
前職でコーディングはある程度やっていたのですが、自己流な部分もあり修正もたくさん…。




汚いけど晒します。

指摘頂いた修正点を一つ一つ潰して完成度を高めていきます。
今回はコーディングでしたが先輩のデザインカンプからも学ぶことはたくさん！　例えばですが…

・どのくらい余白をつけているか
・どのフォントを使っているのか、ジャンプ率はどのくらいか
・どんな効果をつけているか
・なぜこの配色か、何色使っているのか

などなど書ききれないくらい。
デザイン面とコーディング面、どちらにも学びがありました！


ーーーーーーーーーーー

デザイングループでの業務はこんな感じです！
サイトだけでなくバナー・アプリ・その他有料会員向けコンテンツのデザインなど。とにかく幅広いのが特徴です。

入って４ヶ月ほどの短期間ですが、
様々なアーティストさんの活動にデザイン面で関われること
自分が作ったものでそのファンの皆さんが喜んでくれるという経験ができ充実しています！


来年の抱負は、自主的に行なっているデザインのトレーニングの継続と、
日々の業務の中で少しづつできることを増やして良いものをアウトプットできるようになることです！（今決めました）
目指せつよつよデザイナー！

現場からは以上です！
ここまで読んでいただきありがとうございました。