takato（@n8takato）です！
未経験でwebデザイナーになるには何をすれば良いの？
この記事は上記の課題に向けて作成しています。
未経験でwebデザイナーを目指している方が多いかと思います。
僕自身も未経験でwebデザイナーになりました。
webデザイナーになるために行った内容を皆さんに紹介します。
これからwebデザイナーを目指している方は是非読んでください。
この記事を読むメリット
- 僕が未経験でwebデザイナーになるために行ったことがわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
〜個人的にオススメなwebデザインスクール3選〜
今なら無料オンライン説明会実施中です！
興味のあるスクールに申し込んでみてください！
webデザイナーとは？
webデザイナーとは「webサイトを制作する」仕事です。
クライアントの要望に応えてwebサイトを作成します。
具体的な仕事内容は下記の通りです。
webデザイナーの仕事内容
- 要望のヒアリング
- サイトの設計
- サイトのデザイン
- コーディング
- 運用・保守
案件の上流から下流まで行います。
※会社によってはディレクターが「ヒアリング」・「サイトの設計」を行う場合があります。
また、デザインに使用するロゴやコピーライトも作成します。
webデザイナーに必要なスキル
webデザイナーに必要なスキルは大きく分けると下記のようになります。
webデザイナーに必要なスキル
- 企画力
- デザインスキル
- コーディングスキル
企画力
クライアントの要望からどのようなサイトを作成するか考えるスキルです。
使用する色やフォントもこの段階である程度決めて行きます。
日頃から多くのwebサイトを見ることで企画力は身につきます。
デザインスキル
デザインソフトを使用するスキルです。
webデザイナーが使用するデザインソフトは下記の3つです。
webデザイナーが使用するデザインソフト
- Illustrator
- Photoshop
- XD
Illustrator
Illustratorはwebサイトのファビコン(アイコン)やイラスト制作に使用します。
Photoshop
Photoshopは画像の加工や切り抜きに使用します。
XD
XDはwebサイトのデザインを作成します。
最近ではXDでwebサイトを作成するのが主流になりました。
コーディングスキル
webデザイナーに必要なコーディングスキルは下記の通りです。
webデザイナーに必要なコーディングスキル
- HTML
- CSS
- JavaScript
- PHP
HTML
HTMLはwebサイトに文章や画像を追加することの出来る言語です。
CSS
CSSはサイトに様々な装飾を追加することの出来る言語です。
JavaScript
JavaScriptはwebサイトに様々な動きを加えることの出来る言語です。
PHP
PHPは入力フォームの内容を確認画面に反省させることの出来る言語です。
webデザイナーには「企画力」「デザインスキル」「コーディングスキル」の3つが必要になります。
webデザイナーに向いている人
webデザイナーを目指す前に向いている人の特徴を知る必要があります。
※実際にやってみないと向き不向きはわかりません。しかし、向いている人の特徴を事前に知っておくことである程度の向き不向きはわかります。自分が向いているなと思ったら迷わず勉強スタートしてください。
webデザイナーに向いている人の特徴を少し紹介します。
webデザイナーに向いている人の特徴
- 見た目を整えるのが好き
- 地道な作業が苦にならない
- デザインやコーディングの勉強が好き
見た目を整えるのが好きな人でないとwebデザイナーは向きません。
また、webデザイナーは日頃から勉強する必要があります。
webデザインの勉強が苦ではないことが大切です。
webデザイナーに向いている人と向いていない人の特徴はこちら↓
webデザイナーになるために実際にやったこと
僕がwebデザイナーになるために実際にやったことを紹介します。
僕がwebデザイナーになるために実際にやったこと
- 独学で学習
- スクールに通う
- 転職活動
独学で学習
始めはwebデザインを独学で学習しました。
僕が行ったwebデザインの独学は下記の2つです。
僕が行ったwebデザインの独学
- web教材と参考書でコーディングの学習
- 参考書でデザインソフトの使い方を学習
web教材と参考書でコーディングの学習
コーディングはweb教材と参考書で勉強しました。
使用したweb教材は「Progate」です。
Progateとは？
- 月額1,078円でコーディングが学習出来るweb教材
Progateは「HTML」「CSS」「JavaScript」「PHP」などの言語が学べます。
PCはもちろんスマホでも学習出来るので移動時間も勉強していました。
僕は「Progate」を何周か行いコーディングを学習しました。
コーディング学習で使用した参考書
- 「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」
- 「Webデザインとコーディングのきほんのきほん」
「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」
こちらはコーディング初学者向けの参考書になります。
コードの意味が細かく記載されているので始めの1冊にオススメです。
学習を進めると架空のカフェサイトが作成出来るようになります。
「Webデザインとコーディングのきほんのきほん」
こちらはPhotoshopとコーディングを学習することが出来ます。
※始めにPhotoshopでwebサイトを作成します。そしてコーディングでwebサイトを作成する流れです。
Photoshopの使い方とコーディングを1冊で学習出来る参考書です。
コーディングの勉強方法についてはこちらの記事を参考にしてください。
参考書でデザインソフトの使い方を学習
コーディング学習と同時にデザインソフトの使い方を学習しました。
デザインソフトの使い方は参考書で学習しました。
学習に使用した参考書
上記3つの参考書でそれぞれのソフトの使い方を学習しました。
また、参考書以外にyoutubeでも学習しました。
スクールに通う
独学で学習していましたがスクールに通うことにしました。
スクールに通うことにした理由
- 学習スピードを向上させたい
- オリジナルサイトの評価が欲しい
- ポートフォリオの添削をお願いしたい
学習スピードを向上させたい
コーディングの学習にはエラーが付きものです。
エラーを解決するまでに多くの時間を消費してしまっていました。
もっと早く学習を進めたいと思ったのでスクールに通うことにしました。
オリジナルサイトの評価が欲しい
ポートフォリオの素材としてオリジナルサイトを作成していました。
オリジナルサイトが良いものかわからず、不安に感じていました。
成果物に対してプロの視点でフィードバックをもらえるのも決めてでした。
ポートフォリオの添削をお願いしたい
オリジナルサイト同様にポートフォリオをの添削も理由でした。
webデザイナーを目指す中でポートフォリオの作成が一番難関でした。
そのためポートフォリオもプロの意見をもらおうと思いました。
僕が当時に通ったスクールは「テックキャンプ」です。
質問し放題で現役のプログラマーから回答してもらいました。
テックキャンプは無料のカウンセリングを実施しています。
スクール選びに悩んでいる方は是非参加してみてください。
転職活動
ポートフォリオを作成して転職活動を行いました。
僕は転職エージェントを使わずに転職活動をしました。
※転職エージェントは転職採用企業から転職者の年収の約30%を報酬として受け取るビジネスモデルです。そのためエージェントを使って転職すると採用企業は無駄な採用コストをエージェントに支払わなくてはいけません。採用企業に負担をかけないためにエージェントを使用せずに転職活動しました。
web制作会社のHPの問い合わせフォームから面接のお願いをしました。
そして無事にwebデザイナーとして転職することが出来ました。
webデザイナーになるメリット
webデザイナーになるメリットはいくつかあります。
webデザイナーになるメリット
- 在宅ワークで働ける
- 個人でも働くことが出来る
在宅ワークで働ける
webデザイナーはパソコン1台で仕事が出来る職種です。
そのため家やカフェで仕事することが出来ます。
完全在宅ワークの会社も多いので、通勤時間という概念が無くなります。
個人でも働くことが出来る
webデザイナーの仕事は個人のスキルに直結します。
そのため個人でも働くことが出来ます。
僕自身も会社員をしつつ個人でもいくつかwebサイトを制作しています。
詳しくはポートフォリオページをご覧ください。
未経験でもwebデザイナーになれる！
未経験でwebデザイナーになった僕が実際に行ったことをまとめました。
webデザイナーは未経験でもなることが出来ます。
もし他にも情報が欲しい場合は追加しますので、TwitterのDM等でご連絡ください。
〜個人的にオススメなwebデザインスクール3選〜
今なら無料オンライン説明会実施中です！
興味のあるスクールに申し込んでみてください！