WEBデザイナーってどんな仕事?必要なスキルや仕事の流れ【初心者向け】

就活・転職・資格

最近インターンシップ担当になり、「WEBデザイナーってどんなことをするんですか?」と学生さんからよく質問を受けるようになりました。

なので、WEB制作会社と企業の社内デザイナー(インハウスデザイナー)の両方で働いた経験を元に、WEBデザイナーの仕事内容をまとめてみました。
これからWEBデザイナーになりたい方や、興味がある方は参考にしてみてください。

WEBデザイナーの仕事とは

まず、WEBデザイナーと言えば・・・
「WEBサイトを作る」人ですよね。

この「WEBサイトを作る」仕事ですが、ざっくり2つの内容に分けることができます。

それが「デザイン」「コーディング」です。

たとえば新しく作るWEBサイトを、お城だと思ってください。

外観や内装のイメージ画を描き、間取りなどの設計図を書くまでがWEBデザイン。

そして完成した設計図通りに城を建てる大工さんの仕事が、コーディングです。

※正確に言うと、WEBデザインだけをするデザイナーさんや、デザインをせずコーディングだけをするコーダーさんもいますが、この記事では「WEBデザイナー=デザインとコーディング両方をする人」として説明しています。

WEBデザイナーに必要なスキル

では、WEBデザインとコーディングに必要なのはどんなスキルでしょうか?

グラフィックソフトを使えるようになろう

まずWEBサイトのデザインをするときは、AdobeのPhotoshopやIllustrator、XDなどのグラフィックソフトを使って、パソコン上でデザインカンプ(実際のWEBサイトのようには動かない、見た目だけのデザイン画)を作ります。

そのため、まずグラフィックソフトを使えないと仕事になりません。

ソフトをさわったことがない人は、Adobeの無料体験アカデミック版などで安く利用して、WEB用の画像やパーツを実際に作り、基本操作(※)を覚えておきましょう。

※仕事で使っているうちにソフトを素早く操作できるようになるので、機能の隅々まで覚える必要はないです。

Adobeじゃなくて無料のソフトを使うのはダメ?

独学でWEBデザイナーを目指しているけど、Adobeソフトは高いからフリーのソフトを使っている学生さんから、

Photoshopを使えないとダメですか?

と聞かれたことがあります。

練習サイトを作ったり、個人でブログサイトなどを運営する場合は、フリーソフトでも問題ありません。

ただ、デザイナーとして正式に働く場合は、Adobeソフトは必須です。
というのも、WEB制作の現場ではデザイナー達は皆Adobeソフトを使っているからです。

会社に保存されている過去のデザインデータを修正したり、同僚デザイナーと作業を分担したり、外部の協力会社にデータを渡したり、お客さんにデザインデータを納品したり…。
このような状況だと、同じAdobeソフトを使うしかありません。

なので、WEBデザイナーを目指す人はAdobeのグラフィックソフトに慣れておくことをオススメします。

デザインセンスって必要?

また、ソフトの操作方法は覚えても、「デザインに自信がない…」「自分にデザインセンスないし…」と思うかもしれません。

私も「自分のデザイン全然ダメ!」と落ち込むことがありますが、そんな時は過去に先輩デザイナーに言われた言葉を思い出します。

それは・・・

俺もデザインに自信ないけど、自分の中にデザインの引き出しをたくさん作っておけばなんとかなる

です。

デザインセンスが全く必要ないとは言えない業界ですが、それ以上に大事なのは、とにかく作って上達すること。

「この広告オシャレだな」「このWEBサイトかっこいいな」と思ったら、レイアウトや配色、動きなど、良いなと思ったところを参考にして、作って、自分の表現の幅をどんどん広げていくのが大切です。




HTMLとCSS言語が扱えるようになろう

デザインができれば、次はコーディングです。
コーディングで最低限必要なのは、HTMLとCSSという言語が使えることです。

普段みなさんは、ChromeやIE、Edge、SafariやFirefoxなどのインターネットブラウザを開いて、ネットサーフィンをしていますよね。

そして訪れているWEBサイトは、実は下記のようなテキストデータで形作られています。

このようなコードを「テキストエディター」と呼ばれるソフトで書き、ブラウザ上にテキストや画像を表示させたり、色などの装飾をつけたりするのがコーディングです。

また、WEBデザイナーはHTMLやCSSだけでなく、サイトに動きをつけるJavaScript、jQueryなども使いますが、ネットで調べれば先輩達の書いたコードがたくさん出てくるので、一から書けなくても大丈夫です。

実際にデザイナーとして働いている人達も、

サイトにこんな動きをつけたいけど、どう書けばいいんだろう

↓ネット検索で探す

あっ、なるほど、こう書けばいいのか〜。参考にしよ!

という感じで、ネット検索をフル活用して日々調べながら制作しています。

わからないことがあったら調べて、使って、必要に応じて少しずつ覚えていきましょう。

コーディングもAdobeソフトを使うべき?


HTMLやCSSファイルを作るときは、テキストエディターと呼ばれるソフトを使います。

テキストエディターにも有料と無料のソフトがあり、Adobeからも「Dreamweaver」という有料ソフトが出ています。
ならエディターもAdobeのソフトを使った方がいいかと言うと・・・無料ソフトで問題ありません。

