お役立ち

【独学勉強法】最短でWebデザイナーになりたいならコレを学べ!【初心者向け】

更新日:

【独学勉強法】最短でWebデザイナー

Webデザイナーコーダーを目指す方、増えましたよね。

学生に限らず、これまでなんとなく働いていた方も、「スキルを身につけて転職(就職)したい」と考えている方は多いのではないでしょうか?

Web業界全体の急速な成長が大きく関係しているのが間違いないですが、急速に成長しているということは変化のスピードもものすごく速いということ

 

ということはですね、

1からWebデザイナーやコーダーを目指す方は、できる限り早く入門部分を終わらせて、実務レベルに到達する必要があるのです。

なぜならば、学んでいる間にも、次々と新しい手法やアプリが登場し続けるから。新しい情報についていけないということは、それだけ「こなせる範囲」が狭まりますよね。

 

では、できる限り入門部分を早く通過するためにはどうしたら良いかというと、

効率を上げることが大切です。

では、効率を上げる為にはどうしたら良いかというと、

実務で必要なスキルを優先して学ぶことです。

 

今回は、現役Webデザイナー・マークアップエンジニアの私が実際に実務で経験していく中で「必要と感じたスキル」と、「より早く活躍するための効率の良い学び方」を紹介したいと思います

 

効率良く学習して、入門部分をサクサクッと終わらせちゃいましょう!

 

こんな方におすすめ

  • これからWebデザイナー・コーディングの勉強を始める方
  • 学校や職業訓練所に行ったけれどスキルに不安があるという方
  • Webデザイナーとして就職したけれど学びなおしたい方

 

「Webデザイナーになりたい」と思ったら

Webデザイナーになりたい

ほとんどの方は、いざ勉強しようとなっても「何から始めればいいのかがわからない」と思うのではないでしょうか?

いくら身近なものとはいえ、「見る・使う」だけであったものを「作る」というのは想像以上にハードルが高く感じられるものです。

そして、新しい技術が次々と登場し変化を続けていくWeb業界においては、現場で求められるスキルも変化し続けています。

ネットで調べても、情報が多すぎて何がなんだかわからないですよね。

 

教科書通りやったからOK!

とはならないのがWeb業界の難しいところです。

「散々時間をかけて学んできたのに、やっとの思いで就職したら全然役に立たなくて困った」という方を私はたくさん見てきました。

 

最初から全部を学ぼうとしても難しいですし、全部を覚えなくても十分実務をこなすことは可能ですが、Webデザイナーになる為のスキルをひとつひとつ身につけることに、決して少なくはない時間がかかります。

ですから、何を選び、何から身につけていくかという取捨選択が今後を大きく左右するのは間違いありません。

 

学校や訓練所などでは、基礎や歴史をしっかり教えてくれることでしょう。その知識は決して無駄にはなりません。

しかし、どのスキルを選び、伸ばしていくかは、自分自身で決める必要があります。

 

YUU
基礎を身につけることはゴールではなく「学ぶ」ためのスタートラインに立つこと、ということを忘れずに、スキルアップしていきましょう!

 

 

私の話:独学のみでWebデザイナーになる

独学でWEBデザイナーになった

Web系の実務経験11年超となった私ですが、ここに辿り着くまでに、Webやデザイン専門の学校に通ったこともなければ、講習に行ったことも一度もありません。

元々趣味で始めたというのもあり、すべて独学で身につけてきました。当時は今のように情報が簡単に手に入る環境ではなかったので、スキルを習得するまでに本当にものすごく時間がかかったと思います。

 

そんな私が実務をこなしていく中で、専門学校や職業訓練で学んできた方々から必ずといっていい程聞かれていた質問がこちらです。

「習ったことと全然違う・・・独学でどうやって勉強したんですか?」

 

ん~むしろどういう風に学んできたのか教えて欲しい・・・。でもひとつわかるのは、教科書と実務はまったくの別物ということですね。

 

