記事内に商品プロモーションを含む場合があります

Blog Web Design

【実体験】現役Webデザイナーが独学でスキルアップした勉強方法

2024年4月15日

【実体験】現役Webデザイナーが独学でスキルアップした勉強方法

「Webデザイナーのスキルアップする勉強方法ってなにをしたらいいんだろう…初心者にオススメの勉強方法とか教えてくれないかな…効率的に学べる方法ないかな…」

こういった疑問に答えます。

本記事の内容

  • Webデザイナーのスキルアップする勉強方法がわかる
  • 現役Webデザイナーが日頃参考にしているギャラリーサイトがわかる
  • 効率的な勉強方法がわかる:他ジャンルでも応用可能

この記事を書いている僕は、完全未経験(前職は美容師)から独学でWebデザイナーに転職し、現在はWebデザイナーとして5年目になります。

この記事では、独学でWebデザイナーがスキルアップする効率の良い方法をご紹介していきます。

独学でWebデザイナーを目指している方、ある程度知識がついてきた方にも役立つ内容になっているので、参考にしていただければと思います。

Webデザイナーがスキルアップ方法は「ひたすら作る」

Webデザイナーがスキルアップ方法は「ひたすら作る」

結論からお伝えすると、Webデザイナーがスキルアップする方法は「ひたすら作る」こと一択です。

勉強と聞くと、下記のようなことを良くみかけます。

  • 専門書で知識を蓄えましょう
  • デザインの引き出しを増やすためにたくさんのサイトをみましょう
  • 効率の良いコードの書き方を学びましょう
  • 近接、整列などデザインの基礎を理解しましょう

どれも間違いではありませんが、学んだことを使えないと意味がありません。

というのも僕も上記のように専門書を読んで理解してわかった気になって勉強した気分になっていました。

実際に作るとなると、「あーあのときなんか本で読んだな…オモイダセナイ」なんてこと経験ある方もいるんじゃないでしょうか。

学ぶ+行動する

どうしたら学んだことを自分のものにできるかというと「学ぶ+行動する」です。

先程の例で説明すると、

  • 専門書で知識を蓄えましょう:実際に学んだことを作ってみる
  • デザインの引き出しを増やすためにたくさんのサイトをみましょう:気になったサイトを分析してみる(配色・フォント・レイアウト)
  • 効率の良いコードの書き方を学びましょう:いままでに作ったもので活かせるところを採用して、改善してみる
  • 近接、整列などデザインの基礎を理解しましょう:良いパターンとダメなパターンを両方作ってみて並べてみる

上記のように、学んだことを必ずセットで作ることが大切です。

なぜ「作る」が大事なのか?

Webデザイナーの「作る」がなぜ大事なのか?

ここまで「作る」ことをなぜ重要視しているかというと、僕自身が過去に同じ失敗をしたからなんですよね。

僕の実体験をご紹介していきますね。

失敗①:作ったモノでしか評価してもらえない

失敗①として、ポートフォリオなしで面接に挑みました。笑

美容師辞めたての僕は未経験の状態でも会社に入れると本気で思ってました。

今考えると痛いヤツですよね。笑

コミュニケーション能力には自信があったのでとりあえず入ってから教えてもらえばいいやとめちゃくちゃ甘い考えでした…

さらに、面接官に「ポートフォリオとかありますか?」と言われ、「ポートフォリオってなんですか?」と質問した後の沈黙の時間は今でも思い出せるトラウマです。

案の定、書類審査の時点でお断りされまくり面接に進めても未経験でも働けるけど一定のレベルになるまでは派遣社員として携帯の販売員をしてもらいますとかありました…

「あ、このままじゃ通らん」と本気で思いました。

そこからアルバイトをしながら勉強して最低限のポートフォリオを作り、なんとか面接に受かったという経験があります。

失敗②:頭の中で考えても手を動かしてみないとわからないこともある

失敗②として、できると思ってたことが全くできず苦労しました。

面接で「○○は実装できる?」とJavaScriptのif文を使った条件分岐の書き方だったのですが頭の中では「これぐらいならできるっしょ」と自信満々に「できます!」と言っていたのですが、家に帰ってやってみると見事につまずきました。笑

