【Webデザイン添削】メンターにオンラインで相談できるサービスはこちらから

最短でwebデザインを独学で身につける効率的な勉強法まとめ

Webデザイン独学を最短で身につける勉強法のアイキャッチ画像

Webデザインを独学で頑張っているけど、自分の勉強のやり方があっているのか、順番は間違っていないのか、ちゃんと進んでいるのか気になっていませんか?

この記事で紹介する「最短でWebデザインを独学で身につける効率的な勉強法」を実践すると、効率よく・無駄なく勉強をすることができ、成果を出すことができます。

私も独学でWebデザインを学んだので、これのやり方でいいのか、勉強している内容は時代にあっているのか、色々考えながら進めていました。

Webデザインは学ぶことが多いので、やるべきことを独学で習得のための手順書を作る必要があります。
最短でWebデザイナーになるために必要な知識・スキルをどのような順番で勉強をすればいいのかがわかりますので、参考にしてください。

目次

最短でWebデザインを独学で身につける方法とは

Webデザインを独学する場合、何から始めたらいいかわからない、という疑問があるかと思います。最短でWebデザインを独学で身につける流れとして大きく3つあります。

①いつまでにどうなりたいか決めて逆算する
②基礎を学び、実務に近いことを実践しながら手を動かす
③ポートフォリオに載せる作品を作る

この記事では「最短=6ヶ月」で「就職活動に必要なポートフォリオを完成させる」をゴール目標として進めますね。

いつまでにどうなりたいか決めて逆算する

Webデザイナーは試験や資格が必要な職業ではないので、まずは自分がいつまでにどうなりたいか決める必要があります。

6ヶ月後には今の仕事をやめてWebデザイナーとして転職しているのか、副業やフリーランスとして自分で仕事を獲得しているのか、などによって学ぶ内容やスピード・スケジュールが変わってくるので、自分の目標を立てて優先順位を一旦決めておきましょう。

独学でWebデザインを勉強する場合、半年~1年の期間は必要と考えています。

平日仕事をしている社会人の場合は、平日にまとまった時間をとれない方も多いと思いますが、スキマ時間を使ってでもなるべく毎日学習時間を少しでも取ることがおすすめです。

基礎を学び、実務に近いことを実践しながら手を動かす

目標が決まったら、ゴールに向かうように実際に学習を進めていきます。
「Photoshop・Illustratorが使えます」だけではWebデザインの仕事はできません。
「すごい複雑なコーディングができる」は最初は求めていません。
Webデザインの全体の流れとその基礎を学びながら、100%完璧で上手なデザインでなくても大丈夫なので、Webサイトをひと通り作れるスキルを6ヶ月で身につけていきます。

ポートフォリオに載せる作品を作る

Webデザイナーとして活動をするのに「ポートフォリオ(制作実績集)を作ること」が必須になります。
Webデザインの基礎知識を身につけただけではWebデザイナーになるのは厳しく、このポートフォリオがないと書類選考から落とされ100%未経験から採用してもらえません。まずは目標として実際に近い案件をやって自分でアウトプットしたデザインを制作して期間内で履歴書一緒に用意するポートフォリオに載せるデザインを作成する事が最優先になります。

最低限知っておくべき習得するWebデザインのスキルとは

Webデザイナーとして活動するために、以下の4つのスキルは勉強する必要があります。

①Web制作の基礎知識・仕組み
②アプリ/Photoshopの使い方
③コーディングスキル
④Webデザインスキル

を重点的に勉強すれば「初心者」としてはOKです!
この4つは最低限知っておくべき内容なので、Webサイトの制作をするスタートラインに立つことができます。

独学でWebデザイナーになるための最短勉強法7ステップ

ここからは、Webデザイン独学のために最短で何を勉強していけばいいのかのステップを紹介していきます。

【Step1】Web制作の流れを知り、Photoshopとコーディングの基礎を学ぶ

・WEBリテラシーと言われるものを学ぶ
・アプリ(Photoshop)使い方を学ぶ
・コーディングスキル

