2021/07/15 (更新日: 2021/09/20)

Web制作に必要なスキルセットまとめ11選【資格は不要です】

Web制作

Web制作に必要なスキルを知りたい人「これからWeb制作はじめようと思うけれど、必要なスキルセットがわからない。誰か教えてください。」

こういった疑問に答えます。

本記事の内容

Web制作に必要なスキルセットまとめ11選

この記事を書いている私は、Web開発のフロントエンドエンジニアです。
Web制作を学習し、少しの間ですが、Web制作フリーランスとして活動していました。
フリーランス生活を通して、多くの企業と面談し、必要なスキルが明確になりました。

こういった私が解説していきます。

Web制作に必要なスキルセットまとめ11選

クイズを出している人の画像
Web制作に必要なスキルセットは以下の通り。

HTML
CSS
Sass
JavaScript
jQuery
PHP
WordPress
Figma
AdobeXD
Photoshop
Zeplin

それぞれ解説します。

HTML

HTMLは、HyperText Markup Language(ハイパーテキストマークアップランゲージ)の略称です。
通称、『マークアップ言語』と呼ばれています。
ブラウザ上の見出し、段落、表、リスト、画像などを表示するために使います。
みなさんがみているWebサイトは、基本的にHTMLが使われています。
もちろん、AppleのホームページにもHTMLが使われています。
コンピューターに文章の構造を認識させるのもHTMLの役目です。
Googleの検索エンジンは、HTMLの構造をみて、内容を解析したりしています。

HTMLの記述例


<h1>柿の種マイスターがオススメする柿の種3選</h1>

CSS

CSSは、Cascading Style Sheets(カスケーディングスタイルシート)の略称です。
通称、『スタイルシート』と呼ばれています。
HTMLで表示したブラウザ上の見出し、段落、表、リスト、画像などを装飾するために使います。
文字のサイズ、色、字体、行間なだったり、カンタンなアニメーションを実装することができます。
基本的に、HTMLとセットで使います。

CSSの記述例


h1 {
	color: #333;
	font-size: 16px;
	font-weight: 400;
}

Sass

Sassは、Syntactically Awesome StyleSheetの略称です。
Google翻訳によると、「構文的に素晴らしいスタイルシート」とのことです。
CSSを少しパワーアップしたモノです。
「Sassは使わない」という意見もたまに見かけますが、覚えた方がいいです。
なぜなら、作業効率がアップするからです。

Sassの記述例


.card {
	width: 100%;

 	&__list {
		display: flex;
	}

	&__item {
		width: 33.3333%;
		height: 300px
	}
}

JavaScript

JavaScriptは、プログラミング言語の一つです。
Webサイト、Webアプリ、スマホアプリなどにも使われています。
Webサイトに動きをつけたりするのによく使います。
Webサイトによくある『スクロールしたら途中でてくるTOPに戻るボタン』もJavaScriptが使われています。
また、似ている言語にJavaというのがあります。
JavaScriptとJavaは別物で、よく『メロンとメロンパンくらい違う』と言われています。
気をつけましょう。

JavaScript記述例


console.log('めちゃくちゃねむいです');

jQuery

jQueryは、JavaScriptのライブラリです。
カンタンに説明すると、JavaScriptの記述をカンタンにする拡張機能みたいなものです。
jQueryを覚えると、カンタンにアニメーションなどを実装できるようになります。

jQueryの記述例


$(function(){
  $(".text").css("color","red")
});

PHP

PHPは、サーバーサイド言語です。
データベースと連携したり、ロジックを実装するときに使います。
カンタンに説明すると、会員登録機能や掲示板などのようなサイトに使われています。
身近な例を挙げると、FacebookにPHPが使われています。

PHPの記述例


<?php
 echo '<p>大盛りペヤング食べたい！</p>'; 
?>

WordPress

WordPressは、ブログソフトウェアです。
CMS(コンテンツマネジメントシステム)とも呼ばれます。
WordPress自体はPHPが使われています。
ブログや、お知らせ機能がついた企業のホームページのような、記事がどんどん追加されていくようなサイトに使われます。

WordPress公式サイトはこちら

WordPressの記述例


<?php get_header(); ?>

Figma

Figmaは、マックスファクトリーという会社が販売しているデザインツールです。
Webサイトのデザイン、バナー作成などができます。
動作も軽く、使いやすいです。
複数人での使用も可能です。
意外とFigmaを使用している制作会社が少ないようです。

Figmaのサイトはこちら

AdobeXD

AdbeXDは、Adobeが販売しているデザインツールです。
インストールして使うタイプのツールです。
用途はFigmaとほとんど同じです。
正直、Figmaに比べると使いにくく感じます。

AdobeXDのサイトはこちら

Photoshop

Photoshopも、Adobeが販売しているデザインツールです。
こちらもインストールして使うタイプのデザインツールです。
画像編集やWebサイトのデザイン等に使います。
コーディングする人からすると、動作も重く、使いにくいのが難点です。

Photoshopのサイトはこちら

Zeplin

Zeplinは、デザインカンプ共有ツールです。
ブラウザ上でも、アプリでも使えます。
Photoshopみたいな、面倒なデザインカンプがきた時に便利です。

Zeplinのサイトはこちら