フリーランス基礎知識

未経験からWebデザインは独学可能?挫折しない独学方法を解説!

ノマド家代表
辻本
ノマド家代表
辻本
フリーランスの自立・キャリアを支援するシェアハウス『ノマド家』を運営している代表の辻本です。

この記事では、日々Webデザイナーの独立をサポートする立場である私の目線で、Webデザイン初学者の方に本当に役立つ情報を厳選してご紹介します。

この記事をご覧の方は、Webデザインを独学するために教材を購入したものの、スタート時点でつまずいて独学に不安を感じている方が多いと思います。

独学でWebデザインスキルを身に付けるには、知識を定着させるための正しいステップを理解する必要があります。

そこでこの記事では、Webデザイナー未経験の方が挫折せずに独学する方法について解説します。

Webデザイナーになるために必要なスキル

Webデザインを独学している方にありがちなのが、転職活動やフリーランスとして活動する際に役立つ実践的なスキルが身に付かなかった・・というパターンです。

それはWebデザイナーになるために必要なスキルが分からない状態で独学をしてしまったことが原因です。

Webデザイナーとして、即戦力で働けるようになるには以下の知識・スキルを身につけておく必要があります。

それでは、順に見ていきましょう。

デザインの基本原則

優れたデザインには必ず共通する4つの基本原則があります。まずは、デザインの基礎である4つの基本原則を押さえておきましょう。

Photoshop/Illustrator

PhotoshopとIllustratorはデザインを作成するためのツールです。Photoshopは主にWebデザインや写真・画像加工、Illustratorはロゴやイラストなどの図形を扱います。

一般的にはこの2つのソフトが必須ですが、ツールの価格が割高な点でハードルが高いです。最初は、XDのような無料で使えるデザインツールを活用するのもおすすめです。

ノマド家代表
辻本
ノマド家代表
辻本
もし、フリーランスのWebデザイナーとして活動するなら、デザインソフトを自前で用意しておく必要があります。

Adobeのコンプリートプラン』に契約して、PhotoshopやIllustratorを活用されている方が多いです。

HTML/CSS

HTMLとは、テキストボックス・文字・表・画像・リンクなど、Webページに必要な部品を配置するための言語です。

HTMLが文章の構造を作るのに対して、CSSは「HTMLをどのようなデザインでブラウザに表示するかを指定する言語」なので、HTMLとセットで使用されます。

Webデザイナーにとって、HTML/CSSの知識はWebサイトを制作する際や、コーダーとコミュニケーションを取る場面で必ず必要になります。

JavaScript/jQuery

JavaScript/jQueryは、HTML/CSSだけでは表現が難しいアニメーションやお問い合わせフォームなどを作る場合に必要なスキルです。

実際の現場では、Webデザイナーではなくコーダーが実装することが多いです。なので、JavaScript/jQueryを用いてどのようなデザインや機能を実装できるかといった、基礎知識のみをインプットする程度で問題ありません。

レスポンシブデザイン

パソコン・タブレット・スマホの全てに最適化されたWebページを作るためには、レスポンシブデザインの知識が必要になります。

まずはパソコンで表示されるデザインを作成し、そのデザインを基にタブレット・スマホに最適化されたデザインを作っていくのが一般的です。レスポンシブサイトは基本的にHTML/CSSの応用系なので、HTML/CSSの基本をおさえておけば問題ありません。

フリーランスのWebデザイナーになるには?仕事内容・年収・営業方法も解説!現在、制作会社や事業会社でWebデザイナーとして働かれている方は、副業したり独立するタイミングを伺っている方が多いかと思います。 そこでこの記事では、フリーランスのWebデザイナーになる方法や仕事内容、仕事を獲得する方法についてご紹介します。...

Webデザインを独学する3つのステップ

Webデザインを独学するステップを以下の3つにまとめてみました。

それでは、順に見ていきましょう。

①本で概要を学習する

Webデザインについてイチから勉強するなら、まずはWebデザインに関するアウトラインや、体系的な解説がなされている書籍から読み始めることをおすすめします。

最初に全体像を把握しておくことで、これから何を学習するべきか捉えやすくなります。

この章では、Webデザイン全体についてわかりやすく解説している書籍をご紹介します。Webデザイン初学者の方におすすめです。

いちばんよくわかるWebデザインの基本きちんと入門

本書は、Webデザインの実例を紹介しながら、レイアウト4つの原則とレスポンシブWebデザインの基礎について解説しています。

