【課題付き】独学でWebデザイナーを目指すロードマップVol.1

こんにちは！まきすずです。

今回は、未経験からWebデザイナーになりたい人に向けた学習ロードマップをご紹介いたします！

もちろん副業としてもWebデザイナーはとってもおすすめの職種！ぜひぜひWebデザイナー目指してがんばってください！

私は普段、「MENTA」というサービスを通じて、多くのスクール卒業生の方や、子育てもがんばるママ、主婦の方などに対して、メンターをさせていただいております！

そんな中、多くの方々から聞こえてくる悩みとして多いのは、

という、周りに相談する人もいないからこそ抱える、漠然とした将来への不安の声でした。

そこで、学習始めたのはいいけれど「この先の進め方がわからない！」という方に向けて、Webデザイナーになるための学習ロードマップを用意いたしました！

実はわたしも、保育士からWebデザイナーに転身をしています！

全くの未経験からのスタートで、右も左もわからない状態でしたが、結果的にデザイン会社に転職でき、多くのデザインを制作してきました。

今では制作の経験を基に、InstagramでWebデザイナー向けTipsの発信をしたり、MENTAを通して未経験からWebデザイナーになりたい人のメンターとしても活動しています！

特に「MENTA」では、Webデザインを学習する人への課題提供や添削、質問・相談対応などを通して、今までたくさんの方のメンターをさせていただきました！

マンツーマンで1人1人にあった学習サポートを行っているおかげか、MENTA内では高評価をいただくことができましたが、一方でマンツーマンのサポートでは、お手伝いできる範囲に限界を感じてきました・・・

もっと多くの方のお役に立てる方法はないか？と考えていた中で、「未経験の人が、次に何をすればいいのか」がわかるように道標を提供するだけでも、きっと多くの人の役に立てるかも！と思い、今回未経験からWebデザイナーになるための学習ロードマップを一般向けとして公開することにしました！

この記事では、

という方におすすめとなっています！そしてこの記事のゴールは、

フリーランスとして、または副業で案件を1つ獲得する

と設定しています！まずは1つ目を獲得することが大切なので、

という方には物足りないかもしれません。

ただ、「スクールに行くか迷っている…」「できるだけお金をかけたくない！」という主婦やママの仕事の第一歩としては、お役に立てると思います！

ではまず、ロードマップの流れと使い方をざっくりみていきましょう！

ロードマップの全体像

このロードマップは、デザインからコーディングまで一通りの学習を経て、Webサイトを1つ作って公開する、までの流れになっています！

また、わたし自身がデザイン会社に勤務しているので、実際のデザイン現場で経験するような「リアルな課題」をつくり、実践的なアウトプットの機会も用意させていただきました！

ロードマップの使い方

自分のレベルに合わせた箇所から開始でOK

デザインとコーディングでの好き嫌いや、どちらか一方に特化したいなど、人それぞれ学習したい内容や得意不得意が異なっていると思います。

そのため、学習の順番は決めずにやりたいところからでも問題ありません！

自分がやりたいことをやることがモチベーションの継続にもつながってきますので、まずは続けるということを大切にしてください。

ロードマップの目次

＼ ダウンロードして壁に貼ってね！ ／

STEP 01：デザインの基礎を学ぶ

STEP 01 – 01：Photoshopの基礎学習

まずはデザインするためのツール「Photoshop」の使い方を覚えましょう！

ただし、「Photoshopの使い方を完璧にマスターしよう！」とは言いません。

実際に手を動かしてデザインしていく中で、「やりたいと思ったこと」を「Photoshopではどうやって実現するのか？」を都度調べて、使い方を覚えていくというのが、Photoshopを使う上のポイントになります！

なぜなら、Photoshopは多機能すぎて、デザイナーや案件の種類によっても使う機能が異なることが多いからです。中には通常のWebデザインではまったく使わない機能もあります。つまり、すべてを覚える必要はないのです！

では、まずはどうやって学習するの？という方に、おすすめなのがUdemyでの学習。

Udemyは動画での講座のため、画面を隣に並べながら、一緒に操作しやすいのでわかりやすいです！

またUdemyは不定期でセールもやっているので、タイミングが合えば定価よりもずっと安く購入できます。

また、以下の記事でも、覚えておきたいPhotoshopの機能をまとめましたので、チェックしてみてください！

Udemyでの学習の他にも、Photoshopの書籍を手元に置いておくのもおすすめ！

たくさんの種類がありますが、最初はかんたんなもので十分です。まずは読んでいて楽しくなるような、かんたんな書籍を選ぶとよいでしょう。

STEP 01 – 02：バナー模写練習

Photoshopをさらに自分のものにしていくためには、実際に手を動かしながら、使ってみる回数を増やすことが近道です。

