【未経験必見】サイト制作の現場で最低限求められるスキル5選！

こんにちは。
株式会社レベルスでサイト構築をを担当している西條です。

今回は構築担当の目線で、
サイト制作の現場で求められるスキルについて紹介していきます。

「勉強をしているけど、どのくらいまでスキルを上げれば仕事になるのかわからない」
「未経験からサイト制作を仕事にしたけど、何を勉強すればいいのか、、、」

という悩みある方の参考になればと思います。

※あくまで構築についてなので、Webデザイナーを目指している方は参考程度にしてください。

ちなみに僕の経歴はこんな感じです。

• 現在は25歳。
• 2019年4月 レベルス入社（ほとんど未経験。HTML・CSSで勉強レベルのサイトを組める程度。）
• １年間sesで働きながらWeb制作の勉強を進める。
• 2020年4月 制作事業部でWeb制作をスタート。

僕自身ほとんど未経験からのスタートなので、
これから勉強を始める方、現在勉強中の方の参考になれば幸いです。

では本題に入っていきます。

HTML

できて当たり前！サイト制作に欠かせない基本の言語です。

HTMLはそこまでつまずくポイントはないと思いますが、業務レベルを目指すなら、文法チェックをしっかりと行い、エラーが無いようにしましょう。

こちらはw3cの文法チェックツール。HTMLの構文チェックをすることができます。
wc3とはホームページ関連の規約を決めている団体の事。

CSS

サイトを装飾するための言語です。

HTMLだけだと装飾のない簡素なサイトになってしまうので、
CSSで見栄えを整えていきます。

参考書などを見ずにスラスラコードが書けるようになることが
仕事への第一歩です。

また、作業効率化のために「Sass」を利用している案件もあるので、
これも合わせて勉強するといいと思います。

ちなみにSassは初学者の方だと、

「Sassって難しそう、何それ、CSSじゃダメなの」

と思われる方も多いと思いますが、Sass自体はそれほど難しい言語ではなく、CSSを効率良く書くために作られた言語なので実際にやってみると意外とすんなり習得できると思います。

どちらかといえば環境を用意するのが手間だと思います。

Sassを使用するには、パソコンにSass環境をインストールする必要がありますが、インストールするにはコマンドライン（ターミナル）でコマンドを実行する必要があるので、初学者の方にとっては難易度が高いかもしれません。

また、Sassには種類があるので、それによって環境が違ってくることも頭に入れておかなければいけません。

ざっくりですがSassには3種類あります。

• ダート言語で実装された（Dart Sass）
• C++言語で実装された（LibSass）
• Ruby言語で実装された（Ruby Sass）

Dart Sass環境で、Ruby Sassで開発されたファイルをコンパイルしようとすると失敗してしまうので、面倒ですが、Ruby Sass環境を用意する必要があったりします。

公式を見る限りDart Sassが推進されているようです。（2020年時点）
また、Ruby Sassは2019年3月26日でサポート終了しています。

それからCSSの設計手法について理解しておくといいと思います。大規模な案件だと、しっかりとルールが決められているので、BEM、OOCSS、SMACSSくらいは使えるようにしておくといいでしょう。

CSSに関しては結構長くなってしまいました。

これを読んでいる勉強中の方の中には、「こんなに覚えることあって大変そう」と思うかもしれませが、サイト制作においてCSSは大きな割合を占める部分なので、しっかり勉強しておきましょう。

JavaScript

サイトに動きをつけるために用いられる言語です。

画像スライダー、メガメニュー 、スムーススクロール、アコーディオンメニュー等で使用することが多いです。

HTML・CSSと違いプログラミング言語なので、習得までに時間がかかりますし、難易度も上がってくるので、初学者の中には、ここでつまずいてしまう人も多いと思います。

なので、最初はプラグインを使用しながら、
ファイル構造を覚えたりするといいと思います。

例えば、Swiperという画像スライダー用のプラグインがあります。

Swiperを公式からダウンロードするとファイル一式が手に入るので、どのファイルをどこに配置したらスライダーが動作するかを確かめながら勉強すると理解が深まるかと思います。

