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

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みたいな、面倒なデザインカンプがきた時に便利です。