私は、WebデザインやHTMLを始めた頃、とにかく本を買って読んでいました

内容はそれなりに理解できましたし、本を見ながら実際にコードを書いてみたりもしましたが、とにかく覚えるコードがとんでもなくたくさんある上に、どの状況でどれを選択したら良いかが全然わからない状態で、身に付いたかもよくわからず、質問できる相手もおらず、完全に迷子状態でした。

Webデザインやコーディングに関する書籍はたくさん出ていますが、初心者では本当に必要なものを選ぶことがまず難しいです

 

その後、趣味のサイトを作ったり知人のサイトを作ったりと繰り返しているうちにある程度身につき、就職し、脱線したりしながら今に至るわけですが、

いま思うのは

始めの段階で順序良く学んでいたら、もっと早く世界が広がっていた

ということです。「世界」というのは、知識だったり、就職においての選択肢だったり、そういったものです。

 

これから学ぶ方がより効率よくスキルを身につけ、より早く現場で活躍できるようになるには、勉強の順序がカギとなります。

 

YUU
ということで、順番に説明していきます!

 

Webデザイナーは、覚えることだらけ?

WEBデザイナーは覚えることだらけ?

Webデザイナーを目指して、いざ勉強を始めるぞ!となっても、

ネットで調べるとHTMLとかCSSとかJavascriptとか、ワイヤーとかPhotoshopとかIllustratorとか、難しい単語ばっかだし覚えることいっぱいありすぎてよくわからない・・・😥

と、少々ハードルが高く感じられるのではないでしょうか?

 

確かに、0からサイト制作ができるWebデザイナーになる為には、必要なスキルが多いかもしれません。

しかし初めから焦って全部やろうと思ってもなかなかうまくはいかないので、

まずは勉強する分野を分けて考えると良いです。

 

Webデザイナーに必要なスキルとは?

Webデザイナーは、Webサイト(ホームページやショッピングサイト・LPなど)制作からバナーのような小さい広告画像の制作まで、その仕事内容は多岐にわたります。

さらにWebサイト制作では、「レイアウトを考える(ワイヤー)」「デザインをする」「コーディングをする」「アップロード(適用)する」といった部分をWebデザイナーが担うことが多いです。

これは厳密に言うと「レイアウト・デザインを担当するWebデザイナー」と「コーディング・アップロードを担当するWebコーダー」という職種に分類できるのですが、実際の現場では「デザイナー」と「コーダー」を別々に採用するといったことは少なく、Webデザイナーが「サイト制作に関わることすべて」といった大きい括りで業務を任されることが多いです。

逆に言えば、自分の「できること」がデザインのみだと、採用の範囲が狭まってしまうことになります。

 

YUU
私が初めてWebデザイナーとして就職した時は、サーバーの設定や管理から企画・デザイン・コーディング・ライティングまですべて「Webデザイナー」の仕事として任されていました(泣)

 

周りからスキルの範囲(やれること)を理解されにくい

専門職だから周りからスキルの範囲(やれること)を理解されにくいというのはもはや多くのWeb職が経験していることでしょうし、

制作会社でもない限り、Web担当を何人も雇う余裕がないために、すべて任せられる人でないと困るといったケースはよくあります。

 

そんな業界の実情もあり、Webデザイナーに必要とされるスキルは多いのでしょうね。

ここまで言っておいてなんですが、もちろん、デザインだけを仕事としているWebデザイナーさんもいますよ!

ただやはり「Webデザインをサイトで実装する方法を知っているかどうか」はWebデザインに大きな影響を与えます。そして、できる事が多いほど、Webデザイナーとして活躍できる場は多くなります。

価値あるWebデザイナーになれるよう、スキルは選んで身につけていきましょう。

 

身につけておきたいスキル

デザインに必要なスキル

  • ワイヤー制作
  • Photoshop
  • Illustrator

コーディングに必要なスキル

  • HTML
  • CSS
  • JavaScript (jQuery)
