Webデザイナーになるために必要なスキルとWeb制作会社で働くなら知っておきたい5つの職業

Web制作会社で働く人たちの職種と必要なスキルについて紹介していきます。
Thanks to our advertisers


僕はWebデザイナーになりたくて専門学校に通い、Webデザインのスキルを磨きながらWebデザイナーがどんな仕事をするのかを学んできました。

でも通う前まで、そもそもWeb制作会社で1つのWebサイトを制作するのに、どんな手順を踏んでいるのかさえ知りませんでした。

これは専門分野を学んでいないとなかなかわからない部分だと思います。

もしWebデザイナーを目指すのなら、Webデザインを勉強する前にWeb制作全体について知る必要があります。

僕がWebデザインの専門学校で学みながら見てきた、Webデザイナーになるために本当に必要なスキルをご紹介していきます。

Thanks to our advertisers

Webサイト制作に必要な5つの職業。

サイトを作るのはWebデザイナーだけではありません。

Web制作会社では、一つのサイトを作るのに大きく分けて5つの職種があります。

1)Webデザイナー

Webデザイナーのイラストです。

インターネット上のウェブサイトのデザインを行うデザイナーのことである。どちらかと言えばビジュアルな要素の設計を担当するが、近年では画像素材の制作からCSSコーディングまで、その作業範囲が広がっており、分業化が進むにつれて「ウェブデザイナー」と扱うことを疑問視する声もある。
Wikipedia

Webデザイナーは主にサイトの見た目・デザインを担当して、サイトを”見える化”します。

よく「絵が上手い人はデザインも上手い」と勘違いされますが、まったくそうではありません。「デザインが苦手」という人でも、デザインにおいて最も大切な相手に伝えることを意識すれば、どんなWebサイトでもデザインすることができます。

最近はデザインを担当するだけでなくコーディングを任されたりと仕事の幅が広がっている職業です。

必要なスキル

  • グラフィックツールが使える(Photoshop・Illustratorなど)
  • 基本的なHTML&CSSの知識がある
  • コミュニケーション能力
後ほどWebデザイナーに必要なスキルについて詳しく説明していきます。

2)HTMLコーダー/フロントエンドエンジニア

Webコーダーのイラストです。

HTMLコーダーとは、分業化されたウェブサイトの制作過程において、HTMLおよびCSSを使用してウェブページを作成する作業を行なう者の呼称である。
Wikipedia

コーダーはWebデザイナーが作ったデザインをサイトで表示できるようにコーディングします。

WebサイトをHTMLとCSS化することをコーディングやマークッアプと言います。

HTMLとCSSがメインですが、アニメーションなどに使うJavaScript・JQueryを含めてフロントエンドエンジニア・マークアップエンジニアと呼ばれることもあります。

サイトを見る人の環境(OS・ブラウザ)によって表示のされ方が違うサイトを統一させる能力が求められるので、高いHTMLとCSSの知識が求められます。

必要なスキル

  • HTML&CSS
  • Javascript・JQuery
  • コミュニケーション能力

3)Webプログラマー

Webプログラマーのイラストです。

Webプログラミング(ウェブプログラミング)とは、World Wide Webで使われるウェブアプリケーションのプログラミング、Webソフトウェア開発を行うことである。また、この作業を行う人間をWebプログラマ、Webエンジニア、Web開発者、Webディベロッパーと呼ぶ。
Wikipedia

Webプログラマーは主にプログラミング言語を使ってWebサイトを”開発”する人です。

コーダーはHTMLやCSSを使うのに対して、JavaScriptやJQuery、Jaca、Ruby、Perlといった言語を使い、目に見えないシステム系を担当します。

プログラマーとして働くためには、豊富なプログラム知識と経験が要求されることが多いです。

なので一度フロントエンドエンジニアとして就職して、会社でプログラム知識を勉強してプログラマーになるという人が多くいます。

必要なスキル

  • HTML&CSS
  • Perl、Java、PHP(開発経験が必要)
  • Javascript・JQuery
  • コミュニケーション能力

4)ライター・コピーライター

Webライターのイラストです。

コピーライター (copywriter) とは、商品や企業を宣伝するため、新聞・雑誌・ポスターなどのグラフィック広告、テレビCM、ラジオCM、ウェブサイトやバナー広告などに使用する文言(コピー)を書くことを職業とする人のこと。
Wikipedia

