目次
Webデザイナーに興味があっても、「スクールに通ったり、講座を受けたりしないとなれない」と、一歩踏み出せずにいる方も多いのではないでしょうか。しかし、実は、Webデザイナーは独学でも目指せる職業であり、プロとして働くことも十分可能です。そこでこの記事では、独学でWebデザイナーになる方法や、おすすめの勉強方法を紹介します。
Webデザイナーは独学でもなれる
Webデザイナーには、Webサイト制作などに関する非常に幅広い知識や技術が必要です。デザインの知識はもちろん、さまざまなツールの扱い方や、Webサイトなどにデザインを実装する技術など、学ぶべきことは多岐に渡ります。一見すると、「独学でWebデザイナーにはなれない」と思いがちです。しかし、実はそうでもありません。勉強方法を工夫すれば、未経験でも、独学で目指せる職業です。
独学でWebデザイナーになりたい方は、これから紹介する「Webデザイナーになるために必要なもの」や「求められるスキル」をまずはチェックしてみましょう。
独学でWebデザイナーになるために必要なもの
Webデザイナーになるためには、様々なソフトが必要と感じるかもしれませんが、無料のツールもあるため、基本的には、「パソコン」で十分です。しかし、デザインの仕事はデータが重くなりやすいため、相応のスペックを持ったパソコンを準備しましょう。
理想としては、「メモリが16GB以上」がおすすめです。また、画面の見やすさ・作業のしやすさを考えると、「15インチ以上」のパソコンを準備したいところです。業界内ではMacのシェアが大きいため、もし可能であればMacを選択することで説明の理解がしやすく、互換性も高まることになるでしょう。
Webデザイナーになるために求められるスキル
Webデザイナーには、「デザインスキル」と「コーディングスキル」の2つが求められます。それぞれ詳しく見ていきましょう。
デザインスキル
Webデザイナーに必要なデザインスキルを細分化すると、次の3つが挙げられます。
基本的なデザイン理論の習得
「Webデザイナー」という名前のとおり、基本的なデザイン理論の習得は必須です。代表的なものとしては、下の3つが挙げられます。
- 色彩や形が与える印象
- ユーザの視線の動き
- 並列や類同、近接などのゲシュタルト原則
色や形に関する知識はもちろん、写真やイラストなどの使い方、ユーザーの視線の動きを考慮した構図などを効果的に活用するスキルを求められます。
XDやFigma、Sketchなどのツール習得
考え出したアイデアを実際のデザインとして作り上げるときには、デザインツールの操作が必要です。特に、Webデザイナーであれば、Adobe XDやFigma、Sketchなどのツールを一通り使えるようにしておきたいところです。独学などの学習段階から、操作になれておくことで現場に入った際にも臆することなく対応できます。また、基本的にはデザインツールでできることは、似ているため1つのツールを学んでおくことで、他のツールもある程度応用を効かせることが可能です。
UIやUXなどトレンド情報の収集
Web制作やアプリ開発などでは、日々技術が進歩しており、トレンドも目まぐるしく変わっていきます。その中でも、UI（ユーザーインターフェース）やUX（ユーザーエクスペリエンス）は、近年注目を集めている分野です。デザインは理論的な部分だけではなく、どうしても感覚的な要素も求められます。そのため、ユーザやクライアントに適切な価値を届けるためには、トレンド理解は欠かせません。
コーディングスキル
コーディングとは、プログラミングコードを記述する作業です。コーディングは、Webサイトなどに反映したい効果やデザインなどを、プログラミング言語を使って実装する作業となります。実際の業務においてはデザインとコーディングが分業になる傾向が高くなってきていますが、コーディングの仕組みを理解することで、デザインの表現の幅が広がったり、広義のデザイナーとしてより高い評価を得ることができるでしょう。プログラミングというと難しく感じますが、基本的にWebデザイナーに求められるコーディングスキルとして、主に次の2つです。プログラミング言語の中では、比較的容易に習得できる分野です。
CSSやHTML
日本語で「スタイルシート」と表現されるCSSは、色や効果などのデザインを実装するコーディングです。また、HTMLはメニューやテキストなど、Webページの基本的な構造を作り上げるコーディングスキルとなります。
あらゆるサイトで使われているコーディングの基礎となる分野なので、十分すぎるほどの習得をしておきましょう。
JavaScript
CSSやHTMLに動きを加えたいときに使用するのが、「JavaScript」です。ポップアップウィンドウやスライドショーなど、動的な情報提供を行えるように設定するコーディングスキルとなります。
独学でWebデザイナーになるには何から手を付けるべきか
Webデザイナーには、デザインスキルだけでなく、コーディングスキルも必要であると分かりました。では、実際に独学でWebデザイナーになるためには、どんなことから始めれば良いのでしょうか。
ここでは、独学でWebデザイナーになるまでの手順を、7ステップに分けて紹介します。
作りたいサイトデザインイメージを決める
まずは、Webデザイナーになったら、どんなデザインのサイトを作ってみたいか、イメージを膨らませてみましょう。自分の頭の中だけで考えるのには限界があるため、ギャラリーサイトを眺めるのも1つの方法です。「いいな」と思えたサイトが見つかったら、「どんな人をターゲットにしているか」「何を目的・ゴールとしているか」などを考えてみます。こうすることで、技術面だけでなく、デザインに至るまでの思考を少しずつ学ぶことができます。
ワイヤーフレームを作る
ワイヤーフレームとは、「デザインの設計図」です。サイト上のどこにどんな要素があるかを整理することで、情報の調整や完成イメージを具体化できます。ワイヤーフレームは、自分の考えたデザインをメンバーやクライアントと共有する際に必要です。思い浮かんだアイデアを可視化することで、頭の中が整理されたり、新たなアイデアが思いついたりというメリットもあります。
優れたデザインをトレースする
優れたウェブサイトのデザインのキャプチャを撮って、そのうえに同じサイズのブロックやテキストなどの要素を載せて、元のウェブサイトと同じ様にトレース (模写) することも上達のための一つの方法です。優れたウェブサイトは、要素間のスペースの取り方、文字サイズの調整、カラーリングのグループ化など学ぶべき点が多く存在しています。そういった良いデザインのエッセンスをトレースを通じて感じて身につけましょう。最初は下のレイヤーにキャプチャを敷いて重ねる様にトレースすると良いでしょう。慣れてきたら、別のウインドウとして見ながら同じデザインを作れるか試してみましょう。作れたと思った後でレイヤーを重ねてみて差異を感じることも良いトレーニングになることでしょう。
基本的なデザイン理論を学ぶ
デザインは「感性が重要」と思われがちですが、実は基本的な理論がほとんどです。基本を押さえることで、ユーザに情報を届けることができます。特に初心者の間には、がむしゃらにデザインを量産するのではなく、デザイン理論を学んだ上で実践を繰り返すことが大切です。
XDやFigma、Sketchを学びデザインする
知識や技術を学び、アイデア出しなどの前準備が整ったら、実際にツールを使ってデザインしていきます。特に、デザインの現場で使われている以下の3つがおすすめです。
- XD
- Figma
- Sketch
XDはAdobeツールということもあり、IllustratorやPhotoshopなどのデータも使えるため、より汎用性が高いツールです。また、無料で使うことができ、国内のユーザも多いことから初学者にはおすすめのツールとなっています。
Sketchでは、ベクターデータを使用可能なため、解像度に煩わされずにデザインをすることが可能です。英語表記のUIですが、操作は直感的にできるため、それほど問題ではありません。
また、FigmaもWebデザインによく使われるツールです。ブラウザ上で動作し、クラウドでデータ管理できるため、どこからでも作業可能です。他のユーザと共同編集をすることもできるため、第三者にフィードバックをもらうときも使いやすくなっています。
HTMLやCSSなどの基本的なコーディングを学び実装する
Webデザイナーに求められるコーディングスキルの中でも、HTMLやCSSといった基本的なものは、実際にコードを打ちながら学ぶ方法が効果的です。書籍や動画などから作業の流れを掴み、実践を繰り返す中で、徐々に身についてきます。
JavaScriptなどを学びリッチ化・機能化してみる
基本的なデザインを実装できるようになったら、JavaScriptなどで一段階上のコーディングを施してみましょう。ネット上には、さまざまなサンプルコードが公開されているため、どんな効果が出るか、1つずつ試してみてください。
第三者にフィードバックをもらう
独学でWebデザイナーの腕を上げるためには、第三者からの客観的なフィードバックが必須です。自分では気づかないような癖や弱点などを見つけてもらうことで、より質の高いWebデザインが可能となります。
独学でWebデザイナーになるためのおすすめ勉強方法
Webデザイナーは、勉強方法を工夫することで独学でも目指せます。最後に、Webデザイナーになるためのおすすめ勉強方法を、3つほど見ていきましょう。
YouTubeで学ぶ
さまざまな情報が集まるYouTubeでは、Webデザイナーになるために必要な知識や技術を紹介しているチャンネルも豊富です。特にツール操作については、動画の方が頭に入りやすく、時短にもなります。一方で、体系化して学ぶのが難しく、情報の精度もチャンネルによってまちまちです。実績のある方のチャンネルがおすすめですが、情報の精度や網羅性に基づいて動画は選定しましょう。
書籍で学ぶ
動画で学べる時代になったとはいっても、勉学の基本は「書籍」です。動画だけでは学びきれない、細かい部分まで知ることができます。
特に、次に挙げる3冊はいずれも分かりやすく、入門編の書籍としてぴったりです。
なるほどデザイン
基礎知識から実際のデザインプロセスについて、図解やイラストなどをふんだんに利用しながら解説している書籍です。本そのものが1つのデザイン例となっており、楽しみながらデザインのことを学べます。
スラスラわかるHTML&CSSのきほん
パソコンだけでなく、スマホやタブレットにも対応したHTML・CSSの入門書です。現在のトレンドに合わせた解説も、非常に丁寧で分かりやすい書籍となっています。
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
コーディングスキルのほか、近年注目を浴びるユーザビリティなどのトレンドについても解説している書籍です。現役Webデザイナーの実践的な知識・技術を一通り学べる、お得な内容となっています。
学習サイトで学ぶ
「動画や書籍だけで勉強するのは不安…」という方は、学習サイトを利用するのも1つの方法です。おすすめは、次の5つとなります。それぞれ詳しく見ていきましょう。
ドットインストール
約5,000本もの動画を有する「ドットインストール」では、Webデザイナーに必要なコーディングスキルを学べます。月額980円払うだけで、すべての動画を視聴可能。無料で視聴できる動画も多いのが特徴です。しかし、自学自習が求められる独学ツールなので、サポートなどが少なくモチベーション管理などが難しい点には注意しましょう。
Progate
HTMLやCSSなど、Webデザインにおける基本的な知識について学べるのが「Progate」です。イラスト付きの解説ページを読み進めた後、実際にコーディングして反映結果を確認できます。必要最小限の内容がまとめられているため、Webデザイナーの勉強を始めたばかりの超初心者にもぴったりです。しかし、初心者向けの内容ということもあり、現場レベル・実務レベルの力はなかなか付きづらいです。自分がWebデザインに向いているかなどを確認するためや、基礎固めとして活用しましょう。
Schoo
「Schoo」では、デザインやコーディングはもちろん、サイト設計やサーバーの知識まで包括的な知識を学べます。
7コース・全36授業を修了した後は、実際に作品を作り、第一線で活躍するWebデザイナーからの添削を受けることも可能です。
Udemy
「Udemy」はWebデザイナーに必要なあらゆる知識について、1レッスン5分程で学べます。プロのWebデザイナーを目指したレッスン内容となっているため、実践的なスキルを身に着けることができます。特に、隙間時間を活用して、コツコツ学びたい方におすすめです。一方で、講座ごとにコストがかかる場合や、講座出品者によってクオリティが異なる点には注意が必要です。Reviewや講義内容は事前に必ず確認しておきましょう。
デジハリオンラインスクール
「デジハリオンラインスクール」で学べるのは、デザインやコーディングだけではありません。さまざまな職種のメンバーとスムーズに協働できるよう、基本的なビジネススキルやディレクションについても学べる講座内容となっています。Webデザインだけではなく、Web周りのビジネスコミュニケーションや業界知識を得たいという方にもおすすめのスクールです。
デザインギャラリーサイトをくまなく見る
スキルを向上させるためには、良いWebサイトをたくさん見ることが不可欠です。BRIKが提供している、BRIK GALLERYでは日々様々な良質のWebサイトを紹介しています。業種やデザイン手法、カラーリング、Webサイトの種類など様々な検索方法が充実しており、掲載数はトップレベルを誇ります。
またその他のギャラリーサイトについては、こちらの記事で詳しく紹介しています。
独学でWebデザイナーになるにはまずは手を動かす
独学でWebデザイナーになるためには、作りたいサイトデザインを思い浮かべながら、1つずつスキルを身に着けていくことが大切です。動画や書籍などで基本的な知識を学びながら、実践を繰り返し、一歩一歩着実に進んでいきましょう。
独学でスキルを身につけたら転職活動
本記事でご紹介した様々な方法で独学を深めた後には、本格的な転職活動が待っています。BRIKでは、デザイナーをはじめとするクリエイターに向けたデザイン・デジタル業界の求人サービスBRIK JOBを運営しますので、こちらも合わせてチェックしてみましょう。