YUU
何から始めればいいかわからない時は、上の様に分けて考えてみてください。Webデザインの勉強は、「デザイン」の部分と「コーディング」の部分に分けることができます
YUU
やり方は人それぞれですが、私はまずコーディングに必要なスキルを習得するのをおすすめします。

 

Webデザイナーとしてのスキルを学ぶには、スクールという方法もあります。詳しくはこちらの記事で解説しています。

WEBデザイナー スクール
現役Webデザイナーがおすすめするスクール3選

Webデザイナーを目指していて、おすすめのスクールを探している方向けです。   Web業界の需要が高まり、Webデザイナーを目指す方も増えましたね。 需要が高まったことでスクールや参考書もた ...

続きを見る

 

「HTML」や「CSS」といったコーディングスキルからがおすすめ

HTML・CSSがおすすめ

前述したとおり、Webデザインをサイトで実装する方法(コーディング)を知っているかどうかは重要です。

Webデザイナーを目指す方は、少なからずデザインが好きだったり、デザイン力に自信のある方が多いとは思いますが、ここはぐっと堪えてまずは「HTML」や「CSS」といった、コーディングの勉強をしましょう。

そして、併せて「最近よく使われている手法やレイアウト」や「現代に合ったWebサイト」の知識を取り入れると良いです。

最近ではモバイルファーストといって、Webサイトを見る人のシチュエーションに合わせた適切なコンテンツ提供をするサイト制作が求められるなど、Web業界は目まぐるしい速度で変化がおこりますので、情報収集は欠かせません。

「コーディングとは何か?」はこちらの記事でご紹介しています。

コーディングとは?
【いまさら聞けない】コーディングとは?【初心者向け】

今回は、Web制作においての「コーディング」を初心者にもわかりやすくご説明します!   ひとことで「Web制作」といっても、企画やデザイン、組み立て、運用・保守とその業務内容は多岐に渡ります ...

続きを見る

コーディングにはこちらのテキストエディタがおすすめです

無料エディタ「Brackets」がすごい!
無料エディタ「Brackets」がすごい!初心者コーダーにおすすめ!

今回は、便利な無料エディタ「 Brackets - Webデザインを認識する最新のオープンソーステキストエディター」のご紹介です! HTMLを始めると、テキストエディタ選びをする機会がありますよね。 ...

続きを見る

JavaScript(jQuery)やPHPなど、コーディングに関わるスキルは他にもありますが、まずは「HTML」と「CSS」を理解しないことには始まりませんので、ここは一旦考えずに進めていきましょう。

 

コーディングからがいいのには理由があるの?

YUU
最近では「レスポンシブデザイン」っていう、Webサイトを見る人が使うデバイス(PCやタブレット・スマホなど)に合わせて自動でデザインが最適な表示に切り替わるコーディング方法が主流となっています。どういう仕組みかを理解することで、レスポンシブデザインが実現可能なデザインもしっかり作ることができるようになります。

 

順番に沿って効率良く身につけよう

 

step
1
まずは「HTML」を基礎からしっかり!

HTML(読み:エイチティーエムエル)は、Webページをつくるための言語です。

HTML専用の「HTMLタグ」と呼ばれるコードを用いて、Webページに「見出し」「段落」「リスト」「画像」などといった目印をつけ、コンピュータにWebページの構造を理解してもらえるようにします。

普段何気なく見ているページも、ほとんどがHTMLでできていて、Webページのコーディングを学ぶにあたり、HTMLは必須です。

YUU
0からのスタートでは難しく感じるかもしれませんが、何度か触れているうちにすぐ慣れますよ!

 

HTML の正式名称

HTML は、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略語です。ほぼほぼ略語の「HTML」しか使うことがないので、はじめの段階で正式名称を無理に覚えなくても問題はありません。 (試験などを受ける方は覚えましょう)

基本のHTMLをこちらの記事で紹介しています。

基本のHTMLでブログやメルマガがオシャレに!
基本のHTMLをほんの少し知るだけでブログやメルマガがオシャレに!

