DTP出身のWebデザイナーがコーディングを学んでみた

こんにちは!moco(@moco_megane)です。


私はDTP出身のグラフィックデザイナーですが、現在はECサイトのWebデザイナーをやっています。

しかし、いわゆる“コーディングができないWebデザイナー”でした。


コーディングの学習開始から約3ヶ月。まだまだ道半ばですが、学んでみて感じたことをまとめておきます。

目次

コーディングを学ぶキッカケ


私も以前は

mocoのアイコン画像moco

デザイナーがコーディング?そこまでやらなきゃいけないの?

mocoのアイコン画像moco

とりあえず会社ではデザインとコーディングが分業だし…いいかな…

と、理由を付けてデザインのみをやっていました。


しかし、Web業界のことを知れば知るほど、なんとなく後ろめたい気持ちと焦りが募っていきます。


そして第二子の産休に入ってからの、このコロナ禍。勤め先の会社も大きな打撃を受けました。

もし今後、転職や独立をすることになった時に「Webデザイナーだけどコーディングできません」は通用するのか…?

不安がピークに達した私は、育休期間を利用して学習を始めました。

簡単に経歴を紹介

まずは私の経歴をざっと紹介します。

20歳デザインの専門学校を卒業
21歳〜25歳印刷会社のデザイン部に勤務
25歳結婚に伴い転居、ECサイトのWebデザイナーに転職(採用時にWebは未経験)
30歳現職で育休取得中 ←今ココ

気付けば約10年のキャリアになりましたが、出産育児によるブランクがあるため、体感としては6,7年くらいです。現職に採用された時はWeb未経験の状態でしたが、グラフィックデザインの実績を汲んでもらい、割とすんなり採用されました。

しかしこの5年間で、Webデザインのトレンドも求められるスキルも一変しています。

mocoのアイコン画像moco

正直、いま当時と同じスキルで面接を受けたら、採用されないだろうなという自覚があります……

現職ではどんな業務をしているの?

自社ECのバナーやSNS用の投稿画像、下層ページの修正などがメインです。

時短社員なので、上流工程から関われる仕事は少なめです。

※ただしこれは私が会社にお願いした勤務体系なので、会社に対する不満は全くありません。

コーディングの勉強方法

私の場合の流れは以下の通りです。

  1. 市販のHTML/CSS本を読む(なぜか手を動かさず読むだけ…)
  2. TwitterでWeb勉強垢を作る
  3. ProgateでHTML/CSSを一周(1ヶ月だけ課金)
  4. 模写コーディングをしてみるが、今まで覚えたはずのことが全く身についていないことに気づき愕然とする
  5. 会社の同僚である現役エンジニアに質問しまくる
  6. あまりに質問しすぎて(分からないことが多すぎて)申し訳なくなってくる
  7. 独学かつメンターがいない状況に限界を感じ、オンラインサロンに入会する ←今ココ
mocoのアイコン画像moco

はい、結構遠回りしてますね…。

もっと早く人に聞ける環境を作れば良かったなーと悔しくも思いますが、独学でつまずいたのも、それはそれで必要な経験だったのかもしれません。

初学者はどうしても効率の良い学習方法を求めがちですが、最初から無駄を省くのはなかなか難しかったです。なぜなら、何が重要で何が重要でないかすら判断できないからです。

もちろん、Webデザイナーロードマップ的なものはネット上にいくつも存在しています。しかしそれも言う人によってまちまちなので、あくまで参考程度にするのが良いかなと思っています。

結局は自分がやってみたうえで「ここはもっと深く学んだ方が良さそうだ」「ここまで出来る必要はないかな」と体感しながら取捨選択していくしかないのではないでしょうか。

何をどこまで学んだ?

2020年6月(次男生後3ヶ月、緊急事態宣言解除により長男の保育園再開)から学習を始めて、約3ヶ月。一日の学習時間は、子どもたちの様子に合わせて0〜4時間ほど。なんとか一通りのHTML/CSSは書けるようになり、現在はJavaScriptおよびjQueryを勉強中です。

mocoのアイコン画像moco

もっとサクサク進める人もいるとは思いますが、家族と自分の健康を犠牲にせずやろうと思うとこれが限界でした…。

とはいえ、Webのアクセシビリティと適切なマークアップを重視するコーチに教わっているので、セマンティックなコードの書き方には自信が付きました。ここまで深い知識は、絶対に独学では身に付かなかったと思います。

Webデザイナーはコーディングが出来るべきか?

実際にコーディングを学んで痛感しました。「実務でやるかやらないかはさておき、出来るくらいの知識は必要」が私のアンサーです。

mocoのアイコン画像moco

今思えば、よくこの程度の知識もないままコーダーさんにデザインカンプ回してたな…と冷や汗が出てきます。

そして、これってDTPに置き換えても同じことだと思うのです。

私は印刷会社に勤めていたので、印刷に適したデータの作り方をみっちり叩き込まれました。実際の刷り出しに立ち会って輪転機のオペレーターと話したり、時には製版に関わってくるような作業もしました。

そして、外部から入ってくるよそのデザイナーが作ったデータを見て

mocoのアイコン画像moco

えっ…4C印刷なのに特色混ざってる…しかも大量に…

mocoのアイコン画像moco

ひえー、こんなにベタの面積広くて大丈夫かなー…

mocoのアイコン画像moco

スミがレジストレーションになってる!?版ズレしたらどうするんだろ…

などなど、思うことがたくさんありました。

要するに、印刷の知識が足りないデザイナーです。もちろん見た目は綺麗だったり、すごくカッコいいものだったりします。でも印刷で再現できなければ、元も子もありません。

今まで私がやってきたWebデザインって、これと同じ状態なんですよね。勉強すればするほど、自分の至らなさを感じて恥じ入るばかりでした…。

ただし、実務でやるかは人それぞれ

現職ではデザインとコーディングが分業制です。Twitterを見ていると、このタイプの現場が多いと感じます。フリーランスであれば、どちらも出来た方が仕事も進めやすく稼ぎやすいような気がしますが、会社に勤めるとなるとやはりどちらかに偏っていくのではないでしょうか。

色々と書きましたが、私はエンジニアやプログラマになりたいわけではなく、あくまでデザイナーとして幅を広げるために勉強をしています。目標にしている領域までコーディングの勉強を終えたら、またデザインの勉強を進めようと画策中です。

Webの業界はものすごいスピードで発展していきます。常に勉強してしがみついていなければ、あっという間に振り落とされるのだろうというのは、私のようなペーペーでも分かります。

デザインに軸足を置きながら、最新技術をキャッチアップしながら、いざとなればコーディングもやりつつ、業務とは別の自主制作でポートフォリオを充実させて……

そんな欲張りなデザイナーになるのが、目下の目標です。

mocoのアイコン画像moco

と言いつつJavaScriptの難しさにのたうち回っている現在です

この記事が気に入ったら
フォローしてね!

目次
閉じる