デザイナーのための転職・副業・仕事情報

グラフィックデザイナーから独学でウェブデザイナーになった方法まとめ

グラフィックデザイナーから独学でウェブデザイナーになった方法まとめ

こんにちは!元グラフィックデザイナーで現在はウェブとUIデザインの仕事をしているずぼらなオッターです。

今回は読者の方から質問をいただいた「グラフィックデザイナーからどうやってウェブデザイナーになったんですか?」という質問を元に僕が独学でウェブデザイナーに転職した方法をまとめました。

これからウェブデザイナーになりたい人はぜひ参考にしてください。

この記事が役立つ人
  • ウェブデザイナーを目指す人テキスト
  • グラフィックデザイナーからウェブデザイナーになりたいと思っている人
  • 転職で業種も変えてみたいと思っている人
デザイナーの年収を2.5倍にした5つの方法を全て公開~デザイナーの年収アップまとめ〜
【年収2.5倍に上げた!】デザイナーの年収を2.5倍にした5つの方法を大公開元グラフィックデザイナーのずぼらなオッターです!現役WEB・UIデザイナーの僕が12年かけて年収を2.5倍まで増やした5つの方法をすべてご紹介します。転職をしてデザインの仕事を続ければ続けるほどデザイナーの年収アップは見込めます。なぜなら、僕の初任給は年収240万円(ボーナスなし)でしたが、現在は年収600万円にまで増やすことができています。今グラフィックデザイナー、ウェブデザイナーをしている人で年収が低くて困っているという人には参考にしていただければ嬉しいです。...

ウェブデザイナーはどんな仕事をするのか?

ウェブデザイナーの仕事は大きく2つ、ウェブのデザインとコーディングです。

ウェブデザインの細かい仕事内容はバナーの作成やLP(ランディングページ)のデザイン、ウェブサイトのデザインなど様々です。

会社などによって異なりますが、コーディングもウェブデザイナーが行うことが多いです。主にHTMLやCSSで、最近ではSASSを使ったスキルも求められることが多いです。

ウェブデザインの仕事をしているうちに僕の場合は「ここちょっと修正してほしい」なんて言われることがあって独学で勉強しながら覚えました。

ズボラなオッター

コーディングは苦手意識が強いデザイナーがめっちゃ多いよ

にゃん助

コーディングできた方がウェブの構造も知ることができるから基礎は学んだほうがいいよ!

  • ウェブデザイナーの仕事は大きくウェブデザインとコーディング
  • コーディングスキルはあったほうが重宝される
  • HTMLとCSSの理解があればウェブデザインのリテラシーが上がる

ウェブデザイナーに必要なスキルとは?

ウェブデザイナーに必要なスキルはウェブデザイン能力、HTMLとCSSの理解力です。

基本的にはデザインができるだけでウェブデザイナーになることもできます。

あれば重宝されるのはHTMLやCSSなどのコーディングスキル、マーケティング、SEO対策など知識があると良いです。

例えばマーケティングやSEO対策のスキルの1つはGoogle Analyticsを見ることができることですね。そのスキルがあればデザインの説得力はかなり高くなります。

  • ウェブデザイナーはウェブデザインができれば基本OK
  • コーディングができないデザイナーも少なくない
  • SEO対策などのスキルがあればより説得力も高まり、需要が高くなる
デザイナーが読んで得した本10選〜グラフィックデザイン・ウェブデザインなど〜こんにちは!元グラフィックデザイナーで、現在ウェブデザイナーのずぼらなオッターです!私は12年間デザインの仕事に携わってきて、この本や読んで得した!読まなきゃ損!という本にいくつも出会いました。今回はそんな得した本を10選にまとめてみました!やっぱり本は勉強になります!よかったら参考にしてみてください。...

ウェブデザインをする上で使うツール

ウェブデザインに使うツールは大きく3つあって、人気なのはAdobe XD、Sketch、Figmaです。ちなみに僕はFigmaを使っています。

グラフィックデザイナーであればIllustratorやPhotoshopを使うことがほとんどで、Adobe XD、Sketch、Figmaのアプリケーションはほぼ使い方も一緒なのですぐに操作方法については慣れます。

僕がFigmaを使っていて、おすすめする理由は練習や個人だけで使う分なら無料プラン(Starter)で十分だからウェブデザイナーをはじめようと思っている人にも始めやすいと思うからです。

FigmaのWEBサイトはこちらから

