今回は「最短でWebデザイナーを目指したい！」という方に向けて、効率的な勉強法をお伝えします。
と思っている方はぜひ参考にしてみてくださいね。
Webデザイナーに必要なスキル
まずは、Webデザイナーになるためにどんなスキルが必要なのかを把握しておきましょう。
Webデザイナーに必要なスキル
- WEBに関する知識
- Illustrator
- Photoshop
- HTML5 / CSS3
- JavaScript
Webデザイナーはどれぐらいコーディングができればいいか
未経験からWebデザイナーを目指す方にとって大きな壁になるのが、コーディングです。
「コーディングがどうしても苦手で、Webdデザイナーになるのを諦めた…」
という方も少なくありません。
結論から言うと、Webデザイナーに最低限のコーディングの知識とスキルは必要です。 コーディングの知識が全くの０だと、Webデザイナーをしていく上で少し困る場面があるかもしれません。
どういうことか、具体的に説明していきますね。
一口にWebデザイナーといっても、その担当範囲は会社によって異なっています。例えば、以下のようなケースです。
- HTMLやCSSだけの簡易なWebサイトの場合は、デザインからコーディングまでWebデザイナーが行う
- Webデザイナーとコーダーは完全分業で、Webデザイナーは一切コーディングをしない
- Webデザインだけを自社で行い、コーディングは外注している
コーディングは奥が深く、突き詰めようと思えばかなり幅広い知識が必要になります。HTMLとCSSをベースに、アニメーションなどの動きをつけるならJavaScript、ショッピングカートなどの機能を実装するならPHPなども学ばなくてはなりません。
▼Webデザイナーの今後について知りたい方はこの記事をチェック▼
そのため、Webデザイナーはコーディングを担当しないという場合も多いのです。
だからと言ってWebデザイナーはコーディングの知識がなくてもいいわけではありません。
コーディングの知識が全くないと、このデザインはコーディングで実装できるのか、どれぐらいの手間や工数がかかるのかといった判断ができないからです。つまり、Webデザイナーも最低限のコーディングの知識とスキルは必須といえます。
▼Web系お仕事をする前にはこちらの動画をチェック▼
▼関連記事▼
Illustrator
Illustratorは、拡大縮小しても劣化しないベクター形式のデータを作ることができるデザインソフトです。
Webサイト制作の現場では、サイトを作るのに必要なロゴやアイコンなどのパーツを作成したり、カンプ（Webサイトの完成例）を作成したりするときに使います。
Illustratorは次の３ステップで勉強するのがおすすめです。
- 本で基礎を学ぶ。
- 動画でテクニックを学ぶ。
- トレースする。
まずは、１冊本を使って勉強しましょう。
おすすめは「世界一わかりやすい Illustrator 操作とデザインの教科書」という本です。
Illustratorにはいろんな便利機能やツールがあり、最初はできることが多すぎて戸惑ってしまうかもしれません。まずは本を読みながら順を追って基本的なツールの使い方や操作方法をマスターしていきましょう。
それが済んだら次のステップです。
Adobeが出しているチュートリアル動画やYouTubeの動画を利用して、実戦で使えるテクニックやショートカットなどを習得していきます。
Adobeのチュートリアルは１本が5分〜10分ほどなので、スキマ時間でも進めることができます。
【Adobe】 Illustratorのチュートリアルを見る最後のステップは、トレースです。
プロが作ったデザインは形や配置、配色など全てが計算し尽くされています。それらをトレース（模写）することで、デザイン力を鍛えることができます。
Pinterestなどでトレースするバナーを探し、配置やサイズ、余白などを意識しながら徹底的にマネしてみましょう。フォントもできる限り近いものを探してみてください。
トレースし終わったら、このデザインがなぜいいと思ったのかを言語化してみたり、気づいたことをまとめておくとさらに力がつきますよ。
▼Illustratorをもっと学びたい方はこの動画をチェック▼
▼オンライン動画でイラレを学びたい方はRirian School.をチェック▼
Photoshop
Photoshopは画像の編集に使われるソフトです。
写真のトーンや色味を統一したり、画像の合成をしたりとWebサイト制作には欠かせないソフトです。
Photoshopの勉強法は、Illustratorの場合とほぼ同様の３ステップです。
- 本で基礎を学ぶ。
- 動画でテクニックを学ぶ。
- トレースする。
おすすめの本は、「Photoshopしっかり入門 増補 改訂版」です。
本で基礎を学んだら、次はAdobeのチュートリアル動画 をみましょう。特に、画像の切り抜きや合成などはよく使う技術なので、しっかり学びましょう。
最後は、トレースのステップです。お手本となるものを探して、それをできる限り再現してみましょう。全く同じになる必要はありません。Photoshopの機能を使って、どれだけイメージ通りのものをアウトプットできるか確認してみましょう。
その中で今自分に足りていない部分が洗い出されるはずです。本で再度復習したり、ネットで調べてたりするなどして足りない部分を補完していきましょう。
▼Photoshopをもっと学びたい方はこの動画をチェック▼
HTML5 / CSS3
Webサイト制作を行う上で必要なのが、HTMLとCSSです。
簡単にいうと、HTMLで文書構造を作り、CSSで文字色や背景色を変えるなどの飾りつけをします。
どんなサイトでもいいので、Webページの上で右クリックして「検証」を押してみてください。そこに書かれているのがHTMLとCSSです。
「英語ばかり並んでいて意味が分からない！」と思われるかもしれませんが、最初は分からなくて大丈夫です。苦手意識を持ちすぎず、まずはチャレンジしてみましょう。
勉強法
- 本＋progate または テックキャンプを受講。
おすすめの勉強方法を２つご紹介します。
まず１つ目の勉強方法が、本＋オンライン学習サービスのハイブリッドです。
HTMLやCSSの本で最も人気がある「１冊ですべて身につくHTML &CSSとWebデザイン入門講座」という本を使います。
知識０の状態からスタートする人でもわかりやすいように書かれているので、まずは最初にこの１冊を読んでみるのがおすすめです。
HTMLやCSSとは何かといった初歩的なところから、最新の技術まで体系的に学ぶことができるのが魅力です。
しかし、本だけだと手を動かす量がまだまだ足りません。そこで、本と合わせてprogateなどの学習サービスを進めていきましょう。
オンラインで学べる学習サービスはさまざまありますが、progateをおすすめするのは以下の理由です。
progateのおすすめポイント
- ブラウザ上でコードを書くとすぐに結果が反映される
- 必要なレッスンを最適な順番で学ぶことができる
- スライドで学ぶ→実践を繰り返すため、自然と手が動くようになる
- 無料体験ができるので、自分に合うかどうか試すことができる
- 有料プランは月額1078円で、コスパも◎
スライドがとてもわかりやすく知識がスッと頭に入ってきますし、実際の案件に近いページをどんどん手を動かしながら打っていくのでスキルの習得を効率よく行うことができます。
progate公式サイト２つ目の勉強方法が、テックアカデミーなどのオンライン講座です。
こちらは、「ひとりでHTMLやCSSを学ぶのは不安…」「デザインだけでなく、コーディングもガッツリできるようになりたい」という方におすすめの方法です。
テックアカデミーで学習するメリット
- 講師全員が現役エンジニア
- 週二回のメンタリング
- チャットサポート
思いたった時が、始め時です。
エンジニア、Webデザイナー等になりたい方はぜひスクールに申し込んでみてください。
mikimiki webスクールを運営している、デザインオフィスRirianも新しい働き方を目指す方に、
様々なコースをご提供しています。ぜひチェックしてください♪
JavaScript
Webサイトを見ていると画像が自動的にスライドして流れたり、アニメーションがついていたりしますが、こういった動きのあるサイトを作るにはJavaScript の知識が必要です。
HTML・CSSを習得していることが前提になるので、まずはHTML・CSSを学び、その後にJavaScripを学ぶという順番で勉強していきましょう。
JavaScripのおすすめの勉強法は、以下の２ステップです。
- progateを１周する。
- ドットインストールで数をこなす。
まずは、progateを１周します。progateはプログラミングの最初のハードルを徹底的に低くするように作られているので、JavaScriptの入門として最適です。
Progateで基礎を学んだら、次はドットインストールというオンライン学習サービスを使って数をこなしていきましょう。
３分ほどの動画で学べるのでテンポ良く進めることができますし、動画なので途中で止めたり繰り返し見ることができるのも嬉しいポイントです。
ドットインストールで全ての機能を使うには、月額1080円がかかりますが、自己投資だと考えて活用しましょう。
ドットインストール公式サイトまとめ
今回は、Webデザインの効率的な勉強方法をご紹介しました。
Webデザインは学ぶことが多く大変に思うかもしれませんが、継続していけば必ずスキルを習得することができます。
一緒に楽しくWebデザインについて学んでいきましょう！
