Webサイトを制作したいんだけど、どんなスキルが必要なのかな……
それぞれどんな役割なのかだけでも知りたい！
こんにちは、エンジニア兼・侍テクニカルライターの遠藤です！
今回の記事では、Webサイト制作で必要なスキルを簡単に解説します。
この記事では必要なスキルと、どんな役割かという概要にのみ触れます。ぜひ最後までお付き合いください！
前提知識: 必要なスキル一覧
まずは必要なスキルを一覧で確認しましょう。
言語
| 名称 | 用途 |
|---|---|
| HTML | 画面表示をする |
| CSS | レイアウトを指定する |
| JavaScript | 画面の動作など |
| PHP/Laravel | システムの動作など |
| Ruby/Rails | システムの動作など |
| SQL | データベースの操作 |
デザインツール
| 名称 | 用途 |
|---|---|
| Illustrator | イラスト作成 |
| Photoshop | 画像の編集 |
| Sketch | UIデザイン |
このようにWebサイトを制作するうえで使うスキルは沢山あります。しかし、表にあるスキルの全てをマスターしなくてはならない訳ではありません。
あなたが作りたいと思っているサイトに見合ったスキルを取捨選択して身につけていきましょう。また、簡単なサイトであれば広く浅く知っていればある程度形になります。
以降の章では、それぞれのスキルがどのように使われるか、少し詳しく解説します。
HTML/CSS
HTMLはWebサイトの基本となる部分を担っていて、文字を装飾したりデザインの基本部分を書いたりする際に使われます。
HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するために開発された言語です。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
このHTMLをベースにCSSやJSなどを組み合わせて、私たちが日頃目にするWebサイトが作られています。HTMLはWebサイトで基礎といえる言語です。
HTMLについては以下の記事でより詳しくまとめられているので、良かったら読んでみてください。
続いてCSSですが、こちらはWebサイトのデザインを指定する言語です。ちなみにプログラミング言語ではなく、スタイルシート言語という物の一種です。
細かい事はさておいて、CSSを使うと様々なデザインを表現できたり、簡単なアニメーションをつけることが可能です。
オシャレなサイトを作りたいという方は、CSSも気合いを入れて学習しましょう。
CSSについての概要と基礎的な使い方が知りたい方は、以下の記事を参考にしてください。
以上2つ、HTMLとCSSを利用してWebサイトの表示などができるようになります。
JavaScript
JavaScript（JS）はWebサイトに動きをつけるために開発されたプログラミング言語です。
Webサイトにカッコいい動きを付けたい時は、JavaScriptを使います。また、JavaScriptはサーバ側の処理についても記述することが可能です。
JavaScriptの基本について知りたい方は以下記事をご覧ください。
JavaScriptを効率的に勉強したい方は以下の記事を参考にしてください。
PHP/Laravel
PHPについて
見た目をHTML・CSSで作って、動きをJavaScriptで作ればもう十分！ ……と言いたい所なんですが、実はまだ必要な知識があります。
Webサイトでは、ユーザと双方向でやりとりをする機能を付けたい場合があります。具体的には、ログイン機能などです。
「ログインしたユーザに適したコンテンツを提供したい」という場合もこれに当たります。
そんなときは見た目の動作だけでなく、内部（バックエンド）の処理が必要になります。このときに使うものの一つが、PHPです。
PHPを使うことで、データ処理などを行う事が可能です。ブログメディア、ECサイトを作る際によく使われています。
もしHTML, CSS, JavaScript, PHPの役割の違いがイマイチつかめないな……」という方がいましたら、以下の記事を参考にしてください！
それぞれの違いが分かりやすくまとめられています。
ちなみに双方向でのやりとりがあるものはWebサイトよりも「Webアプリケーション」や「Webサービス」と呼ばれます。
Laravel(フレームワーク)について
ここでフレームワークについても知っておきましょう。
PHPでデータ処理を全てしっかり書くのは大変な作業になります。そんな時のために、最近ではフレームワークというものが一般的に使われています。
フレームワークというのは、プログラミングで頻繁につかう処理・機能をあらかじめ備えている骨組みの事です。これを活用することで、比較的簡単で素早く処理を実装する事ができるようになります。
フレームワークにも種類があるのですが、最近特に人気があるPHPのフレームワークに、Laravelというものがあります。
LaravelはPHPのフレームワークで世界で最も人気があり、日本ではCakePHPというフレームワークと人気を二分しています。
Laravelについての概要は、以下の記事を参考にしてください。
Ruby/Rails
PHPと同じ役割としてよく使われるプログラミング言語に、Rubyがあります。
Rubyを使うことで様々な処理を実装する事が出来ます。
また、Laravelと同じくRubyにも「Ruby on Rails」をはじめとした強力なフレームワークがいくつかあります。
PHPとRubyは実現できることが一部重なっていて、どちらか一方のスキルがあればWebサイトは作れます。先ほどブログやECサイトでPHPがよく使われていると紹介しましたが、これに対しRubyはSNS系でよく使われています。
どちらを学ぶべきか悩む方や、特徴や違いが知りたい方は以下記事を参考にしてみてください。
SQL
SQLはデータベースの操作をする際に使われています。一例として、ログインするときにユーザ名とパスワードが当然必要になりますよね。
そのときのユーザ名とパスワードを関連付けて保存しているのが、データベースです。
そのデータベースとやりとりをして操作するのがSQLの役割です。そのため、SQLはデータのやりとりが必要なサイトを作るのであれば必要な知識となります。
SQLの基礎については以下を参照してください。
デザインツール
Webサイトを作ろうとするとき、どういうデザインのWebサイトを作るかの検討は必要になります。
デザインが決まっていなければ実装できませんし、行き当たりばったりで作っていたら一貫性のないサイトになってしまいます。
そのため、デザインはとても重要です。
デザインツールとして有名なものは、Adobe（アドビ）のIllustratorやPhotoshopなどがあります。これらはイラストを作成したり、画像を編集する際に使います。
デザインツールは多機能な分、デザイン力だけでなく製品を使いこなすスキルが必要です。デザインは外注にするという選択肢もありますが、自分で作る場合はこれらのスキルがあった方が心強いです。
ちなみに筆者がオススメするUIデザインツールは「Sketch」です。Sketchは今人気があるツールで、高速かつ多機能な素敵ツールです！
macOSでしか使えないのが残念ですが、Macの方はぜひ試してみてください。
まとめ
今回の記事では、Webサイト制作に必要となるスキルについてまとめました。
沢山種類があって困惑してしまうかも知れませんが、開発の現場ではそれぞれの専門分野で分かれて作業するので、全て完璧に覚えなくても大丈夫です。一つずつしっかりと理解していきましょう！
個人ブログなどを作るのであれば、まずはWordPressでおおよその骨組みを作り、今回の記事で紹介されたスキルを身につけて少しずつカスタマイズするといった習得方法もあります。
ぜひ素敵なWebサイトを作ってください！
