未経験から独学でWebデザイナーに転職するには

私は30歳を前にWebデザイナーに転職しました。

Webデザイナーには誰でもなれる訳ではなく、やはり転職活動は苦労続きでした。しかし、諦めずに転職活動を続けた結果、無事Webデザイナーになることができました。

今回は未経験からWebデザイナーになる方法をまとめました。Webデザイナーになりたい、Webデザイナーを目指している人は参考になると思いますので、ぜひ読んで下さい。

私の経歴

未経験からWebデザイナーになるための方法を書く前に、私の経歴について書いておきます。

今でこそWeb業界に生きていますが、それまでは全く異なる仕事をしていました。販売職です。Webデザインに全く関係がない仕事です。

学生時代も普通の大学で文系の学部を卒業しており、デザインはおろかプログラミングなどITに関する学校にも行っていません。

そんなWebデザインとは無縁だった私でも、結果的にWebデザイナーになることができました。

現在は採用活動も

Webデザイナーになってからおよそ3年が経ち、今では採用活動も行っており、書類選考や面接なども担当しています。

ですので、仕事を探している側と採用する側の両方の気持ちが分かります。

まずは制作環境を整えよう

Webデザインに必要な物を紹介します。

  • PC
  • Photoshop/Illustrator
  • テキストエディタ
  • スマホ

推奨PC環境

ノートPCかデスクトップPCかで迷うかと思いますが、私はデスクトップPCをおすすめします。

なぜなら、デザイン制作にはある程度大きめのモニターが必要だからです。ノートPCでも大きいモニターに繋げることはできますが、そんなことするならデスクトップPCを買った方がいいです。

ノートに比べるとデスクトップの方が性能が良く処理能力が高いですね。

PCのスペックは勉強のモチベーションにも影響します。サクサク動かないPCだとイライラして勉強が嫌になる可能性もあります。

低スペックもハイスペックも使ったことがあるので断言できます。PCへの投資は惜しまないようにしてください。

おすすめのPCについては、以下の記事を参考にしてください。

WebデザインにおすすめのPCは?最低限のスペックについて

Adobeアプリ

PhotoshopとIllustratorを使うには、Adobe CCに登録して月額料金を支払う必要があります。

単体なら月額2,180円、Adobeアプリがまとめて使えるコンプリートプランなら月額4,980円かかります。

Photoshopだけならフォトプランに入会して月額980円で利用するという方法もあります。ただし、フォトプランだとTypeキットのフォントが使えません。

Typeキットのフォントはあった方がいいですが、とりあえず機能をマスターしたいという人はフォトプランでも良いと思います。

Photoshop

Webデザインの制作には色々なツールがありますが、私はPhotoshopをメインで使っています。

ピクセルデータを扱うソフトですので、Webデザインと相性が良くて扱いやすいです。

Webデザイン制作に便利な機能も豊富にあって手放すことができません。

Illustrator

アイコンやイラストを作成するときはIllustratorを使っています。

アイコン・イラストの制作に必要なパスの操作が非常に使いやすいのでおすすめです。

SVGなどの拡大しても荒くならない画像形式とも相性がいいのが特徴です。

テキストエディタ

WebデザイナーといえばDreamweaverが思い浮かぶかと思いますが、動作が遅くて私は使っていません。

最近のWebデザイナーやコーダーはあんまりDreamweaverを使っていない印象があります。

私のおすすめはVisual Studio CodeとSublime Textです。

Visual Studio CodeはMicrosoftが提供している無料のテキストエディタです。Microsoftが開発しているので、長く安心して使えるエディタではないでしょうか。

最近はかなり人気があり、使っている人がどんどん増えているようです。

すぐに日本語で使えて導入が楽なので、初心者にもおすすめできます。

Sublime Textは非常に動作が早くてストレスなく使えるのが魅力です。以前より人気があるので、便利なパッケージがたくさんあるのが魅力です。

有料ではあるのですが、無料期間が無制限ですので、納得が行くまで試すことができます。

スマホ

持っているのは当たり前だと思いますが、Webデザインをする上でスマートフォンは必要不可欠なものです。

今ではサイト訪問者の6〜7割くらいはスマホで閲覧しています。動作や見え方のチェックをするために必須です。

できればあった方が良いもの

  • タブレット
  • サブのスマホ

動作の確認にタブレットやサブのスマホがあると便利です。

普段メインで使っているスマホがiPhoneなら、サブ機でAndroid端末を持っておくと良いでしょう。

Android端末は1万円台で購入できるので、そこまで高くありません。

Webデザインの基礎知識

デザインにはベースとなる基礎知識があります。

センスだけではより良いデザインを作ることはできません。様々な決まりやパターン、法則を知ることでデザインスキルを向上させることができます。

