第二新卒でwebデザイナーに未経験で転職するには?実際に転職成功した僕が具体的な方法を紹介します!

ノートPCとデスクトップOCdesign

みなさんこんにちは。takatoです!

僕は社会人2年目の半ばでwebデザイナーに転職しました。

前職は営業職だったのでwebデザイナーは未経験です。

そんな僕が、第二新卒で未経験のwebデザイナーに転職するために実際に行動した内容を紹介します!

デザインの基本を身につける

まずはデザイナーになるためにデザインの基本を身につけました。

デザインには4つの基本があります。それは「整列」「近接」「強弱」「反復」です。

これらはビジュアルを綺麗に見せるために必要なルールで、デザイナーなら誰もが身につけておくべき基本です。

下記のビジュアルはデザインの基本4つが全て含まれております。

上記のビジュアルのどのあたりに4つの要素が含まれているのか色をつけてみました。

下記にて4つを細かく説明します。

整列

整列は赤色の部分になります。

文字や画像の情報を使用する際は、端を揃えるのが基本です。

恥がバラバラだったり縦横が揃っていないと見ていて気持ちよくありません。

今回のデザインは右側に揃えてあります。

情報を整列させて、綺麗に整えましょう。

近接

近接は青色の部分になります。

同じグループの情報は近くにまとめましょう。

反対に内容の異なる情報は距離をおきましょう。

このように近接を意識することで、情報を見やすくなります。

強弱

強弱は緑色の部分です。

タイトルと説明文の表現には特に強弱をつけてください。

強弱があることで、それぞれの情報の役割がわかります。

このブログ記事もタイトルと説明文は文字のサイズと太さが異なります。

強弱をつけることで、タイトルや文章だと説明する必要なく理解できるのです。

反復

反復は黄色の部分です。

同じビジュアルを定期的に使用することで一貫性が生まれます。

人間は一貫性のあるものを見ると気持ち良いと感じ、その情報の好感度が高まります。

情報には反復性を含みましょう。


以上がデザインの4つの基本です。よく「デザインの4原則」とも言われます。

デザインの最低限の知識として、まずは4原則の知識を身につけました。

デザインツールを使えるようになる 

デザインの基本知識を身につけたら、実際にデザインツールを使いこなせるようにしました。

webデザイン業務で使用するデザインツールは主に3つで、「Illustrator」「Photoshop」「Adobe XD」の3つです。

どれもAdobeソフトでサブスクのものとなっております。

学生は学割があるので、購入時は学割用で購入してください。

Illustrator

Illustratorはデザイナーなら誰もが使用するデザインツールです。

ロゴデザインから名刺・パンフレット・webデザインまで幅広く使用することができます。

このツールでデザインを作成し、PDF保存したものをクライアントに見せることが多いです。

Illustratorのツールだけでも奥が深いため、全てを使いこなすことは難しいと思います。

このツールを使いこなすためには毎日何かしらの作品を作ることです。簡単な名刺でも良いですし、webデザインを作成しても良いです。

大切なのは毎日Illustratorを触るということです。

そうすれば徐々にこのツールの使用方法が感覚的にわかってきますよ!

Photoshop

Photoshopは画像加工アプリでとても有名なツールです。こちらもデザイナーなら使用しているかと思います。

昔はwebサイトのデザインをフォトショップで作成する方が多かったです。というのも、Photoshopはwebの対応をしており、Illustratorは紙媒体の対応をしていたからです。

ここでいうweb・紙の対応というのは、「色」のことを指します。

webでは「RGB」という色を使用されており、赤・緑・青の3色を使用してさまざまな色を表現しています。

全てのwebサイトはこの3色を使って様々な色を表現しており、Photoshopのみ「RGB」に対応しておりました。

紙媒体は「CMY」の色を使用しており、シアン・マゼンタ・イエローの3色で様々な色を表現しています。

webデザインを行う際は「RGB」の色を使用してデザインしなければいけませんが、RNGはPhotoshopのみ対応でした。

そのためwebデザインはPhotoshopで作成することが多かったのです。

しかし最近になりIllustratorが「RGB」も対応することになり、今ではIllustratorでwebデザインを設計するようになったというわけです。

XD

XDとは、ワイヤーフレームを設計する際に使用するツールです。

ワイヤーフレームとは、webサイトをデザインする際にどの情報をどの部分に配置するかを大まかに設計することをいいます。

XDはパワーポイントのように図形を直感的に操作することができます。

さらにページが多いwebサイトでも、クリック後にどのサイトにページ遷移するかを簡単に表示することもできます。

IllustratorやPhotoshopに比べたらデザイン機能は劣りますが、その分直感的に使用することができるので、多くのwebデザイナーが使用しています。


以上の3つがwebデザインの現場でよく使用されます。

これらのツールを実際に使用して、使えるようになりました。

コーディングスキルを身につける

デザインツールと合わせてコーディングスキルも身につけました。

コーディングは、webサイトを実際に作成する際に必要なもので、コーディングスキルがないとデザインしたサイトを作ることができません。