実際私も、WEB制作会社にいた時はDreamweaverを使っていましたが、インハウスデザイナーとして働いている現在は、フリーソフトの「Atom」を使っています。

デザインで使うPhotoshopやIllustratorは、ファイルの保存形式が.psdや.aiなど独自の形式になるので、他のデザインソフトで開いて編集することができませんが、HTMLファイルやCSSはどのエディターで作っても基本一緒なので、例えばAtomで作ったHTMLファイルがDreamweaverで編集できない、なんてことは起きません。

なので、無料でも有料でもいいので、自分が使いやすいと思ったエディターを使ってください。

ちなみに私のオススメはAtomです。

  • 無料だけど便利な機能が多い
  • 画面が見やすく、メニューも日本語に変更可能
  • WindowsでもMacでも使える
  • 利用者が多いので、不具合などがあってもネットで調べれば解決できる

などの良さがあります。

デザインやコーディングはどうやって学ぶの?

デザインもコーディングも、実際にサイトを作ってインプットとアウトプットを繰り返さないと上達しません。

ドットインストールProgateなど、無料でHTMLやCSSをある程度学べるサイトから、有料でがっつり教えてくれるWebスクールや参考書まで、学ぶ手段は世の中にたくさんあります。
まずは自分にあった勉強法を見つけましょう。

たとえば私の場合、無料のサイトや動画での独学ではいまいち手につかなかったので、参考書を一冊買って本の通りにサイトを1つ作った後は、初心者歓迎のWEB制作会社に転職して実地で学びました。(DTPデザイナーだったので、Adobeソフトは元々使えました)

ただ私がうまくいった方法でも、他の人に向いているとは限りません。

実際知り合いのデザイナーには「本じゃすぐ飽きるから動画で学ぶ方が好き」と言う人もいますし、初心者歓迎のWEB制作会社の中にはブラック会社も混じっています。(ブラック会社だと思ったら、心身を病む前にスパッと辞めましょう!)

職歴や転職回数より「実際に作ったサイト」が評価される、実績ありきの世界なので、資格が必要かな?など迷う前に自分に一番適している勉強法を見つけて、手を動かしてみることをオススメします。




実際の仕事例

最後に、WEBデザイナーの仕事内容と仕事の流れをご紹介します。
ざっくり箇条書きすると下記のような感じです。

  • WEBページの新規作成(デザイン&コーディング)
  • 既に公開されているWEBページのメンテナンス(更新作業)
  • WEB掲載用の画像の加工、合成
  • 広告用バナーの作成
  • HTMLメールの作成 など

仕事内容は所属する会社や担当案件によるので、バナーやHTMLメールの作成はしない場合もあります。

ただ、グラフィックソフトに触ったことのない未経験の人の最初の仕事として、バナー制作をすることはよくある印象です。

また、スキルがあれば動画の作成やプログラムの分野に携わることも。
アプリも作る会社であれば、アプリ開発のお手伝いに入ることもありますね。

仕事の流れ&一緒に仕事をする人達

また、WEBデザイナーは一人だけで仕事を進めることはありません。

  • クライアント(お客さん)
  • ディレクター/営業/プランナーなど、案件のリーダー的立場の人
  • WEBプログラマー
  • WEBマーケター/広告運用担当者

など、意外と多くの人達と協力しながらサイトを作っていきます。

持っているスキルや周りの環境によって、WEBデザイナーの仕事内容や進め方は変わってきますが、私の仕事の流れは下記のような感じですね。

チームリーダー
案件リーダー

①サイト制作依頼者(クライアント)からヒアリング※
※WEBデザイナーもヒアリングに同行することがあります。
②WEBデザイナーへサイト制作の依頼

↓↓大体ここからデザイナーの仕事↓↓

WEBデザイナー
デザイナー
③サイト構成を考える(ワイヤー作成)
④デザインカンプを作成
⑤クライアントにデザイン案を提出⇒確認⇒修正⇒デザイン決定
⑥コーディング
⑦デモサイト(本番同様実際に動くサイト)を公開
⑧社内確認⇒クライアント確認⇒修正
⑨クライアント最終確認
⑩公開または納品

インハウスデザイナーの場合、クライアントは外部のお客様ではなく、同じ社内の人(経営陣や他部署など)になります。

また、独立してフリーとして活躍しているデザイナーの中には、お客さんのヒアリングから公開後のサイト運用まで幅広くこなす人もいますが、最初から何でもかんでも任されることはないので、上記のような仕事の流れをイメージしていただければ問題ないと思います。

最後に

WEBデザイナーとして働くためのスキルは、一朝一夕では身につけられません。
就活が成功するのに時間がかかる場合もあるので、気軽に転職を進められるものではないです。

ですが一度手に職を持てれば、在宅勤務などの柔軟な働き方や、子育てや介護の後の復帰も望みやすい職種だと思います。

あと他の職種より、転職回数が多くてもサイト制作の能力があれば気にされにくい職種でもあります。
(実際私は20代のとき3回転職しました)

きつい仕事もありますし、家族の支えがないと続けられなかった時期もありますが、私はWEBデザイナーになれて良かった!と思っています。
ですので、この記事を読んで興味を持ったり、参考にしてくれる人がいたら嬉しいなと思います。