実際にサムネイル画像はFigmaで作成しています。
無料プラン(Starter)の内容
  • Projectは最大3つまでしか作成できない
  • Fileを編集できるエディターは2人までしか招待できない
created by Rinker
¥2,398 (2021/08/02 23:37:51時点 Amazon調べ-詳細)

独学でウェブデザインを学ぶ方法

では、どうやって独学でウェブデザインを学ぶのが良いのでしょうか?実際に僕がウェブデザインスキルを身につけるまでに行った独学の方法をご紹介します。

方法① バナーデザインを試してみる

自分の自由な時間で世の中にあるバナーを真似してデザインしてみることです。

実際にデザインしてみるとわかるんですが、印刷物などのグラフィックデザインとフォントの扱いや伝え方が違います。

もし、現在グラフィックデザイナーの場合は、だいたいバナーデザインを30個くらい作っていくとだんだんフォントサイズや写真や色の使い方のコツやポイントがつかめるようになります。

方法② ウェブサイトをデザインしてみる

実際のウェブサイトのデザインを相応で作るのも効果的な勉強方法です。

例えば自分がほしいなって思っているウェブサービスを想定してウェブサイトを作ってみる。

または、自分が好きな商品や会社のウェブサイトを自分なりに作ってみることです。

ウェブデザインもある程度数を作っていくとグラフィックデザインとの違いであるピクセルの概念などが身についていきます。

方法③ クラウドワークスで案件をやってみる

それでは実際に副業としてクラウドワークスやランサーズなどのウェブ上の案件にチャレンジしてみることです。

はじめのうちはウェブサイトデザイン!っていうとかなり労力が必要なのでバナーデザインなどの小さな案件にチャレンジしてみましょう。

そうすることでスキルアップもできるし、お金も手に入るし、一石二鳥ですよ。

方法④ 社内でウェブデザインに入り込む

社内にもしウェブデザインもやっている部門がある場合は積極的にチャレンジさせてもらいましょう。

現在の所属する会社にウェブデザイナーも居てウェブの案件もあるなら、転身するつもりでウェブデザインの案件に首を突っ込みましょう。

もし案件がない場合は自社のサイトのリニューアルを提案してみたり、新しいLPなどを提案してみるのも良い方法です。

方法⑤ ウェブデザインもできる会社に転職する

実際にウェブデザインを自分で練習してみたら、次はウェブデザインもグラフィックデザインもできるような会社へ転職することです。

なぜならグラフィックデザインのスキルは最大限に活かしつつ、新たな伸びしろであるウェブデザインの領域で力を2本柱で発揮させることができるからです。

転職先の会社にとっても、グラフィックデザインもできる上に今後はウェブデザインもできるようになる人材であれば期待もできます。また、独学でウェブデザインをしているなら向上心もあるとアピールしやすいためです。

【年収100万円アップできた】Webデザイナーにおすすめの転職サービス7選 こんにちは!転職4回経験している現役のWebデザイナーのオッターです。今回は転職をしている私が使っている転職サービス、転職サイトについ...

独学でWEBデザイナーになるために読んだ本

独学でWEBデザインを学ぶ上で参考になった本を紹介します!これさえ読めばデザインの基礎を身につけることができる!という本をまとめました。

デザイナーが読んで得した本10選〜グラフィックデザイン・ウェブデザインなど〜こんにちは!元グラフィックデザイナーで、現在ウェブデザイナーのずぼらなオッターです!私は12年間デザインの仕事に携わってきて、この本や読んで得した!読まなきゃ損!という本にいくつも出会いました。今回はそんな得した本を10選にまとめてみました!やっぱり本は勉強になります!よかったら参考にしてみてください。...

まとめ

今回は元グラフィックデザイナーの僕がウェブデザイナーへ転身するために独学でウェブデザインを学んだ方法をまとめました。

グラフィックデザイナーの人ならウェブデザインは正直、とても簡単です。

できないって思い込んでいるだけでグラフィックデザインのスキルがある人であればウェブデザインは兼任することが容易だと僕は実感しています。

ぜひ、ウェブデザイナーへの転職を考えている人は参考にしてみてください!

今回の記事のまとめ
  • ウェブデザイナーは独学で十分なれる
  • ウェブデザイナーに必要なのはデザインスキルとコーディングスキル
  • HTMLやCSSの理解はあれば良い
  • 実際にウェブデザインの練習をすればOK
  • ウェブデザインができる会社に転職する

ずぼらなオッターのつぶやき
お問い合わせ

    必須 お名前

    必須 メールアドレス

    任意 題名

    任意 メッセージ本文