レイアウトの基礎知識

まずはレイアウトについて勉強をしましょう。

例を挙げると、

  • カラムレイアウト
  • グリッドレイアウト
  • 適切な余白
  • 情報をまとめる
  • 見やすいレイアウト

このような点について調べて知識として頭に入れておきましょう。

配色の基礎知識

Webデザインに配色の知識は必須です。必ず配色については学んでおきましょう。

特に初心者は彩度が高い色を使いがちです。くどいグラデーションを使っちゃうとかも。

明るくて彩度が高い色は難易度が高いので、まずは彩度と明るさを抑えて配色するようにしてみましょう。

学習しておくなら、

  • 色の組み合わせ
  • 可読性の高い配色
  • メインカラー、サブカラー
  • 色数を抑える
  • 色が与える印象

といった所ですね。

フォント・タイポグラフィの基礎知識

Web上で使用できるフォントの種類やその特徴を覚えて下さい。

また、文字サイズ、文字間や行間などに気を使い、テキストを読みやすくするように心がけましょう。

英数字フォントには、セリフ体やサンセリフ対などがあります。日本語フォントにはゴシック体や明朝体などがあります。

これらのフォントの使い方や特徴を知っておくと良いでしょう。フォントの種類にはそれぞれ適した使い方があるので調べておきましょう。

Photoshop/Illustratorの練習方法

デザインの知識を身につけても、それを表現するためのツールの使い方を知らないと意味がありません。

ここでは、PhotoshopやIllustratorの勉強方法を紹介します。

Photoshopの練習方法

Webデザインでのレイアウトだけではなく、画像の加工を行うことも多くあります。

特に画像の切抜きは初心者が苦労するポイントです。私はぱくたそにある人物の画像を切り抜いて練習していました。

画像にもよりますが、慣れてくると数分で切り抜きできるようになります。

Illustratorの練習方法

Illustratorを使うなら、まずはアイコンを作ることをおすすめします。

Font Awesomeにあるようなアイコンを、まずは自分で作ってみます。他にもフリー素材アイコンのサイトを参考にして、自作するという方法もあります。

後は、PCやスマホなどを抽象的に書いてみるのも良いでしょう。

リアルに作る必要はありません。特徴を掴んで、シンプルに描けるようにしましょう。

 

HTML/CSSの勉強方法

HTMLやCSSの基本的な使い方はそこまで難しくありません。

まずは簡単なチュートリアルをやってみたりや本を買って練習しましょう。私は入門書を買って練習しました。

いきなりおしゃれなサイトが作れなくても大丈夫です。タグ打ちに慣れるようにして下さい。

簡単な入門書で練習したら、次は一からサイトを作るチュートリアルをやってみましょう。

サイトを作るチュートリアルは、最低2回くらい通してみることをおすすめします。

ブログを始めてみる

何かブログを始めて、カスタマイズをしてみましょう。

私はWordPressやはてなブログのカスタマイズを通して、HTMLやCSSについて学びました。ブログのカスタマイズは開発者が組んだHTMLを見て学ぶこともできます。

テンプレートをダウンロードしてみる

HTMLやCSSのテンプレートはサイトにたくさん転がっているので、ダウンロードしてソースコードを読んだり、自分なりにカスタマイズしてみたりして勉強してみましょう。

Google Chromeのデベロッパーツールの使い方を覚える

Google Chromeのデベロッパーツールを使いこなせるようになると、HTMLやCSSの学習がとても捗ります。

デベロッパーツールで色んなサイトのHTMLを覗いてみたり、要素に指定されているCSSがどうなっているのかを確認してみたりしましょう。

デベロッパーツールは実務でも、とーってもよく使うので、慣れておくと後々役に立ちます。

Webデザイナーになるために絶対に読んでおくべき書籍

これまでWebデザイン関連の書籍を色々読んで、おすすめしたい本を紹介します。

デザイン関連

始めに、デザイン全般についての本を紹介します。Webのデザインをする前に、デザインの基礎知識を覚えておきましょう。

ノンデザイナーズ・デザインブック

こちらはデザイナーではない人がデザインについて勉強するための本ですが、デザインの基礎が網羅されておりデザイン初心者にも超おすすめです。

現役のデザイナーの人でも読んでいる人は多いと思います。

なるほどデザイン

脱初心者して、プロらしいデザインができるようになりたい人におすすめです。

悪い例と良い例を比べて解説してあり、とても理解しやすい内容になっています。

タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック-

こちらはタイポグラフィの基本を学べる書籍です。タイポグラフィについてはこの一冊でほとんど網羅できるくらい充実した内容です。

Webデザイン関連書籍

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

たくさんの事例を見ながらWebデザインが学べる本です。実践に役立つ知識を学べておすすめです。

Photoshop

