ノマド大学公式LINEから、一流フリーランスを目指すための資産形成にとどまらない豪華特典を配布中

Web(ホームページ)制作とは?業務の流れ・7つの必須スキルやオワコンではない理由を解説

「Webクリエイターとしての独立に憧れるけれど稼げるのかな……」
「Web制作はオワコンって本当?!」

Web制作は業務内容が幅広く、副業との相性の良い仕事です。将来的に、転職のほか、フリーランスとして稼ぐ道も夢ではありません。

ただし、競争率が高く、高額案件の獲得にはハイレベルなWeb制作スキルを求められます。

また、初心者では仕事がないと聞き、勉強すべきか決めかねている方も多いのではないでしょうか。

結論として、迷っているなら勉強してみることをおすすめします。Web制作職は実績が重視されるため、早く学び始めるに越したことはありません。

本記事では、Web制作のすべてを初心者にもわかりやすくまとめました。あわせて、プロとして身に付けるべきスキルについてもお伝えします。「オワコン」ともいわれるWeb制作のこの先を見通せる内容になっていますので、今からWeb制作の勉強を始めたい方はぜひご一読ください。

Web制作とは

Web(ホームページ)制作とは、簡潔にいうと、企業や個人のWebサイトおよびそのコンテンツを作ることです。

HTMLやCSS、JavaScriptなどを用いたコーディングがWeb制作の基本となります。

思い通りのWebサイトを制作するためには、専門スキルの学習が必要です。また、Web制作の現場では、IllustratorやPhotoshopをはじめとする複数のWeb制作ツールを使いこなすことも求められます。

Webサイトとホームページの違い

Webサイトとホームページは混同されることが多く、場合によっては同じ意味で扱われるケースも多い用語です。例えば、企業の公式サイト=ホームページといったイメージを持っている方も多いでしょう。

しかし、厳密にいうと、Webサイトとホームページはまったく別の意味を持ちます。

Webサイトとは、Webページおよびコンテンツの総称です。一方、ホームページはWebサイトの表紙となるページのことであり、ホーム画面とも呼ばれます。

Web制作案件で先方からホームページというワードが出てきたときには、念のためクライアントに確認したほうが良いでしょう。

Web制作とWebデザイナー・マーケターとの違い

上記3つの用語が異なるポイントは、その業務内容および範囲です。

Web制作は、サイトの構築作業のすべてを指します。そして、WebデザインとWebマーケティングも、Web制作の一環で必要な取り組みとなります。

Webマーケティングは、宣伝方針と集客方法の検討や提案が主な業務となります。一方、WebデザインはWebサイトの見た目を美しく、見やすく整った状態にすることがコア業務です。

Web制作の仕事内容

Web制作にはさまざまな業務がありますが、大きく分けると次の5つです。

  • Webサイトの計画・進行
  • Webサイトの構築
  • Webデザイン
  • Webライティング
  • Webマーケティング

上記それぞれを担当する職種と業務内容の具体例を紹介しますので、どの分野なら取り組めそうか考える際の材料にしてください。

Webサイトの計画・進行

Webサイトの作成計画や業務の進行を担うのは、WebプロデューサーやWebディレクターと呼ばれるポジションです。

具体的な業務内容として、Webサイト構築の企画出しと予算・収益化の計画立案が挙げられます。また、プロジェクトの進行の各段階をアシストするのも業務の一環です。

Webサイトの構築

Webサイトのシステム全般を構築する役割は、Webエンジニアやコーダーが担います。Webエンジニアやコーダーは、下記の作業が業務の中心です。

  • システム開発
  • サイト構築
  • 各種コンテンツ・機能の実装
  • サーバードメイン・SSLの準備と管理
  • Webサイトの保守・運用
  • Webサイトの更新・リニューアル

Webエンジニアやコーダーは、上記の業務をコーディングを用いてこなします。複数のプログラミング言語を組み合わせ、Webサイトにさまざまな機能やデザイン、動きを生み出します。

Webデザイン

Webサイトの外観をデザインする業務は、Webデザイナーの担当です。クライアントの要望に沿って、Webサイト全体もしくは各種コンテンツのレイアウトやデザインを考えます。

Webサイトの見た目を美しく整え、使い勝手をよくすることでUXを高める重要な仕事です。また、ロゴやバナーの作成もWebデザイナーが担当します。

