とにかくTシャツ買え。
とにかくTシャツ買え。
#166
STUDIO by LIG

未経験からWebデザイナーになるには?おすすめ勉強法や必要スキルを紹介

こんにちは! デジタルハリウッドSTUDIO by LIGの運営担当の天(@10TEN10TAN10)です!

デジタルハリウッドSTUDIO by LIGとは
株式会社LIGとデジタルハリウッドが業務提携をしてはじめたクリエイター養成スクールのこと。Webデザイナーや動画クリエイターを目指す方向けのカリキュラムを展開している。現在、上野・池袋・大宮にて受講生を募集中。無料説明会は毎日開催中!

STUDIO by LIG(以下、デジLIG)では、毎日開催してる無料説明会にて、未経験からWebデザイナー目指す方へカリキュラムについてや、デジLIGでの学習方法についてお話しさせていただいています。

説明会にご参加される方は、Webデザインを学ぶ方法を模索しているかたが多数です。通学にするのか、オンラインスクールなのか、はたまた独学で学習できないか……と、いくつかの学習方法を検討されています。そもそも、未経験からWebデザイナーってなれるものなのでしょうか……?

結論からお伝えすると……なれます。

ただし、自分に合う学習環境を整えたり、学ぶために時間を作る必要があったりと、簡単になれるわけではありません。今回のこの記事では、Webデザイナーになるための最短ルートをいくつか紹介するので、自分に合う方法を見つける参考にしてもらえると嬉しいです!

そもそもWebデザイナーってどんなお仕事?

デザイナーというお仕事でも、ファッションデザイナーやグラフィックデザイナーなど〇〇デザイナーという職種は多く存在します。そのなかでもWebデザイナーというお仕事が具体的にどのようなお仕事をしているのでしょう?

Webデザイナーのお仕事とは

Webデザイナーのお仕事は、Webページのデザインやコーディングなどその業務範囲は多岐に渡ります。自社サイトの制作や、クライアント(お客様)から依頼をいただき、問題を解決するためのWebサイトを制作します。IllustratorやPhotoshopといったデザインソフトを使いWebのデザインをしたり、HTMLやCSSといった言語を使いWebのサイト構築をしています。

Web制作の流れ

Webサイトの制作の依頼を受けて、公開に至るまでには下記の工程があります。

  1. 必要な要件を定義する
  2. ワイヤーフレームを作る
  3. デザインを制作する
  4. コーディングする

必要な要件を定義する

サイト制作のなかでももっとも重要といっても過言ではありません。このサイトを作ることで、どのような問題を解決するのか、何を伝えることができるのか、ということをまとめます。

ワイヤーフレームを作る

サイトの要件を元に、サイトの全体の構成を考えます。紙とペンなどを使うかたも多く、ざっくりとサイトの完成図を考えます。

デザインを制作する

PhotoshopやIllustratorを使用し、実際に使用されるWebサイトの全体の見た目を作ります。最近だとXDを使用する人も多いです。その際、パソコンから見えるデザインだけではなく、スマートフォンから見たデザインも考えます。

コーディングする

HTMLにて、文字や画像を記述したり、CSSにてレイアウトを行なったり、JavaScriptで動きをつけるなど、Webサイトを作るための言語を使いコーディングを行います。デザインされたものが、Webサイトとして使えるように構築します。

制作会社と事業会社の違い

制作会社

他の会社から依頼を受け、Webサイトやアプリの制作や、運用を行う会社のことです。ひとつのプロジェクトがおよそ3ヶ月ごとにサイクルし、案件ごとに求められる解決策なども異なりますので、幅広い知識が必要です。大きな会社では分業しているところも多く自分の得意を伸ばしていくことも可能です。

事業会社

Webサービスや、アプリなどを自社で制作・運用を行う会社のことで、自社サービスのため、要件や納期などの調整も可能です。ひとつのサービスを長期的に、サイト運営全体携わることが多いため、クリエイティブに集中できないこともあります。一方で、デザイナーがディレクションを行うなどクリエイティブの周辺業務(マーケティング、開発、デバッグなど)も幅広く行い、視野を広げられるでしょう。

Webデザイナーになるための選択肢

