未経験からデザイナー

HTML、CSS、XD、figmaとは？Webデザイナーに必要なスキル12個を解説します！

by EL(エル) · 公開済み 2021年11月5日 · 更新済み 2021年11月5日

HTML、CSS、figma、Illustrator、Photoshopなどなど。Webデザイナーに必要とされるスキル、一体何がどう違うの？という超初心者のために超わかりやすく解説します！！

解説項目

HTML
CSS
Illustrator
Photoshop
figma
Adobe XD
Dreamweaver
Javascript
jQuery
PHP
MySQL
WordPress
Webデザイナーに本当に必要なスキルはどれ？

HTML

HTMLはWebサイトを作るために必要な文法のようなものです。

通常の文章にタグ<>を付けることでさまざまな属性を与えます。のちにこの属性にデザインを加えることになります。デザインを施す前の骨組みですね。

HTMLの例

<!DOCTYPE html>
<html lang=" jp ">
<body>
<h5>当てはまる項目が多ければあなたはデザイナー向き！</h5>
<div class="list-blue">
<ol>
<li>ものづくりが好き</li>
<li>静かに作業するのが好き</li>
<li>凝り性</li>
<li>諦めない</li>
</ol>
</div>
</body>
</html>

このように書きます。

コンピュータに標準搭載されたメモやテキストソフトにこのような文を書いて、拡張子を.htmlにして保存します。

保存したテキストをブラウザで開くと以下のように表示されます。

当てはまる項目が多ければあなたはデザイナー向き！ものづくりが好き、静かに作業するのが好き、凝り性、諦めない

黒い文字が並んで表示されるだけ。とてもシンプルなWebサイトになりますね！

HTMLを使う場面

Webサイトをゼロから組み立てるときに必要です。

HTMLの必須度

★★★★★ 5

絶対必須。スラスラ書けなくてもいいがある程度理解できるようになりたい。

CSS

CSSはWebサイトにデザインを施すプログラミング言語です。

先ほどのHTMLに、色や線や細かいレイアウトを指示することができます。

CSSの例

