こんにちは！WEBデザイナーのkeiです。
福岡在住の31歳、前職は営業でしたが、独学でWEBデザインを学び、未経験から転職しました。今では会社員としてWEBデザインの仕事をしながら、シンプルな暮らしやお気に入りのガジェットについてブログで発信しています。
今回は、独学でWEBデザインを学ぶための必須アイテムについてお話ししたいと思います！私自身、スクールに通わず独学でスキルを習得した経験があるので、同じように「独学でWEBデザインを学びたい！」と思っている方に役立つ情報をお届けできれば嬉しいです。
- WEBデザインを独学で学びたいけどなにから進めたらいいかわからない
- 学習のためのWEBサイトや書籍を知りたい
独学でWEBデザインを学ぶメリットと課題
WEBデザインを学びたいけれど、スクールに通う時間や費用がない…そんな理由で独学を選ぶ人は多いのではないでしょうか？実際に私もそうでした！独学のメリットは、自分のペースで学べることと好きな分野に集中できること。最近は、無料の学習サイトやYouTubeのチュートリアルも充実しているので、初心者でも始めやすい環境が整っています。
しかし、独学には課題もあります。「何をどこまで学べばいいのかわからない…」と迷ってしまったり、実践的な経験が不足するという問題にぶつかることも。実際に私も、学習の方向性に悩んだことがありました。でも、しっかりとした学習ツールを活用しながら、手を動かして学んでいくことで克服できます！
必要なスキルと学習の進め方
WEBデザインを学ぶためには、いくつかの基本スキルが必要です。私自身が独学で学んできたスキルも含めて、以下のような内容を押さえておくと良いと思います。
- デザインツールの使い方（Adobe XDやFigmaなど）
- HTML・CSSの基礎知識（WEBページの基本構造を作るため）
- JavaScriptの基礎（動きのあるデザインを実現するため）
- 配色やレイアウトの知識（美しく見やすいデザインを作るため）
学習の進め方としては、まずはデザインツールを使ってWEBサイトのレイアウトを作る練習をするのがおすすめです。その後、HTMLやCSSの基礎を学び、実際にコーディングを行うことでデザインを形にしていきます。私も最初は「何から始めればいいかわからない！」と悩みましたが、実際のWEBサイトを模写してみたり、自分のポートフォリオを作ることでスキルがどんどん身についていきました。
独学の成功のカギは「継続すること」！
学ぶべき内容を整理し、適切なツールを活用しながら、コツコツと手を動かして経験を積んでいきましょう。
１．デザインツール
Adobe XD・Figmaの特徴と使い分け
WEBデザインをするうえで欠かせないのが、デザインツールです。特に初心者におすすめなのがAdobe XDとFigmaの2つです。
私は、Adobeを使用しています！理由は、クラウドベースで管理できるため、どのデバイスからでもアクセスしやすいからです。無料プランでも十分な機能が使えるのも嬉しいポイントですね。Adobeは独特の挙動が多く最初は苦労しますが、シェアが圧倒的で、就職するときにAdobeのツールを使えるか使えないかは大きなポイントになります。
Photoshop・Illustratorの基礎知識
デザインの細かい調整や、WEBサイトに使う画像・アイコンを作成するためには、PhotoshopやIllustratorの知識もあると便利です。
私は最初、Photoshopを使いこなせず苦戦しましたが、Canvaなどの簡単なツールを活用して徐々に慣れていきました。PhotoshopやIllustratorは最初から完璧に使えなくてもOK！デザインツールに慣れた後、必要に応じて学ぶのがおすすめです。
しかし実際デザイナーに就職してみると、圧倒的にAdobeの方がやれることが多いです。
Adobeは月額費用が発生するので超初心者の方は最初はCanvaでデザインに触れて、さらに詳しく学んでみたいときはAdobeのサブスクをするのも手かもしれませんね！
２．コーディングの学習
HTML・CSSの基本と学習方法
WEBデザインを学ぶうえで、HTMLとCSSの知識は避けて通れません。私も最初は「タグって何？CSSってどうやって書くの？」と全く分からない状態でしたが、Progateやドットインストールを活用して学びました。
学習のポイントは、とにかく手を動かして試してみること！最初から完璧に作るのではなく、小さなWEBページを作ってみることが大切です。
JavaScriptの重要性と学習のポイント
WEBデザインに動きをつけるにはJavaScriptが必要になります。私はJavaScriptを学ぶのに苦戦しましたが、シンプルな動きを作るところから始めるのが良いと思います。
例えば…
- ボタンをクリックしたら色が変わる
- 画像がスライドショーのように切り替わる
こういった小さな動きを作るだけでも、「JavaScriptってこういうことができるんだ！」と実感できるのでおすすめです。
３．参考サイト・書籍
無料で学べるWEBデザインの学習サイト
私が独学でお世話になったサイトを紹介します！
- Progate：スライドで学べるので初心者向け！
- ドットインストール：動画で学習できてわかりやすい！
- MDN Web Docs：基礎知識をしっかり学びたい人におすすめ！
おすすめのWEBデザイン関連書籍
本で学ぶのもおすすめです。私が読んで良かった本を紹介します！
- 『ノンデザイナーズ・デザインブック』：デザインの基本を学ぶのに最適！
- 『いちばんよくわかるWebデザインの基本』：基礎から実践まで学べる！
- 『HTML&CSSとWebデザインが1冊できちんと身につく本』：初心者でも挫折しにくい！
あとは・・・
仕事を辞めて、経済的に苦しい。独学に限界を感じるのでスクールのようなところで学びたい人は「職業訓練校」もおすすめです！職業訓練校でWEBデザイナーを目指す方法は下記記事で書いてます！！！
まとめ
WEBデザインを独学で学ぶのは大変ですが、適切なツールや学習リソースを活用すれば、初心者でもスキルを身につけることができます。
私自身、未経験から独学でWEBデザイナーになりました。「自分には無理かも…」と思っている人でも、コツコツ学習すれば必ず成長できます！
ぜひ、今回紹介したツールや学習サイトを活用して、自分のペースで学んでみてくださいね！
それでは、楽しいWEBデザインライフを♪