Webデザイナーを目指すためには、いくつかの方法があります。それそれの方法や、メリットデメリットをお話します。

独学

メリット 好きな時間に学習することができる
自分のペースで進められる
デメリット 何が正解かわからない
ゴールが見えない
怠けてしまう

学習方法

書籍や、Web制作に必要なソフトを購入し、付属のチュートリアルを使用したり、ネットで検索しながら学習します。無料で学べるサイトや、最近だとYouTubeなどでも多くの投稿があるため、比較的コストをかげずに学習することが可能です。好きな時間に学習をすすめられます。

デザインスクール・専門学校

メリット 基礎からしっかり学べる
同じ目標の人たちと切磋琢磨できる
デメリット まとまった時間と、お金がかかる
社会人での両立が難しいことが多い

学習方法

社会人向けのスクールも多く、お仕事と両立しながら通うことが可能です。短期集中で3ヶ月で学べるところから、1年かけてじっくり学ぶスクールなど、期間もバラバラなので、学習に使える時間を予め計算し、検討する必要があります。卒業生とのコミュニティや、転職セミナーなどが充実しているところも多いです。

オンラインスクール

メリット お仕事や学校と並行できる
場所を選ばず、好きな時間に学習ができる
デメリット お金がかかる
学習時間が少ない
両立に苦戦することがある

学習方法

動画教材を見ながら、スキルを身に着けます。好きな時間に学習で決まったカリキュラムをこなすことで、効率的に学習を進められることもメリットです。専用のチャットツールで決まった時間にトレーナーさんへ質問ができるスクールもあります。

未経験可の求人に出て現場で学ぶ

メリット 成長できる
業務時間内に学習をすることができる
デメリット 仕事を見つけるのが難しい
勇気がいる

学習方法

社内での研修などを経て、Webデザイナーを目指します。新しい業務を覚えつつ学習も並行して行うため両立が難しいこともありますが、業務時間内に学習をすることができるのもメリットです。

Webデザイナーに求められるスキルとは?

主なスキルを挙げてみました。そのほかにもインタビューがありますので、気になる方はご覧ください。

企画力

いくらきれいなサイトができても問題が解決できなければ意味がありません。お客様の持つ問題をどのような手段で解決させるのか、発想力や企画力も重要です。

デザイン力

Webデザインのトレンドは日々入れ替わります。デザインの基礎知識はもちろん、トレンドを掴む力も必要とされます。

コーディング力

コーディングとは、自分の作ったデザインをWebサイトとして動くようにすることです。エンジニアと協力しながら作業をすすめることも多いため、ある程度理解しておくと良いでしょう。

Webデザイナーを目指すために必要な準備は?

パソコン

Webデザインを行う上で、パソコンは必要不可欠です。現役のWebデザイナーさんにこれからWebデザインの勉強をするにあたって、パソコンの購入を考えている場合、どのような物がいいか伺いました!

Mac? Windows?

業界的にはMacを使用している方が多いです。データのやりとりなどMac同士の方が送る際に手間が省けますが、必ずMacでないといけないというわけではありません。

パソコンのスペックに関して

メモリやストレージは作業効率が大きく変わります。ストレージは、128GBだと少なすぎるので、256GB以上のものがおすすめです。128GBではAdobeのソフトを入れるだけで重くなってしまいますが、512GB程度あると余裕ができます。
メモリは8GBだと少なく、16GB程あればAdobeのソフトなどを開いた時でも、パッと画像が表示されたりと動作にストレスが少ないです。

サイズは?

Mac Bookは15インチがおすすめです。Webデザインは縦に長くなる場合が多く、作業をしていると画面の縦幅が広いパソコンの方が良いなと思うようになることがあります。

PC本体が重いと持ち歩くのがつらくなりそうだと感じる人は、13インチでも良いです。自宅にもサブモニターを置けば、デュアルディスプレイ(2画面)で使用することもできます。サブモニターは1〜2万円程度のものでもひとまずは十分です◎

Windowsの場合の注意点

