【新卒】デザイナー研修で学んだこと
こんにちは！サービスデザイン部の四方です。
2018年に新卒として、GMOメディアの仲間になりました。今回は入社してから新卒向けに行われたデザイン研修についてまとめてみました！
デザイン研修に入るまで
2018年新卒のメンバーは、デザイナー2名・エンジニア2名の計4名です。
入社してから以下のようなスケジュールでした。
グループ合同研修では、働くうえでの基礎知識を学びました。5月頃からGMOメディアで働き方やルールや各媒体の説明を聞き、カスタマーサポート研修では実際にユーザーのお問い合わせ対応をしました。
これらを終えて4月の終わりからデザイナー・エンジニアはそれぞれ職種別に研修が始まります！
職種別の研修に入るまでは、デザイナー・エンジニアも一緒に研修を受けていたので同期とすごく仲良くなれました。
内容
研修は基本的に先輩デザイナー1名と新卒デザイナー2名で行われました！ 以下が受けた研修です。
デザイン基礎研修
UI基礎研修
HTML/CSS研修
開発環境慣れ研修 ・SEO研修
デザイン基礎研修
期間：1日
使用ツール：Illustrator / Photoshop
内容：参考サイトの紹介（講義）/ バナー作成（実習）
デザイン基礎では、バナー作り体験を行い、デザインするときに抑えるポイントについてざっくり学びました。
お題は、架空の商品「GMO青汁」の訴求バナーの作成です。今回は3人で相談して「健康に気を使ってる会社員26歳」というターゲットで作ることにしました。
研修の流れ
手書きで案だし
フィードバック
既存のものを参考に案だし
フィードバック
Illustratorで作成
フィードバック
完成！
感想
サービスや商品をユーザーに訴求する時、「ターゲットは誰なのか」「商品の良さはなんなのか」これらが伝わるものを考えながら制作していく流れがすごく楽しかったです。 意外とラフで描いたものをIllustratorで起こした時に、印象が変わってしまい思ったようにいきませんでした。悩むこともありましたが、大学の頃やってきたことと近くて親近感もって取り組むことができました。
UI基礎研修
期間：2日
使用ツール：sketch / prott
内容：UIパーツの基礎講義（講義）/ sketch・prottの使い方（実習）
UI基礎では、基本的なパーツの名称と「sketch」や「prott」などの使い方などを教えていただきました。
「sketch」はiOSアプリなどのアプリケーションのUIデザインツールとしてやアプリ以外にもWebデザインソフトとして広く活用されています。
「prott」はコードを書かずに、本物のようなアプリを再現できるプロトタイピングツールです。
なんとなく「横からスッて出てくるやつ」とか「下の方にあるコンテンツを切り替えられるボタン」など曖昧に伝えていたものの名称が「スライドメニュー」や「タブ」だったことにこの研修で知ることができました。
今回はyoutubeを例に実際使われているアイコンを探して配置してみたり、フォントやマージンの取り方など実際のサービスを参考にして並べてみました。
感想
初めてsketchやprottを使ってものを作ったり動かすことができ、いい経験になりました。これからの業務でも使っていきたいと思いました。いつも使ってるyoutubeのレイアウトを自分で作ってみることで、マージンの取り方や、ボタンの大きさ、動画の大きさなど使いやすいサービスってちゃんとルールがあるのだと改めて感じることができました。また、実際使われているアイコンなどマテリアルデザインの素材としてサイトに載ってることにびっくりしました。
自分で作った画面をサクッとprottで繋げて動きを試すことができ、画面をただ並べて見るのと実機で試してみるのとでは印象が全然違い、触ってみることの大事さに気づくことができました。
HTML/CSS研修
期間：5日
使用ツール：ターミナル / Sublime Text
内容：インターネットの仕組み基礎（講義）/ HTML・CSSコーディング（実習）
HTML/CSS研修では、インターネットの基礎知識やHTML/CSSについて学びました。 HTMLとWEBブラウザが記述言語とそれを解釈して表示してくれるものっていう関係だったり、たまに見かけるステータスコード400番台がブラウザ側で起こるエラーだったり、500番台がサーバ側のエラーだったり......基礎の基礎を図に描きながら教えていただきました。
また、コーディングではタグの意味やどんなときに利用するのか、頻出するものを例に見せてもらいながら教えていただきました。実際にコーディングしたものをブラウザに反映させながら行ったので、何を書くとどうなるのか視覚的にも確認でき、より理解を深めることができました。
今回は先輩デザイナーが用意してくださったPCサイトの作成とスマートフォンサイトの作成をゴールデンウィークを挟み、計5日間にわたり行いました。
研修の流れ
まず、PCサイト次にスマートフォンサイトを作成しました。どちらも同じ流れで研修を行いました。
紙に枠を書
要素にタグをつける
クラス名をつける
先輩デザイナーとコーディング
ひとりでコーディング
フィードバック
完成！
感想
最初はHTML/CSSを書けるようになれるのか恐る恐るでしたが、タグやプロパティの意味や使い方・役割を覚えて行くことで一通りコーディングできるようになれました。いきなりコーディングするのではなく、一回紙に手で書いてみることで頭の中も整理することができました。クラス名やタグなどを書いておくことで、迷わず作業ができ効率よくコーディングができました。
スマートフォンサイトはデバイスによって画面の大きさが異なるので、どの画面サイズで閲覧してもデザインが崩れないようにするところがPCと違うところであり、気をつけたいところだと思いました。
大学の授業と違って1週間みっちり同じこと学ぶという機会はなかったので、より集中して取り組むことができました。レベルが0からレベル5に一気にあげていただいた感じがします。初めは緊張と不安でいっぱいでしたが、新卒同士で相談したり先輩デザイナーにアドバイスもらったりとっても充実した研修でした。
開発環境慣れ研修
期間：2日
使用ツール：ターミナル / Sourcetree / github / Sublime Text
内容：gitで使う用語とSourceTreeの使い方・Sassについて（講義）/ githubを使ってみる（実習）
開発環境慣れ研修ではgitを使い、サービスを開発していく流れや方法について教えていただきました。
gitとは、「誰がどのファイルのどの部分を修正したのか？」「2時間前のソースにもどってやり直したい」というときにとても役立つバージョン管理システムのことです。GMOメディアではどのサービスでも利用し開発しています。 また、CSSのメタ言語であるSassも教えていただきました。CSSとは違い、入れ子式の記述や変数定義など便利な機能があり、開発・保守・運用を行うことができます。
この研修では、複数の人が同時に同じファイルを編集して効率よく作業を進めるためにどんな環境で開発をしているのか実際に体験してみました。
感想
環境構築できる先輩デザイナーってすごいと素直に思いました。
初めてきくカタカナが多くて始めは何を言っているのか理解するのになかなか時間がかかりましたが、新卒デザイナー2人でスライドを見返したり図を作ったりして内容を理解しようと積極的に努力できた研修だったなと思います。たくさん質問したおかげで担当していただいた先輩デザイナーの方とのコミュニケーションにもつながり仲良くなれました！
SEO基礎研修
期間：1日
使用ツール：Sublime Text / illustrator / Photoshop / ターミナル / GitHub Pages
内容：SEO、アクセシビリティについて（講義）/ 画像作成（実習）/ HTMLコーディング
「SEOとは "検索エンジン最適化" のことです」そんな基礎の基礎から始まった研修でした。
例えば、
ページの内容が分かるページタイトルを記述する
見出しやリストなどの文章構造を適切なタグを使ってマークアップする
情報を伝えている画像に代替テキストを提供する......などなど
この研修のなかでSNSからの流入が大事という話を聞き、実際に私たちも「アップルタッチアイコン」「ファビコン」「OGP画像」を作成し、実際にHTML/CSS研修の時に作ったサイトに反映させてみました。
感想
どうしたら人はサイトにいこうと思うのか、中身だけでなく地道な工夫を感じました。
実際に自分たちがコーディングしたものに反映させてみて、特にSNSにURLを貼ったときにOGP画像があるのとないのでは見た目の印象が違い、画像が与える影響って大きいなと思いました。
まとめ
どの研修も基礎の基礎から教えていただけできました。本当にありがとうございました。
今まで全然知らなかった知識や技術を、経験で得たことを実体験も交えながら教えていただくことができたので、どの研修も本を読むより頭に入りやすくわかりやすかったです。
特に、HTML/CSS研修で教わった「コーディングをするときに紙に書いてからやる」というのは今も実践しています。簡単な修正は構造をコードをみるだけでなんとなくわかるようになりました。まだまだタグやクラス名を付けるときは迷う時もありますが、これからも経験を積んでいきたいと思います。
この期間だけで一人前のデザイナーになれたわけではありませんが、研修の内容を思い出しながら日々頑張ります！
最後までおつきあいいただきありがとうございました！
