かわしまのブログ Written by Hiroyuki Kawashima

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

Web制作

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

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

本記事の内容

この記事を書いている私は、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の記述例


<?php get_header(); ?>

Figma


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

AdobeXD


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

Photoshop


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

Zeplin


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