圧倒的に成長したと感じたのは、ゼロから作る経験

Webデザイナーが圧倒的に成長したと感じたのは、ゼロから作る経験

入社前からダメダメな僕でしたが、入社してからは業界用語やITの基礎知識などデザイン以外にも覚えることが多く、勉強して覚えた気になっていても質問されたときにうまく説明できなくて萎えるという経験をよくしてました。笑

「うまく説明できないのは、知識量が足りないからだ!」とさらにインプットをしますが、同じことの繰り返しでした。

会社の先輩に教わったシンプルかつ原点

わかった気になるけど覚えられていないということで悩んでいるときに、会社で圧倒的に仕事ができるエンジニア先輩に質問してみると以外な答えが返ってきました。

「Webサイトをゼロからつくって(ネット上に)アップしてみな!」

言われたときはよくわからなかったのですが、とりあえずやってみました。

苦労して解決したことは頭に残っている

仮想のクライアントを想定して、サイトマップの作成からサーバーを自分で契約してネット上にアップするまでを経験してみると、わからないところがたくさんでてきました。

その都度、調べ、わからないところは教えてもらい1つずつ解決していく。

これを繰り返すと不思議と理解できるようになっていました。

会社の先輩も新しいことを学ぶと、とりあえず簡単なデモを作成して知識を定着させているといっていました。

本やネットで学んだことを読むだけでわかった気になっていましたが、ゼロから作る経験が圧倒的に成長したなと感じました。

【効率的】Webデザイナーのスキルアップ方法

【効率的】Webデザイナーのスキルアップ方法

ここからは実際に「作る」ことに関して具体的な内容をご紹介します。

毎日少しずつでもいいので下記の作業を積み上げていきましょう

具体的な作業内容

  • バナーの模写
  • Webサイトの模写
  • コーディングの模写
  • オリジナルデザインの作成
  • オリジナルデザインのコーディング
  • ドメインの契約
  • サーバーの契約
  • ネット上にアップしてみる

現役Webデザイナーが参考にしているギャラリーサイト

最短で効率良く学びたいならWebデザインスクール一択

最短で効率良く学びたいならWebデザインスクール一択

ここまで、独学でWebデザイナーになるための勉強方法などをご紹介してきましたが、「やっぱり独学だと不安…」「自分は意志が弱いしすぐサボっちゃうから独学なんてできるだろうか…」と感じる人もいると思います。

そんなお悩みを解決してくれるのは、Webデザインスクールです。

独学でも、Webデザイナーになるのは可能ですが、不明点などが自分の力で解決できず、学習途中で挫折してしまうこともあります。

僕は独学で勉強をしていましたが、わからないところはググるしか方法がなくとても時間がかかったなと思います。

転職して、周りに聞いてみるとスクールに通っていたというWebデザイナーの方も多くいました。

最短で効率良く学びたいのであればデザインスクール一択です。

おすすめWebデザインスクール

Webデザイナーとして働きはじめて現場で集まる情報やスクール経験者からの情報をもとにおすすめのデザインスクールをご紹介します。

  • デザスタ:個人的に日頃から情報をチェックして信頼できるなと思っている越智 奎吾さんが運営するデザインスクール。現場で使える生きた技術を学べる一番おすすめできるデザインスクールです。
  • デジハリ:有名Web制作会社LIGが運営するデザインスクールです。業界で活躍しているベテランのプロが特別講師となってセミナーで解説してくれるところが魅力的です。
  • TechAcademy:オンラインプログラミングスクールの受講者No.1の実績あるスクールです。デザインを学びたいエンジニア向けのカリキュラムになっています。

量が質を生む

量が質を生む

ここまで、とにかく「作る」を意識して実際に手を動かしましょうとお伝えしてきましたが、そもそもの知識がないと作ることもできないんじゃないか?と思いますよね。

この疑問の回答は、

必要な知識だけ学びながら動き続ける

具体的なステップは下記になります。

  • 作りたいモノを決める
  • 作るために何が必要か調べる
  • 必要なものだけを学ぶ
  • 学んだことを活かして作りたいモノを作る

昔の僕は、ここを理解せずにとても遠回りしました。

作りたいモノを作らず、基礎ばかり学びで勉強した気になっていたんですよね…

