【Webデザイナーになるためには？】Webデザイナーに必要なスキル・知識

はじめに

こんにちは！AndHA新人コーダーのタイガです！

Webコーダーとして働き始めて、三ヶ月。前回と前々回では、「HTMLセマンティック」と「CSS設計」について記事を書きました！

今回、Webコーダーとして最低限必要なスキルについて書いていきます。

これからWebコーダーになろうと思っている方、もしくはやってみたいなと思っている方！ぜひ最後まで読んでみてください！

Webコーダーとは？

まず始めに、私が担当している業務についての紹介をします。

皆さんがよく耳にするであろう、Webデザイナーという職業を細分化していくとWebディレクター、デザイナー、コーダーの三つに分けられます。私が担当しているのは、三つ目のコーダーという業務になります。

Webコーダーというのは、デザイナーさんがデザインしたサイトを「Web上にそっくりそのまま反映させる」という業務になります。かなりざっくりです。

デザイナーさんはデザインツールを使用してサイトデザインを製作しますが、私たちコーダーはHTML、CSS、JavaScript、PHPなどマークアップ言語、プログラミング言語を使用して、言葉でデザインします。

最低限必要なスキル

一重にコーダーと言っても、コーディングスキルとプログラミングスキルがあればいいかというとそうではありません。下記に必須スキルをまとめたのでご紹介して行きます。

• デザインの知識
• デザインツール使用方法(Illustrator、Photoshop、XD)
• マークアップ言語、プログラミングスキル(主にHTML、CSS、JavaScript、PHP)
• CMSの知識(WordPress等)
• Webの知識

守備範囲は思ったより広くHTMLとCSSだけできればいいってわけでもないのが現状です。
それ以外にも、実務となるとビジネススキルやWebマーケティングスキルetc…
キャリアアップを狙うのであれば、必要になってくるスキルはたくさんあります。
一旦、キャリアアップはおいといて上記5点の内容を少し詳しく紹介していこうと思います！

デザインの知識

コーダーは最後にサイトのデザインを見ます。つまり最終チェックも兼ねているということです。

「ユーザー度外視のデザイン先行になっていないか」「この行間では見辛くないか」など、Webデザインの基本的な知識やデザインを見る目が大切になってきます。私たちコーダーもデザインの知識があればより良いサイトができると思います。

デザインツール使用方法(Illustrator、Photoshop、XD)

コーダーはデザイナーからもらったデザインをもとにコーディングをする訳なので、言わずもがな「Photoshop」「Illustrator」「XD」はマストで必要です。ただフォントサイズや色、行間、上下左右の余白がわかれば良いというより、使いこなすということが大切です。

Illustratorチュートリアル | Illustratorの使い方
Photoshopチュートリアル | Photoshopの使い方
XDことはじめStep1：まずはここから！「ワイヤーフレームを作ってみよう」

マークアップ言語、プログラミングスキル(主にHTML、CSS、JavaScript、PHP)

コーダーにとって一番重要なのが「マークアップ言語、プログラミングスキル(主にHTML、CSS、JavaScript、PHP)」です。デザインの可能性を広げることができるスキルです。

HTML&CSS

こちらはマークアップ言語です。webサイトの見た目を作ることができる言語で、コーダーとしての基本スキルになっています。前回、前々回でHTMLとCSSの記事を書いていますのでぜひ読んで見てください。

JavaScript

サイトに動きをつけているのがJavaScriptです。スライダーやアニメーションなどHTML&CSSだけではできない動きをJavaScriptによって再現しています。JavaScriptはWebサイト製作以外においても使用頻度が多い言語ですので学習しておきましょう。
JavaScript | MDN

PHP

PHPはサーバーサイドで動く言語です。様々なWebサービスで使用されています。例として「お問い合わせフォーム」や「ECサイト」などを作ることができます。さらにこのあと紹介する「CMSの知識(WordPress)」のWordPressはPHPで動いています。

上記三種類はかならず使用するものになりますので、一緒に叩き込みましょう！！(公式ドキュメントをみる癖をつけましょう！)

CMSの知識（Wordpress）

CMS(Content Management System　コンテンツマネジメントシステム)はWebサイト製作の必要な知識がなくてもコンテンツを構築、管理、更新できるというシステムのことです。その中でもとくに有名で一番使用されているのがWordPressになります。シェア率は全ウェブサイトの40％をしめています。誰でも簡単にWebサイトを作成できるのですが、オリジナルのデザインや機能をつけるとなると専門性が必要になってきます。需要が多いWordPressはこちらもマストで学習する必要があると思います。

そして先程の章でも述べたように、WordPressはPHPという言語で構成されています。WordPressを学習しながらPHPも覚えていくと良いと思います。(私も絶賛勉強中！！)

Webの基礎知識

最後はWebの知識になります。大枠すぎるのですがWebコーダーの守備範囲は広いので、視覚的に見える部分だけではありません。サーバー関連の知識やセキュリティなど普段使っているインターネットへの理解が必要になってきます。私自身も実際に働き始めた時に最初につまづいた部分になります。

独自ドメイン、ホスト名、ディレクトリ、サブディレクトリ、FTP、、、、etc
横文字祭りです。

最初は単語の意味だけでも良いので覚えておくと良いと思います！いまだに「なんて意味だっけ？」となり調べることも多々ありますので、常に頭に入れおきたいですね！せめて会話についていけるように！！
Webとは？初心者向けにWebの基礎知識を効率よく勉強する方法を5つ紹介

まとめ

今回紹介した内容はWebコーダーに限らず、Webデザイナーとして必要な知識だと思います。
働く上で基本のスキル、知識になると思うので、現在学習中の方はしっかり押さえておきましょう！