辻本
この記事をご覧の方は、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デザインの実例を紹介しながら、レイアウト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デザイン良質見本帳 目的別に探せてすぐに使えるアイデア集
おすすめ度：
本書は、415点の厳選した良質なWebサイトを集めた見本集です。レイアウト、配色、フォント、素材、プログラムなど、ページを構成しているデザインパーツまで分解して解説しています。
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デザイナーの方にもおすすめです。
・業界No.1の実績と人気のオンラインデザインスクール
・一人ひとりのペースに合わせたオンラインレッスン
・未経験からWebデザイン・サイト制作を学びたい方におすすめ
・在宅・副業・フリーランスなど自由な働き方が目指せる
・転職サポートも充実している
最後に
以上、未経験からWebデザインを独学する方法についてご紹介しました。最後までご覧いただきありがとうございました。
この記事を読まれた方は、以下の関連記事もおすすめです。
Webデザイナーにおすすめの副業3選！Webデザイン未経験から副業は可能？
フリーランスのWebデザイナーになるには？仕事内容・年収・営業方法も解説！
「ノマド家」は、湘南に拠点を構える、業界最大手のフリーランス専門シェアハウスです。
エンジニア・デザイナー・マーケター・動画クリエイターなどのWeb系フリーランスが入居しています。
同業のフリーランスと仕事や人脈、ノウハウをシェアし合いながら働きたいという方は、ぜひお気軽にご連絡ください！