配色の基本やユーザーの心を動かす写真・図版の使い方、タイポグラフィの選び方、
フレックスボックス、インタラクション、マーケティングの知識まで幅広く学ぶことができます。

Webデザインの実例を見ながら直感的に学ぶことができるので、Webデザイン初学者の方におすすめの1冊です。

初心者からちゃんとしたプロになる Webデザイン基礎入門

本書は、WebデザインやHTML・CSSの学習を「1日30分からはじめる」をテーマに、初学者向けにやさしく解説しています。プロのWebデザイナーを目指す上で必要な基礎知識や技術を体系的に学べます。

本書では、Webデザインの概論と制作に必要となるツールや素材・配色について学んだあと、HTML・CSSの基礎を学び、実際にサイトを制作し公開・運用します。

HTML・CSSの実践部分でサンプルサイトとして制作するのは、シンプルなお店のサイトと、モバイルファーストの手法を取り入れたサイトの2種類です。

【2021年】Webデザインを学びたい方におすすめの本10選! この記事では、これからWebデザイナーを目指す上で必ず頭に入れておくべき、「HTML/CSS(+JavaScript)の基礎知識...

②動画を見て手を動かしながら学習する

デザインの理論やコードの意味はわかっても、デザインを制作したりコードが書けるようになった訳ではありません。実際に手を動かすことで、はじめて動作を確認して理解を深めることができます。

また、本をたくさん購入したとしても、インプットばかりではWebデザインの面白さを体感できず、モチベーションが低下してしまいます。

そんな時は、今まで学習した知識をもとに、プロトタイプとしてバナーやWebサイトなどを作ることでモチベーションを維持することができます。

次の章で、実際に手を動かしながらWebデザインが学べる動画サービスをご紹介します。

動画で学習するならUdemy

Udemyは、誰でも講師になりコースを作ることができるC2C(Consumer to Consumer)の学習プラットフォームで、世界中で約4万人以上の講師が10万以上のコースを提供しています。

Udemyで「Webデザイン」と検索すると、12,000件以上の講座を見つけることができました。(2021年1月時点)

ジャンルとしては、Photoshop(405件)やIllustrator(209件)、HTML/CSS(572件)、Adobe XD(78件)、グラフィックデザイン(242件)と多岐に渡ります。

ノマド家代表
辻本
ノマド家代表
辻本
特に、『未経験からプロのWebデザイナーとして働けることがゴールの完全マスターコース』がWebデザイン初学者の方におすすめです。

全部で467レッスンとかなりボリューミーな講座となっていて、Webデザイナーに必要な知識やスキルを体系的に学ぶことができます。

・手軽な価格でWebデザインが学べる

・講座は月額制ではなく買いきり

・講座は購入者からの評価やコメントがつけられている

・購入した講座に30日間の返金保証がついている

【2021年】Udemyの評判は?プログラミングやWebデザインを学びたい方必見! 『Udemy』は、米国法人Udemy,Inc.が運営するオンライン型教育プラットフォームで、主にプログラミングやWebデザイン、...

③ポートフォリオサイトを作ってみる

Webデザイナーとして転職活動を行う際や、フリーランスとしてクライアントに営業をする際に、ポートフォリオの提出を求められることが多いです。

なので、自分のスキルや実績を効果的にアピールするためにポートフォリオを制作しておく必要があります。

ポートフォリオサイトには、簡単な経歴、スキル、制作物のURL、価格表などの情報を掲載します。ノマド家のポートフォリオサイトはかなりベーシックな作りなので参考になると思います。

ノマド家代表
辻本
ノマド家代表
辻本
ポートフォリオサイトに掲載する制作物は、模写データや知人から請け負った制作物(掲載許可がおりている)を掲載するのがベターです。

コーダーやWebデザイナーであれば、ポートフォリオサイトのデザインを凝ってみたり、JQueryで動きをつけたり、レスポンシブ対応にしておくことでさらなるアピールに繋げることができます。

フリーランスはブログ必須!仕事につながる活用術と始め方を解説! 私は、フリーランスになったと同時に当ブログを開設して3年になるのですが、ブログで月110万円以上のアフィリエイト収入を得ることが...
【2021年】Webデザイナーにおすすめの副業3選!Webデザイン未経験から副業は可能? この記事をご覧の方は、これからWebデザインを独学して副業をしたいと考えられている方が多いと思います。 最近では、クラウド...