この4ステップをたくさん繰り返して作っていくことで最初の頃はめちゃくちゃしんどいですが、やっていくうちに作ったモノの技術を応用できたり、理解する力が上がり学習の時間が短くなってきます。

学んでいくうちに、「もっと効率が良い方法はないか、そもそもこれを学ぶ意味はあるのか」という疑問が必ずでてきますが、無視してとりあえずブサイクでも良いので「作り切る」ということを第一目標にしてください。

迷うのは作り終わってから考えてください。

まずは作り切る、ここが一番大切です。

まとめ:自分で作ったものはすべて実績です

Webデザイナーのスキルアップ方法は「作る」ことです。

作ることで得られることのメリットとして、作ったモノはすべて実績ということ。

Webデザイナーの転職は必ずといっていいほど、ポートフォリオの提出を求められます。

そうです、これまで模写などで作ってきたモノを載せればいいだけです。

Web作ったモノでしか評価してもらえない

どれだけ作ってこようともポートフォリオがなければただの憶測にしかなりません。

僕はこれだけやってきましたという実績を形にしていきましょう。

実績を増やすためには「作る」しかありません。

作る過程で学んだ知識を定着させるには、「アウトプット」が重要になってきます。

アウトプットでおすすめなのが、「ブログ」です。

アウトプットの名著「アウトプット大全」では、「書く」と「教える」はより自己成長を促すアウトプット方法だと述べられています。

つまりブログは「記事を書いて、読者に教える」ものなので、成長効果が高いアウトプットになります。

また、ブログがポートフォリオのかわりになるので知識習得もできるし一石二鳥の効果があります。

1番のおすすめは、WordPressを使ったブログです。

WordPressはCMS(Contents Management System)の一種で、国内でのシェアは80%以上でダントツのトップです。

そして、Webデザイナーになったら必ずと言っていいほどWordPress案件が回ってきます。

とはいえ基礎は比較的簡単なので、基本的な機能と構造をわかっておくだけでも面接で有利になります。

なので、勉強のアウトプット用のブログをWordPressで構築できれば、WordPressの使い方も学べ、さらにWebデザイナーになる手助けになります。

ブログ初心者でも「【画像付き】初心者でもわかる!WordPressでブログの始め方を全手順画像付きで解説!」この記事の手順通り進めると、ブログを開設できるよう全手順画像付きでブログの始め方を解説していますので、参考にしていただければと思います。

学んだことをアウトプットし、知識を定着させつつブログで稼ぐこともできます。

ブログで稼ぐなら「ASP」サービスの登録が必須になります。

登録は無料なので、ブログを立ち上げたこのタイミングでASPサービスに登録しておきましょう。

おすすめのASPサービスは、以下のASPに登録しておけば間違いなしです。

  • もしもアフィリエイト:Amazon、楽天、Yahooショッピングなどの物販アフィリエイトをする場合は必ず登録しておきたいASP
  • A8.net:ASP最大手で案件数もトップクラス。ジャンルもほぼ全ジャンル扱っています。
  • afb:美容・エステ・婚活ジャンルを主に取り扱う予定なら登録しておきたいASP
  • infotop:登録審査がないので、初心者の方でも利用しやすく高額案件豊富なのが魅力

Webデザイナーに転職、もしくは副業で稼ぎたい方は、僕が独学でWebデザイナーに転職した効率の良い具体的な方法を【完全未経験】独学でWebデザイナーに転職する方法で詳しくご紹介していますので参考にしていただければと思います。

Webデザイナー・エンジニアになりたい方は僕が完全未経験の独学期間にはやく知りたかった【厳選】現役Webデザイナーがおすすめする独学初期に知りたかった読んで良かった本まとめでおすすめの本をご紹介していますので、ご参考にしていただければと思います。

以上、「【実体験】現役Webデザイナーが独学でスキルアップした勉強方法」でした。

  • この記事を書いた人
rdotblog_profile

dot

関西出身の29歳 R.BLOG(アールドットブログ)では、完全未経験から独学でWebデザイナーへ転職し、現役Webデザイナーとして日々学んだ(Webデザイン・プログラミング・Webマーケティング・SEOなど)タメになる情報を発信していきます。

-Blog, Web Design