Webライティング

Webライティングとは、Webサイトに掲載するコンテンツのテキストを考えて執筆することです。

執筆には特殊な資格等は必要ありませんが、高い言語化能力が求められます。また、紙の書籍の執筆とは異なり、ユーザーの検索結果の上位に表示されやすくするためのSEOの知識も欠かせません。

そのため、サイトコンテンツの文章執筆をWeb専門のライターが担うケースが大半です。Webライターは、ほかのWeb制作職と比べハードルが低いこともあり、副業としての人気が高まっています。

Webマーケティング

Webサイト制作時、商品・サービスが売れやすくする施策を考える仕事がWebマーケティングです。

Webマーケターは、集客効果を最大限に高めることでユーザーのファン化を促します。代表的なWebマーケティング手法は、以下の4項目です。

  • Web広告による宣伝
  • 販売促進キャンペーンの実施
  • 自社サイト運営
  • SEO

Webマーケティングでは、アクセス解析などを通し、ユーザーへ商品・サービス訴求方法を考えなければなりません。

なお、Webマーケティングのうち、サイト内でユーザーの購入意欲を刺激する仕組みを作る手法をコンテンツマーケティングといいます。

また、公開済みののアクセス解析結果をもとに、マーケティング施策を見直すこともWebマーケターの業務の一環です。

Webマーケターは専門知識を要する難しい仕事ではありますが、スキルを身に付ければWeb制作分野での仕事の幅が広がるでしょう。

Webサイト制作の流れ

ここからは、実際に自分でWebサイトを制作するやり方をみていきましょう。Webサイトは、一般的に以下のステップで構築を進めます。

  • 情報収集・分析
  • 企画・打ち合わせ
  • 見積もり・契約
  • Webサイトの設計図とテキストの作成
  • Webサイトのデザイン
  • コーディング
  • チェック
  • 公開

上記の一連の流れと各ステップにおけるポイントを説明しますので、制作する際に意識してみてください。

情報収集・分析

Webサイトを作成するときは、まず情報収集から始めましょう。リサーチした内容は、Webサイト制作の計画全般に関わる重要なポイントとなります。自らのサイトの強みとしてWebサイトで何をアピールするのかを考えるためには、入念なリサーチが不可欠です。

ただし、競合を意識しすぎるあまり類似のサイトにならないよう注意してください。競合サイトをリサーチする目的は、あくまでも他者との比較による自社の強みの明確化であることを念頭においてリサーチするよう心がけましょう。

企画・打ち合わせ

次に、開設予定のWebサイトのRPFを確認しましょう。RFPとは、Webサイトの概要や課題をまとめた文書です。具体的には、以下のような項目が記載されています。

  • サイトの目的
  • コンセプト
  • 具体的な数値目標
  • ターゲットとなるペルソナ

Webサイト制作は、その目的によって構成を変えなければなりません。サービス訴求や企業のイメージアップなど、何を目標とするのかを確認のうえ、Webサイトの全体像(サイトマップ)とページ・コンテンツごとの構成(ワイヤーフレーム)を考えましょう。

業務として外部から発注を受けてWeb制作に取り掛かる場合には、クライアントとイメージが食い違わないよう、綿密に打ち合わせることが大切です。

見積もり・契約

続いて、Webサイトのページ数や盛り込む内容から必要な費用を試算し、予算内に収まるようコンテンツや機能を取捨選択しましょう。

なお、Webサイトの自主制作ではなく外部からの制作案件の場合は、納期内に完了させられる作業量かも確認してください。

また、クライアントへ提出する見積書を作成する際は、修正対応が可能な回数も記載しておくと後々のトラブルが減らせます。双方が内容に合意したら、契約を締結しましょう。

なお、Web制作業界では、費用を後払い方式とするのが一般的です。

Webサイトのデザイン・コーディング

ここから、実際にサイトを構築するプロセスに入ります。先のステップで描いたサイトマップやワイヤーフレームを基にWebサイトのデザイン・レイアウトを考え、コードを書いて形にしていきます。

特定のロゴやイメージカラーをサイトに組み込むなど、独自性をアピールする工夫を盛り込んだデザインになるよう心がけましょう。