ブログ記事やメルマガを書くときに、装飾なしでそのまま送信していませんか? ほんの少しのHTMLを覚えるだけで、これまでよりも読み手の目を惹く素敵なデザインになるかもしれません。 特にメルマガはテキスト ...

続きを見る

少し勉強して行き詰ったときは、こちらの記事もおすすめです。

【HTML初心者向け】周りに聞けない!
【HTML初心者向け】周りに聞けない!基本的な疑問を解決【part 1】

HTMLやCSSを学び始めたばかりの初心者の方で、ちょっとした事が聞けずにひとりで悩んでしまっている方は意外と多いのではないでしょうか? 「よくわからなかったけど前に1回聞いたし、もう1回は聞きにくい ...

続きを見る

 

step
2
HTMLに少し慣れたら「CSS」!

CSS(読み:シーエスエス)は、Webページの装飾に使用するための言語です。

Web業界で「スタイルシート」と言われたらCSSのことです

HTMLと組み合わせることで、文字の色や大きさを変えたり、背景の色を変えたり、ドーン!と画面いっぱいの背景画像を表示したり・・・なんてこともCSSで実装します。

「HTMLに少し慣れたら」と言いましたが、基本HTMLとセットになるので、同時進行でも良いくらいです

ただ、ごちゃごちゃになってしまうと感じる方は、HTML→CSSの順番で問題ありません。

YUU
CSSを覚えるとデザイン性がぐっと上がるので、とても楽しいですよ♪

 

CSS の正式名称

CSSは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略語です。略語の「CSS」または「スタイルシート」と呼ぶのが一般的なので、こちらもはじめの段階で正式名称を無理に覚えなくても問題はありません。 (試験などを受ける方は覚えましょう)

 

現役WebデザイナーがHTML・CSSを学ぶ方におすすめする入門書&参考書はこちら

HTMLを勉強するなら1冊は持っておきたい本
現役Webデザイナーがおすすめ!HTMLを勉強するなら1冊は持っておきたい本

HTMLやCSSの勉強をはじめようと思っている方、参考にするものが多すぎてどれを選べば良いかわからなくて困っていませんか? さらに、ネットで調べるのに時間を取られすぎていませんか? 入門部分はできるだ ...

続きを見る

 

step
3
"ある程度"理解したら次のステップへ

HTML、CSSをある程度理解したら、0からサイトを作るのが良いです。

・・・が!

個人的には、Webサイトを作ってみて理解を深めていくよりも、より早く「Webデザイナー」として活躍できるようになるために、まず「経験しておくべき」ことがあります。

しかし、この時点で「自分のやりたい形」や「つくりたいもの」がある方は、そちらを進めていった方が良いと思います。

より楽しいことを優先させる方が、身に付くのも早くなりますしね。

 

Webデザイナーとして、より早く現場で活躍する方法

より早く現場で活躍する方法

制作スキルというのは、数や経験が物を言います。

より多くの経験をし、より多くの問題にぶつかり、より多く解決していくことが成長のカギです。

自分ひとりでWebサイトを作る事でも多くを学ぶことはできますが、実際に業務として行う制作や維持管理・修正といった作業は全くの別物です

実務では、学校や訓練校で「基礎」「応用」として学んできたものをそのまま使用する機会はあまりなく、「環境による柔軟な対応」をその場その場で適切に行える事が大切です

そしてその「対応力」を身につけるには、やはり現場で数や経験を積むのが確実な方法ですが、「実務経験ゼロのWebデザイナー」が就職するのは容易ではありません

 

では、技術力がつくまでは自分でサイトを作りまくって経験を積んでいくしかないのでしょうか?

それが一番確実な方法かもしれませんが、より早く現場で活躍できる方法があります。

 

CMSを使ってみよう

CMS(読み:シーエムエス)とは「コンテンツ管理システム(Contents Management System)」のことです。

通常、WebサイトはHTMLやCSSの知識がないと作れません。