スペックに注意してください。最低でもCPUはCorei5以上、メモリは8GB以上のものが望ましいです。数字が大きいほど(Corei7など)性能が良くなりますが、その分価格は上がります。大きい方が良いということでもないので、パソコンを選ぶ際は自分が行う作業に対してそこまで高性能である必要があるのかどうかや予算などを踏まえて検討しましょう。

デザインソフト

Photoshop

写真を編集したり合成することができる、画像編集ソフトです。多くのWeb制作会社で使用されており、デザインカンプなどを作る際に使用されます。点の集まりでできた「ビットマップ」データを扱うソフトです。

Illustrator

Webサイトに使用されるボタンなどを制作したり、パーツ作りなどに使用されます。画像を拡大・縮小しても画質が劣化しない「ベクター」データを扱うソフトです。

Dreamweaver

PhotoshopやIllustratorを提供する、Adobe社によるあらゆるテキストファイルを作成・編集するためのテキストエディタです。HTMLやCSSなどを組み合わせ自由にデザインができます。

Dreamweaver以外にも無料で使えるものなどもあるので、自分に合うテキストエディタを見つけましょう。

気になる働き方とは?

Webデザイナーとしての働き方はさまざまです。制作会社や事業会社で働く人もいれば、派遣やフリーランスとして働く方もいらっしゃいます。それぞれの働き方について解説します。

会社員

Web制作のさまざまな経験を積みながら、安定した収入を見込むことができます。また、会社によっては下記のような働き方も可能になるでしょう。

リモートワーク

現在ではフルリモートで働ける企業も増えました。パソコンひとつでどこでも働けることが、このお仕事のメリットのひとつです。

フレックス制

出社や退社の時間を柔軟に調整できるフレックスタイム制です。フレックスタイム制では、1日の労働時間が決まっており、そのなかで「フレキシブルタイム」と「コアタイム」がありrます。コアタイムとは必ず勤務しないといけない時間、フレキシブルタイムとはその時間帯のなかであれば、いつでも出社・退社してもよい時間のことです。24時間いつでもお仕事をしてもいいというわけではありませんが、時間を調整できることは大きなメリットです。

フリーランス

自由な時間・場所・服装で働けるため、縛られないのが最大の特徴です。働いた分だけ、収入があるというのがメリットでもあり、デメリットともいえます。

また、週に何度か契約した企業さんへ常駐したり、スクールのトレーナーを並行したりと、一言にフリーランスといっても、多様な働き方があります。

ただしデザインだけではなく、営業はもちろん、確定申告などの事務処理も自分で行う必要があります。

派遣

働き方が選びやすく、残業などの面で規定にも守られやすい働き方です。相談先として派遣会社がいる安心感もあります。専門職のため、時給が高いところも多いですが、ボーナスや交通費が出ないこところが多いです。また、有期雇用のため、相手先企業の都合による契約終了ということも起こりえます。

現在の転職市場とは?

ITの業界は変化が激しく、ここ10年で誰もがスマートフォンを使い、インターネットを使用する日常が当たり前になりました。そのような変化に伴い、Webサイトのレスポンシブ対応などといった、新しい技術が求められるようになりました。またバード決済などのサービスも広がり、IT技術を使ったビジネスが大幅に増えたことで、Webデザイナーのニーズが高まっています。

年収はどのくらい?

Webデザイナーの仕事の平均年収は最新の情報で、約447万円とされています。

地域別で比較するともっとも平均額が高いのが東海で、そのなかでも岐阜県が一番高い結果になっています。パソコンがあればどこでも仕事ができる職種でもあるため、地方にいながら東京などのお仕事をしている人も多いです。

参考:求人ボックス

年齢制限は?

Webデザイナーになるのに年齢制限はありません。Webデザイナーは技能職であるため、それぞれの会社に求められるスキルがあれば、年齢でも就職・転職は可能です。ただし、正社員や派遣社員として未経験からの採用は30代を超えてくると難しくなるとは言われています……。

Webだけの知識ではなく、これまでの経験をアピールする必要があります。

Webデザインの業界は他と比べて転職回数が多い業界ともいわれています。デザインだけではなく、ディレクションなどのより幅広い知識を持ち、転職に挑みましょう。

キャリアパス

