Web制作とは？独学でもできる？料金や制作の流れも解説します

Web制作は、いくつもの工程に分かれており、それぞれ担当する職種が異なります。

さまざまな職種がありますが、ここからは「クライアントからの依頼を受けてWeb制作会社がWeb制作をおこなう場合」を想定して、職種ごとにどのようなことをおこなうのか、順番に解説していきます。

Webプロデューサー

Webプロデューサーは、プロジェクト全体の総合責任者です。

サイト制作の企画や立案、クライアントへの提案などをおこないます。

ただし、次に挙げるWebディレクターとの業務の線引きは、会社によって異なります。

Webディレクター

Webディレクターは、制作現場のまとめ役ともいえる立場です。

クライアントとやりとりをしたり、スケジュール管理をしたりと、幅広い業務を担当します。

なかには、Webディレクターとして経験を積んだ後に、Webプロデューサーへとステップアップする方もいます。

Webデザイナー

Webデザイナーは、その名の通り、Webページをデザインする職種です。

サイト全体の色合いや、写真のレイアウトを決めたり、ロゴやバナーを作成したりします。

見栄えを良くするだけでなく、Webサイトを訪れた人たちにとって、わかりやすいページに仕上げることが求められます。

フロントエンドエンジニア（コーダー）

フロントエンドエンジニアは、コーダーとも呼ばれています。

主な仕事は、Webデザイナーが作成したデザインを、Web上で見える形にすることです。

具体的には、HTML（エイチティーエムエル）やCSS（シーエスエス）、JavaScript（ジャバスクリプト）などのマークアップ言語やプログラミング言語を使って、ソースコードを書き、Webブラウザに反映させていきます。

会社によっては、Webデザイナーが兼任することもあります。

また、求人サイト上で「未経験者OK」の求人も見られることから、フロントエンドエンジニアは、Web制作初心者でも挑戦しやすい職種と言えるでしょう。

バックエンドエンジニア

バックエンドエンジニアは、Webサイトに必要不可欠なシステムやデータベースの構築をおこなう仕事です。

また、Webサイトが完成した後も、運用やメンテナンスに携わることがあります。

フロントエンドエンジニアよりも、さらに深いWeb知識が求められるため、まずはフロントエンドエンジニアとしての業務に慣れてからチャレンジするのもいいでしょう。

Webライター

Webサイトに載せる文章コンテンツを作成する仕事です。

紙媒体での文章作成と異なる点は、WebサイトがGoogleの検索結果上位に表示されるようにするため、SEO（検索エンジン最適化）の知識が必要となる点です。

Web制作に携わる他の職種の人が兼任したり、外部に依頼したりすることもあります。

相場といっても、作りたいWebサイトの種類や規模によって、金額には大きな差があります。

具体的には、下記の要素によって、金額が決まると考えましょう。

• サイトのページ数や規模
• デザイン（例：テンプレート使用の有無など）
• 追加したい機能（例：ショッピングカート機能・問い合わせ機能など）
• Webサイトで集客に力を入れたいかどうか

また、制作するWebサイトのタイプだけでなく、依頼先によっても相場は異なります。

基本的には、制作会社よりも、個人で活動している個人事業主（フリーランス）に依頼する方が金額を安く抑えられると言われています。

企画やサイト設計は、Web制作の目的を決める重要な段階です。

Webサイトのコンセプトやターゲット（どのような人に向けたサイトなのか）、掲載したいコンテンツについてなど、Webサイト全体の構成に関する部分を決めていきます。

WebプロデューサーやWebディレクターが担当することの多い工程です。

企画・サイト設計で決まった内容を元に、Webサイトのデザインを作ります。

主にWebデザイナーが、サイト全体の色合いを考えたり、文字などの位置を決めたりする業務をおこないます。また、イラストや写真など、必要な素材があれば、準備します。

基本的に、一度デザインして完成というわけではなく、クライアントに見せつつ「もっとこうして欲しい」という要望を聞きながら作り上げていきます。