ただし、デザインにこだわりすぎると、見やすさを損ねるおそれがあります。こだわりも大切ですが、最優先にすべきはUXであるということを忘れないよう注意してください。

チェック

Webサイトの構築があらかた完了したら、外部からどのように見えるのか、機能が正常に動くかなどをチェックしましょう。受注案件の場合は、定期的に発注者へ出来ばえを確認しつつ、サイトをブラッシュアップしていきましょう。

公開

Webサイトの外観と動作を最終確認し、完成したらWebサイトを外部に公開することで制作工程は完了です。

とはいえ、Webサイト制作は公開したらそこで終わりというわけではありません。

公開後の不具合対応や、ユーザーの要望をふまえて改修し、よりよいWebサイトになるようブラッシュアップを続けましょう。

あわせて、定期的なアクセス解析などからマーケティング施策やSEOを見直し、集客効果を高めていくことも必要です。

なお、外部からの受注品の場合、完成後は取引先に納品する流れとなります。リリース後の管理・運用も任されている場合は、上記と同じ手法でWebサイトの改善に努めましょう。

リピーターになってもらえるよう、アフターフォローは可能なかぎり充実させましょう。

Web制作で構築できるサイトの種類

Web制作では、前章で解説した流れで、以下のようなサイトを構築できます。

  • LP(ランディングページ)
  • コーポレートサイト
  • ECサイト(ネットショップ)
  • サービスサイト
  • 採用サイト
  • オウンドメディア

上記のサイトそれぞれの特徴と、組み込むべきコンテンツを紹介しますので、制作の際の参考にしてみてください。

LP(ランディングページ)

LP(ランディングページ)は、一般的に、縦に長くスクロールしながら見るタイプの商品紹介ページを指します。ページ数が少ないぶん、実装できるコンテンツに限りがあることから、Web制作の中でも難易度が比較的低いジャンルです。

LPページには、以下のようなコンテンツを盛り込みます。

  • 豊富な商品情報・口コミ
  • 商品購入ボタン
  • 写真・画像
  • 資料請求・問い合わせフォーム

商品紹介から、最終的にCTAにつなげるために必要なコンテンツを実装しましょう。

なお、LPには、以下2つの意味がある点に注意してください。

ホームページ(ホーム画面)

消費者へのサービス訴求を目的としたページ

実は、LPが指す本来の意味とは、前者の「ホームページ」です。しかし、Web制作業界では、ホームページをLPと表すことはほとんどありません。

一般的には訴求ページを意味しますが、制作業務としてホームページ案件と称されている場合は、念のため先方へ確認しておくほうがよいでしょう。

コーポレートサイト

コーポレートサイトとは、端的にいうと、企業の公式ホームページのことです。制作の際は、次のようなコンテンツを盛り込みます。

  • 挨拶文
  • 基本的な会社情報
  • 事業内容
  • 住所・アクセスマップの外部連携
  • 取り扱う商品・サービスの概要
  • 消費者・顧客に伝えたい企業理念や
  • 最新ニューストピックス
  • オウンドメディア・ブログの更新情報
  • 採用情報
  • IR情報
  • 問い合わせ・依頼フォーム

基本的に、ビジネス用の名刺に載せる内容をデジタル化したイメージです。

サービスサイト

サービスサイトとは、コーポレートサイトに掲載したコンテンツのうち、商品・サービスに関する紹介ページ・コンテンツを独立させた特化型のサイトです。

サービスサイトには、次のようなコンテンツを盛り込むと良いでしょう。

  • 企業情報
  • 商品・サービスの特徴
  • 価格
  • 導入事例
  • サポート情報
  • お問い合わせ・資料請求フォーム
  • パンフレットダウンロード
  • メールマガジン
  • ブログ・オウンドメディアへのリンク
  • SNSへのリンク

BtoB事業の場合、サービスサイトが顧客獲得に直結する可能性が高いといえます。UXやユーザビリティにこだわり、使いやすく見やすいサイト構築を目指しましょう。

採用サイト

採用サイトとは、その名のとおり求人・転職用のWebサイトのことです。コーポレートサイトのコンテンツのひとつとして組み込まれている場合もありますが、大・中規模の企業では個別に採用サイトを構築しているケースもめずらしくありません。