Webデザイナーという職業ができてから、実はまだ20年程度しか経過していないということもあり、まだまだこれから! といっても過言ではありません。データが少ないのが現状ですが、Webデザイナーのキャリアパスとしては、フリーランスになる、会社員として続ける2パターンが多いです。

最近ではフリーランスという言葉をよく耳にするようになりましたが、これまでの経験を活かしながら個人で活動の幅を広げる方もいらっしゃいます。

また、会社員の場合、デザインだけではなくディレクションなどの幅広い領域を見るようになっていきます。もちろん会社としても立場が上がって行くため、1人だけではなく自分のチームを持つなどリーダーやマネージャーとしての活躍も期待されます。

実際のところどうなんだろう?インタビューをしてみました。

デザイナーとして活動をしている人たちが、デザインを習得した方法はバラバラです。私の運営しているデジLIGでは、現在現役デザイナーとして会社員やフリーランスとして活躍しているかたにトレーナーとしてご協力いただいております。また、LIGのなかでもたくさんのデザイナーさんにお世話になっています。みなさんの学んだ方法は、独学、スクール、直接業界に飛び込んだ……など、人によってばらばらです。

せっかくなので、普段関わることの多いデザイナーさんから、それぞれの学習方法でデザイナーになるポイントや経験談を伺いました!

独学派

デジLIG 中里トレーナー

ico学習に費用がかからない点と、Webに関する知識や技術だけではなく検索力や自己解決能力が身につくという点がメリットでした。

逆にデメリットと感じたのは最短での学習方法や、行き詰まったときの解決策などを教えてくれる人がいないというところでしょうか。

現在は情報が多い時代なので当てはまるか分かりませんが、僕が学習していた時代はそれほど情報が多くなかったため、学習にとにかく時間がかかりました。また同じタイミングで学習する仲間もできないので、同じレベルの方と情報交換をすることも難しかったですね。

LIGデザイナー おまめ

ico大変なことも合ったけど自分には合っていました! 

独学は、自分の好きなものを作るために頑張っているので、最短で好きなものが作れるようになりますね。やりたいときに進められるのもメリットです。でも他の人がみんな独学が正解なわけじゃないと思います。就職支援などがないので自分に合う会社がわからないので、遠回りしてしまう可能性があります。背中を押してくれる仲間がいないのでモチベーションの維持には工夫が必要です。

スクール派

デジLIG 相原トレーナー

icoスクールでの学習は、なんといっても講師であるトレーナー陣からフィードバックをもらえることです!

初学者でつまずくのは、自分の作ったものが本当に良いものになっているかがわからないというところ。トレーナーさんからたくさんフィードバックをもらうことが、上達の近道です! 

デメリットはまとまったお金が必要なこと。でも、経験や時間を「買う」と考えたら、決して高くないと思います。

デジLIG 石上トレーナー

ico自分のサイトを形にできることが何より嬉しかったです。動画教材で無理なくステップアップしていけるので、モチベーションを保ったまま学習を続けられました。

また、現役のWebデザイナーの方々からお話を聞けるので、働き方のイメージも持てました。そこから繋がりができて、卒業後に講師の方とお仕事をすることもあります。

キツかったのは、学費が高いこと。最高の施設・環境が揃っているので、そのぶんしっかり元を取って欲しいと思います……!

飛び込み派

LIGデザイナー まいまい

icoWebデザイナーになるにあたって、未経験可の求人に出て現場で学ぶことは、webデザイナーになる1番の近道だと思っています! 私はインターンから企業に飛び込んで働きながら学びました。

もちろんわからないことだらけで最初は辛い時期もあるかもしれませんが、自分のペースではなく、現場のペースで勉強+仕事をしなければならないので、グングン成長を感じることができます。また、本や座学では学べないことも吸収できます。

なにより、身近に最前線で働く先輩webデザイナーがいることは、とっても刺激にもなります!

私は幸運なことにすごく素敵な環境で学ぶことができました。しかし場所によっては、インターン生に任せるのは雑用ばかりで、まったくWebデザイナーとして成長できない環境になってしまう場合などもあります。環境選びにはかなり注意が必要だと思います……!

まずは独学で学習をはじめてみよう!