企業によってはデザインとコーディングを分けているところもありますが、僕は個人でお金を稼ぎたいため、デザインとコーディングを両方勉強しました。

コーディングは本当にたくさんの種類がありますが、webサイトを作成するために必要な言語は「HTML」「CSS」「JavaScript」「PHP」の4つです。

その中でも最初の3つと残りのPHPと大きくふたつに分けることができます。

HTML・CSS・JavaScript

この3つはサイトのビジュアル部分を作成するために必要な言語となっております。

HTMLはサイトに文字や画像を挿入する言語となっており、全てのサイトはこの言語で作成されています。

CSSはサイトを装飾する言語となっております。HTMLで作成した文字の大きさや色を変更したり、画像を横並びに配置したりすることができます。

JavaScriptはサイトに動きを加えることができます。画像をスライドショーにしたり、スクロールした時に素材をフワッと表示させることができます。

このように上記3つの言語はサイトのビジュアルを作成するために必要な言語となっています。

webデザイナーならこれらのコードもかけるようになる必要があります。

PHP

PHPはサイトのビジュアルではなくサーバー側を操作するために必要な言語となります。

例えばサイトの問い合わせフォームにコンタクトがあった場合、設定しているアドレスにコンタクトがあった旨をメールで通知してくれるように設計する際にPHPを使用します。

問い合わせした際に自分のメールに問い合わせ完了メールが届くのもPHPで設定しているからです。

ECサイトはまさにPHPの塊ですね。

このようにビジュアルではなくサーバー側を操作するのがPHPという言語です。

PHPも書けるwebデザイナーはそんなに多くないため、コードが書けるようになると自分の市場価値が高まります。




このようにコーディングのスキルがwebデザイナーにとって必要なスキルなので、勉強しました。

コーディングの勉強は、始めは独学で行ました。参考書やプロゲートで勉強することができます。

しかし独学だとコードのエラーが生じた際にどこが間違えているのか把握するのに時間がかかりました。

思うように配置されなくて、でも原因が見つからなくて、、そういう状態にハマるとイライラして勉強が進みませんでした。

独学で勉強することは出来なくないですが大変です。

なので僕はプログラミングスクールに通いました。

オンラインで受講出来ますし、不明点があればすぐにオンラインで質問出来ます。

確かにお金はかかりますが、その分早く正確に理解することが出来ました。

もしwebデザイナーを目指してて、独学がきついと感じたらプログライングスクールに通うことをおすすめします。

僕はテックキャンプに通いました。(109期でした)

テックキャンプはオンラインで無料相談を受け付けているそうです。もし気になる方はお話だけでも聞いてみてください。



ポートフォリオを作成する

デザインの基本・デザインツール・コーディングの知識を身につけたら、アウトプットもかねてポートフォリオを作成しました。

ポートフォリオを作成するにはいくつかオリジナル作品を作らなければいけないので、僕は架空のwebサイトをいくつか作りました。

架空のサイトを作成する際に気をつけたことは、実際にクライアントに依頼されたことを想定して作成したことです。

クライアントの商品を買ってもらうためにどうすれば良いのかを考えました。どういう人を対象として、その人たちに刺さるにはどのようなデザインが良いのかを考えました。

さらに設計に費やした時間も計りました。自分の力量を知るためにも、時間を図ることをおすすめします。


架空のサイトを作ったら、それらを元にポートフォリオを作成します。

ポートフォリオには作ったものを載せるだけでなく、自分がどのようなデザイナーになりたいのかという内容も入れました。

ポートフォリオは転職活動の際に面接官が事前に見るものです。

なので自分がどのような人間なのかという情報も入れておきました。

ビジネススキルを身につける

デザイナーはデザインができれば良いという考えがあります。間違いではありません。

しかし今の時代、〇〇だけ出来ていれば大丈夫なんてことありませんよね?

それは会社が求めている人材にも言えることです。最近はデザインだけができるデザイナーはあまり求められなくなりました。

というのも、デザインが出来てもそれをお金にするためのビジネススキルがなければ、ビジネスとして成立しなくなっているからです。

デザイン会社なんてたくさんあります。webデザイン会社は都内だけで2,000社もあるのです。

その中で自社が選ばれるためにはどうすれば良いのかというビジネス思考も必要なのです。


ビジネススキルを身につけるためには、多くのビジネスモデルを知ることが必要です。

ビジネスモデルとは、お金がどのように動いているかを表しています。

世の中にどのようなビジネスモデルがあるのか、知ることが必要です。

そして多くのビジネスモデルを知った上で、自分たちはどのようにお金を稼ぐのかを考えるのです。

これを日々考えていると自然とビジネススキルが高まります。

ビジネスのセンスもあるデザイナーは今重宝されますよ!

最後に

以上が僕が第二新卒の未経験でwebデザイナーになるまでに行ったことです。

デザイナーは特に資格がなく誰でもなることが出来ます。

しかしデザイナーになるのはとても大変です。

もし独学でデザイナーになるのが大変という方は、スクールに通ってにてください。

テックキャンプは僕も実際に通いました(109期でした)

今は無料オンライン説明会を実施しているので、興味のある方は是非一度お話を聞いてみてください!