辻本
この記事をご覧の方は、Webデザインを独学するために教材を購入したものの、スタート時点でつまずいて独学に不安を感じている方が多いと思います。
独学でWebデザインスキルを身に付けるには、知識を定着させるための正しいステップを理解する必要があります。
そこでこの記事では、Webデザイナー未経験の方が挫折せずに独学する方法について解説します。
Webデザイナーになるために必要なスキル
Webデザインを独学している方にありがちなのが、転職活動やフリーランスとして活動する際に役立つ実践的なスキルが身に付かなかった・・というパターンです。
それはWebデザイナーになるために必要なスキルが分からない状態で独学をしてしまったことが原因です。
Webデザイナーとして、即戦力で働けるようになるには以下の知識・スキルを身につけておく必要があります。
それでは、順に見ていきましょう。
デザインの基本原則
優れたデザインには必ず共通する4つの基本原則があります。まずは、デザインの基礎である４つの基本原則を押さえておきましょう。
・近接（関連する項目をグループ化する）
・整列（位置、大きさ、形、色などを揃える）
・反復（太字体、罫線、色、アイコンなどの要素を繰り返し用いる）
・コントラスト（フォントの大きさや形に変化をつけてメリハリをつける）
Photoshop/Illustrator
PhotoshopとIllustratorはデザインを作成するためのツールです。Photoshopは主にWebデザインや写真・画像加工、Illustratorはロゴやイラストなどの図形を扱います。
一般的にはこの2つのソフトが必須ですが、ツールの価格が割高な点でハードルが高いです。最初は、XDのような無料で使えるデザインツールを活用するのもおすすめです。
辻本
『Adobe Creative Cloud コンプリートプラン
』に契約して、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デザインを独学する3つのステップ
Webデザインを独学するステップを以下の3つにまとめてみました。
それでは、順に見ていきましょう。
①本で概要を学習する
Webデザインについてイチから勉強するなら、まずはWebデザインに関するアウトラインや、体系的な解説がなされている書籍から読み始めることをおすすめします。
最初に全体像を把握しておくことで、これから何を学習するべきか捉えやすくなります。
この章では、Webデザイン全体についてわかりやすく解説している書籍をご紹介します。Webデザイン初学者の方におすすめです。
いちばんよくわかるWebデザインの基本きちんと入門
本書は、Webデザインの実例を紹介しながら、レイアウト4つの原則とレスポンシブWebデザインの基礎について解説しています。
配色の基本やユーザーの心を動かす写真・図版の使い方、タイポグラフィの選び方、
フレックスボックス、インタラクション、マーケティングの知識まで幅広く学ぶことができます。
Webデザインの実例を見ながら直感的に学ぶことができるので、Webデザイン初学者の方におすすめの1冊です。
・これからWebデザインを学びたい初心者の方
・Webサイト制作を生業にしたい方
・1冊でWebデザイナーの基礎知識を網羅して学びたい方
初心者からちゃんとしたプロになる Webデザイン基礎入門
本書は、WebデザインやHTML・CSSの学習を「1日30分からはじめる」をテーマに、初学者向けにやさしく解説しています。プロのWebデザイナーを目指す上で必要な基礎知識や技術を体系的に学べます。
本書では、Webデザインの概論と制作に必要となるツールや素材・配色について学んだあと、HTML・CSSの基礎を学び、実際にサイトを制作し公開・運用します。
HTML・CSSの実践部分でサンプルサイトとして制作するのは、シンプルなお店のサイトと、モバイルファーストの手法を取り入れたサイトの2種類です。
・未経験からWebデザイナーを目指している方
・HTML・CSSを学んでマークアップエンジニアを目指している方
・Webデザイナーとしての市場価値を上げたい方
②動画を見て手を動かしながら学習する
デザインの理論やコードの意味はわかっても、デザインを制作したりコードが書けるようになった訳ではありません。実際に手を動かすことで、はじめて動作を確認して理解を深めることができます。
また、本をたくさん購入したとしても、インプットばかりではWebデザインの面白さを体感できず、モチベーションが低下してしまいます。
そんな時は、今まで学習した知識をもとに、プロトタイプとしてバナーやWebサイトなどを作ることでモチベーションを維持することができます。
次の章で、実際に手を動かしながらWebデザインが学べる動画サービスをご紹介します。
動画で学習するならUdemy
『Udemy
』は、誰でも講師になりコースを作ることができるC2C（Consumer to Consumer）の学習プラットフォームで、世界中で約4万人以上の講師が10万以上のコースを提供しています。
Udemyで「Webデザイン」と検索すると、12,000件以上の講座を見つけることができました。（2021年4月時点）
ジャンルとしては、Photoshop（405件）やIllustrator（209件）、HTML/CSS（572件）、Adobe XD（78件）、グラフィックデザイン（242件）と多岐に渡ります。
』がWebデザイン初学者の方におすすめです。全部で467レッスンとかなりボリューミーな講座となっていて、Webデザイナーに必要な知識やスキルを体系的に学ぶことができます。
・手軽な価格でWebデザインが学べる
・講座は月額制ではなく買いきり
・最大95%offになるセールも実施中
・講座は購入者からの評価やコメントがつけられている
・購入した講座に30日間の返金保証がついている
③ポートフォリオサイトを作ってみる
Webデザイナーとして転職活動を行う際や、フリーランスとしてクライアントに営業をする際に、ポートフォリオの提出を求められることが多いです。
なので、自分のスキルや実績を効果的にアピールするためにポートフォリオを制作しておく必要があります。
ポートフォリオサイトには、簡単な経歴、スキル、制作物のURL、価格表などの情報を掲載します。ノマド家のポートフォリオサイトはかなりベーシックな作りなので参考になると思います。
辻本
コーダーやWebデザイナーであれば、ポートフォリオサイトのデザインを凝ってみたり、JQueryで動きをつけたり、レスポンシブ対応にしておくことでさらなるアピールに繋げることができます。
未経験から転職を目指すならスクールがおすすめ
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デザイン・サイト制作を学びたい方におすすめ
・在宅・副業・フリーランスなど自由な働き方が目指せる
・転職サポートも充実している
TechAcademy（Webデザインコース）
| オススメ度 | |
|---|---|
| 受講区分 | オンライン |
| 受講形態 | マンツーマンレッスン |
| 価格 | 174,900円(税込)〜 |
| 期間 | 4週間・8週間・12週間・16週間 |
| 取得スキル | Photoshop・Cacoo・HTML5/CSS3・jQuery etc |
TechAcademyの『Webデザインコース』は、期間内で4つのWebサイトをリリースするかなり実践的なレッスン内容になっています。作りながら覚えるを繰り返し、最終的にはオリジナルのWebサイトをゼロから作れるレベルを目指します。
オンライン完結型のスクールですが、チャットサポートや週2回のマンツーマンメンタリングなど、初学者向けのサポート体制が整っている点もTechAcademyの強みです。
価格は業界でもかなりリーズナブルな料金設定で、さらに無料体験を行うとさらに10,000円割引されるほか、体験中に30分のメンタリング実施で500円分のAmazonギフト券もゲットできます。
・eラーニングアワードで特別賞受賞の実績あるサービス
・期間内で4つのWebサイトをリリースする実践的なレッスン内容
・マンツーマンメンタリングでモチベーション維持
最後に
以上、未経験からWebデザインを独学する方法についてご紹介しました。この記事をご覧の方は、以下の記事もおすすめです。
「ノマド家」は、湘南に拠点を構えるフリーランス限定のシェアハウスです。
エンジニア・デザイナー・マーケター・動画クリエイターなどのWeb系フリーランスが入居しています。
同業のフリーランスと仕事や人脈、ノウハウをシェアし合いながら働きたいという方は、ぜひお気軽にご連絡ください！