はじめにWebデザインはそんなことを勉強するのか、全体の流れとその基礎を知る必要があります。デザインソフトの使い方やコーディング(html/css)は、本やUdemyなどの動画教材、チュートリアル学習サイトなどを利用して、自分に合った方法を選んで学んでいきます。

【Step2】デザインの基礎を学ぶ

・バナー模写、Webサイトの模写
・デザインの基礎スキルを身につける

一通り基礎学習が終わったら、バナーデザインやWebサイトを模写してみます。
デザインもコーディングも実際に手を動かして覚えていくのが一番の近道です。基礎を学んだらシンプルなサイトからどんどん手を動かして作って行きましょう。

※Webサイトをデザイン・コーディングともに3~5つくらい模写すると学びが深くなります!

【Step3】オリジナルデザインでサイトを制作する

・サイトマップを作成する
・サイトのラフを書こう
・ワイヤーフレームを用意する
・参考デザインを調べる

Web制作会社でのお仕事はコーポレートサイトや採用サイト、広告やキャンペーン・LPなどの案件がメインになります。Webサイトを模写したときの応用で、まずは架空の企業サイトを一つ作ってみましょう。実際に案件やっていると仮定して制作の流れを一から通して作業を進めるシミュレーションをしてみます。

まず、色々なサイトを見ながらデザインする前にラフスケッチやワイヤーフレームを描いて、どこに何の要素を配置するかなど、どんなサイト構成にするのか考えてみます。PCで見たときのデザインはもちろんですが、スマホ・タブレットサイズのラフも書いてみてください。

【Step4】Webサイトをデザインする(実際に作る)

・Photoshopでデザインをしよう
・HTML+CSSでコーディングをしよう

ラフ・ワイヤーフレームが完成したら、それを元にPhotoshopを使ってデザインをしていきます。「illustrator」や「XD」というツールを使うこともありますが、デザインの現場ではPhotoshopを採用している制作会社が圧倒的に多いので、最初はPhotoshopを使うことに慣れましょう。

Photoshopで作成したデザインデータを元にhtml/cssに変換していくというコーディング作業に入ります。自分のデザインしたサイトがWebページとして出来上がっていくととても嬉しくなりますので、頑張って形にしていきましょう。

【Step5】必要な知識を習得しながら完成7割を目指す

・もっとよくできないか考える
・人に見せて意見・感想をもらう

自分なりに考えてデザインをして形になってきたら、デザインがもっと良くなるように考えます。Webサイトやデザイン本などをみて少しでも良くなるようにブラッシュアップします。

出来たデザインを家族や友達に見てもらい感想を聞いて、どこがよいか悪いかレビュー教えてもらうなど多くの人に意見をもらってください。

【Step6】完成、そして公開!

・Step3〜6を繰り返して作品を2〜3つ作る

納得ができるWebサイトが完成したら公開しましょう。勉強の1つとしてサーバーを借りてドメインを取得し公開するようにしてください。アップしてWebサイトをみるととても感動しますよ!
1つWebサイトが公開できたら、【Step3】に戻ってまたオリジナルでサイトを作っていきましょう。2〜3回繰り返すと流れや要領がわかってきます。

【Step7】ポートフォリオを作成する

・オリジナルで作ったデザインをまとめる
・Webサイトと紙でポートフォリオを用意する

オリジナルで考えたデザインが増えてきたら、Webデザイナーとして活動するためのポートフォリオを作ります。現役のWebデザイナーも転職活動する時に必ずポートフォリオを作成するくらい、必須なものです。なぜかというと、企業に「あなたが何をできるのか」を伝えるためのツールだからです。

ポートフォリオを作るのに最低限載せておきたい情報は「なぜこのデザインにしたのか?」ということが伝えられるように制作するのがポイントになります。

・どこから何まで考えてやってみたのか
・サイトの目的、ターゲット
・なぜこのレイアウトにしたのか
・なぜこの色を選んだのか
・なぜフォントを選んだのか