採用サイトに実装が推奨されるコンテンツは、以下のとおりです。

  • 募集要項
  • 会社の沿革
  • 会社情報
  • 事業内容
  • 代表者・従業員からのメッセージ
  • 社内の様子
  • ブログ
  • SNS連携

企業の採用情報を掲載し、求人を募るためのサイトですので、その会社で働くことの魅力が伝わるコンテンツを盛り込まなければなりません。文字だけではなく画像や写真を効果的に使い、視覚的にも魅力的なサイトを構築する工夫を考えてみましょう。

オウンドメディア

オウンドメディアとは、企業が運営する情報提供メディアを指します。サイト内のコンテンツを介し、ユーザーの信頼感を高めることで、最終的にCTAにつなげることが主な目的です。

オウンドメディアは、自社商品のターゲットとなる潜在顧客層にもアプローチできる手段になります。SEOを盛り込んだコンテンツを制作し、幅広いキーワードから検索流入数を増やせば、売上を増やせる可能性があります。

よって、オウンドメディア構築の際は、最低でも以下のコンテンツを実装することをおすすめします。

  • ブログコンテンツ
  • 運営元情報
  • サイトのコンセプト
  • 問い合わせフォーム
  • SNS連携

上記に加え、会員登録機能やコミュニティを開設することで顧客ロイヤルティや仲間意識が生まれます。企業への信頼感が高まるだけではなく、SNSなどによる拡散効果も期待できるでしょう。

Web制作にかかる期間と相場

一口にWebサイトやホームページといっても、その規模や盛り込むコンテンツは、サイトの種類や取り扱いジャンルによってさまざまです。ここからは、以下3つの規模別に分け、制作期間と費用の相場をそれぞれ紹介します。

  • 小規模サイト
  • 中規模サイト
  • 大規模サイト

Webサイト制作の計画・見積段階の参考にしてください。

小規模サイト

小規模サイトに該当するのは、総数が20ページ以内のWebサイトです。例えば、以下の種類のサイトが小規模にあたります。

  • LP
  • キャンペーンサイト
  • ASPを用いたECサイト
  • 短期間限定の採用サイト

1ページ程度のLPなら、1カ月以内、5万円程度が相場です。また、掲載期間の短いサイトやシンプルな機能のみ実装する場合は多くのコンテンツはいらないため、3カ月以内には公開できるでしょう。上記の費用は、30〜40万円程度です。

中規模サイト

中規模になると、総ページ数が30〜100以内になります。具体的には、以下がよくある中規模サイトの例です。

  • 中小企業のコーポレートサイト
  • コンテンツが多い採用サイト

中規模サイトの構築には、一般的に6〜8カ月程度かかります。費用は60万円〜が相場になりますが、コンテンツを充実させたり、マーケティングに力を入れたりする場合は数百万円に上ることもめずらしくありません。

大規模サイト

総ページ数が100を超えると、大規模サイトとして扱われるようになります。なお、次のようなジャンルが大規模サイトの具体例です。

  • 大企業のコーポレートサイト
  • 多くの製品・情報を記載するサービスサイト
  • PV数の多いオウンドメディア

大規模サイトを構築する場合、半年〜1年はかかると見積もっておく必要があります。制作費用は、500万円は下りません。

こだわり抜いたデザインとコンテンツ、SEO対策などを盛り込んだ大規模サイトだと、1千万円を超えることもあるでしょう。

Web制作に必須の7つのスキル

Web制作を仕事にするためには、下記のスキルをある程度使いこなせることが求められます。

  • プログラミング言語のコーディング
  • CMSツールの操作
  • Web制作の設計
  • デザインセンス
  • 文章力
  • ITリテラシー

上記の各項目で具体的にどのような内容を身につけておくべきか、以下で考えていきましょう。

コーディング

Webサイトにさまざまなコンテンツを思いどおりに実装するためには、ソースコードが書けることが大前提です。

Webサイトのデザインに必要なHTMLやCSS、動きをつけるJavaScriptなどのコーディングスキルが求められます。

なお、コーディングは総じて習得が難しいと評価されるスキルです。確実に身に付けたいのなら、何らかの形でプロの指導を仰いだほうがよいでしょう。

CMSツールの操作

