note見出し

未経験&独学&ツテなし！webデザイナーになるためにやったこと

黒井澪

はじめまして！10月より都内の制作会社にてwebデザイナーとして働き始めた黒井です。ありがたいことに最近、webデザイン勉強中という方にTwitterの方でフォローされることが多くなったので、何か役に立ちたい！と思いnoteに登録しました。今回は未経験どころか異業種からの転職だった私が転職のためにやったこと、勉強したことをまとめていこうと思います。


黒井について

自画像2

・黒井澪（クロイ　レイ）
・1992年生まれ（今年27歳）
・愛知生まれの神奈川在住
・普通の高校と4大卒（文系）
・デザインやイラストについては全くの独学
・前職はゲーム会社のヘルプデスク
・2019年7月に躁鬱と診断される
・日本酒が好き

専門学校や美大などにもあこがれたことはありましたが、家庭の都合で泣く泣く断念した経験があります。前職で躁鬱と診断され、休職期間中にwebデザインの勉強をし、転職をしました。診断された時は「まさか自分が鬱に……？」「明日からの生活どうしよう……」と不安しかなかったです。


何故webデザイナーを目指したのか

────ここはほぼ自分語りなので読み飛ばしても大丈夫です────

新卒でパチンコホールスタッフになり、その次に社内ヘルプデスクと未経験、異業種を渡り歩いていた私ですがとあることがきっかけで2019年7月、躁鬱と診断されました。

さて、躁鬱になって休職期間に入ります。私は失意の只中でした。なってみてびっくりしたのはマジで布団から動く気力が沸かないこと。そんな時、たまたまTwitterで見かけたマエダさんの主催していたカセグーンというイベントに参加しました。

色んな考え方のクリエイターさんのお話を聞く中で割とガッチガチな固定観念のある家庭で育っていた私は、そのイベントで色々とふっきれました。

「世の中にはいろんな働き方をしている人がいる！」
「自分のやりたいことを仕事にできている人がいる！」

未経験業種で培った「相手の知識レベルに合わせて言葉選びを変える」スキルとそのために自分から学んでいく姿勢をデザイン、イラストを掛け合わせた仕事はなんだろうかと考えた時、Webデザインにたどり着き、独学での勉強を始めました。


とりあえずコーディングに触れてみた

Amazonで参考書を数冊注文して、届くのを待っている間に有名なProgateさんをやっていました。

画像2

Progateは分かりやすさはもちろんなんですがUIもかわいいんですよね……。しかも月額980円で全レッスン開放って太っ腹すぎる……！
ひとまずHTML&CSSを一通りやってみたんですけど、躁鬱の薬って集中力低下の副作用があるんですよね。でもそうとは思えないほど集中してやれて（たまに2時間集中しっぱなし）一人で「これだ……」とwebデザイナーになる夢の確信を得てました。


参考にした書籍

電子書籍、実物の本と混ざってますが下記の本を読んで勉強をしました。

なるほどデザイン
簡単だけど、すごく良くなる77 のルール デザイン力の基本
ロゴデザインの現場
けっきょく、よはく。

1 冊ですべて身につくHTML & CSS とWeb デザイン入門講座
HTML5&CSS3 標準デザイン講座

おみやげのデザイン
実例つきロゴのデザイン
配色スタイル ハンドブック
同じ素材& テキストなのに、こんなに違う! デザインのネタ帳

デザインの考え方の本からコーディング、作品集まで幅広く手あたり次第に読みました。色んな本がありますが比較的最近で口コミの多いものを選んでるので読んだことある！というのも多いと思います。
休職期間に入っていたのでほぼ毎日勉強に充てられる環境ではありましたが、体調が不安定なこともあって集中できないときは布団で作品集を眺めていました。

入社して先輩に言われたのですが、デザインはいきなり降ってくるわけではなく真似から入るものなのでいいデザインを見ることは大事な勉強に繋がります。


デザインについてもっと知りたい！

専門学校にもスクールにも行ってない自分が、ちょうどいいタイミングで出会ったのが「毎日ちょっとずつデザインを学べる」をテーマにしているchot.designです。

