takato（@n8takato）です！
webデザインの独学は何から行えば良いの？
この記事は上記の課題に向けて作成しています。
webデザインを独学で行う方は何から行動すれば良いか悩みますよね。
そんな方向けにwebデザインの独学について紹介します。
webデザイナーを目指している方は必見です。
この記事を読むメリット
- webデザインの独学は何から行動すれば良いかがわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
未経験でwebデザイナーになった僕が実際に行ったことをまとめました。
webデザインの独学を始める前に
webデザインの独学を始める前に知っておきたいことが2つあります。
独学を始める前に知っておきたいこと
- webデザイナーの仕事内容
- webデザイナーの将来性
webデザイナーの仕事内容
webデザイナーの仕事内容は大きく分けると2つあります。
webデザイナーの仕事内容
- webサイトのデザイン制作
- webサイトのコーディング制作
webサイトのデザイン制作
1つ目はwebサイトのデザイン制作です。
デザインソフトでサイトデザインを作成します。
PC版とスマホ版のデザイン制作を行います。
webサイトのコーディング制作
デザインが確定したらコーディングに入ります。
コーディングはブラウザでwebサイトが見えるようにする作業です。
デザイン通りのサイトを作成します。
※このようにwebデザイナーの仕事には「デザイン業務」と「コーディング業務」があります。
webデザイナーの将来性
webデザイナーは需要が高い職種です。
コロナで様々な業界が減少している中、IT業界は伸び続けています。
webサイトで物が売れるので、様々な業界がサイトを作り始めています。
まだまだ需要が高いので今から学習しても遅くはありません。
webデザイナーに必要なスキル
続いてwebデザイナーに必要なスキルを紹介します。
webデザイナーに必要なスキル
- Illustrator
- Photoshop
- XD
- HTML
- CSS
- JavaScript
- PHP
- CMS（WordPress）
- SEOの知識
- サーバー・ドメインの知識
この量を見ると「多い」と思いますよね。
ただし、webデザイナーのスキルは「デザインスキル」と「webスキル」に分けることができます。
デザインスキル
デザインスキルは下記の3つになります。
デザインスキル
- Illustrator
- Photoshop
- XD
上記3つは全て「Adobeのデザインツール」になります。
Illustrator
Illustratorはサイトに使用するイラストやロゴを制作するために使用します。
また、Illustratorでwebデザインを作成することもあります。
Photoshop
Photoshopは主に写真を加工する際に使用します。
少し前まではPhotoshopでwebデザインを作ることが主流でした。
XD
XDは最近webデザインの作成に使用されています。
共同作業に向いており制作現場でも使用されつつあります。
webスキル
webスキルは下記の7つになります。
webスキル
- HTML
- CSS
- JavaScript
- PHP
- CMS（WordPress）
- SEOの知識
- サーバー・ドメインの知識
HTML
HTMLはサイトに文字や画像を配置出来るプログラミング言語です。
ほとんどのサイトに使用されている言語ですので勉強する必要があります。
CSS
CSSはHTMLで作成したwebサイトに装飾を加えることの出来る言語です。
こちらもセットで勉強する必要があります。
JavaScript
JavaScriptはHTMLで作成したサイトに動きを加えることの出来る言語です。
画像のスライドショーやフワッと表示する表現など実装出来ます。
PHP
PHPは問い合わせフォームの入力内容をメールに送ることの出来る言語です。
ECサイトはもちろん、LPなどにもPHPが使用されています。
CMS（WordPress）
CMSとはプログラムを書かなくてもある程度サイトが作れるツールです。
CMSの中で最も有名なのがWordPressです。
WordPressは多くのwebサイトに導入されています。
※CMSはプログラムを書かなくてもある程度サイトを作れますが、オリジナル要素を出す場合はプログラミングが必要になります。
WordPressはweb制作の現場で使用しますので勉強しておく必要があります。
SEOの知識
SEOとは「キーワードの検索順位を上位に表示する」ための施策のことです。
webサイトに多くの人をアクセスさせるにはSEOが必須です。
webデザイナーはSEOの知識も必要になります。
サーバー・ドメインの知識
実際にwebサイトを公開する場合サーバーとドメインの知識が必要です。
案件によっては自分でサーバー・ドメインの契約をする必要もあります。
※以上のようにwebデザインには「デザイン」と「web周り」に関するスキルを身につける必要があります。
webデザインの独学は何からするの？
先ほど説明したスキルを身につけるために何から行えば良いか説明します。
僕がオススメするwebデザインの学習の流れは下記の通りです。
個人的にオススメなwebデザイン学習の流れ
- デザインソフトを学習
- コーディングを学習
- SEOやサーバー・ドメインを学習
- オリジナルサイトの作成
それぞれ説明していきます。
デザインソフトを学習
始めにデザインソフトの学習がオススメです。
デザインソフトから学習する理由
※コーディングに使用する「画像」はデザインソフトから書き出します。また、色や大きさの情報もデザインソフトから確認します。つまりデザインソフトが使えないとコーディングに必要な情報がわからないという訳です。
デザインソフトの使い方を理解しているとコーディングも学習しやすいです。
まずはデザインソフトの学習から始めてください。
デザインソフトの学習方法
デザインソフトの学習は「本」か「動画学習」がオススメです。
僕は本を持ち歩くことが嫌いなので動画で学習しました。
本で学習したいという方は本で学習してください。
デザインソフトにオススメな本
動画学習はYouTubeかUdemyがオススメです。
※YouTubeはアクセス数を稼ぐために初心者向けの情報が多いです(初学者が圧倒的に多いため)。本格的に学びたい方はUdemyが良いでしょう。
始めはYouTube学習、物足りなくなったらUdemyで良いと思います。
コーディングを学習
デザインソフトの次はコーディング学習です。
コーディングは無料のwebサービス(一部有料)で学習出来ます。
コーディング学習向けのwebサービス
上記のどちらかで十分学習出来ます。
※JavaScriptやPHPは有料でないと学習出来ない場合があります。それでも月1,000円くらいです。安い自己投資だと思いますよ。
コーディング学習向けの本
本で学習したい方は下記の本がオススメです。
SEOやサーバー・ドメインを学習
続いては「SEO」と「サーバー・ドメイン」の学習です。
※SEOの学習は「実際にブログを運営すること」が一番良い学習方法です。ただ、いきなりブログを運営するのはハードルが高いと思うので、知識のインプットで良いと思います。
本かYouTube学習が良いと思います。
SEO、サーバー・ドメイン学習にオススメな本
オリジナルサイトの作成
最後に実際にオリジナルサイトを作成します。
webデザイナーとして活動する場合ポートフォリオは必須です。
※転職、フリーランスなどで活動する際にポートフォリオの提出を求められます。ポートフォリオにはオリジナルの成果物しか載せられないため、オリジナルサイトを作成する必要があります。
webデザイン学習者にはここが一番大変な場面だと思います。
オリジナルサイトを作るコツ
オリジナルサイトを作るコツは「自分が欲しいサイトを作る」です。
※例えば「プログラミングスクールの比較サイト」や「楽天モバイルをオススメするサイト」など、自分の身近にある商品やサービスをまとめたりオススメしたりするサイトです。
このように意識することで、
- ターゲットは誰か
- 訴求ポイントは何か
- サイトのトンマナはどのような感じか
などを考えられるようになります。
このように作ることで実践的なオリジナルサイトが出来ます。
webデザインの独学が大変な場合は？
始めは独学で良かったけど、徐々に独学が大変になることがあります。
webデザインの独学が大変な理由
webデザインの独学が大変な理由は2つあります。
- 自分で作成したデザインが良いかわからない
- コーディングのエラーを自力で解決するのが難しい
自分で作成したデザインが良いかわからない
作成したデザインが良いか悪いかを自分で判断するのは難しいです。
何年もデザインに携わる人でさえ自分のデザインが良いかわかりません。
なので「自力で判断することは出来ない」と考えるようにしましょう。
友人や家族からフィードバックをもらいましょう。
コーディングのエラーを自力で解決するのが難しい
コーディングにはエラーが付きものです。
学習を始めたばかりの人だとエラー解決のコツを掴むのが難しいです。
※コーディングのエラーには「文字の入力ミス」や「考え方の違い」など様々な原因があります。そのため初学者には原因を特定するのが難しいです。
エラーの原因特定に慣れるまで少し時間がかかります。
もしプログラミングに詳しい人がいたら質問してみましょう。
質問出来る人が身近にいれば解決可能
独学が大変な理由の共通点は「身近に質問出来る人がいない」ことです。
身近に質問出来るwebデザイナーがいればこれらの悩みが解決できます。
※気軽に質問出来るwebデザイナーがいれば「①デザインが良いか悪いか」や「②エラーの原因特定」が迅速に解決されます。
webデザインスクールなら不明点を教えてくれる
webデザインに詳しい人が身近にいない場合はスクールに通うのもありです。
webデザインのスクールは現役webデザイナーが質問に回答してくれます。
デザインの良し悪しもコーディングのエラーも瞬時に解決出来ます。
学習スピードが格段に上がりますよ。
webデザインスクールは「デジハリ」がオススメ
webデザインスクールは「デジハリ」がオススメです。
※デジタルハリウッドはwebデザイン会社の株式会社LIGが運営しているスクールです。そのためプロのwebデザイナーが教えてくれます。
不明点を1人で悩み続けるよりも教えてもらった方が早いです。
プロのwebデザイナーから学んで早くwebデザイナーに転身しましょう。
「デジハリ」は無料オンライン説明会を実施しています。
興味のある方は話だけでも聞いてみてください。
webデザイナーになろう！
最後にまとめです。
webデザインの独学の流れ
- デザインソフトを学習
- コーディングを学習
- SEOやサーバー・ドメインを学習
- オリジナルサイトの作成
webデザインの学習は上記の流れで行なってください。
また、独学が難しいと感じる場合はスクールを検討してください。
現役のwebデザイナーがわかりやすく教えてくれます。
今なら無料のオンライン説明会もやっているので話を聞いてみてください。