など、説明を明確に掲載できるようにしてくださいね。

これまで作ったwebサイトデザインの横に説明を載せて紙に印刷するのでもよいし、Webサイトを用意して見せられるでも、どちらでも問題ありませんが、せっかくWebデザインを勉強しているので、自分のポートフォリオサイトを作ってみてもいいと思います。

未経験からだと掲載するのにデザインの数が必要になってきます。コーディングする必要はありませんので、デザインを多く用意するのにバナーを10点ほどやTOPページ、下層ページなどいろいろな職種・ジャンルで全部で5サイト以上あるとアピールできるポートフォリオが完成します!

最短で独学でWebデザイナーになるための挫折しないコツ

期間を決めて毎日取り組む

毎日仕事をして疲れて帰ってきて、土日はゆっくりしたいな、、と思うかもしれませんが、Webデザインを独学する時間を作らないとデザイナーにはなれません。

まずいつまでに達成するのか「○年○月までにWebデザイナーになる」と決めて、目標の見える化するのは大事です。

いつまでにを決めたら、毎日コツコツ勉強する時間していきます。1時間以上時間がとれるととてもいいですが、パソコンに向かうことができないという場合でも、毎日10分でも15分でもデザインをする時間を作ってください。昼休みにすこしパソコンでWebサイトを見るとか、コンビニや電車の中、道端の看板でもいいので、スキマ時間を使っていろいろなデザインを見ることはできるので試してください。

真似る、参考にする

Webデザイン初心者の方が最初にぶつかるデザインの壁が、Webサイトのデザインを作っても「なんか違う」「イマイチ」「素人っぽい」と感じることがあると思います。
ここを脱出する方法はどうすればいいかと言うと「真似る・参考にする」これに尽きます。

プロのデザインを見て、同じようにデザインをする。
最初は模写をするなどで、まるっきり真似かもしれません。ですが、それを繰り返していくと参考デザインを探さなくても自分のデザインの引き出しが増えていくので、段々と素人っぽさが減らしていけます。

他の人に報告を報告を、意見をもらう

人は一人だと弱いもので、とても強い意志がないと続きません。なので、自分ひとりだけにならないようにする仕組みが大切です。

家族や友人を巻き込むことをおすすめします。どこまで進んでいるかなどの進捗を報告したり、制作したデザインを見せて意見をもらったりするなど。
SNSを利用してもいいかもしれません。同じ境遇の人やWebデザイナーがいるSNSを使えば、その中で同じような状況の方がフォローしたり、してくれることでお互い応援しあえたりすることも多くあります。
自分の考えをアウトプットする場にもなるので、Webデザイン勉強用のアカウントを作って発信する方法もおすすめします。

最短でwebデザインを独学で身につける方法まとめ

独学で勉強し自分の好きなWebサイトのデザインをしているだけでは、いくら時間をかけても求人の応募に通ることはできません。

①いつまでにどうなりたいか決めて逆算する
②基礎を学び、実務に近いことを実践しながら手を動かす
③ポートフォリオに載せる作品を作る
この3つが一番最短でWebデザインを独学で身につける方法です。

とにかく実践重視で、実務にありそうなWebサイトのデザインをし、やってみて足りないスキルをは逆引きして調べて身につけていくというスタイルがおすすめです。

そしてポートフォリオを作成して、自信を持ってWebデザイナーとして面接に行ってください。6ヶ月くらいかけてなんとかスタートラインに立てること、その後仕事を通して成長してデザイナーとして一人前になるようにがんばってください!

  • URLをコピーしました!

この記事を書いた人

安藤ほなみのアバター 安藤ほなみ グラフィック・Webデザイナー

デザイン業界経験20年。Mac使用歴も20年。グラフィックデザイン・Webデザイン両方経験したからこそ、どんなデザインでも使える基礎から、グラフィック・Webの違いや気をつけること、Macの使い方から知っておくと良いことをお伝えします。

目次