.list-blue ol {
counter-reset:number; 
list-style-type: none!important; 
padding: 0.3em 0.8em;
border: solid 2px #bfdaf6;
}
.list-blue ol li {
border-bottom: dashed 1px #bfdaf6;
position: relative;
padding: 0.5em 0.5em 0.5em 30px;
line-height: 1.5em;
list-style: none;
}
.list-blue ol li:before{
position: absolute;
counter-increment: number;
content: counter(number);
display:inline-block;
background: #bfdaf6;
color: white;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;

ほんの一部の例ですがこのように書きます。

この文章を先ほど書いたHTMLに紐づけると下の画像のようになります。

当てはまる項目が多ければあなたはデザイナー向き！ものづくりが好き、静かに作業するのが好き、凝り性、諦めない

文字に線がついたり、数字が丸で囲まれたり一気に華やかになりますね！

CSSを使う場面

Webサイトにデザインを施すときに必要です。

CSSの必須度

★★★★★ 5

絶対必須。これがわからないと思った通りデザインができない。

Illustrator

イラストレーター。Adobe（アドビ）という会社が作ったデザインソフトです。

Illustratorの例

動画のように、オブジェクトを好きな形に作り、移動したり色を塗ったりできます。

Illustratorを使う場面

ロゴ、キャラクター、イラスト、ポスター、Webバナー、などなど。

Illustratorの必須度

★★★★★ 5

絶対必須。

Photoshop

フォトショップ。Adobeが作った写真ソフトです。

Photoshopの例

動画のように、写真を加工したり合成したり。ブラシを使ってお絵かきソフトとして使うこともできます。ピンクのバラを青にすることもできるんですよ！素敵でしょう！

Photoshopを使う場面

写真の色変更、切り取り、合成、イラスト作成。

Photoshopの必須度

★★★★☆ ４

ほぼ必須。

figma

フィグマ。Web上で利用できる無料ソフトです。

Webサイトやアプリのデザインがプログラミング言語の知識なしで簡単にできます。

近年シェア率が高くなっており多くのWebデザイナーがこれを使います。

figmaの例

簡単、かつ感覚的にWebサイトのレイアウトができます！すごいですね！

ただしfigmaは「見た目」だけを作るソフト。Webサイトを完成させることはできません。

figmaで作ったデザインはプログラミング言語ができるコーダーなどに依頼して完成します。

HTMLやCSSの知識が深ければ自分で完成させられます。

figmaを使う場面

Webサイトの「デザイン」だけを頼まれた時

figmaの必須度

★★★★☆ ４

ほぼ必須。ただし簡単なのでWebデザインスクールなどでは習わないこともあります。独学可能。

figmaダウンロードページ

Adobe XD

アドビが作ったソフト。figmaと同じ機能。こちらも基本無料。拡張機能で有料になります。

最近のシェアではfigmaが上回りそうですが、Illustratorの操作感に近いのでAdobeソフトを使い慣れている人には好かれます。

Adobe XDの例

figmaとは本当に似ていて操作感もあまり差がありません。大きな違いはプレビュー。figmaと違いシンプル。軽いです。

Adobe XDを使う場面

Webサイトの「デザイン」だけを頼まれた時

Adobe XDの必須度

★★★☆☆ 3

figmaの方が使う場面があるかもしれません。操作が簡単なので必要なときに急いで始めても間に合うかもしれません。

Dreamweaver

ドリームウィーバー。Adobeのソフトです。

HTMLとCSSの知識を使いながらWebサイトを作れる便利なソフトです。

Dreamweaverの例

同一画面上で、HTML、CSS、完成プレビューまで表示できる超便利なソフトです！

コードを打ち込みながら同時に完成図確認できます。HTMLとCSSを繋げて確認しやすく、別々のテキストで作業するより何十倍も早くストレスなく作業できます。

Dreamweaverを使う場面

Webサイトをゼロから組み立てるときに使います。

figmaやAdobe XDで仕上がったデザインをプログラミングするとき。またはデザインからプログラミングまで自分1人で作業する場合は最初からこちらだけを使います。

Dreamweaverの必須度

★★★☆☆ 3

Webデザイナーにコーディングまで求めないことも多く、就職する会社によっては使わない場合もあります。

JavaScript

ジャバスクリプト。Web上で動きのあるデザインを実装できるプログラミング言語です。

難易度が少し高めです。

JavaScriptの例

JavaScriptはHTMLの記述内に加えることで実装できます。

このタグの中がJavaScriptです

上の画像の赤線で囲んだ部分がJavaScriptのコードです。このコードでは時計を実装することができます。

どうですか？時計が実装されていますね！このように「動き」があるものをWebサイトに入れたい場合はJavaScriptを使います。ゲームやアプリを作ることもできる言語なんですよ！

このサイトではトップページでもかなりJavaScriptを使っているので、サンプルページとして参考になるかもしれません。

当サイトのトップページ

JavaScriptを使う場面

タイマー、カウンター、左右上下に動かす、フェードイン、「ロード中」の動くイラストなどなど。

JavaScriptの必須度

★★★★☆ 4

コーディングを求められない会社なら、しっかり書けなくても大丈夫です。しかしある程度理解しておかないと可能な動作もわからず、外部依頼もできません。

jQuery

JavaScriptを簡易的に使えるライブラリ。あらかじめ作ってある機能を呼び出せます。ですのでJavaScriptのコードがわからなくても呼び出しさえできればいいんです！便利ですね。

動作はJavaScriptと同じ。

JavaScriptが書けない初心者にとってはとても便利です。

ただ、ある程度コードの知識がないと苦労します。あらかじめある機能を使うことになるので細かい動作の調整はできません。

jQueryを使う場面

動的コンテンツを素早く簡単に実装したいとき

jQueryの必須度

★★★☆☆ 3

実装はあまり難しくないので、Webデザインスクールでは習わないところも多いです。

PHP

ブログの「テーマ」を作れるプログラミング言語です。

ブログサービスなどのテーマを使うとわかりますが、わざわざコードを書かなくても各ページに自動的にタイトルやページ案内が表示されたりしますよね？

そういった「法則性」を作ることができるのがPHPという言語です。

HTMLとCSSを使ってWebサイトを作ると、各ページに同じフォーマットを採用したいと思っても何度もコピー＆ペーストしてデザインを持ってこなくてはなりません。

PHPが書ければ、そういった「フォーマット」を実装することができます。

PHPを使う場面

ECサイト、予約サイト、検索サイト、口コミサイト、ブログのテーマを作る。などなど。

PHPの必須度

★★☆☆☆ 2

PHPは普通、デザイナーではなくコーダーやプログラマーが実装します。デザイナーはできなくても大丈夫です。

ただ、これができるとデザイナーの域をこえあらゆるサイトを実装することができますので、将来プログラマーとしても活躍するなどマルチな人材になれます。

難易度は高いです。

MySQL

MySQLはデータベースを扱う際に必要なプログラミング言語です。

膨大なデータを扱うWebサービスで、データを整理したり呼び出したり関連づけたりできます。

MySQLを使う場面

検索エンジン、ECサイト、サーバー

MySQLの必須度

★☆☆☆☆ 1

普通はWebデザイナーに求められません。ただ、サーバーを管理するために多少知識があった方がいい場合もあります。

WebデザインスクールでMySQLを習うところもありますが、かなりプログラミングに力を入れた学校だと言えますね。

WordPress

ワードプレス。googleが提供しているオープンソースソフトウェア。世界中の頭のいいエンジニアたちが共同制作しているブログサービスになります。

はてなブログやnoteと同様、文章を入れるだけで簡単にWebサイトを作ることができます。

なんと世界のおよそ40%近くがWordpressで作られています。

はてなやnoteよりも難易度が高いですがその代わり自由度が高いです。

WordPressを使う場面

クライアントからWordpressを使ってほしいと指示があった場合

WordPressの必須度

★☆☆☆☆ 1

Webデザインの依頼を受けた場合普通はfigma、Dreamweaverなどを使いゼロから立ち上げるためWordpressは使いません。ただ大変便利ですし企業サイトであってもWordpressを使う場合もあるので、すぐ使えるだけの知識があってもいいと思います。

WordPress公式サイト

Webデザイナーに本当に必要なスキルはどれ？

Webデザイナーに最低限必要なソフトやコンピュータ言語はどれでしょう？

実は、「Webデザイナー」をどう定義するかによって変わってきます。

あなたがなりたいのはどんなWebデザイナー？

Webサイトの「デザイン」ができる
デザインだけでなく「コード」も書ける
デザインだけでなくイラストや写真も用意できる

目指したいデザイナー	必要スキル
① Webサイトの「デザイン」ができる	HTML CSS figma Illustrator Photoshop
② デザインだけでなく「コード」も書けるデザイナー	HTML CSS figma Illustrator Photoshop JavaScript jQuery
③ デザインだけでなくイラストや写真も用意できるデザイナー	HTML CSS figma Illustrator Photoshop イラスト企画写真