ホームページやWebコンテンツを効率よく制作したいなら、CMSツールも習得しておくと良いでしょう。なお、CMSとは、Webサイト構築に特化したツールです。

CMSにはノーコードでサイトを構築できるツールもあり、具体的にはWordPressやSTUDIOなどが該当します。ノーコードCMSを活用すれば、専門的な知識を要しないにもかかわらず圧倒的なスピード感でWebサイトの構築からリリースまでが完了します。

ただし、ノーコードCMSではできないこともあります。ノーコードCMSの中でもイチオシのSTUDIOの詳しい使い方と昨日についてはこちらの記事で詳しく学べますので、せひご確認ください。
【最新】STUDIOはノーコードで使い方簡単!Webサイト制作を7ステップで徹底解説

Web制作の設計

イメージした機能を実装したWebサイトを制作するためには、サイトマップとワイヤーフレームのスキルも身に付けておくことをおすすめします。

サイトマップやワイヤーフレームは実際に機能を実装する作業に直接関わるわけではないため、必要性がイマイチわからない方もいるでしょう。

しかし、あらかじめサイト全体の設計図を明確に描いておくことで、どのようなコンテンツを実装すべきかを俯瞰的に判断できるようになります。

また、ワイヤーフレームでコンテンツごとの完成像を視覚化しておけば、目的までに適切な動線が張られているかを確認できるようになるため、UXがより向上するでしょう。

他メンバーでのプロジェクトの際、イメージを共有しやすくなるところも設計図作成のメリットです。

SEO対策スキル

Webサイト制作において、SEO対策への理解は非常に重要なポイントだといえます。なお、SEOとは、検索エンジン最適化のことです。つまり、ユーザーが検索したとき、上位に表示されるための施策を指します。

効果的に集客するためには、ユーザーからの認知度を上げなければなりません。どれほど魅力的かつ有用なコンテンツが盛り込まれていたとしても、気付いてもらえないことにはまったく意味がありません。

SEOには即効性がないため継続と見直しが不可欠ですが、軌道に乗れば低コストで効果の高い集客方法になります。Web制作に関わる職業に就くのなら、SEOの知識も一緒に学んでおくことをおすすめします。

文章力

読者を惹きつける文章を書くスキルがあれば、多くのユーザーの共感を得られるでしょう。また、文章力があればWeb制作案件でライティングまで巻き取れるため、収入アップにもつながります。

また、Webマーケティングとして重要性の高いSEO対策スキルを効果的に使うためにも文章力が必要です。検索上位を目指すためのキーワードを、違和感のない形で文章に入れ込まなければなりません。

ITリテラシー

Web制作の現場で活躍したいのであれば、ITリテラシーの向上も見逃せないポイントだといえます。クリエイターとしてインターネット環境を利用して仕事をする以上、セキュリティリスクが付きものです。IT機器の操作を習得することに加え、セキュリティへの意識を高めましょう。

Web制作を学ぶ方法

Web制作に関するスキルの学習方法は、大きく分けると以下の2通りです。

  • 独学
  • スクール

独学とスクールのどちらが良いか、以下の説明を参考に考えてみてください。

独学

Web制作はスキルやノウハウに関する本や有料・無料の動画が豊富であり、努力次第では独学で身につけることも可能です。

独学なら学習費用があまりかからず、時間の縛りがないため自分のペースで勉強を進められます。

Web制作スキルの習得には、実践が欠かせません。そこで有効な学習方法となるのが、既存サイトの模写です。センスの良いサイトを作れるようになりたいなら、魅力的な既存サイトを模写してみましょう。

美しいものに多く触れることで想像力が豊かになるだけではなく、コーディングやIllustrator、PhotoshopなどWebデザインツールの実践力も身に付きます

同時に、美しい言葉に触れることで文章力の向上が見込めますので、本を読んだり書き起こしたりなど手軽な方法から試してみてください。

ただ、独学は効率の良い学習方法とはいえません。ましてや、初心者がWeb制作の幅広い知識を一から独学でマスターしようとするのはあまりに無謀です。独学を選択する場合は、ある程度の知識を得てからが良いでしょう。

スクール

Web制作は独学では学べないわけではありませんが、やはり限界があるといえます。また、プロとして稼ぐための仕組みまで身に付けるのは独学だけでは困難です。