デザインをWebブラウザ上に反映させ、Webサイトとして機能させるための段階です。

具体的には、Webデザイナーが作成した仕様書を元に、フロントエンドエンジニア（コーダー）が、Webサイトのビジュアル面を調整します。

そして、バックエンドエンジニアが、Webサイトのシステム設計・開発など、機能面の開発をおこないます。

実装が完了したら「動作検証」や「デバッグ」などと呼ばれるテストをして、問題なくWebサイトが動くかどうかチェックします。

実装までが完了したら、Webサイトの完成です。

Webサイトが公開された後も、制作会社がページの更新や定期的なメンテナンスなどを担当することもあります。

また、制作会社によっては「Webサイトからの集客を強化するための運用をおこなう」などのマーケティング面も合わせて、サポートすることもあります。

フロントエンドエンジニアやバックエンドエンジニアに必須となるのがプログラミング言語やマークアップ言語を扱えるスキルです。

まずは、Web制作でよく使われる言語、HTMLやCSS、JavaScript などの習得を目指すといいでしょう。

なお、高校生までの方であれば、子ども向けのプログラミング教室「LITALICOワンダー（ゲーム＆アプリエキスパートコース）」で、Web制作に必要なプログラミングスキルを身につけることができます。

Webデザイナーには、Webサイトを魅力的に仕上げるためのデザインスキルが求められます。

大切なポイントは、ただ見栄えの良さを追求するだけでなく「どのようなデザインであれば、サイト訪問者にとってわかりやすいのか」など、利便性も考慮したうえでデザイン制作ができるようになることです。

また、Webデザインを作るときは、Photoshop（フォトショップ）やIllustrator（イラストレーター）などの専用ツールを使います。

そのため、デザインの知識に加えて、各ツールを扱えるスキルもあるといいでしょう。

Webマーケティングとは、Webサイトで集客をして、認知度をアップさせたり、商品の販売を促進したりするための活動のことを指します。

そして、認知度向上や販売促進などは、クライアントがWeb制作を依頼する目的でもあります。

そのため、WebプロデューサーやWebディレクターはもちろんのこと、Webデザイナーやエンジニアの人たちも、理解しておきたい知識と言えるでしょう。

Web制作関連の本は、書店やオンラインショップで多数販売されています。

ただし「初心者向けにWebデザインの基礎についてまとめられている」や「プログラミング言語に特化している」など、種類や対象のレベルはさまざまです。

そのため、オンラインで購入する場合は「試し読み」のシステムを利用して、中身をチェックし、自分にとってわかりやすいかどうかを判断してから購入しましょう。

Web制作初心者の場合は、イラストや図が豊富に使われている本や、カラフルなタイプなど、読みやすさ重視で選ぶ方法もおすすめです。

Web制作が学べる学習サイトのなかには、一部無料や完全無料で活用できるものもあります。

一部のみ無料の場合は、まずは無料の範囲内で利用してみて「このサイトでもっと学びたい」と思ったら、有料プランに切り替えてみるといいでしょう。

学習サイトのなかには「ドットインストール」など、動画を見ながら勉強できるタイプもあります。

短い動画であれば、移動時間を有効的に活用しつつ、プログラミングが学べるでしょう。

また、YouTubeでも「Web制作の流れ」や「Webデザインの基礎」など、さまざまな動画コンテンツが公開されています。

無料で視聴できるため、気軽に活用してみましょう。

Web制作を独学していて、より効率的に深く学びたいと思ったら、Web制作が学べるスクールを活用するのもおすすめです。

費用はかかるものの「その道のプロから学べる」や「不明点やエラーについて質問できる」など、学習する上でのメリットも得られるため、就職や転職に向けて本気でWeb制作を学びたい方は、検討する価値のある学習方法と言えるでしょう。

また、スクールなどで人からサポートを受けつつ学ぶことは「わからなさすぎて学習を中断してしまった」という挫折を防ぐことにもつながります。