Webライターとも呼ばれていて、主にサイト内のコンテンツ記事(ニュースサイト・商品説明)を書いていくので、文章力と構成力が求められます。

またSEO(検索エンジン最適化)を意識した書き方も求められるので、SEOの知識も必要になります。

最近はサイト内に限らず、CMやポスターなどにも使われるキャッチコピー「そうだ、京都、行こう。」「やさしく触れていいですか?(エリエール)」などを考えたりと、仕事の幅が広がっています。

必要なスキル

  • HTML&CSS
  • 文章力・構成力
  • SEO知識
  • コミュニケーション力

5)ディレクター

Webディレクターのイラストです。

制作物の作品としての質に責任を持つ者のこと。その責務を全うするために、企画・立案・制作に関与して業務全般をつかさどる場合もある。この場合は「ディレクター職の者がプランナー職・プロデューサー職も兼任することが多い」と言うこともできる。ディレクター本来の担当範囲は企画・制作に及ぶものではない。制作物の経済的責任を持つプロデューサーと対をなすポジション。
Wikipedia

プロジェクトマネージャーとも呼ばれるWebサイト制作の責任者です。

コンテンツやデザイン、システムを企画書通りに進めるよう各職業(Webデザイナー・コーダー・プログラマーなど)へ指示し、スケジュール管理などを行います。

お客さんとの間に立つ立場なので、改善して欲しいところや厳しい指摘などを受けることもあります。

ディレクターもプログラマーと同じように経験が必要とされるため、様々な業種を経験してからディレクターになるという人が多くいます。

必要なスキル

  • HTML&CSS
  • Perl、Java、PHP(開発経験が必要)
  • Javascript・JQuery
  • コミュニケーション能力

Webデザイナーに限らず、求められているのはコミュニケーション能力。

コミュニケーション能力が求められます。

どの職業にも共通して必要なスキルにコミュニケーション能力が含まれていますが、これはWeb業界に限らず、今の企業が採用時に最も重要視する点なんです。

Web制作は1つのサイトを複数の職業がチームとなって作り上げます。

スケジュール通り進んでいるのか、納期までに間に合うのか共有する力がないと、チーム全体が機能しなくなります。

どれだけ綺麗なイラストが描けてデザインができる人でも、コミュニケーション能力がないとデザイナーとして採用されません。

自分が作ったデザインのコンセプトを人に伝える力を持って、はじめてデザイナーといえるでしょう。

Webデザイナーの仕事内容。

wordpressにはたくさんの種類のテーマがあります。

パソコン・スマホが普及して誰もがネットで検索するようになってから、Webデザイナーという職業は一般的にも知られるようになりました。

なんとなく「Webデザイナーはサイトを作る人全般を指す」という認識をされていますが、先ほどの項目で実際には大きく分けて5つの職業が協力しあって制作していることが分かったかと思います。

 

ではWebデザイナーはどんな仕事をしているのかというと、会社によって仕事の形態は様々で、分業せずデザインとコーディングを求めてくるところもありますが、完全分業化している会社の方が多いです。

しかしWebサイトを作るためにチームとして進めていくので、分業しているからといって他の仕事を担当しないわけではないです。

デザイナーなら、次の作業をするコーダーのことを考えながらデザインしていくので、専門的でなくてもコーダーがどのような作業をするのか、そしてWeb制作の全体的な流れは知っておく必要があります。

Webサイトができるまでの流れ

全体の流れを知るために、サイトができるまでにどのような作業がされているのかを見てみましょう。

Webサイトを作るために必要なステップは大きく分けて5つに分けることができます。

