こんにちは。皆さんは「Web制作」と「Web開発」という2つの似た言葉をよく耳にしているかと思います。
この2つは非常に似た言葉ですが、全く違うものを指しています。これらを混同してしまうと、間違ったものを学んでしまう可能性があります。
そこで今回はこの2つの言葉が具体的にどんなものを指していて、どう違うのかを私見ではありますが書いていこうと思います。目次でもざっくり説明しているので、一度眺めていただくと良いです。
ちなみに僕自身はWeb制作の方が経験が多く、Web開発はそこまで経験があるわけではありません（スタートアップで2年半程度）。ですので、有識者の方がもしご覧になっていたら改善点などコメントでご指摘いただければ幸いです。
Web制作とは
Web制作 ＝ Webサイトを開発すること
ここで言う「Webサイト」とは、機能らしい機能はあまり含まずユーザーに情報を見せることを目的としたサイトを指します。例えばコーポレートサイトやLPなどです。
より具体的に言えば、飲食店のサイトはメニューやお店の場所が記載されていますね。しかし必ずしもモバイルオーダーの仕組みがあるわけではありませんね。そういう機能的なものを含まないものをWebサイトあるいはホームページなどと呼ぶ傾向にあります。
以下にサイト集を貼りますので、どんなものかイメージがつかない方は見てみてください。
コーポレートサイト：https://sankoudesign.com/category/corporatesite/
LP：https://rdlp.jp/lp-archive/
「Web制作」という言葉は、このWebサイトを作ることを指すわけです。
主な役割 ＝ デザインを再現すること
それではWeb制作におけるワークフローを考えてみましょう。僕が活動しているフリーランスチームのメディアで少し前に書いたものがあるので引用します。
クライアントから依頼を受けたら、どんなサイトにしたいかの要望をまとめます。それをもとにコンテンツを企画したりワイヤーフレームを策定したりデザインのイメージを提案するなど、要件を決めていきます。
これは「webディレクター」の仕事です。
コンテンツ、ワイヤーフレームが出来たら、実際にデザインに落とし込みます。これは「webデザイナー」の仕事です。デザイン制作の中で、webディレクターと協力してクライアントから素材の提供をお願いしたり、何度かデザインを提案するなどしてクライアント要望を満たすようなデザインを制作していきます。
さて、デザインができたらそれをコードに落とし込み、webサイトとして納品ができる状態にします。これが「コーダー/フロントエンドエンジニア」の仕事です。コーディングそのもののクオリティはもちろん、webディレクター/デザイナーと協力してデザインをきちんと再現できているかチェックを行ったりします。
このように、web制作の領域でははっきりと分業がされています。コーダーの業務領域はデザインが完成してから納品までですから、まずはその範囲において仕事をこなせることが最重要です。 だからこそ「デザインをHTML/CSS/JavaScriptで再現できること」が何よりも必要なのです。
https://eclair.media/archives/61
ざっくりまとめると、
- 要件定義（設計）
- デザイン制作
- サイト開発
となります。
ということで、「HTML/CSS/JavaScriptを用いて、いかにデザインを綺麗に再現できるか」がWeb制作の開発部分における主な関心事になります（もちろんそれが全てではない）。
学ぶべき言語について
HTML/CSS/JavaScriptを何よりも優先して習得する
さて、デザインを再現することが命題なわけですからHTML/CSS/JavaScriptは何よりも優先して学ぶべきでしょう。特にHTMLとCSSをどれだけ書けるかがこの領域では重要です。
どのブラウザ、デバイスでも綺麗に見えるようにサイトを作ることを目標にしましょう。
ちなみに、BootstrapなどのCSSフレームワークもあまり必要ないです。
CSSフレームワークは「開発スピードを上げる代わりに出来ることに制限がある」という性質のものです。例えばBootstrapのカラーを見てみると、標準で設定されている色のバリエーションは10種類程度のようです。
デザインでは当然もっと多くの色が使われていますから、結局設定を追加したり別のCSSを書くことになります。これではBootstrapの良さが活きていません。
そういうわけで、CSSの各種プロパティをしっかり覚えてどんなデザインでもWebで再現できるようになることが重要です。
JavaScriptは最低限で良い
JavaScriptについては、頻出のパーツを作れるようになっていれば最低限いいです。
Web制作の領域でのJavaScriptは、「アニメーションなどを使って見た目をリッチにする」という役割で使われることが多いからです。例えば外部サービスと連携する処理だとか、決済関係の処理をするとか、そういったことはこの領域ではあまり必要ありません。
頻出パーツは、以下のものです。個人的にはこれらの作り方を覚えればある程度のコーディング案件を対応できるようになると考えています。
- ハンバーガーメニュー
- スライドショー
- タブメニュー
- モーダルウィンドウ
- ドロップダウンメニュー
- スクロールアニメーション
- スムーススクロール
- アコーディオンメニュー
上記頻出パーツのそれぞれの具体的な作り方については、こちらをご覧ください。
この領域でフリーランスになるのは、後述のWeb開発に比べれば現実的
「フリーランスになる」という文脈ではどうでしょうか。少なくとも後述のWeb開発に比べれば現実的な範囲と言えると思います。クライアントからすればサイトがPC/スマホから見えれば良いので、要求される要件がそこまで多くありません。
簡単に言えば「HTML/CSS/JavaScriptのファイルを用意して、レンタルサーバーにアップロード」することができれば最低限コーディング案件としては成立します。場合によってはクライアントの方でアップロードすることもありますから、それすらも必要でないことがあります。
そういうわけで、フリーランスになることを視野に入れているのであればWeb制作の領域で進めた方がいいと思っています。
Web制作について、全体の学習ロードマップを少し前にチームのメディアでまとめておりますので是非そちらもあわせてご覧ください。
https://eclair.media/archives/263
Web開発とは
Web開発 ＝ Webアプリケーションを開発すること
ここで言う「Webアプリケーション」とは、何らかの機能を提供することが目的のものを指します。
例えばYouTubeやTwitterのようなものです。YouTubeには動画を閲覧できる機能もあれば、アカウントを登録して再生リストを作ったり閲覧履歴を見たりする機能もありますね。Twitterも同様にアカウントを作る機能もあれば、ツイートをする機能、ユーザーをフォローする機能、ツイートにいいねをする機能などがあります。
主な役割 ＝システムを構築すること
さて、Webアプリケーションの開発における業務フローを考えていきましょう。
Web制作と同様に、
- 要件定義（設計）
- デザイン制作
- システム構築
という形式は概ね同じですが、システムの設計、構築の比重が圧倒的に大きいのがWebアプリケーション開発です。
例えばYouTubeの機能をいくつか挙げてみましょう。
- アカウント機能
- 動画投稿機能
- 動画閲覧機能
- 配信機能
- コメント機能
- 再生リスト機能
- 閲覧履歴機能
- 広告機能
- 決済機能
ざっと挙げただけでもこれだけの機能があります。それぞれの機能がどのように動くか、そしてそれをどのように実現するかを考える必要があります。
さらにアカウントの機能はユーザーの個人情報を扱いますし、決済機能に至ってはユーザーのクレジットカード情報を扱います。機能に不備があって情報が流出すると大きな問題になりますから、セキュリティの面も当然考えなければなりません。
そういうわけで、Web制作に比べて圧倒的に複雑で難易度が高くなります。（その分報酬も高いのですが。）
学ぶべき言語について
フロントエンドならJavaScript、バックエンドならPHP/Java/Goなど
Webアプリケーション開発においては、「フロントエンド」と「バックエンド」という概念に分かれて開発するケースが多いと思います。それら自体の解説はここでは詳しくしませんが、ざっくりいうと以下のような分け方になります。
フロントエンド
ユーザーが直接触れる部分を指します。Webにおいてはブラウザ側になり、ユーザーの操作を受け付けて後述のバックエンド（サーバー）と通信を行います。バックエンドでの処理結果が返ってくるので、それをユーザーに見せたりもします。
バックエンド
フロントエンドからの通信を受けて、サーバー上で処理を行います。例えばユーザーのアカウント情報を保存したり、決済の処理を行なったりします。
フロントエンドとバックエンドの関係を、YouTubeのコメント機能を例に挙げて見てみます。（赤文字がフロントエンド、青文字がバックエンドです。）
- 動画ページのコメント欄に文字を入力し、送信ボタンを押す。
- するとYouTubeのバックエンドに通信が行き、コメントの情報（いつ誰がどんなコメントをしたか）を保存するなどの処理を行う。
- バックエンドの処理が完了したらブラウザに通信が来て、実際にコメントが反映されていることをユーザーに見せる。
という流れで機能が動きます。
さて、それぞれを構築する上で使われる言語は以下の通りです。
- フロントエンド：（HTML, CSS）, JavaScript
- バックエンド：PHP, Java, Go, Ruby, Python, JavaScript（Node.js）など
フロントエンドで機能を実現する上での言語は、現状JavaScriptしかありません。バックエンドはいくつか選択肢があります。
また、言語単体ではなくそれぞれのライブラリ・フレームワークを用いて開発することが実際は多いと思います。それらの知識も必要でしょう。
- フロントエンド：React, Vueなど
- バックエンド：Laravel（PHP）, Spring（Java）, Ruby on Rails, Django（Python）, Express（Node.js）など
というわけで、言語＋フレームワークをセットで使える状態が望ましいかと思います。
逆にHTML/CSSはそこそこで良い
Webアプリケーション開発においては、ものによりますが基本的には機能を実現できることの方が優先されます。もちろんユーザーにとって使いやすい見た目であることも重要です。
しかし、「使いやすい見た目」は重要でも「派手な見た目」はあまり要求されません。YouTubeもレイアウト自体はシンプルです。また、特に業務用のアプリケーションやそういうアプリケーションの管理画面は「とにかく使えれば良い」というケースがあります。
なので、HMTL/CSSで見た目を作ることは最低限できていれば良さそうです。
逆にこの領域ではBootstrapなどのCSSフレームワークを採用されることがありますから、覚えてみても良いかもしれません。シンプルな見た目を作ることに限れば非常に高速で開発できるからです。
いきなりこの領域でフリーランスになるのは相当難しい
ここまで読んでいただいた方にはもはや言うまでもないでしょうが、Web開発領域でいきなりフリーランスになることはほぼ無理です。
単純に覚えなければならない技術が難しい上に、持たなければならない責任が非常に大きいです。
もしクライアントが必要としているアプリケーションにアカウント機能があった場合、ユーザーの個人情報を適切に扱えますか？
決済機能があったらユーザーのクレジットカード情報を安全に保管できますか？意図しない決済が発生しないように十分な設計ができますか？
もしこれらが出来ていないのに仕事を受けて、困るのはあなたではなくクライアントの方です。もしアプリケーション上で問題が発生したら、場合によっては訴訟問題に発展する可能性もあります。
もし可能性があるとしたら、「すでに関係ができていて、多少のミスは許してもらえるし、結果もこだわらない」という方に出会えた時です。が、なかなかそういうケースを狙って出会うのは難しいでしょう。
ですからWeb開発領域を目指したい方は、まずは開発会社に就職・転職することを考えておきましょう。
まとめ
というわけで、「Web制作」と「Web開発」という言葉が指すものの違いをまとめました。何をどのように学んでいけばいいか迷っている方はぜひ参考にしてください。
コメントを残す