「みけ×デザ」(未経験デザイナープロジェクト)

未経験Webデザイナー応援支援サイト

webデザイナーになるには何をどれくらい勉強するべき?

さぁwebデザイナーを目指して勉強するぞー!!と、意気込んだものの何から手を付けたらいいのやら。。。
まずは大きく項目を分けて勉強するべき内容をリストアップしてみました。あくまで「目安」として見てもらえると良いかなと思います。
いや大まかでいいので勉強時間数が知りたい!と思われる方もいらっしゃるかもしれませんが…何度も繰り返し手を動かしたり考えたりしながら覚えるものなので算出が難しいですね。どちらにしろ独学もしくはスクールなどに入るにしても半年から1年くらいは必要かなーと思っています。

未経験からwebデザイナーを目指すための項目リスト

  • webの基礎知識
  • Photoshopなど制作ツールの使い方
  • HTML/CSSを使ったコーディング
  • サイト運用についての知識

移り変わりの早い業界なので最新の内容で勉強することをおすすめします。
特にHTML/CSSを使ったフロントエンドのコーディングは技術がどんどん進化しているので、常にweb制作に関わる情報はインプットしていきたいところですね。

webの基礎知識

webリテラシーといったweb全般に関する標準知識になります。
web制作を行う上で知らない単語も多く出てきたり、調べることも多いのではないでしょうか。不明点が出てくるたびに調べても良いと思いますが、webリテラシーに関する検定もあるようなので基礎の基礎からしっかり学びたい!という方には「web検」のWebリテラシー試験を受けても良いかもしれません。
個人的にですが…資格が大事とも思いませんし、必要以上の内容も詰め込まれてる感じはありますので絶対に必要という気はしていません。
ただweb基礎や広告まわりなどwebデザイナーの枠を超えてwebが好き!という方は受験してみるのもいいかもしれませんね。

web基礎知識の勉強ライン
常にweb業界の情報をインプットし、不明な点は調べる癖をつける。
これは永続的に続ける必要がありwebデザイナーである以上は学び続ける項目となります。

Photoshopなど制作ツールの使い方

webデザイナーを目指す上でPhotoshopの基本操作や出来ること等は把握しておく必要があると思います。
まずはバナートレース、次にページのデザイントレースを行う方法をおすすします。どうしても自分が考える範囲でのデザインを行うとツールの使い方も偏りが出てくるため、参考デザインをトレースすることで「ここはどうやって作るのか」を考えながら制作できるためです。その他にも人物や商品を切り抜いたり、明るさの調整や不要なものの除去など幅広く利用することが多いのでPhotoshopの基本は確実に学んでおきましょう。
その他にも現在ではサイトなどUIデザインをPhotoshop以外で作ることも増えてきました。Adobe XDやsketchといったツールでデザインを行う会社も多いです。AdobeのCreative Cloudのコンプリートプランを利用するとweb制作で利用頻度の高いツールが他にも多く使えるのでおすすめです。

Photoshopなど制作ツールの使い方の勉強ライン
Photoshopではバナーやページのデザイントレース。他にも画像加工がある程度できるようにする。
他に触っておくべきツールとしてはAdobe XDやSketchは制作案件で触る可能性が高い。 他にもロゴや素材を作成するためのIllustratorや画像加工専用のLightroomなどを利用できると尚良いです。

HTML/CSSを使ったコーディング

デザインを作成したらwebブラウザで表示されるようにHTML(ハイパーテキスト マークアップ ランゲージ)を使ってコードを書く必要があります。現在は「HTML5」という5回目の大幅アップデートされたもの、そしてCSSも現在はCSS3です。 この大幅アップデートの際に仕様も大きく変更されますので正しく理解して記述していく必要があります。基本的な内容は変わりませんし、古いマークアップ記述でも表示される事も多いですが新しく学ぶ方は古い参考書などは利用しないようにしましょう。
またHTMLやCSSはサイトを表示するだけではなく、サイトの構造を正しく検索エンジンに伝えるためにも正しいHTMLのマークアップを学ぶことをおすすめします。

HTML/CSSを使ったコーディングの勉強ライン
現代ではモバイルファーストの時代なので、スマホのサイトデザインを作成できること。そしてそのサイトをレスポンシブデザインで作ることができるスキルは必要かと思います。
もっと専門的な部分でいうとGitやNode.jsにCSSプリプロセッサ、タスクランナーなどフロントエンドで必要な知識は他にも多く存在しますが、まずはHTML/CSSを理解してレスポンシブデザインをコーディングできることでが重要です。

サイト運用についての知識

webサイトを公開するためにはサーバーも必要ですし、ドメインも設定しなければなりません。アクセス解析の設定にもGoogleAnalyticsやSearch Consoleの知識も必要になってくるでしょう。今の時代ではSSL対応といったセキュリティの部分もアクセス解析に関わってきたりします。

サイト運用についての知識の勉強ライン
デザインというグラフィック部分だけではなく、web制作者またはwebデザイナーとしてwebを通した一連の流れは経験しておいた方が良いと思います。ポートフォリオサイトでも構いませんので自分ひとりでサイトを公開できる経験を積むことが重要です。

まとめ:環境と勉強方法により時間も変化する

未経験からwebデザイナーを目指すための項目リストを挙げ、大きく4つに分類してみました。
環境というのは独学なのか、スクールに通うのか。1人で悩むより教えてくれる方、ともに学ぶ方がいれば吸収のスピードも早くなる場合もあります。独学では未経験入社は不可能か?言われればNOですが、効率よく全体的に学ぶのであればオンラインスクールや職業訓練校、または専門学校など学ぶ環境に身を置くことが結果的には早いのではないかと考えます。