Webサイトができるまでの流れ
  1. 調査分析
  2. 企画立案・詳細戦略
  3. 設計・企画確定
  4. 制作
  5. 運用
    1. これはかなり簡略化されていて、実際にサイトを作るときは一つ一つのステップをさらに詳細に分けていきます。

      これを見てもらうと、サイトを制作する時間より、調査や分析・企画を練る作業のほうがはるかに大きいということがわかると思います。

      Web制作の業界では「サイトの8割は企画書で決まる」と言われるほど、制作より企画を考える方が重要視されています。

      この企画が決まらないとコンテンツも生まれないし、デザインすることもできません。そして企画は他の業種の人たちとアイディアを出し合って決めていきます。

      だからこそ、どの職業にもコミュニケーション能力が必要なんです。

      Webデザイナーの仕事・制作の流れ

      この「制作」の中ではこのような順番で作業が行われていきます。

      1. 写真撮影・素材準備
      2. コンテンツテキスト作成
      3. モックアップ/グラフィック作成
      4. コーディング作業
      5. プログラミング作業
      6. 運用

      この中でWebデザイナーが主に担当するのはモックアップの作成です。

      サイト全体をスクリーンショットしたようなイメージ画像を、Photoshopなどのグラフィックツールを使って作成します。

      実際にこのような形でグラフィック化されます。

      Webデザイナーが実際にモックアップした形です。

      これは僕が作ったサイトのモックアップ画像です。

      デザイナーはこのようにサイトを作る前のイメージ画像を作る工程を担当します。

      Webデザイナーに必要な知識とスキル。

      グラフィックツール(Photoshop・Illustrator)が使える。

      フォトショップとイラストレーターのイメージ画像です。

      ほとんどのWeb制作会社はグラフィックツールにAdobeを採用してるので、PhotoshopとIllustratorが使えるというのは必須でしょう。主に使われるのはPhotoshopです。

      Photoshopが使えるようになる一番の練習方法は、サイトをそのまま模写するという方法です

      まずは簡単なYahoo!のトップページをPhohoshopだけで表現するのがいいと思います。

      真似しようとすると結構難しいもので、よく見ると境界線が引いてあったり、シャドウがかかっていたりするんです。そうした細かいエフェクト効果に気づくというのもデザイナーとして必要な力です。

      Yahoo!のトップページができるようになったらAmazonや楽天などのショッピングサイトを練習し、SonyやAppleといった企業サイトを練習するといいでしょう。

      慣れてきたら、きれいなサイトがたくさん載ってるイケサイでイケてるサイトを探して、模写してみましょう。

      そしてPhotoshopの練習に必要不可欠なのがこれ。Webデザイナーで持っていない人はいないでしょう。

       

      Photoshopは有料ですが、Adobeの製品はすべて1ヶ月無料で使えるサービスをやっているので、無料期間中にダウンロードして練習するのがオススメです。

      Adobe公式サイト

      HTMLとCSSができる

      HTMLとCSSのイラストです。

      HTMLとCSSが使えるというのも必須です。

      「デザイナーだからいらないんじゃないの?」と思われるかもしれませんが、間違いなくデザイナーにも必須と言えます。

      これはデザイナーが多様な仕事を求められているからではなく。サイトをデザインした後、コーダーがサイトをコーディング(作成)していくわけですが、コーダーがどのようにコーディングするのかまで考えてデザインしていく必要があるからです。

      僕の知り合いのコーダーが「画像幅は320pxなのに、デザイナーが321pxで切り抜きやがった!」と文句言ってまして。それだけのことで手間が増えて時間のロスにつながります。

      HTMLとCSSが使えないデザイナーはサイトをデザインできないと思うので、基本的なHTMLとCSS知識は必須です。

      やっぱりコミュニケーション能力

      コミュニケーション能力が求められます。

      そして、やっぱりコミュニーション能力です。

      僕の学校では、企業の方々が訪れ生徒たちを見る際に、作品よりもまず人を見ていました。

      「この人は人と会話できるのか」「チームとして協力してやっていける人なのか」をものすごく重視します。なので作品の話より前に世間話から始めてくる採用担当の方もいます。

      どんなに能力があってもコミュニケーションがとれないと、採用してくれないところは本当に採用してくれません。スキルよりもコミュニケーション能力の方が大切だとわかっているからです。

      Webデザイナーになるためには?

      Webデザイナーになるには、取らなければいけない資格はありませんが、やはりスキルは必要です。

      専門学校で学ぶ他にも、Web制作会社で有名なLIGのWebクリエイター養成学校などで専門的な知識が学べます。

      ただ専門学校の方が、先輩との繋がりから企業との交流がきるので、就職先の幅は広いかもしれません。

      他にも独学で勉強した人なら、ポートフォーリオサイトと呼ばれる自己紹介サイトを作り、自分がどんなスキルを持っているのかを説明できれば強いかもしれません。

      Thanks to our advertisers