そのための方法として、まずはバナーを模写をおすすめします。

しかし！ただ模写といっても、単にデザインの真似をすればいいのではなく、ポイントを踏まえることが大切です！

バナー模写のおすすめバナー紹介

バナー模写のやり方がわかったら、早速トライしていきましょう！

とはいえ、「どのバナーを模写すればいいのかわからない！」という方向けに、バナー模写におすすめのバナーをPinterestにて集めました！

随時アップデートしておくので、細かくチェックしてみてくださいね！

※こちらのバナーは練習のみに使うバナーとなります。無断転載・無断使用を固く禁じます。

Pinterestから参考バナーを模写するまでの手順

STEP 01 – 03：バナーをつくろう【課題】

バナー模写を通して、Photoshopの感覚やバナーデザイン作成に慣れてきたら、いよいよ課題にトライしましょう！

バナー課題はこちらの記事から紹介していますので、ぜひトライしてみてくださいね！

note（ノート）

Webデザイナー向け【バナー課題】｜まきすず＊デザイナー まきすず（@makisu_design）です！（←Instagramが開きます） Instagramでは、webデザイナーを目指す方にデザインの基本をバナーでお届けしています！ Webデザイナーになり...

note（ノート）

Webデザイナー向け【バナー課題】vol.2｜まきすず＊デザイナー まきすず（@makisu_design）です！（←Instagramが開きます） Instagramでは、webデザイナーを目指す方にデザインの基本をバナーでお届けしています！ Webデザイナーになり...

note（ノート）

Webデザイナー向け【バナー課題】vol.3｜まきすず＊デザイナー まきすず（@makisu_design）です！（←Instagramが開きます） Instagramでは、webデザイナーを目指す方にデザインの基本をバナーでお届けしています！ Webデザイナーになり...

バナー課題ができたら大切なこと

課題に挑戦するだけでも、もちろんデザイン力の向上につながります。

しかし！

さらにデザイン力をアップさせるためには、自分で作ったデザインをほかの人にみせて、フィードバックをもらうことが重要です！

STEP 02：コーディングの基礎を学ぶ

STEP 02 – 01：HTMLの基礎学習

バナーデザインができてきたら、ここからはコーディング学習に移りましょう！

コーディングの学習を本格的に入る前に、まずはWebについての基礎を学ぶことも大切なので、おすすめの最初の一冊をご紹介します！

そこでおすすめのサービスが、Progate

Webデザインに興味を持って調べた方なら聞き覚えがあるかもしれませんが、ゲーム感覚でHTML学習をはじめられる、初心者にはとってもおすすめのサービスです！

Progateには、無料プランと有料プランが存在しますが、まずは無料プランで学べる範囲でOK。

「HTML & CSS 初級編」などからはじめるとよいでしょう。HTMLに触れたことがない人は、「まずは試しにやってみる」ということも大切なので、無料範囲でまずは挑戦してみてください！

また、バナー同様、UdemyにもHTML初心者に関してのおすすめ動画があるので、合わせてご紹介します！

STEP 02 – 02：コーディング模写練習

ProgateでHTMLタグの学習が済んだら、あとはどんどんHTMLに触れて実際に作っていくことが大切です！

とはいえ、デザイン同様、いきなりサイトを作るのはなかなか難しいもの。

そのため、まずはお手本のソースコードを見ながら、真似をしていくコーディング模写練習で、実際のサイト作りの練習をすることがおすすめです！

コードまで見れるサイトとしておすすめなのが、「Codestep」というサイトでの練習。

まずは、入門編だけでもスムーズにできるようになるといいですね！

Codejump

【HTML/CSS コーディング練習】入門編：プロフィールサイト／1カラム 【HTML/CSS】コーディング練習【入門編】プロフィールサイトです。コーディング練習は、デモサイトと同じものを作る「模写コーディング」とデザインデータをもとにコーディ...

STEP 02 – 03：デザインカンプからコーディング【課題】

「Codestep」での入門編をクリアし、コーディングに慣れてきたらぜひ課題に挑戦してみてくださいませ！

今度はより実践に近い練習を！オリジナル課題として、デザインカンプを用意したので、デザインに合わせたコーディングにトライしてみてください。

こちらの課題は練習用として無料でお配りしております！

＼ コーディングに挑戦 ／

まずは基礎的な学習の流れをご紹介しました。

副業でWebデザイナーを目指している方も、ママとしてママWebデザイナーを目指している方にも、まずはこちらのページで基礎学習をしっかりと身につけていただければと思います！

続きは以下のVol.2に記載していますので、本記事の内容が完了された方は、ぜひ先に進んでみてください。