知識ゼロからはじめる Photoshopの教科書 [CC2017 / CS6対応]

まずは基礎的な使い方を覚えましょう。まずはこういった簡単な入門書で練習して下さい。

神速Photoshop [Webデザイン編]

ある程度慣れてきたらこの本はかなりおすすめです。これを読めば、作業を効率化してよりスピーディーに制作ができるようになります。

HTML/CSS関連書籍

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]

とりあえずHTML・CSSの基礎の基礎を学びたいという人はここから始めてみると良いでしょう。

最初はこれくらい簡単な本で良いと思います。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

分かりやすさで言えばピカイチな書籍です。ただし、レイアウトの組み方が少し古いでの、これを読んだ後知識をアップデートする必要はあります。

古いとはいえ、一からサイトを構築する体験ができるので、数回通してやってみても良いでしょう。

Webデザイナーを目指す人がする勘違い

未経験で入社してくる新人社員を教育していると、色々と勘違いしているなと思うことがあります。

HTML/CSSができるのがWebデザイナーではない

Webデザイナーと聞くと「HTMLやCSSができる人」と思っている人が多いようです。

HTMLやCSSはコーダーであったりフロントエンドエンジニアが担当する場合もあり、Webデザイナーが必ずしもやる仕事ではありません。

もちろんWebデザイナーでもHTMLやCSSができた方がいいです。しかし、HTMLやCSSができるからと言って、Webデザイナーになれるとは限らないのです。

Webデザイナーに必要なのは、デザインのスキルです。

イラストが書けないといけない?

デザイナーはイラストを書けるかといえば、そんなことないですし、画力は必要ありません。

イラストが書ければ仕事の幅が広がるかもしれませんが、それはWebデザイナーの業務領域ではありません。

基本的にWebサイトに載せるイラストはイラストレーターが別で書いています。

未経験におすすめの転職サイト・エージェント

Webデザイナー向けの転職サイトはたくさんありますが、経験者のみのサイト・エージェントと未経験OKの転職サイト・エージェントがあります。

ここでは、未経験での転職に力を入れている転職サイトを紹介します。

WORKPORT

WORKPORTは未経験からの転職に力を入れている転職エージェントです。

普通の転職サイトとは異なり、転職エージェントは担当者が転職のアドバイスや面接対策などを行ってくれます。

エージェントによっては未経験での仕事紹介が少なかったりすることもあるそうです。未経験での転職に力を入れているエージェントを利用しましょう。

未経験におすすめのWebデザインのオンラインスクール

以前Code Campというオンラインスクールを利用したことがあるのですが、オンラインの割にしっかり教えてくれるのでおすすめです。

特に自分1人での学習に自信がない人、分からないところを質問しながら学びたいという人におすすめです。

Code Camp

Webデザイナーの魅力

Webデザイナーという仕事を続けてきて、良かったことがいくつかあります。ここでは、Webデザイナーの魅力を紹介します。

クライアントが満足すると嬉しい

月並みですが、クライアントの反応が良いとすごくやりがいを感じます。

他の仕事に比べても褒められることが多いような気がします。

一般的にWebに詳しいクライアントはあまり多くありません。ですので、クライアントから「Webサイトを一から作れる凄い人」と見られることもあります。

自力で稼ぐ力が身につく

Web制作ができると、フリーランスで働いたり副業をしたりと自分で稼ぐことができます。

他の職種に比べると、Webデザイナーはフリーランスも多いです。

私自身、コネで仕事をもらったりサイトの運営で副収入を得ています。

お金が儲かるというのは、モチベーションの向上にもつながります。「お金のために頑張る」というのは私はアリだと思います。

お金を稼ぎたいという動機からWebに興味を持って、気づいたらハマっちゃうという人も少なくないでしょう。

カッコイイ仕事というイメージがある

久しぶりの知人や友人に会うと、現在の仕事を訊ねられることがあります。

「Webデザイナーをしている」と言うと、「カッコイイ」という反応がほとんどです。

モテるかどうかは分かりませんが、カッコいいイメージはあるようです。

まとめ

クリエイティブ系の仕事というのは未経験での転職の難易度が高いです。誰もができるという仕事ではないですから。

しかし、未経験だからWebデザイナーになるのは無理という訳ではありません。誰しもが未経験だった時期は必ずあります。

WebデザインやWebの技術というのは変化します。数年前の当たり前が今は通用しないということはよくあります。

新しいデザイン手法やスキルをキャッチアップすることで、経験者を超えることだってできるのです。

経験値と同様に、日々情報を得ることも重要なのです。努力次第ではWebデザイナー経験者を駆逐することができるのがこの仕事です。

ですので、経験がないからと言って諦めないでください。

Webデザイナーを目指して頑張って下さい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です