未経験から転職を目指すならスクールがおすすめ

CodeCamp(デザインマスターコース)

オススメ度
受講区分オンライン
受講形態マンツーマンレッスン
価格148,000円〜(期間により異なる)
期間2ヶ月・4ヶ月・6ヶ月
習得スキルIllustrator・Photoshop・HTML/CSS・JavaScript・Bootstrap

CodeCamp』は、オンライン型のWebデザインスクールとしては最も人気・実績(受講者数3万名・レッスン満足度96.6%)があるスクールです。

IllustratorやPhotoshopによる写真加工やバナー・ロゴなどの素材作成から、Webサイトのデザインやレイアウトを調整するレスポンシブ対応のWebデザインスキルが身に付きます。

また、HTML/CSS・JavaScriptもカリキュラムに含まれているので、コーディングスキルを身に付けてキャリアアップをしたいWebデザイナーの方にもおすすめです。

ノマド家代表
辻本
ノマド家代表
辻本
経験豊富なエンジニア講師による個別指導を受けつつ、自分でできるようになるまで何度もフィードバックをもらえるので、初学者の方でも安心して受講することができます。

未経験からWebデザイン・サイト制作を学びたい方や、在宅・副業・フリーランスなど自由な働き方を目指したい方、コーディングスキルを付けてWebデザイナーとしての市場価値を上げたい方におすすめのWebデザインスクールです。

・業界No.1の実績と人気のオンラインデザインスクール

・一人ひとりのペースに合わせたオンラインレッスン

・未経験からWebデザイン・サイト制作を学びたい方におすすめ

・在宅・副業・フリーランスなど自由な働き方が目指せる

・転職サポートも充実している

【2021年】CodeCamp(コードキャンプ)の評判は?リアルな口コミとメリットまとめ CodeCampは、株式会社コードキャンプが運営するプログラミングスクールです。この記事では、CodeCampを受講するメリット...

TechAcademy(Webデザインコース)

オススメ度
受講区分オンライン
受講形態マンツーマンレッスン
4週間プラン:7回
8週間プラン:15回
価格4週間プラン:139,000円/学生 109,000円(税抜)
8週間プラン:189,000円/学生 139,000円(税抜)
期間4週間・8週間・12週間・16週間

TechAcademyの『Webデザインコース』は、期間内で4つのWebサイトをリリースするかなり実践的なレッスン内容になっています。作りながら覚えるを繰り返し、最終的にはオリジナルのWebサイトをゼロから作れるレベルを目指します。

オンライン完結型のスクールですが、チャットサポートや週2回のマンツーマンメンタリングなど、初学者向けのサポート体制が整っている点もTechAcademyの強みです。

価格は業界でもかなりリーズナブルな料金設定で、さらに無料体験を行うとさらに10,000円割引されるほか、体験中に30分のメンタリング実施で500円分のAmazonギフト券もゲットできます。

・eラーニングアワードで特別賞受賞の実績あるサービス

・期間内で4つのWebサイトをリリースする実践的なレッスン内容

・マンツーマンメンタリングでモチベーション維持

【2021年】TechAcademy(テックアカデミー)の評判は?人気のコースと特徴を解説! TechAcademyは、キラメックス株式会社が運営するオンラインスクールです。この記事では、TechAcademyを受講するメ...

最後に

以上、未経験からWebデザインを独学する方法についてご紹介しました。この記事をご覧の方は、以下の記事もおすすめです。

【2021年】Webデザインを学びたい方におすすめのスクール・教室10選この記事では、そもそもWebデザイナーになるためには何を学べばいいの?何を基準にスクールを選べばいいの?などの点に留意しながら、知名度や実績があるWebデザインスクールを厳選して10社ご紹介します。...
フリーランスのWebデザイナーになるには?仕事内容・年収・営業方法も解説!現在、制作会社や事業会社でWebデザイナーとして働かれている方は、副業したり独立するタイミングを伺っている方が多いかと思います。 そこでこの記事では、フリーランスのWebデザイナーになる方法や仕事内容、仕事を獲得する方法についてご紹介します。...
シェアハウス「ノマド家」

ノマド家」は、湘南に拠点を構えるフリーランス限定のシェアハウスです。

エンジニア・デザイナー・マーケター・ライター・動画クリエイターなど、主にWeb系フリーランスが入居しています。

フリーランスと寝食を共にして、切磋琢磨したいという方はぜひお気軽にご連絡ください!