紙ものデザイナーからwebデザイナーになるまで -コーディングのお勉強-

私、前職までは6年ほどグラフィックデザイナー職をやってきました。いわゆる紙ものデザイナー。
メインクライアントの関係で、ページ物をやる機会も多かったです。

現職ではコミュニケーションデザインチームに所属しているのですが、webデザイナー以外で構成されるビジュアルデザインチームの方に「どうやってwebデザイナーになる勉強をしたのか」という声を複数いただいたので書き記していこうと思います。

webデザイナーを目指したきっかけ

グラフィックデザイナーとしての限界

もともと気分に左右されやすい性格で、アウトプットの質に波があり、時間にも波ができてしまっていました。その性質が悪影響となりさらにアウトプットが難しくなる時期もありました。
そして、面と向かって上長から言われた「デザイナーとしては凡人なんだし、ディレクションやったら？」という言葉。
まずディレクションをやるようになったのは、デザイナーとしての限界が見えたからです。
時間的にも体力的にも精神的にも一度限界を迎え、一度休職をしました。
その後復帰した際に任されたwebの案件がありました。webのカンプを作るのは楽しく、紙と違って誤植のプレッシャーも少なく心なしかスムーズに仕事をすることができました。

デザイナーという逃げにくい職種

休職をした際、転職したいなという気持ちがありました。
しかし、またデザイナー職に就いたとて激務の場合もあるし、かといって全く別の職種につくことが考えにくい。
グラフィックデザイナーは専門学校の出身の方も多いかと思います。私もその一人であり、高校の頃より印刷やDTPの勉強をしてきた身でした。
そういうルーツを辿ってきたので、やはりデザイナー以外の道は厳しいのかなと考え至ることが多かった自分でした。業界は変えずになんとか頑張りたいと思考していました。
※余談ですが車好きだしいっそ２種免取ってタクドラとかやるのもありかなと思っていた時もあったのですが、あまりに突飛すぎて実行にうつせませんでした。

友人の存在

休職から復帰した際、ディレクション兼デザイナーとして担当したweb案件を、コーダーと二人三脚で進めていきました。
そのコーダーは、私の友人であり専門学校時代の学友でもありました。
一緒に案件を進めていく際、友人はいつも楽しそうに仕事と向き合っているように見えることが多く、密かに羨望の眼差しを向けていました。
何より、会社内で誰もできないコーディング作業をすんなりこなす姿が格好良く見えました。
また、友人という間柄上修正のやり取りがとてもやりやすかったと記憶しています。chromeの開発ツールを教えてもらい、コードの内容を少し見ることができ、修正指示もさらにやりやすくなっていました。

上記複数の理由から総合して考えた結果、webデザイナーを目指したいと考えるようになりました。

勉強の仕方

ビジュアルデザインチームの方から複数言われた、どうやって勉強してきたかの部分についてです。
結論から言うと、動画を見る（インプット）→サイトトレースをする（アウトプット）→できない部分を調べる、聞く。この方法の繰り返しで学習してきました。
動画学習＋トレースで、基本的なことは学べました！応用はまだまだ勉強し続けないとですね。

師匠の存在

スムーズに学習が進んだのはフロントエンドエンジニアの師匠の存在です。この師匠にわからなかった際に質問できる環境があったのでとても救われました。個人的には自分より若い方から技術を学べたのも良かったと感じています。

無職期間

前職で疲労困憊となり、結構長い間無職をしておりました。その折に師匠と出会うことができ、前々から勉強したかったと言うこともあり情熱・目的意識をはっきりと持って学習に挑めたことも幸いしたと感じています。
就業しながら勉強となるとなかなか大変だとは思いますが、弊社は業務時間でも勉強できる＋勉強を推奨する制度もあるというところなので、勉強しやすい環境かと思います。

自分の長所

面接や履歴書などで散々自分の長所として挙げている、「真面目」というところが勉強とマッチしていたと思います。真面目にコツコツ続ける学習もそうですが、プログラミング自体も結構コツコツやらなければならないことも多く、性格的に向いているのかなと体感しています。
今後もコツコツ学習を進めて、Qiita発信などもしていきたいと思います。
余談ですが、自分で学習したところを文字に起こすことも学習になると考えております。私は自分で感じているより文字を書くことが好きみたいで、よしやるぞ！となった時にババっと書いてアップする、みたいなことをたまにします。今後は自分のスキルアップのためにももっと発信をしていけたらいいなと考えています。

大事だと思うこと

自己分析

根幹の話で、自分に合った学習方法を見つけるというファーストステップも大事だと思います。私の場合は、無職期間に否が応でも自分を見つめることが多くなり、学習するにあたりコツコツ進めるのが向いていると感じ実践してきました。

やっていき

動画学習をやっていて感じたのは、動画を見ることも大事ですがその後のアウトプットが一番大事だということです。
極端な話、動画の内容についていけなくても動画を見直すより、自分で実装してみることのほうが身になります。
私の場合デザイナーでしたので、自分のポートフォリオサイトが作りたい！となり設計や要件定義、Figmaでのカンプおこしから実装までを意欲高く進めることができました。
作りたいモノや実装してみたい機能があれば、そこからどんどんやってみることが大事だと思います。

仕事としてやることの意識

ほとんど自己開発しかしないまま転職しましたが、グラフィックデザイナー職から叩き込まれてきた「誰がみても引き継げる、わかりやすいデータ作り」がとても役立っていると思っています。
BEMのことは知らずとも、一定のルールづけや名称の統一などは、キレイなIllustratorデータを作ることと同じようにこなすことができました。
業務上では何かにつけて、整理整頓をすることが好きなのでその性格も上手く作用してくれたなと感じます。
※業務上だけなので、自分の部屋は汚いです
今現在、SassとBEMの講座をチームで受講しているので、もっとわかりやすいコードを書けるようになっていきたいと思います。

今後のキャリア

どんな業界に行っても

グラフィックデザイナーだった時はあまり感じられなかったところとして、技術の向上という点がありました。だから頭打ちを感じたというのもありますが、webデザイン、特にコーディングの世界は常に技術が進化し続けていきます。その世界に飛び込んだことにより、常に勉強し自分の知識を更新し続けていくことの重要さが顕著になりました。
今まではなぜか感じられていなかったのですが、結局のところどの業界にいても常に学びはあり、意欲的に学び続けることでどんな業界でも通用するような人材になれるのではと、大きい話へと思考が飛躍していきました。
自分の印象に残っている言葉で、「精神的に向上心のない者はばかだ」（夏目漱石）があるのですが、彼の言うところの「ばか」に該当したくないという邪な心持ちですが、学習を続けていきたいです。

目指したいロール

自分自身は、「デザインエンジニア」を目指していきたいと考えています。
結局のところwebデザイナーも同じ括りとなる気はするのですが、デザイン思考で実装を進めることができる存在に強い憧れを感じています。
どちらの素養も持つことで、デザイナーとコーダーの間にあるすれ違いやそれにまつわる問題解決などにも役立ちたいですし、スムーズに仕事ができるようになったら喜ばしいことです。
自分がカンプを作る側だった時、どれほどコーダーに迷惑をかけていたのかと思い返すことも多く、そういった事象は色々な場所で起きているのだろうなと想像できます。
自分の好きな領域はwebサイトを作ることなのでwebデザイナーという言葉はしっくりきますが、デザインとエンジニアリグの架け橋になれるような存在を目指したい気持ちもあるので、情緒的な部分でデザインエンジニアを目指していきたいです。