ところがCMSを使えば、文章を入力したり、画像を選んでいくだけで簡単にWebサイトを作ったり、更新をすることが出来ます

「えっ!でもWebデザイナーの勉強でHTMLやCSSを身につけてるんだから、そんなの使わなくてよくない?」

と、思うかもしれませんが、全くもってそんなことはありません。

 

WordPress(ワードプレス)を知ろう

企業がWebページを持つことは、もはや当たり前になっていますね。

しかし、WebデザイナーやWebプログラマーを雇ってまでの運用ができない、といったケースは多く、

事務や営業など、Web専門でない社員がホームページの更新作業を行っている会社も少なくありません

定期的な更新をその都度外注で行うのはコストがかかりますからね。

そして「Web専門の知識がない社員でも更新作業が出来る」ように、Webサイトの更新にCMSを導入している企業は多いです。

CMSはコンテンツ管理システムの総称で、実際にはいくつもの種類があります。

YUU
聞きなれない言葉でイメージがしにくいですね。

友だちに「メッセージ」を伝える手段として、LINEや、チャットアプリや、他のメッセージアプリがありますが、ここでいえば、メッセージを送るアプリの総称がCMSで、実際に使うアプリがLINEみたいな感じです。

「メッセージを送る」目的を達成するための手段(アプリ)の違いですね。

 

中でも「WordPress(ワードプレス)」というCMSは世界トップのシェア(使用率)で、
日本でも実に81%が「WordPress(ワードプレス)」を使用しています。

 

CMSの使用状況

出典:W3Techs.com

 

WordPress(ワードプレス)の使い方やカスタマイズを身につける

WordPressは、知識のない人でも簡単にWebページを作ることができるけれど、知識があるとカスタマイズで「できること」が増えます。

何より「色んな機能を知れる」のでWebサイト作りの参考にもなりますし、経験しておくと良いです。

YUU
WordPressなら管理画面に慣れておけば実務でも対応しやすく、導入企業も多いので、修正からカスタマイズまで対応できる人材!となると経験が不足していても現場で即戦力として活躍できる可能性が高まりますね

 

WordPress(ワードプレス)は色んなことが試せる

WordPressには通常「テーマ」というものがあり、テーマによってWebサイトやブログのビジュアル部分の設定がされます。

投稿画面で直接HTMLタグを使用することもできる他、オリジナルCSSを追加するなどして簡単に見た目を変更することが可能です。

また、Webサイトを制作する時によく使われる人気の機能やレイアウトも簡単に設定できるので、HTMLやCSSを習得する過程だけでは身につけるのが難しい部分を知ることができます

さらに、0からWebサイトを作るといった場合には、Webサイトを公開するサーバーの契約や各種設定などが必要ですが、WordPressは対応しているサーバーも多いため、導入が比較的簡単なのも魅力です。(サーバー側で設定画面に従って進めるだけで使えるようになるなど)

さらにさらに!WordPressを使っていくと、「PHP」という言語に触れることになります。

PHPはこの段階で覚える必要はありませんが、CMSを使わず0からWebサイトを作るときに工程や修正の手間の削減に大きく影響を与えるプログラムですので、Webデザイナーであってもコーディングをするならば簡単なものだけでも扱える様になるべきだと私は考えています。

この「PHPに自然と触れる機会があった」という経験は、後々影響してくるはずです。

 

YUU
まずはWordPress(ワードプレス)に慣れて、知識や経験を吸収しながら「Webデザイナー」として必要なスキルを掻い摘んで磨いていくと効率的ですよ

 

WordPressは広く普及しているので、困ったことがあってもネットで検索すれば疑問を解決してくれるサイトがたくさん見つかるのも魅力です。

Webデザイナーが成長するには「自分で問題を解決する力」がとても大切。

実践しながら、わからない所はどんどん調べて進めていきましょう。

 

-お役立ち
-, , , ,

Copyright© Webjo blog , 2020 All Rights Reserved.