記事カテゴリ
Webデザイナーになるために必要な知識やネタをカテゴリにまとめました。
はじめての方へ
未経験からWebデザイナーを目指してみませんか?
↑20代後半の僕はまさにこれでした。
でも、今は週3日だけ楽しく働くフリーランスのWebデザイナーです。
こんにちは!ねこポンと申します。 このサイトでは、短期間で未経験からWebデザイナーになるための情報を惜しみなく紹介しています。
Webデザインができれば、他にも一気にできることが増えます!
Webデザインができれば、一気にできることが増えます。
LINEスタンプ制作、アフィリエイトサイト構築、電子書籍の表紙のデザイン、ポスターやロゴ作り、年賀状や暑中見舞いのはがきデザイン、写真のレタッチ、Tシャツのデザインなどなど、さまざまなクリエイティブな創作活動ができるようになります。自分のアイデアを形にできるのです!
「このために生まれてきたんだ」とすら思える仕事をしよう
しかも、Webデザイナーになれば、デザインとサイト作りの力が身につき、モノを作る喜びが感じられます。 僕にとってはもう生きがいです。
「このために生まれてきたんだ」
とすら思えて、心が震える瞬間が何度も訪れました。十分にスキルを身につければフリーランスにもなれます。僕は業務委託で週3日だけ会社に常駐して働いています。それ以外の日はテニスをしています。
まずは、この下の【最短!未経験からWebデザイナーになる4ステップ】からぜひ読んでみてください。Webデザインを勉強しようと決意できたら、すべての記事を読むことをおすすめします。 学校の選び方や独学の仕方など詳しくお伝えしています。一緒にがんばりましょう。
「Webデザイナー」という職業を選択肢に入れてみませんか?人生のほんの3~6ヶ月の本気の勉強期間が、あなたの将来を劇的に変えてしまうかもしれません。
最短!未経験からWebデザイナーになる4ステップ
スキルゼロの状態からWebデザイナーにはほぼなれません。まずは3~6ヶ月ほど学校か独学でWebデザインの基礎知識を習得し、ポートフォリオを制作する必要があります。
まずは、Webデザインが勉強できる求職者支援訓練(ハロートレーニング)の学校に通いましょう。受講料は無料、講師はプロのWebデザイナーです。さらに一定の要件を満たせば通学期間中、月に10万円もらえます。雇用保険(失業保険)の資格有り無しは関係なく、基本的には誰でも受講できます。これほど最高の環境はありません。学校によって、通学期間は様々ですが、十分に学べる6ヶ月がベストです。
HTMLやPhotoshop、jQueryやWordPressなどを、プロから体系的にがっつり勉強できるのが求職者支援訓練の魅力です。
現在は経済産業省の推進するリスキリング事業のおかげで、一般のスクールも安く受講できるようになっています。『LIG』などの有料スクールも検討してみましょう。最新設備に囲まれながら、第一線で活躍するプロのWebデザイナーに直接教えてもらえるのは貴重な学習の機会です。下記のWebデザインスクール一覧を参考にしてください。
お仕事と学習を両立したい場合は、オンラインスクールを検討します。自宅でも通学でも受講できる『デジタルハリウッド』は、Webデザイナーを目指すスクールのド定番です。また、通学が難しければ完全にオンラインで受講できる自学自習&メンター付きの『Tech Academy』も人気です。
発達障害などの障害のある方は『atGPジョブトレ』などの就労移行支援サービスを利用しましょう。授業料が無料の『atGPジョブトレ』はクオリティの高い動画授業が受けられて、わからない箇所はその場ですぐに専門スタッフに質問できます。
デザインスキルを一気に伸ばしたい人は『fullme』を受講しましょう。デザインスキルはレビュー、つまりダメ出しをしてもらって直すことで急激に成長します。レビュー付きのデザインスクール『fullme』がオススメです。デザインスキルを高めたい人はぜひ受講しましょう。
事情があって、学校じゃなくてどうしても独学したいという方には、下記の記事で最短で独学するためのベストな書籍をまとめました!現在は、無料のレッスン動画サイトの『ドットインストール』や良質な書籍があるので、Webデザインの独学も可能な時代になりました。
PhotoshopやIllustratorを裏技的に安く入手する方法は下記の記事で紹介しています。普通に契約すると高額なので必ず利用するようにしましょう。
Webデザイン関連の書籍はけっこう値段が高いものが多いです...。下記の記事で、Kindle Unlimitedで無料で読める書籍を紹介しているのでぜひチェックしてみてください。
エンジニアも選択肢として考えている方は、ProEnginner運営の無料のプログラミングスクール『プログラマカレッジ』を受講しましょう。通常ならエンジニア養成のスクールは40~70万円以上はしますが、そもそもエンジニアは難関で、なれる可能性も少ないため、そんなにもお金を掛けるのはもったいないです。無料のプログラマカレッジに通学しましょう。
ポートフォリオは紙版とサイトの2つがあれば何かと便利ですが、両方作ってる時間が惜しいので、Webのポートフォリオ(ポートフォリオサイト)だけは用意しましょう。
紙のポートフォリオを作る場合は、印刷してクリアファイルに入れたものを一つ用意しておきます。さらにPDFにしてGoogleドライブにアップしておき共有URLを発行しておけば、転職エージェントや面接先の企業にも共有できてラクです。
ポートフォリオのチェックリストをnoteで販売中です。激安のワンコイン500円です。セルフチェックをして改善点を見つけて少しでもポートフォリオの質を上げましょう。
ポートフォリオ用のWordPressテーマを販売しています。時間短縮をしたい方はぜひ使ってみてください。
ポートフォリオ用のHTMLテンプレートは無料で配布しています。
ポートフォリオサイトをアップするレンタルサーバーを契約します。無料のレンタルサーバーもありますが広告が表示されてしまい自分の作品集が台無しです。有料とはいえ、たったの月額100円からレンタルサーバーは借りられるので必ず利用してください。
ポートフォリオの準備できたら転職活動開始です!転職サイトで未経験OKの求人を探して自分で応募するか、未経験でも登録可能な転職エージェントに登録して求人を紹介してもらいます。
定番のIT/Web系に特化した転職サイトが『Green』です。登録して「未経験OK」の求人を探して気になる企業があれば応募しましょう。
また、未経験でも応募可能な案件も扱う数少ない転職エージェントの『ワークポート』に登録します。転職エージェントは未経験や地域によってはなかなか案件を紹介してくれないケースもありますが、利用は無料なのでとりあえず登録しておいて求人の紹介待ちをしておきましょう。
未経験からWebデザイナーになる場合の雇用形態は、正社員か、お互いの相性を見定めてから正社員になる紹介予定派遣をおすすめします。
派遣になるのは要注意です。スキルがほとんど身につかないリンク張り替えやテキスト修正などの作業ばかりやらされて、不要になればすぐにクビになる可能性もあります。新規サイトのデザインやゼロからコーディングなどの成長できる案件は、すべて正社員スタッフに回されます。会社に長く所属する可能性のある正社員を成長させたいからです。でも現在はコロナ禍で派遣も検討すべきです。派遣会社と派遣先は十分に吟味しましょう。
SESへの入社はやめましょう。Webデザインとは関係のない仕事をやらされる可能性があります。
転職エージェントが企業をいくつか紹介してくれたり、自分で転職サイトで探してみて気になる会社を受けましょう。転職サイトや転職エージェントで自分に合いそうな求人が見つからなければ、企業の採用ページからも直接応募します。あらゆる手段を試しましょう!
デザインとコーディングを本気でがっつり身につけたいなら、Web制作会社に入りましょう。多くのクライアントの様々なテイストのサイトに関われて、グッとデザイン力とコーディング力が成長します。
Web制作会社で最低でも2年間働いて、自信をつけたら後は自由です。フロントエンドエンジニアに転向もありだし、フリーランスになったり、僕のように週3日だけ業務委託で会社で働いたり、あるいは事業会社のインハウスWebデザイナーになったり、自分の好みに合わせて複数の道が開けます。
Web制作会社は年齢的にも体力的にもキツいという方は、学校で身につけたWebデザインの基礎知識と今までの仕事で培ってきたスキルの合わせ技で、事業会社のWeb担当者やWebディレクター、マーケッター、プランナーの道があります。
未経験OK!の転職エージェントと転職サイト
未経験OKの転職エージェントは少ないです。Web系に強い『ワークポート』は登録しておきましょう。
プログラミングに興味がある方は、完全無料のプログラミングスクールで転職支援もしてくれる『プログラマカレッジ』も時間があればぜひ挑戦してみましょう。
ワークポート:未経験でも登録可能なWeb/ITに強い転職エージェント
『ワークポート』は、未経験からでもWeb系職種を紹介してくれる数少ない転職エージェントです。コロナが収まった現時点でもなかなかWebデザイナーやコーダーの求人は紹介しづらい現状はありますが、Web系職種、例えばWebマーケターや広告運用、Webディレクターなどの求人はある程度は紹介できるようになってきています。大手から中小企業まで幅広い業界の企業を紹介してくれます。また、履歴書や職務経歴書の添削、面接のコツ、キャリアプランの相談など、面談を通じてサポートしてくれます。面談は平日と週末に対応可能です。ワークポートの強みは、IT/Web/ゲーム系企業との深いつながりと、全国に拠点が多く多数の求人紹介が可能な点です。
Green:Web系職種の定番の転職サイト
『Green』は、Webデザイナーが使う定番の転職サイトです。経験者向けの求人が多いですが、未経験OKのWebデザイナー求人も扱っています。通常の転職サイトのように自分で条件を設定して検索をし応募をします。GreenはWeb系の求人数が非常に多く、見ているだけでWeb業界の職種や給与などの情報が得られるので、まずは登録してみましょう。デザイナーやコーダーの求人以外にも、Webマーケターや広告運用、Webディレクターなどの求人も多く扱っています。
おすすめのWebデザインスクール一覧
オススメのWebデザイン&プログラミングスクールを一部紹介!主要なスクール23校は『Webデザインスクールの一覧』でチェックしましょう。
求職者支援訓練:無料なのでまずはここを検討!
一番おすすめのスクールは国の運営する求職者支援訓練(ハロートレーニング)です。授業料が無料!しかも約6ヶ月という期間がWebデザインの基礎スキルを習得するのに十分な長さです。僕自身も求職者支援訓練を経てWebデザイナーになりました。
東京にはWebデザイナー系の訓練校は6校ほどあり、各地域にも1〜3校ほどは見つかるため、どんな人も通いやすいのもおすすめのポイントです。
ふだん税金を払っているので、このようなスクールはしっかり活用させてもらいましょう笑。
失業保険が受給できる方は職業訓練がおすすめです。期間が約3ヶ月と短くやや理解が浅くなる点は不安ですが、復習や独学で補えれば問題ありません。最近は数はで少ないですが6ヶ月コースも登場しています。
参考記事:【無料】職業訓練でWebデザインを学ぶ
デジハリ:Web業界の定番で鉄板のスクール
『デジタルハリウッド』ことデジハリは、求職者支援訓練か職業訓練に通えない場合に次に検討するド定番のスクールです。動画授業×マンツーマン指導なので仕事との両立も可能です。僕の知り合いのWebデザイナーもデジハリの出身者が多いです。プランは「Webデザイナー専攻 超実践型 就職・転職プラン」がオススメ。「お仕事TRYプログラム」で在学中に実際のクライアントの仕事が体験できるので実案件をポートフォリオに掲載できます!未経験の人が転職活動で直面する実務経験が無くて採用されづらい壁を突破できます。
デジLIG:有名Web制作会社LIGが運営するスクール
『デジタルハリウッドSTUDIO by LIG(通称:デジLIG)』は、超有名Web制作会社LIGによるWebデザインスクールです。上で紹介したデジハリ(デジタルハリウッド)のLIGコラボのスクールです。学習スタイルはデジハリと同じで動画授業×マンツーマン指導です。LIGが運営するオウンドメディアやYouTubeチャンネルの画像を課題として作ったり、実際にLIGの現役デザイナーが制作したデザインを見本にした課題があったりと、LIGが好きな人やスクールがある首都圏にお住まいの方にオススメのスクールです。興味がある人はデジハリとLIGの両方の無料カウンセリング(説明会)を受けてみて比較してみましょう。
Fullme:デザイン学習特化型のレビュー付きオンラインスクール
『Fullme』はデザイン学習特化型のオンラインスクールです。最大の特長はなんといってもプロによる課題デザイン添削です。デザイン界隈では有名な書籍「けっきょく、よはく」や「「3色だけでセンスのいい色」などを執筆するデザイン会社『ingectar-e』が講師を務めています。デザインスキルはレビューをしてもらってこそ急速に成長するため、とてもオススメのスクールです。僕がデザインを学びたいと思ったら、このスクールを選びます。
デイトラ:コスパの高いSNSで人気のスクール
『デイトラ』はWebデザインコースが¥119,800からとコスパの高いオンライン完結型のWeb制作スクールです。格安ながらもデザインとコーディングのレビュー(添削)が受けられます。通学式のスクールに40、50万円も払う余裕はないけど、デザインやコーディングのレビューはしてほしい!という方はデイトラを受講しましょう。デザインを重点的に学びたい方は「Webデザインコース」、コーディングスキルを高めたい方は「Web制作コース」を受講しましょう。
プログラマカレッジ:定番の無料プログラミングスクール
『プログラマカレッジ』は20代限定のオンラインの完全無料のプログラミングスクールです。無料なのでエンジニアになりたい方はぜひ挑戦してみてください。無料の仕組みは転職が成功した生徒の企業から支払われる協力金で成り立っています。Javaを中心にHTML/CSSやMySQLなどを学びます。授業の質は高いと評判です。現在受講生にノートパソコンプレゼントキャンペーンを実施中です。『プログラマカレッジ』の卒業生による体験談記事はこちらです。
無料PHPスクール:無料でPHPを学びたければココ
『無料PHPスクール(通称:Pスク)』も上で紹介した『プログラマカレッジ』と同様の完全無料のプログラミングスクールです。特徴的なのはオンライン受講も可能ですが、通学式で、学習するプログラミング言語をPHPに絞っている点です。PHPはがっつりプログラミング言語である一方で、ECサイト構築やWordPressで使われるなどWeb系と親和性が高い言語なので、Web系の会社で働きたい人にはこの無料スクールがオススメです。23日間という短期間でハードめなカリキュラムな分、未経験でも内定2社を保証してくれます!校舎は東京の池袋にあります。
Webデザインお悩み相談
みなさんから頂いたWebデザインについてのお悩みやご質問をまとめています。ひとつひとつ回答していますので参考にしてみてください。ご質問は各記事のコメント欄よりお願いします。
Web制作会社訪問ゲーム
Webデザイナーとは
- Webデザイナーとは?
- Webデザイナーの仕事内容「デザイン」「コーディング」
- Webデザイナーは、デザインとコーディングの両方できなきゃダメ?
- Webデザイナーの働き方(企業とフリーランス)
- Webデザイナーの一日の流れ。たまにヒマです。
- Webデザイナーのリアルな年収は?
- リアルなWebデザイナーの適性(向き不向き)
- Webデザイナーに必要なもの
- なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか
- プログラマーの適性をプログラマーになれなかった僕が語る
- UI/UXデザイナーとは?Webデザイナーとの違い
- コーダーとフロントエンドエンジニアの違い
- Webデザイナーの自由すぎる職場環境
- 週3日だけ働きたいならWebデザイナーになろう
- Webデザイナーはテレワークができる職種!
- WebデザイナーはHSPに向いているお仕事!
- Webデザイナーの需要はあるが、駆け出しWebデザイナーが大量に現れてパイの奪い合いになった
- 未経験からいきなりフリーランスのWebデザイナーになるのがオススメできない理由
- Webデザイナーの残業事情。良い残業とは?
- Web制作会社は「裁量労働制」「年俸制」「退職金なし」が普通です
必要なスキル
- 最初にチェック!Webデザイナーに転職する前に最低限持つべきスキル一覧
- HTML/CSS – コーディングに必要なスキル
- Figma – サイトやアプリのデザインを制作するソフト
- Photoshop – サイトやバナーのデザイン・画像編集のソフト
- Illustrator – アイコン・イラストなど絵的なモノ制作ソフト
- jQuery – サイトに動きをつけるプログラミング言語
- WordPress – サイトを簡単に更新可能にするシステム
- Sass – CSSを効率的に書くためメタ言語
- Git – コードのバージョンを管理する仕組み
- 就職前にデザインのルール原則だけは知っておこう
- Webデザイナーは絵が下手でも大丈夫?
- Webデザイナーに英語は必要?
勉強方法
- Webデザインはどうやって勉強すればいいのか?
- お金をかけずにWebデザイナーになる方法
- どっち?独学かスクールかは自分の性格に合わせて選ぼう
- 学校でWebデザインを勉強するのがベストな理由
- 安いWebデザインのスクール?いえいえ、国の無料の学校がありますよ
- 職業訓練・求職者支援訓練・一般のWebスクール…どれがベスト?
- 【無料】求職者支援訓練でWebデザインを学ぶ
- 【無料】職業訓練でWebデザインを学ぶ
- 一般のWebスクールで学ぶ
- アジャストアカデミーに遊びに行ってきたよ!雰囲気は?評判は?就職率は?ねほりはほりと3時間も聞いてきました。
- 未経験で実務経験がゲットできる!デジタルハリウッド『Webデザイナー専攻 超実践型 就職・転職プラン』が超オススメ!
- Webデザインスクールの一覧
- 東京のWebデザインスクール一覧
- 新宿のWebデザインスクール一覧
- 渋谷のWebデザインスクール一覧
- 池袋のWebデザインスクール一覧
- 埼玉のWebデザインスクール一覧
- 千葉のWebデザインスクール一覧
- 横浜のWebデザインスクール一覧
- 大阪のWebデザインスクール一覧
- 名古屋のWebデザインスクール一覧
- オンラインスクールでWebデザインを学ぶ
- 【もう騙されない】ママ・主婦向けのWebデザインスクールの紹介
- 怪しい?ママ向けWebデザインスクール『Famm』をプロが徹底解説!評判と口コミも一挙紹介
- 裏技?AdobeCreativeCloudを安く入手する方法
- 障害を抱える方向けの無料Webデザインスクールや働き方について
- 独学でWebデザインを勉強するための完全ガイド
- 【初心者向け】Webデザイン勉強のおすすめ本
- Webデザイン関連の本をKindle Unlimitedで無料で読もう!オススメの本を紹介
- 無料のプログラミングスクールを検討してみよう!
- 【無料あり】大学生も受講できるプログラミングスクール完全ガイド!学割もチェック
- プログラミングスクール23校の料金比較。無料スクールか求職者支援訓練に通おう!
- プログラマカレッジ完全ガイド。キャリアアドバイザーと講師による徹底解説。
- 【体験談】『プログラマカレッジ』卒業生のS.Kさんにインタビュー!
- Webデザイナーになるには資格は必要?
- デザイン力を最短最速で向上させる方法
- ねこポンコワークスペース@新宿のご案内
転職テクニック
- 全くの未経験からWebデザイナーになれるのか不安な方へ
- 会社がつらい…行きたくない人にほどWebデザイナーになってほしい
- 業界未経験からWebデザイナーになるためのベストなステップ
- Webデザイナーの転職で失敗する人の特徴
- Webデザイナーの転職を成功させるコツ!
- 30代未経験でもWebデザイナーになれる?年齢別アドバイス
- 主婦・ママが未経験からWebデザイナーになるための方法
- 【完全解説】Webデザイナー用のポートフォリオの作り方
- 未経験OKのWebデザイナーの求人を見つける方法
- 未経験のWebデザイナーが登録しておくべき転職エージェント
- Webデザイナー用の転職エージェント一覧
- 未経験でもWeb系職種を紹介可能なワークポートにインタビュー!
- Webデザイナー向け転職サイト『Green』を利用しよう
- 転職エージェントは使えない?まずはポートフォリオを見直そう!
- 1〜2年目の経験の浅いWebデザイナー向けの転職活動の方法
- 未経験から派遣のWebデザイナーになるのは要注意
- SESへの転職はやめたほうがいいです
- 【Web系へ転職したい方へ】Web業界の職種を解説
- 【面接対策】Webデザイナーの面接で聞かれるリアルな質問20個とその回答例
- 【面接対策】「何か質問はありますか?」に対する質問10個
- 【面接対策】Webデザイナーの志望動機の伝え方と例
- 未経験Webデザイナーの最強の自己PR文の書き方【例文あり】
- 埼玉で未経験からWebデザイナーになる鉄板の方法!
- 千葉で未経験からWebデザイナーになる鉄板の方法!
- 大学生が新卒でWebデザイナーになる方法
- Webデザイナーになるなら一度は東京に来たほうがいい。上京のススメ。
- 未経験の方にとって理想のWeb制作会社とは?
- 未経験から「デザイナー」になる方法
- 未経験から「Webディレクター」になる方法
- 未経験から「コーダー」になる方法
- 未経験から「Webエンジニア」になる方法
- 新人Webデザイナーにとってベストな職場
- 【本音】実際に使ってみた週3勤務可能なフリーランス専門エージェント7社の個人的ランキング
- 手っ取り早くWeb業界に就職・転職する3つの裏技的な方法
- 【無料】Webデザイナーを目指す方の転職相談を受付中!悩みや質問をぶつけてください♪
ポートフォリオ制作講座
快適な制作環境
プロのノウハウ
ルールや心得
Webマーケティング
テンプレート
- ポートフォリオ用WordPressテーマ『PORTFOLIOベーシック』
- ポートフォリオ用WordPressテーマ『PORTFOLIOベーシック』マニュアル
- ロリポップでレンタルサーバーを契約してWordPressをインストール方法を解説
- 【無料】デザインカンプからのコーディング練習教材 (入門編)
- 【無料】デザインカンプからのコーディング練習教材 (初級編)
- 【無料】ポートフォリオHTMLテンプレート(ベーシック)
- 【無料】ポートフォリオHTMLテンプレート(ガーリー)
- 【無料】ポートフォリオHTMLテンプレート(ビジュアル)
- 【無料】ポートフォリオHTMLテンプレート(スプリットスクリーン)
- 【無料】バナー作成テンプレート(PSD)
- 【無料】コーポレートサイトのデザインテンプレート(PSD)
- 【無料】ゲーム・エンタメサイトのデザインテンプレート(PSD)
- 【無料】ファッションサイトのデザインテンプレート(PSD)
- 【無料】幼稚園・学校サイトのデザインテンプレート(PSD)
- 【無料】美容院サイトのデザインテンプレート(PSD)
- 【無料】和風サイトのデザインテンプレート(PSD)
- 【無料】パーソナルジムサイトのデザインテンプレート(PSD)
- 【無料】正月の筆文字素材パック
- 【無料】令和 – 筆文字(JPG/PNG/Ai)