新人webデザイナーの入社半年間の過ごし方と学んだこと
はじめに
はじめまして🌱
今年４月より株式会社トルクに入社し
webデザイナーとして働いている田坂真純です。
入社前後から、およそ半年経った現在までの流れや学んだことについて、
自分のための記録を兼ねて記事にすることにしました！
あくまで一例ですが、未経験でwebデザイナーを目指している人や、
デザイナーとして就職が決まった人などにとっても参考になれば幸いです。
ターゲット(参考になるかもしれない人)
デザインを勉強している初学者の方、学生の方
(web)デザイナーとして就職を考えている/就職が決まっている方
入社が決まってから現在まで
入社の１ヶ月半ほど前〜入社日
デザインのルールを学びながら、社内で使っているfigmaの操作に慣れておくために、
入社前の課題としてサイトの模写に取り組みました。
学生の間は制作にXDを使っていたので、(勿論自分でも勉強していましたが)しっかりとfigmaに慣れる期間を取れたのが助かりました。
隔週で面談の機会もあり、その時に模写したデザインについてフィードバックしていただいたり気づいたことを話したりしました。
また、弊社ではwebアクセシビリティとデザインが両立されたサイトを紹介するAAA11yというギャラリーサイト(下記)を運営しているのですが、
ここに掲載するサイトの選定、ピックアップの方法について教えてもらい、実際にサイトもピックアップしました(その頃からWebアクセシビリティの勉強も始めています)。
入社前からサイトの運営に関われて嬉しかったのを覚えています👩🏻💻
(アクセシビリティもデザイン性も高い国内外のサイトを掲載しているので、見ていただけたら嬉しいです！)
入社～入社後２ヶ月弱
入社して間もない時期は研修のような形で、
引き続きサイト模写の課題と、架空リデザインの課題に交互に取り組みました。
入社してからは毎日短時間のFBやレクチャーの時間がありました。
(好きなことを勉強するだけでお金をもらえている状況がありがたかったです…)
合間に案件の手伝いにも少しずつ入らせてもらっていましたが、
その中でデザインのクオリティと同時に、データの扱いやすさや綺麗さが大事なのを改めて実感しました。
入社後２ヶ月〜３ヶ月
上司や先輩にサポートいただきながら、
初めて実案件のデザインに携わりました。
当初自分に対する期待値をわかっておらず、挑戦する楽しさよりも自分の出来なさに焦る気持ちが先行してしまい、勝手にプレッシャーを抱え込んでいましたが、
周りの方々のフォローのおかげで良い意味で気が楽になり、モチベーションを持ってやりがいを感じながら取り組めました。
実案件ならではの学びが沢山あって、関わらせてもらえてよかったです。
現在
現在は、案件も社外の方とのやりとりなども、無理のない範囲で色々なことに関わらせていただいています！
メインで案件を持つのはまだ少し先なので、今は勉強もしつつ、継続でご依頼いただいている保守だったり、下層ページのデザイン制作などの業務から、自分なりに色々と学びながら業務に取り組んでいます。
早く戦力になれるよう、業務中もそれ以外も質の良いインプットとアウトプットを重ねていきたいです📚
大事だと思ったこと
続いて私がデザイナー、社会人として大事だと思ったことや、
現段階までの業務を通して気づいたことをまとめます。
働く前から実践しておけばよかったと思うことも沢山あるので、学生の方の参考にもなれば嬉しいです📗
デザイナーとして①インプットの目を養うこと
良いデザインのサイトを見て学ぶのが大事なのは知っていても、
初心者だとどこをどう見ればいいかわからない状態があると思います。
というか私自身が実際そうでした。
なので同じような方がもしいたら、
まずサイト模写に取り組んでみて、デザインの見方を掴んでから
内容の充実したサイトレビューに取り組む
ことをお勧めしたいです。
以前は参考サイトを眺めていてもあまり自分の引き出しになっていないなと感じる時があったのですが、それは見方や意識する点をわかっていなかったからだと思います。
自分の手で模写してサイトを再現すると、
自分が制作をする時には気をつけてなかったポイントに自然と目が行ったり、
自分が思い付かないあしらいを見て作り方を考えたりと、
制作者の細かい気配りに気づけるようになります。
先述した通り、入社後の課題でも模写をした後に架空リデザインをするサイクルで学習していて、これは(少なくとも私にとっては)効果があったと思います。
※架空リデザインとは(呼び方である程度想像つくかと思いますが一応説明すると)
実在するサービス、ウェブサイトをピックアップし、もっと良くする、または全く違うコンセプトにすることを想定して架空のリニューアルデザインを作成する練習方法のことをこう呼んでます。
例えば模写をする中で新たに配色、レイアウトなどのエッセンスを知り、
それらを別サイトのリデザインに取り組む時にすぐ実践できるので、
自分の制作の引き出しとして定着します。
特に私は、文系大学を卒業した後にデザインの勉強を始めており、基礎を固める期間が人より少ない方だと思うので、
手を動かして作り方を身につけ、精度を上げていくことが出来るという点でも役立つと感じました。
(ので、もっと早く取り組むべきだったと思います。。)
ある程度手を動かしてからは
サイトレビューもインプットとして行なっています。
初学者でもよく取り組んでいる方はいると思うのですが、
いいと思ったサイトをじっくり観察して、何故良いと思ったか、背景にある意図は何か、仮説をたてながら分析すると
意外と時間もかかりますし、難しく感じます。
サイト模写ではデザイン面の表現を体得するというメリットが大きい気がしていましたが、
サイト分析では「言語化できる、説明できるデザイン」を作るための引き出しや言語化力が身につくと思うので(まだまだ学んでいる途中ですが)、
また違った効果や楽しさがあります。
作業としては見る、調べることが主になるので模写よりも隙間時間に取り組みやすく、毎日継続的に行うインプットとしても定着させやすそうです。
模写もサイトレビューもどちらも良い学習法ですが、
それをやることが目的化してしまうと、
ただ写すだけ、ただ感想を書くだけになりかねないので、
とにかく一番大事なのは
沢山考えながらやることだと思います👀(私も気をつけます！)
デザイナーとして②実践から得る学びの貴重さ
「「それはそう」」すぎる話ですが
実体験を伴って感じていることなので、簡単に記しておきます。
模写などはもちろん役立つし、学生の方にもおすすめですが、
働き始めるとやはり実践でしか学べないことの多さを実感します。
分かりやすいところで言うと
実案件では制作上気をつけなければいけない点や制約が色々とあるし、工数や前後の工程も気にかけて取り組む必要があって考えることが多いです。
また１つのものの制作に多くの人が関わるという状況自体、実務に入って初めて経験するので、データの管理や分担もそこで初めて体験していくことになります。
そういった部分を知って、慣れる意味でも、
実案件で経験を積めるのは個人的にすごくありがたいと思いました。
学生の方は、
じっくり勉強する以上に
とりあえず早めに就職に向けて動くこと(これは私自身の反省も踏まえて思うことですが)、
また会社を探すときに
どのぐらいの時期から案件に関わるのか、どのような研修体制かなどを確認してイメージを持っておくこと
などを大事にすると良いんじゃないかと思います！
デザイナーとして③作業の効率化
少しでも多く「考える」ことに時間を使うために
ちょっとしたツールの操作や下準備の時間を短縮できるよう「これ地味に手間だな」「面倒だな」と思う部分を効率化していくのも大事だと感じています！
仕事の効率化というとタスク管理等含めて色々出来ることがありますが、
制作を効率化するのにまず必要なのは大きく分けて以下の２つだと思います。
①プラグイン関連
まずFigmaはプラグインが充実しているので積極的に活用していくべきです🧩
私も色々と入れていますが、
多分まだ使っているものが少ないので随時情報収集していきます。(プラグインしかなかった機能が公式に実装されることもよくあるので、それも追っておく)
真っ先に入れたプラグインをいくつか紹介します。
・unsplash (unsplashから直接画像を流し込める)
・filter / effects (写真やオブジェクトに簡単な加工ができる)
・Nisa text (流し込んだテキストを分割できる)
・Able (色のコントラスト比が十分か確認できる)
・split shape(長方形のオブジェクトの列・行数や間隔を指定して分割する)
この他にも色々あるのですが、大体、
この作業もう少し楽にならないかな？と思った時に検索したり、
SNSなどで新しいプラグイン情報を得たりしてその都度保存しています。
最近だとNoise & Texture という粒子加工や動くグラデーションなどを作れるプラグインが面白く、活用できるか試行錯誤しています。
背景にこういったテクスチャーを取り入れたい場合など、もし使えればfigmaで作業が完結して便利そうだなと思います！
またGoogle Chromeの拡張機能も活用必須です。
こちらもまず入れたものを一部紹介します。
・Lighthouse(アクセシビリティとかパフォーマンスをチェックできる。)
・axe dev tools(アクセシビリティをチェックできる。)
・font ninja(フォントファミリー、サイズ、ウェイトをすぐに見られる。)
・window resizer(ブラウザの画面サイズを変えられる)
・pinterestの保存ボタン(pinterestにサイト内の素材を選んで保存できる)
・Wappalyzer (実装に使っている技術を見られる。)
これら以外にも、使われてる色を取得できる拡張やキャプチャ機能の拡張なども入れています。
(以前はデベロッパーツールで全部確認していましたが、目的や状況によっては拡張使った方が早いので両方使おうと思って入れました📌)
Chromeの拡張は参考サイトを探しや模写、サイト分析にも役立つので
学生の方もご参照ください。
②ショートカットキー
デザイナーを目指していたり、そうでなくても大学などでPCを使っていたら慣れている方は多いと思いますが、
汎用的なショートカットキーは絶対使うべきです。
まだあまり使う習慣がない人は活用してみてください！
検索するとこういった記事が出てくるので(人によって使わないものも載っていると思いますが)参考になると思います。
ツール独自の機能のショートカットは
仕様変更・アプデに左右されることも割とあるようなので、ショートカットキーにどれだけ頼るかは考えつつ使うと良いそうです。
社会人として①質問のタイミングと訊き方
ありがたいことに私は「若手のうちはすぐ質問して」と言ってもらえる質問しやすい環境で働けています。
ですが、昔から人に質問するのが苦手という弱点があるので(自分で解決しなければと思いがち。。)、
意識して早く質問するようにしています💡
仕事は勉強などと違って、
いくら自分で考えて調べても解決しないことも多いし、
何より質問する前に調べる時間にも工数がかかります。
そう考えると、少し調べてわからなければ聞いたほうが良いと思い、
苦手意識は薄れてきました。
とはいえ、緊張したり質問することが多かったりして不明瞭な訊き方にならないように、以下の点に気をつけて(入社して間もない頃は特に)準備をするようにしています。
①質問する前の調べ方
Google検索はもちろん、業務に関する疑問であれば、自分が見られる範囲でbacklogやslackの履歴、Googleドライブを参照します。
それだけでは結果解決しないことが多いですが、疑問が明確になるし、後の業務にも活きるだろうと思って色々覗いています🔎
②質問の準備
・何についての質問か(どの案件の、どの作業か)
・何点質問があるのか(箇条書きにしてまとめることもあります)
・相手に何を求めているか(その場で知りたいのか、相手の対応が必要か、後でレビューして貰えば良いのか)
・場合によっては自分の考えや現状を添える
を伝えられるよう整理します。
毎回できているかと言われるとわかりませんが、簡潔に的確に質問するよう意識づけから行いたいと思っています！
社会人として②すぐできることからすぐやる
見出しの表現は大変幼稚ですが🐥
何事も後回しにしないことは本当に重要だと常々思いますし、
社内でも、皆さん意識されている印象です。
優先度や緊急度は考慮しつつ、短い時間で返せる作業から先にこなしていくと、タスクがどんどん片付くので抜け漏れが減ります。
チャットのやりとりなども、返信やリアクションを早くすると相手も不安にさせずに済むし、コミュニケーションが円滑になると教えていただいてその通りだなと思ったので、こちらも意識するようにしています。
私は新卒で入ったため
デザイナーとしても社会人としても初歩的な話が多くなりましたが、
制作への取り組み方も、コミュニケーションやタスクの管理も、初歩的なことが今後の基礎になると思うので、これからも大事にしていきたいです！
おわりに
以上が、私の入社してから現在までのプロセスと学んだことです。
至らない点ばかりではありますが、皆さんのおかげで
何もわからず常に緊張していた4〜5月ごろと比べると
落ち着いて、積極的に働けるようになりました。
トルクに入社したいと思ったきっかけの一つである
webアクセシビリティへの取り組みについてや、インプットの詳しいやり方なども書きたかったのですが、
長くなりそうだったので今後別途書いていくつもりです✒️
最後までお読みいただきありがとうございました！
この記事が気に入ったらサポートをしてみませんか？