初めまして！23年度新卒入社、デザイングループの藤野・禅院です。
今回は、デザイナー研修を振り返っていく前に少し私達についてお話したいと思います！

目次

・研修スケジュール

・研修内容

・今回の学んだこと

・まとめ

研修スケジュール

5月は主に、午前中はデザインの研修、午後はコーディングの研修を行いました！

研修内容

デザインの研修では、４つお話していきます！

1.XDを使いトレースをすることから始まりました。
初めはバナーのトレースで、必要な素材(画像など)を収集し、切り抜きや加工をしました。
画像の切り抜きです。背景と色が近いモノを切り抜くときに残したいものまで切り取ってしまうので難しかったです。

2.ＨＰのトレースをしました。サイト内のアイコンをillustratorで作成しました。
バナーとは違い長さがあり、リピートグリッドやコンポーネントなどをうまく活用し、効率良く作業することを心掛けました。

3.パスの練習をしました。
藤野はillustratorに触れていたので、パスに慣れていましたが、禅院は初めてで全く出来ませんでした。
感覚が全然掴めなかったので、藤野にマウスごと手を握ってもらい、練習した結果、禅院はうまくパスを書けるようになりました✨
応用で、地図と線路をパスで書く練習もしました！下に写真を載せているので見てください🥰

4.個別研修をおこないました。
藤野は、引き続きHPのトレースをしました。スタイリッシュな画像が多いサイトだったので、サイトの雰囲気に画像を合わせる為に、半透明の青いマスクをかけるなど工夫しました。
禅院は、frescoというAdobeのアプリでイラストに挑戦しました。筆が多くライブブラシなど珍しいブラシもありました。
このコラムのメインビジュアルのイラストは私が描いた絵です。

コーディングの研修について、6つお話していきます！

1.テンプレートを使い簡単な自己紹介ページを作成しました。
それぞれで作成したので、見せ合ったときに、作成者の個性が出ていて『そういうデザインの仕方もあるのか！』など参考になる部分もありました。

2.HTMLとCSSの基礎を学びました。
藤野はコーディングが初めてだったので、覚える量も多く頭がパンクしていましたが、禅院がところどころフォローしたので、なんとか理解することが出来ました。実際にコーディングをしていく中で、ボタンの作成やテーブルの作り方、2、3カラムの並べ方、疑似要素など小規模サイトを作れるレベルになったと思います！

3.sauce treeとGITの使い方を学びました。
sauce treeとGITは、プログラマーにお渡しする際に使うツールです。更新せずに、自分の変更したデータをアップしてバッティングしたりなど初めはミスをしていましたが、今はスムーズに出来るようになってきました！

4.SCSSの基礎学びました。
SCSSはCSSを簡単に書けるものです。CSSに慣れていたので、初めはSCSSの書き方に慣れずそのままCSSを書いたり、書く場所を間違えていたりしていましたが、サクサクと書けるようになってきました！研修開始時期に比べ早くコーディングできるようになったと思います。

5.Preprosの使い方を学びました。
PreprosはSCSSをCSSに変換してくれるツールです。初めはファイルの選択を間違えていたりして上手く使えていませんでしたが、階層を学んだので今では上手く使えています✨

6.XDのデザインをコーディングをしました。
研修の総まとめです！XDにデザインされているサイトをコーディングしたのですが、私達が1時間ほど悩んだ問題をメンターさんに質問すると数分で解決してくださるので、私達もそんな風にサクッと問題を解決出来るかっこいい人になりたい！と思いました！メンターさんは私達の目標です🥰

今回の学んだこと

・ツールの使い方
　Photoshop：画像の切り抜きや加工のしかたを学びました。どんどん挑戦して慣れていきたいです！

　Illustrator：地図やアイコンのトレースをしました。パスで書くというのに慣れませんでしたが、今ではサクサク書けるようになってきました！

　XD：サイトのトレース、ＬＰの作成をしました。初めは作るのに時間がかかっていましたが、回数を重ねるごとに短時間で作れるようになってきました！

　Fresco：ブラシの種類や機能を学びました。ライブブラシという描いたあとに滲むブラシ(水彩ブラシ)があるのですが、描いたあとに動くので、線をはみ出してしまったり難しかったですが、仕上がりがとてもふわふわしていて可愛いかったです。もっとたくさんのブラシを使いこなせるようになりたいです。

・デザインの引き出しを増やす
　自分が作りたいイメージに近いサイトを見て引き出しを増やしたり、自分が普段見ないようなサイト、広告を見たり、日常生活で見るような看板や広告を見て『自分ならこうした』や『なぜそのデザイン、色、フォント、配置にしたんだろう』など考えるようになりました。

・webサイトの構造
　トップから始まりヘッダーやメイン、フッターなど様々な配置のパターンによってサイト雰囲気や見やすさを考えて制作するということを学んだので、早く自分で作ってみたいと思いました！とても楽しみです。

・色、フォントの与える印象の違い
　自分がイメージするサイトの雰囲気に合わせたキーカラーやサブカラー、フォントの選定の重要性を学びました。
　少しトーンや色味を変えてみたりするだけで、全然サイトの雰囲気が変わるので面白いと思いました。
　フォントも変えてみると落ち着きがあったり、可愛くなったりしたので、面白かったです。色々なフォントを見てみましたが、フォントに声色があるなと感じました。

・検索力の重要さ
　サイトのトレースで必要な画像の検索やツールの裏技など自分の欲しい情報を引き出す力が何事にも必要だと感じました。
　なんとなくで調べてみたら全然自分が求めているものと違うものが出てくることが多かったので、語彙力や理解力が必要と感じました。

・HTML,CSSの基本
　タグの種類や場面に応じた使い方、その中で親要素と子要素の関係性を考えコーディングしていくことを学びました！
　ブロック要素、インライン要素の違いに躓きましたが、わかりやすく教えてくださり解決することが出来ました。
　疑似要素は初め仕組みが理解出来ず悩んでいましたが、回数を重ねるごとに疑問点を少しずつ解消できました。

・scssの基本
　CSSのコードを簡略化出来るので、とても便利です！

・ツールの使い
　VC:プラグインで自分の作業がしやすい環境を整えました。他にも便利なプラグインがあると思うので上手く活用して作業効率を上げていきたいです。
　Prepros：SCSSをCSSに変換してくれるツールです。

・コーディングが終わった後の確認ツールの使いたい
　Div閉じ忘れチェッカー：Divの閉じ忘れが良くあるので、このツールを使うことで閉じ忘れをすることが無くなりました！
　アクセシビリティチェック：背景と文字のコントラスト比などを出してくれるので、アクセシビリティ対応のサイトを作る時にはとても便利なツールだと思いました。
　HTMLのコードチェック：コードの間違いを指摘してくれるツールです。altの記載がなかったりするとエラーを出してくれるので、エラーがなくなるまで何回もやり直しをしました！
　　　　
・案件の受け渡し(sauce tree、Git)
　簡単な案件の流し込みなどを行いました。その際に案件の受け渡し方法を学びました。

まとめ

配属先が決まり初めは不安もありましたが、分からないことがあっても質問しやすい環境で不安よりも知れることのワクワクの方が多い研修でした！私達の出来ることと出来ないことがいい感じにバラバラなので、助け合って研修をすることが出来ました。教え合うことで理解も深まり、毎日自分の成長を感じています。研修後は少しづつ案件に関わり、学んだことを活かしてますます頑張っていきます！