とはいえプラグインのみでは、できることに限界があると思うので、
慣れてきたら、「jQuery」を習得することをオススメします。

jQureyはJavaScriptのライブラリの一種で、サイト制作の現場でよく使われています。
jQureyは初心者にも扱いやすくなっているので、最初の勉強には最適です。

例えばid名appにアクセスする場合。
jQueryだと、var app = $(‘#app’);
JavaScriptの場合は、var app = document.getElementById(‘app’);

こんな感じでjQueryのほうが短く簡単に書くことができます。

またjQueryはクロスブラウザ対応なので、ブラウザ間の差を意識せずにコードをかけるのもポイントだと思います。（素のJavaScriptの場合、ブラウザによってはサポートしていないメソッドがある。）

ここまで話すとjQueryは便利だと思いますが、最近はブラウザ間の差がなくなってきたことで、jQueryの役割が薄れてきていると思います。

現時点ではjQueryには豊富なプラグインがたくさんあるので、利用しているケースはあると思いますが、今後10年単位で考えると徐々に役目を終えていくのかなと思っています。

なので、jQueryに慣れてきたら、素のJavaScriptを書けるようにしておくことで、仕事の幅が広がるはずです。

結論として、

• 1 最初はプラグインを使えるようにする。
• 2 その後はjQueryで機能実装ができるようになる。
• 3 0からJavaScriptを実装できるようにする。

の中の、2くらいまでは現場に入る前に覚えておくようにしましょう。

PHP・WordPress

サイトの種類によっては、日々更新業務が発生します。

僕ら制作者ならHTMLファイルをサーバーへアップして終わりですが、お客さんは
HTML・CSSの知識があるわけではないので、日々の更新業務を簡単にする必要があります。

そこでCMS（コンテンツ・マネジメント・システム）と呼ばれる、専門的な知識が無くても、サイトの構築・管理・更新ができるシステムを導入することになります。

CMSには、WordPress、Movable Type、ShareWithなどありますが、
日本だとWordPressが主流となっています。

WordPressはPHPで作られているので、まず初めに基本的なPHPの書き方を習得するのがいいと思います。

ある程度PHPの基本構文が理解できるようになったら、オリジナルテーマを作ってみることをオススメします。オリジナルテーマを作ると、WordPressの仕組みが理解できると思うので、勉強に最適だと思います。

まあ、勉強といっても何から勉強すればいいかわからない方も多いと思うので、以下に重要なことをまとめてみました。

• データベース・サーバーを理解する。
• テンプレート階層を理解する。
• メインループを理解する。
• サブループを理解する。
• 組み込み関数を扱えるようにする。
• アクションフックの仕組みを理解する。
• 正規表現を使用して、取得したデータに処理を加えられるようになる。

多分これだけできるようになれば実務でも問題ないと思います。

Illustrator・Photoshop

構築担当でも、Illustrator・Photoshopはある程度使えるようにしておきましょう。

とういうのもデザインカンプはpsdかai形式でもらうのが一般的なので、操作ができないと業務になりません。

勉強方法でオススメなのが動画学習です。

個人的には書籍で勉強するよりも体感的に学べると思うので、書籍で勉強してつまずいてしまった方は、動画での勉強をオススメします。

僕はUdemyの動画学習を利用していました。

まとめ

今回は勉強中の方へ向けて、サイト制作の現場で最低限求めらるスキルを紹介してきました。

なんで最低限かというと、サイト制作にはまだまだ覚えることが沢山あるからです。例えばSEO、ディレクション業務、デザイン業務などが挙げられます。

それらと比較すると構築業務というのはやればやるだけ知識が蓄積されていくので、未経験からでも仕事にしやすい部分だと思います。

とはいえ、覚えることは沢山あるので独学では限界があると思います。

レベルスでは未経験の方を対象とした社内勉強会を開催しているので、我こそはという方は、「ポートフォリオ」を用意してぜひレベルスまでご連絡ください！