Web制作スキルを効率的に学びたいなら、専門のスクールへの入会をおすすめします。スクールには通学型とオンライン型の2種類があり、料金がかかる代わりにプロの指導を受けられるため、スキルの習得がスピーディーです。

マスターするのは難しいと言われるプログラミング言語を最短で身に付けたいときは、いつでもどこでも学べるオンラインスクールを活用するとよいでしょう。スクールにはメンバー同士のコミュニティが開設されているものも多く、情報交換と人脈形成という点でも有用です。

なお、スクールがおすすめな理由やオンラインで手軽に学ぶ方法をより深く知りたい方はこちらの記事もぜひお読みください。
Web制作・デザインを学べるオンラインスクールの選び方|2023年最新おすすめ15選

Web制作はオワコン?!「仕事がない」という噂の真相

「Web制作はオワコン」と言われることがありますが、本章ではその噂の真相に下記2つの視点から検証してみましょう。

  • Web制作会社がなくなるといわれる理由
  • Web制作はオワコンではない理由

Web制作会社がなくなるといわれる理由

Web制作がオワコン、いずれ仕事がなくなるといわれる理由は、以下のとおりです。

  • フリーランスが増加して競争率が上がった
  • 低収入かつブラックな労働環境というマイナスイメージがある
  • ノーコードツールが開発された

ワークスタイルの多様化が進む中で、フリーランスを選択する人も増えてきました。フリーランスには案件をより安価で発注できるため、Web制作会社に頼る企業が減り、結果的に会社がなくなってしまいかねません。

会社がなくなると、フリーランスを選ぶ人がますます増え、案件の獲得競争もいっそう激化します。案件を受注できるのは一握りのハイレベルなクリエイターのみとなり、その他大勢のフリーランスには仕事がない状態になってしまうでしょう。

また、エンジニア=ブラックな労働環境というマイナスイメージも、Web制作がオワコンといわれるゆえんです。大変さに対して、得られる収入が見合っていないと考える人も少なくありません。

さらに、近年はノーコードツールを活用すればWebサイトが作れます。わざわざコードを書く必要がなくなれば、Web制作の専門知識を持つクリエイターのニーズが下がっていくと想定されるのも仕方ないでしょう。

Web制作はオワコンでない理由

続いて、Web制作はまだオワコンとはいえない説に言及していきましょう。ほかの職種と比べ、Web制作業界は成長市場だといわれています。

たしかに従事者は増えましたが、そのうち優秀な人材となると話は別だからです。進展するIT社会の中で、ハイレベルな人材のニーズはますます高まるといわれています。

Web制作の流れの多くを巻き取れる人材になれば、重宝されること間違いなしです。

Web制作の場合、スキルを学んだ後の進路は制作会社への就職・転職もしくはフリーランスから選べます。Web制作はフリーランスとして独立すれば、頑張り次第でいくらでも稼げるうえ、仕事を自分で選べるため自由な働き方が実現するでしょう。

また、ノーコードツールといえど、完全に使いこなすにはWeb制作の知識が不可欠です。コーディングと組み合わせることで機能性やデザイン性をより高められるため、できることに限界があるノーコードツールの弱点を補えます。最近はノーコードツール案件も増えてきていることから、コーディングも身に付けていればノースキルの競合相手とは一線を画すことが可能です。

Web制作で稼げるフリーランスになろう!

Web制作は様々なスキルを組み合わせる必要がある仕事です。今までは、それぞれの業務が別の担当者に割り振るスタイルが一般的でした。しかし、ノーコードCMSやマーケティングなど最新のテクニックを身に付ければ、巻き取れる範囲を増やせます。

Web制作はオワコンではなく、幅広い業務への対応力や当たり前のソフトスキルがあれば、稼げる上位数%に入れます。例えば、世界各地を転々としながら好きなときに稼働する「ノマドワーカー」と呼ばれる働き方も選択できます。

そもそも、多くの人にとって大切なのはWeb制作のフリーランスになることではなく、自由な生き方で人より稼げる仕組みを確立することではないでしょうか。稼げる仕組みを体系化するためには、ある程度のコストをかけてでも、確実に学びが得られるメンターを見つけることが大切です。オンラインスクールの利用も視野に入れ、ただの自営業ではなくプロのフリーランスになるためのノウハウを学びましょう。