画像4

サイト全体が流行りのフラットデザインでかわいいだけでなく、現役のデザイナーさんたちが執筆したカリキュラムが日に日に増えていくサイトです（この間レッスン数が300を超えたそうです）Photoshop、AdobeXDだけでなくSketch、Figmaについてやコーディングについてもなんと無料でちょっとずつ学べるサイトです。


Photoshopの使い方……全然知らないぞ

見出しの通り、Photoshopはカラー変換や印刷でしか使用したことがなかったので（普段はSAIやCLIP STUDIO使い）Udemyという動画のオンライン講座サイトでwebデザイナー向けの講座で基本操作の勉強をしました。

不定期にあるセールで2000円以下で購入できるのに充実したカリキュラムばかりなので移動時間などスマホで見ていました。


名前だけ知ってたAdobeXD

最近すごいと話題のAdobeXD。実際使えるようになった方がいいの？という声もありますが、私は入社初日からいきなりLPのワイヤー作成を任されたのでその時に使えるようになっていてよかったなと思いました。

使い方については最近1周年を迎えたCocoda!で基本的な操作を学びました。Daily Cocoda!という毎日出されるお題に沿って作っていくので習慣化しやすいのが特徴です。

画像3


ポートフォリオを作った

何の実績もない未経験がデザイナーになるにはポテンシャル採用の道が近道です。とりあえず何か作らねばと思い、紙とwebのポートフォリオ二つを用意しました。

紙のポートフォリオは #毎日クリエイティブ でもおなじみのせんざきさんのnoteとねこポンさんの「最強ポートフォリオの簡単な作り方」を参考に作成しました！色々発信してくださるクリエイターの方のおかげでググるだけで情報が出てくる世の中……ありがとうございます……！

せんざきさんのnoteでも書かれてますが、未経験のデザイナーを雇う側は伸びしろを期待しています。ただポートフォリオに作品を並べて終わりではなく、「なぜこのデザインにしたのか」を一言でも添えてアピールするようにしました。

webのポートフォリオについては同じくねこポンさんの「ポートフォリオHTMLテンプレート（ベーシック）」をお借りして作成しました。

テンプレートを借りるのは邪道では？という意見もありますが休職期間の3か月の間に転職をしたかったのでスピード重視を選びました。（ポートフォリオサイト内にちゃんとテンプレートを使用したことの記載は忘れずに！）ほかの方のコードを見ることで勉強にもなるので、一石二鳥になると考えてます。また、後述しますがポートフォリオサイトについては2パターン作成しました。

できあがったポートフォリオサイトがこちら。サーバーはロリポップ、ドメインはムームードメインで年間880円です。


SNSでもアピールしてみた

せっかく作ったしSNSでも発信してみようと思い、本名とHNで2パターン作ってTwitter、Facebookなどでも投稿してみました。実際のところどうだったかというと、結構RTやお気に入りしてくださる方も多く、応援のコメントをいただけることもありました。
紆余曲折あり結果として現在働いている制作会社様からTwitter経由でお声かけをいただきました。（Facebookでは旦那さんのお義母さんに応援してもらえました）

後々参加したデザイナーの交流会で知ったのですが最近はSNS経由での採用も多いみたいなので、転職活動している人はポートフォリオの公開などして発信していくことで転職のための手段を増やせるかと思います。


結局、大事なのはまずやってみること

以上がwebデザイナーになるために用意したものになります！今スケジュール帳を見返したら7月中旬にあったカセグーンから怒涛の転職エージェント登録と面接をしながらwebデザインの勉強をしていました。（休め……）

あとせっかくのデジタル社会なのでとにかく周囲にwebデザイナーになりたいと発信すること（友人経由で求人を紹介いただいたことがあります）、先駆者の経験談を調べてまず実践して自分に合うかどうか見直して、吸収していくが大事だと思います！このnoteがwebデザイナーを目指す誰かの助けになれば幸いです。

いただいたサポートは明日のお昼ご飯、勉強用の本、通院費、生活費になります。