皆さんはWebデザイナーやWebプログラマーといった仕事に興味はあるでしょうか？
今はシステム開発という、Webサイト作成とは少し違う仕事をしているのですが、以前はWebデザイナー兼Webプログラマーとして働いていました。
まだ学習中の方だとしても、大体の仕事の流れを理解している方が効率よく学習できると思うので、今回は具体的なWebサイト制作の流れを紹介していきます。
システム開発とWeb制作は違う
色々なカタカナがありややこしいIT業界ですが、主に「システム開発」と「Web制作」という二つの仕事があります。
| 職種 | 内容 | 言語 |
| Web制作 | 企業のWebサイトを作成する。プログラムという観点では比較的単純な事が多いが、配色や配置などデザインの知識も必要になる。 | HTML, CSS, JS,PHP |
| システム開発 | 企業の業務システムを開発する。皆がプログラマーと聞いてイメージするのはこっち。プログラミングは複雑な事が多い。 | 色々 |
超ざっくりですが、こんな感じです。
「Webエンジニア」というのはシステム開発なので、間違えないでください。
実際ここら辺は入ってみないと分からないですよね。
完全に私の主観ですが、「Web制作」よりも「システム開発」の方がお給料が多い傾向にある気がします。もちろん会社によってかなり違うと思います。
正直Web制作は儲かる方ではない
完全にターゲットや制作するサイトの規模等にもよるのですが、Web制作はガッポリ儲かる職種とはあまり言えないと思います。
どちらかというと、「システム開発」や「Webコンサルティング」が、企業のメインの稼ぎ手段の事が多いです。
Web制作は薄利多売な傾向にあるんですよね。
なので、もし個人でWeb制作を行うという場合等には、ブランディングや差別化をしないとなかなかキツイと思います。
Webデザイナーとコーダーの違い
やっとここからWeb制作に関する内容になってくるのですが、主に3種類前後のお仕事に分ける事ができます。
- 営業
- Webデザイナー
- Webコーダー
- Webディレクター
小さい企業の場合は「営業」と「Web制作全般」という分け方をしている場合が多いです。
人でが増えて着たり、作業分担ができる規模の会社だと、「Webデザイナー」と「Webプログラマー」更に、「Webディレクター」という風に別れる事があります。
逆に、専業の場合等は営業からWebデザインから、何から何まで全部一人でする事が多いです。
・WebデザイナーはWebサイトのデザインを作成する人。 ・Webコーダーは、Webデザイン通りにコーディングする人。 ・Webディレクターはプロジェクトの進捗管理やお客さんとのやり取り等、Web制作の管理職的なイメージの人。
私が前在籍していた所では、人が少ない事もあって全体的な作業を経験しましたが、どちらかというとコーダーがメインでした。一応デザインも作成したり、お客さんと話す場にも出席したり、という感じの役割でした。
具体的な仕事の流れ
ここからは、Web制作の大体の仕事の流れを紹介します。
ここら辺は企業によっても流れが違うと思うので、あくまで一例として見て下さい。
（一応、フリーランスの人で全ての作業を一人でしている前提で書いてきます。）
仕事を取ってくる
まずはWebサイトを作って欲しいというお客さんを見つける必要があります。
なので、営業電話、紹介サイト、クラウドソーシング、SNS等、ありとあらゆる手段を活用してお客さんを獲得してきます。
これは個人的な感想ですが、ある程度最初さえ仕事をもらえれば、その後は意外と向こうから仕事が来る事が多いです。
これから自分で始めてみようとしている方は頑張ってください。
クライアントへのヒアリング
Webサイトを制作して欲しいという人を見つけたとします。
そうしたら、次は「どのようなサイトを作りたいか」「どんな機能が欲しいか」「予算はどのくらいか」という感じクライアントへヒアリングを行い、情報を集めていきます。
Webデザインやコーディングをメインにやっていた身からすると、ここが一番重要だと思います。
ここでクライアントからイメージを引き出すのがヘタだと、デザインを作成する段階で物凄く悩みますし、イメージと違うからもう少し変えて欲しいと言われたら、かなりのロスになります。
それに、「Webサイトが欲しいだけだから何でも良いよ」と言われ、いざサイトのデザイン案を渡すと「企業イメージと少し合わない」とか「もっと親しみやすくして欲しいし、ウチとしてはこの部分を一番アピールしたい」という事が多々あります。
（一応企業イメージの調査等はしていたのですが。）
個人的な意見としては、過去の案件で作成したサイト等の実物を見せながらヒアリングを行ったり、「高級感を出すか、親しみやすさを出すか」という様なWebデザインを作成する上で使えそうな内容を、ヒアリングを行う前にまとめておくと良いと思います。
プロジェクトの計画と見積
ヒアリングを行い、大体の情報が集められたとしましょう。
そうしたら、次は色々と計画を練っていきます。
「人数はどのくらいか」「どの程度の期間必要か」「仕事の工程ごとの時間配分をどうするか」「クライアントの提示した予算で可能か」「クライアントへ提案できる事は何か」という様な感じで様々な事を決めていきます。
もし予算が足りないとしたら、もう少し小さい規模のサイトにする事を提案したり、サイトの規模はそのままにすると予算がどのくらいになるか見積もったり、という事も必要になります。
また、もしフリーランスで一人で仕事を回しており手一杯の場合は、予算と期間を元に外注を検討してみるのも手でしょう。
サイトコンテンツの設計
色々と計画が決まり、各工程の時間配分も決まったとします。
そうしたら、いよいよサイトコンテンツの設計に入ります。
ここら辺は計画時に同時にやる事もあると思いますし、別で「サイトマップ」という物を作成して色々やる所もあります。
サイトマップというのは、そのサイトに何のページがあり、どのページと繋がっているのかというのを分かりやすくした物です。 専用のソフトを使う場合もありますし、Excelやパワポ等のソフトで簡単に済ましてしまう事もあります。
Webデザイン案の作成
計画が終了し、Webサイトのどのようなコンテンツを配置するのかも決まりました。
そうしたら、次は「Webサイトのデザイン案」という物を作成していきます。
デザイン案というのは、そのWebサイトがどのような見た目になるのか、というのを伝える物です。 Webデザインを作成する専用のソフトがあるので、その使い方動画等を見るとどの様な物なのかイメージしやすいと思います。 具体的には、Adobe XD や Figma 等のソフトです。 XDは有料になってしまったので、無料のFigmaを使ってみると良いと思います。
デザイン案に関しては、2個や3個ほど作成する事が多いと思います。
もちろん1個だけの場合もあると思います。まちまちですね。
Webデザイン通りにコーディング
Webサイトのデザインが決まりました。
そうしたら、次はデザイン通りにWebサイトをコーディングしていきます。
具体的なプログラミング言語は「HTML, CSS, JavaScript」ですね。この中にはありませんが「PHP」という言語の知識もあると良いと思います。
これらの言語を使用し、クリックをしたら実際に開けるサイト(HTMLファイル)をデザイン通りに作成します。
サーバーへデータをあげる
Webサイトを全世界へ公開する際には、「Webサーバー」という物が必要になります。
これは自分で高級なサーバー用PCを買ったりする必要はありません。
レンタルサーバーと言われるサービスを利用したり、少し知識は多く必要になりますが、AWS等のサービスを利用する事が多いです。
そして、大体の場合はサーバーにWordpressというCMS(コンテンツマネジメントシステム)をインストールし、Wordpress用に使えるように少し変更したHTML,CSS等のデータをサーバー上にあげます。
CMS(コンテンツマネジメントシステム)は、サイトの情報等を直接プログラムのコードを弄らずに変更、追加、削除ができるシステムです。 これを導入すると、まるでブログサイトの様に新しい記事を追加したり、特定の部分の文字を変えたりできます。
作成したサイトデータをWordpress用に少し変更する場面で使用するのが「PHP」というプログラミング言語です。
PHPの基礎知識と、Wordpress用の特別なPHPの書き方の知識が必要になります。
テスト
実際のサーバーでWebサイトが動いている状態になりました。
そうしたら、次はテストを行います。
サイトの機能や動作等をチェックし、問題が無ければ次の工程へ進みます。
テストなのですが、予めテストケースという物を作成しておき、そのテストケースに沿って行う事でテスト漏れを防ぎやすくなるので、テストを行う際は参考にしてみて下さい。
クライアントレビューとフィードバック
既にサイトは動いていますが、まだ全世界へ公開はしていません。
まずはクライアントの方にWebサイトが動いている状態を確認してもらいレビューを頂きます。そのレビューで修正箇所等があれば修正を行い、このままで大丈夫なら全世界への公開の準備を行います。
クライアントにログインID等を渡す
先ほど「Wordpress」というCMSで、Webサイトをまるでブログの用に扱うと言いましたが、このWordpressで色々サイトの内容をいじるためにログインが必要です。
このログインID等を、お客様専用に作成したWordpressの操作ドキュメントと一緒に渡します。
WordPressの操作用ドキュメントはExcelやワード等で作成しPDF化します。
操作用ドキュメントの作り方や内容は、人や会社によって違うかと思いますが、私の場合は実際に操作をしている画面のスクショや、操作手順の説明文などを書いた単純な物です。
サイトの公開と保守
残るはサイトを公開するのみです。
実際に作成したサイトを全世界へ公開し、後はそのサイトが正常に動き続ける為に保守をします。
保守では、使用しているプラグインやプログラミング言語、CMS等のバージョンが上がったらそれを対応させたり、時にはバージョンアップを正常に行う為に古い機能を変更したりも必要です。
更に、クライアントでは変更できない部分を変更したり、画像の入れ替えを行ったり、新たな機能を入れたり、という事を保守費用のみで良いのか、新たな費用を発生させる必要があるか検討しながら行います。
また、新たなセキュリティーホールが見つかる等、早急な対応が見つかった際には迅速に対処する必要もあります。
保守って簡単そうで色々面倒なんですよ。
更に、Webサーバーやドメイン(サイトの住所のような物)には定期的にお金が発生するので、それらの費用に保守費用を加えた額を、毎月お客様へ請求します。
作業はこれで一通り終わりです。お疲れ様でした。
作業実績的のページに公開する
これも人や会社によると思うのですが、ポートフォリオと呼ばれる、自分達が過去に手掛けた作品を公開する場所に、今回作成したサイトの情報を載せます。
このポートフォリオを用意しておく事で、今後のお客様の参考になったり、自分の信頼性の向上に繋がったりします。
ちなみに、IT企業に就職する際にこのポートフォリオがあるとかなり強いです。
自分の作品集として、練習がてら一つサイトを作ってみるのも良いでしょう。
以上です！
お疲れさまでした。これで大まかなWebサイト制作の流れは終了になります。
Webサイト制作に興味のある方、IT企業を考えている方、学習中の方、フリーランスをしようか検討している方、様々な人の参考にしてもらえれば幸いです。
最後にもう一度言いますが、この流れは人や企業によって違います。
また。高度なITが登場した今、このやり方は効率の悪い古いやり方になる可能性の十分に考えられます。
とりあえず模倣してみて基礎が固まったら、自分なりに色々アレンジを加えて挑戦してみて下さい。
必要なスキル一覧
今回紹介した事をするにあたり、必要な知識を紹介します。
- 営業スキル（仕事をどこかから持ってくる）
- 対人スキル（クライアントから聞き出す）
- 計画性（スケジューリング等）
- オフィスソフトのスキル（Excel, Word）
- Webデザインスキル(Adobe XD, Figma)
- 画像編集スキル（Photoshop, illustrator, GIMP）
- プログラミングスキル（HTML, Excel, WordaScript, PHP）
- Wodpressスキル（全般）
- サーバースキル（レンタルサーバー等）
- ドメイン取得（お名前.com等）
自分に足りないと思う物があったら、学習をしてみて下さい。
逆に、自分にあるスキルを組み合わせて、新たな物を生み出しても良いかもしれません。
