Web制作って何をする業務なのでしょうか？名前からは具体的には分かりづらいですよね。
Web制作をする、というのは主にWebサイトの見た目と機能を作る業種になります。現在見ているブログや、コーポレート(企業)サイト、ECショップ(amazonや楽天などお買い物サイト)を個人、企業相手に作成します。
Web制作では
- 見た目を決める「デザイン」
- デザインをweb上に表示、機能をもたせるためにコードを書く「コーディング」
- デザインし、コーディングしたサイトを運用
といったことが含まれます。
企業や個人がビジネスを成長させるためのツールとしてwebサイトを持つ必要があります。
そして、それぞれに
- デザインをする人を「デザイナー」
- コーディングをする人を「コーダー」
と呼びます。
運用はサイトを作成依頼した人や、場合によってはデザイナーやコーダーが行います。
他にも、ディレクター、プランナーなど規模が大きくなるに連れ、チームを組み、目的に沿ってwebサイトを制作します。
目次
Web制作コーダー、デザイナーとの違い
Web制作(サイト制作)を行うのに最低限、デザイナーとコーダーが必要です。兼任する場合もありますが、多くはそれぞれに活動します。
では、どのような違いがあるのでしょうか？
WebデザイナーはWebサイトの見た目を作る
役割としては、Webサイトの見た目、レイアウトを作成します。サイトの目的に沿ったデザイン、雰囲気を表したり、ユーザーが操作しやすいようにUIの配置などを考えます。
使用ツールは
- Adobe XD
- Photoshop
- Illustrator
- Figma
- Canva
などのデザインツールを駆使してWebサイト全体の見た目を制作します。
求められるスキルに
- デザイン理論
- ユーザーフレンドリーなUI設計
- 業種や目的に合わせた配色
- 適切な画像選定
などが必要となってきます。
主な仕事内容としては、デザインカンプ(完成図のデザイン)を制作、クライアントとのすり合わせ。見た目を作るため、クライアントとの調整を多く必要とします。
「なんかイメージと違う」と言われて泣くデザイナーが多いとかなんとか。
Webデザインとして、サイトの見た目を作るだけではなく
- ユーザーが操作しやすく
- 見やすく
- 機能面も持たせる必要がある
多種多様なスキルが求められます。
WebコーダーはコードでWebサイトを作り、機能をもたせる
役割としてはデザイナーが作ったデザインを「実際に動くWebサイト」にします。
他にも
- googleの検索結果に反映するように調整
- アニメーションを加えて動きのあるサイト
- PCサイズ、スマホサイズへの切り替えを行えるように調整
といったことをします。
使用ツールとしては
- VScode
- Chromeの開発ツール
- local
といったHTML,CSS,javascriptを編集するツールを使用します。
また、デザインの確認にAdobe XD、Figmaといったデザインツールを使用します。
求められるスキルとして
- HTML/CSS
- javascript
- WordPress
- PHP
- レスポンシブ対応
- SEO知識
などがあります。
主にコードを書くスキルが求められ、コードの意味や内容をしっかり理解する必要があります。
コードを正しく書くことは、SEO(検索エンジン最適化)に適したサイトを制作することであり、googleの検索結果に大きく影響を与えます。
コーダーの主な仕事内容は、デザイナーが作ったデザインカンプを元に、webサイトをコードを用いて表現することです。
最近では、コーディングだけの仕事は減少傾向にあり、＋デザイン、＋ディレクション、といったスキルが求められているのが現状です。
補足：フロントエンドエンジニアとは？
フロントエンド、フロントエンドエンジニア、といった言葉を見聞きする機会があるかもしれません。
一体何が違うのでしょうか？
フロントエンドとは、webサイトやwebアプリでユーザーが直接操作する部分のことを指します。
例えば、webサイトのデザイン、ボタンや検索バー
スクロールやクリック時のアクション、などなど
webサイトを開いたときに見えるもの、操作できるものが「フロントエンド」と呼ばれるものです。
フロントエンドエンジニアとは、フロントエンドをつくる人のことを指します。
HTML/CSSでレイアウト、色や配置を設定し、javascriptでアニメーションや動きのある実装。
ログイン画面や検索機能をつけたり、フレームワークを使ったwebアプリの開発などを行います。
フレームワークとは？→[工事中です]
コーダーと同一視されそうですが、よりプログラミング的な動きを実装する人のを事を指します。
Web制作におけるコーダーの立ち位置は？
コーダーはデザイナーとエンジニアの間に立って、デザイナーが仕上げたデザインカンプをサイト上に表示させ、エンジニアのプログラムが上手く動くようにと、動いたあとの表示の調整などを行います。
副業レベルでは、エンジニアと別々で組むことはほとんどないと思われますので、
デザイナーからデザインをいただいて仕事をすることが多いです。
つまり、Web制作におけるコーダーの立ち位置は以下のようになります。
- ディレクター
- デザイナー(サイトデザイン)
- コーダー(デザインの実装)
- エンジニア(動きの実装)
サイトに機能や動きをもたせる関係上、運用を行うこともあります。問題があった際の修正も手早く行うことができますね。
コーディングを学ぶことで、Web制作の案件にも挑戦できるようになります。
Webコーダーの必須スキル、身につけたいスキル
コーダーとして活躍することができれば、副業として収入を得られるでしょう。
そのために学んでおきたいスキルは
- HTML/CSS
- javascript
基本となるスキルです。Webサイトの骨格とも言われ、コーディングの必須スキルです。
また、案件の幅を広げるため
- wordpressの構築
- カスタマイズの知識
これらのスキルを身に着けておきたいです。
世の中の70%のWebサイトがwordpressといわており、案件も豊富にあります。
オリジナルテーマを制作、既存のテーマをカスタマイズ、一部を修正と、内容は多岐にわたりますが、必須スキルと読んで差し支えないレベルです。
レスポンシブデザイン
2010年頃より、スマホの普及やCSSの進化によりPC、スマホ、どちらも同じwebサイトを表示する必要が出てきました。
PCサイトをそのまま縮尺するのではなく、サイズが違う場合に違うデザインに変更するように作成する必要があります。
SEOの知識
Webサイトを制作する意味の一つに、検索結果に表示させるという目的があります。検索エンジンに最適化したコーディングを行う必要があります。
適切なタグ、見出しにキーワード、<head>に入れる内容などの知識が必要になってきます。
Git/GitHubの基本
チームで活動するときに必須となります。webサイト制作のバージョン管理を行い、同一の制作物の進捗共有、担当箇所の接合等を行うツールで問題があれば分離、巻き戻しなどができます。
コーディングスピードの向上
制作には短納期で求められるものも少なくありません。
ショートカットや、様々なジェネレーター、過去に学習、実装したコードのスニペット化などにて効率化、高速化を行う必要があります。
他にも、CSS設計や、各種フレームワークなど覚えることがたくさんあります。ですが最初はHTML/CSS/javascript,Wordpressについて学ぶことをおすすめします。
まとめ：Web制作とは？デザイナーとコーダーの違い
一口にWeb制作といっても、デザイナーとコーダーの違いがあります。
一般的にweb制作をやっています、というとコーダー、フロントエンドエンジニアの印象で、デザインを主として行っている方はWebデザイナーと名乗っている方が多い印象です。
webデザイナーはサイト全体のデザインを制作、クライアントとの調整が主とした業務、
webコーダーはデザイナーからいただいたデザインカンプを元にwebサイトを意味のあるコードで制作する業種となります。
当記事にてweb制作がそもそもどんなモノ？という疑問が晴れたら嬉しいです。
最後までご覧いただきありがとうございました！