興味はある。でも本当に自分に合っているのかわからない……。というそこのあなたへ、まずは独学で学習を初めてみてはどうでしょう?

私がよく受講生さんにおすすめしている方法や、サイト、本などを詳細します!

おすすめの学習方法

いろんなデザインに触れる

まずは気軽にデザインに触れてみましょう。この後に紹介させていただきますが、おしゃれなWebサイトがまとめられたサイトや、デザインを学ぶ書籍は数え切れないほどあります。自分の見たい用途に合ったサイトまとめ集や、読み進めやすい本を見つけてみてください。

また街にもデザインは溢れています。ポスターや看板、フリーペーパーなどを見て、なぜそのフォントなのか、配食なのか考えてみるだけでもデザイン力を磨いていくことが可能です。

SNSの活用

良いデザインを発信している人をフォローし、毎日最新のデザイン情報を収集しましょう。

自身の学びを発信すると同じ目標に向かう人と出会うきっかけにもなります。「#Webデザイン勉強中」などのハッシュタクで、一緒に頑張る仲間と出会うこともあります。

うまくいけば、知り合ったデザイナーさんに自分の作品のレビューをいただくというような機会もありますので、ぜひ積極的に活用していきましょう。

バナートレース・サイトトレース

Webを勉強していると、バナートレースやサイトトレースという言葉がでてきます。トレース→真似をしてみよう! といものです。

ただトレースをするだけでも、IllustratorやPhotoshopの使い方の勉強にはなりますが、それだけではもったいないです。

例えば制限時間を決めて、決まった時間内にどこまで作り込めるかに挑戦してみたり、なぜ、その色なのか、その写真なのか、分析しながらトレースを行いましょう。またその考察などを、記録していくことをおすすめします。

おすすめのサイト

1guu.jp(イチグウ)

アクセスすると、さまざまなサイトのトップベージが表示され、視覚的に目に止まったものを見ていくのも良いのですが、両サイドにあるバーより国別、業種別に見ることができるのが便利です。

I/O 3000

国内外問わず、Webデザインの参考になるサイトがまとめられており、デザインのトレンドを掴むのにおすすめです。カテゴリー別、色別にも調べることが可能です。

Pinterest

画像のストックなら、多くのデザイナーさんがPinterestを活用しています! 気になるデザインを気がるにピン📌(保存)することができ、ボード(フォルダ)で整理整頓できるので、後で見返すときもわかりやすいです。

LIGのPinterestもありますよ◎

https://www.pinterest.jp/

おすすめの書籍

ノンデザイナーズ・デザインブック


20年間愛されている本です。元々は海外の本を和訳しているものなので人によっては難しいと思われるかもしれないですが、デザインを勉強するなら一度は読んだ方がいい本といえます。

レイアウトやフォントのお話しなど、デザインの基礎を押さえられる1冊です。

 
なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

こちらも長らく愛されているデザイン本です。どちらかというと読んでインプットするというより、自分が作ったデザインがこれに出てくる悪いデザインになっていないかの比較するための本として使った方が効果的です。

写真や図が多く、楽しく、次々にページが進みます。

 
ソシム株式会社さんの本
3冊一気にご紹介します。




それぞれのテーマに沿ったデザインサンプルが、左側にNGのデザイン、右側にOKデザインが見開きで紹介されています。いまいちさんの苦悩の声と、いまいちさんの悩みにたいする、しゅっと先輩によるアドバイスにもほっこりします。たくさんのフツーのデザインとおしゃれなデザインを比較できるのもこの本の魅力です。

いかがでしたか?

リモートワークや在宅ワークが増えて来たなかで、自分の働き方を考え直したり、手に職をつけたい! と考える方は増えたと思います。しかし、新しいことに挑戦するのって勇気が入りますよね。そんなときに役立てていただきたいWebデザイナーとしてのお仕事についてや働き方を今回ご紹介しました。

Webデザイナーになるための方法はたくさんありますが、自分に合う方法を見つけることが習得への最短ルートだと思います!

天でした◎

働きながら。授業の合間に。Webデザインを勉強するなら……デジタルハリウッドSTUDIO by LIG

M o n g o