フルスタックWebエンジニアのホームページ制作工程をご紹介

自分みたいに、一人でホームページ制作を全てやる人って、どういう人で全体のどのくらいの割り合いいるのでしょう？ システム開発で言うところの「フルスタックエンジニア」は、開発における全ての技術や作業に精通している人の事ですが、 Web制作では、呼び名がないので、ここでは「フルスタックWebエンジニア」と呼ぶことにします。 多くの人が、在宅で気楽にパソコン片手に、カタカタとキーボードを打ち込んでいるだけで、ホームページが出来上がると思っていますが、 実際は、かなり泥臭い、キツい作業のオンパレードでもあります。 慣れも必要なので、経験がモノを言う場面もしばしば。 他人が見て、「センスがいい」と思ってもらえるデザイン性も併せ持たないといけないので、コーディングだけできてもなかなか認められにくい業界でもあります。 そんなホームページの制作工程を全て書き出しておきたいと思います。 Web制作のディレックションから、見積もり作成、自分のスキルチェックをするなどの参考になると思うので、是非今回のブログをご活用くださいませ。

Web制作の作業一覧

企画・設計

ヒアリング、目的整理、サイト構成、ページ構成 詳細 - クライアントへのヒアリング - ホームページの目的整理 - ターゲット整理 - 必要ページの洗い出し - サイトマップ作成 - ページ構成 - コンテンツ構成 - 導線設計 - SEOの基本設計 - 必要な機能の整理

デザイン

ワイヤーフレーム、UI設計、デザイン制作、素材調整 詳細 - ワイヤーフレーム作成 - ファーストビュー設計 - レイアウト設計 - カラーデザイン - フォント設計 - ボタン・UI設計 - PCデザイン - スマートフォンデザイン - 下層ページデザイン - 画像・アイコン選定 - バナー等のデザイン - デザイン修正 備考 フレームワークや、各種制作ツールを使う場合は、この中の項目が軽減されます。

ライティング

キャッチコピー、本文、見出し、SEOを考慮した文章作成 詳細 - キャッチコピー - リード文 - 会社紹介 - サービス紹介 - 商品・サービス説明 - 代表メッセージ - FAQ - CTA - SEOを考慮した文章 - メタディスクリプション - 見出し構成 - 原稿整理・リライト 備考 クライアント側で文章がある場合、または既存サイトのリプレイスなどの場合は、 この中に「編集」という作業が入ります。

コーディング

HTML/CSS/JavaScript、レスポンシブ対応 詳細 - HTML - CSS - JavaScript - レスポンシブ対応 - PC対応 - スマートフォン対応 - アニメーション - メニュー - スライダー - モーダル - フォーム周辺 - 各種ブラウザ対応 - SEO用HTML構造 - アクセシビリティ対応 備考 こちらもフレームワークやライブラリを使うことで、作業軽減することができます。

機能実装

フォーム、CMS、検索、予約、外部サービス連携など 詳細 - お問い合わせフォーム - Googleフォーム連携 - 予約システム - カレンダー - CMS - ブログ - 検索 - 絞り込み - 会員機能 - API連携 - SNS連携 - 外部サービス連携 - 管理画面 備考 一般的なWebサイトや、LPなどの場合に比べて、 ツール系のサービスサイトの場合は、機能構築が倍以上になる場合もあります。

コンテンツ投入

画像・文章・記事・商品情報などの登録 詳細 - 原稿入力 - 画像登録 - PDF登録 - ブログ記事登録 - 商品情報登録 - カテゴリ設定 - タグ設定 - alt設定 - 各ページへのコンテンツ配置

サーバー・ドメイン

サーバー設定、DNS、SSL、メールなど 詳細 - サーバー契約 - ドメイン設定 - DNS設定 - SSL設定 - メール設定 - FTP/SFTP設定 - データベース設定 - バックアップ - セキュリティ設定 - 本番環境構築 備考 サーバーは以下のような運用作業も発生します。 - サーバー監視 - バックアップ - SSL更新 - CMS更新 - セキュリティ対応 - 障害対応 - ドメイン更新 - メール対応 - 軽微な修正

テスト・品質確認

PC/スマホ確認、ブラウザ確認、リンク・フォーム確認 詳細 - PC確認 - スマートフォン確認 - Chrome - Safari - Edge - Firefox - リンクチェック - フォーム送信確認 - レイアウト崩れ確認 - 画像表示確認 - ページ速度確認 - SEO基本チェック - SSL確認 備考 作って終わりではなく、誤字脱字から、デバイス別テスト、各種の機能の動作チェックは入念に行います。

公開・調整

本番公開、最終修正、公開後確認 詳細 - 本番サーバーへのアップロード - DNS切り替え - SSL確認 - 本番環境確認 - 最終修正 - 公開後チェック 備考 二度手間のように思えますが、公開後にもテストを行う必要があります。 それに加えて、本番環境ならではのテストが発生します。

作業負荷比率

企画・設計	8%
デザイン	20%
ライティング	12%
コーディング	25%
機能実装	10%
コンテンツ投入	5%
サーバー・ドメイン	5%
テスト・品質確認	7%
公開・調整	3%

これらの作業割合は、あくまで一般的なホームページ制作を基準に考えています。 同じホームページは世の中に2つと無いことを考えると、参考程度に見てもらえればいいかと思います。

フルスタックWebエンジニアの希少性と利便性

上記の作業リストを見て、たかがホームページ制作が、されどホームページ制作に変わったのではないかと思います。 通常の制作会社では、これらの作業をそれぞれ専門の担当者を設けているため、人件費を考えると、高額になることはわかります。 厚生労働省に「Webデザイナー」の紹介ページがあったので、紹介しておきます。 https://shigoto.mhlw.go.jp/User/Occupation/Detail/326?utm_source=chatgpt.com そして、これを全部で一人で行うと言う自分のような人も数は少ないですが、国内には存在します。 AIに聞いてみたところ、 2026年の「フリーランス白書」では、フリーランス回答者1,181人のうち、 「クリエイティブ・Web・フォト系」が24.7% を占めています。 さらにエンジニア・技術開発系が19.8%です。 また、クリエイター系の調査では、2024年時点で「本人のみ」で活動する事業者が84.4%という結果もあります。 多めに見ると、20%から30%ぐらいの人が、フルスタックWebデザイナー（エンジニア）であると考えられます。 そして、さらに、フルスタックの人でも、「知ってるレベル」の人と「専門家レベル」のレベル差が存在します。 全てにおいて専門性を保持している人って、日本人ではほぼ出会ったことがありません。 ほとんどの人が、どれか（複数）の専門家レベルという場合が多く、会社やチームで活動している人しか見たことがないんですよね。

ホームページの料金はページ数だけでは決まらない

少しクライアントさん寄りの話をすると、 「ホームページを作って欲しい、でも制作費はできる限り抑えたい」 こう考えている人が多いはずです。 もちろん、会社によっては予算もあるので、無理を承知で機能盛りだくさんのサービスホームページを構築して欲しいと、図々しく言ってくる担当者もいますが、 その人が偉そうにしていると、自分は鼻で笑って断るのですが、いい人であれば、値段に見合うホームページまたは、こちらがボランティアしてメリットがあるという提案をすることもあります。 そして、機能の箇所にも少し書きましたが、ホームページの値段は、ページ数だけじゃないんです。 機能数や、要望のクオリティレベル、専門性レベルの高さ、これらを総合的に判断して決まってきます。 個人的には、「その会社（組織）が支払える限界を見積もりとした額での駆け引き」というケースが非常に多いというのも事実としてあります。 単に「安く作って欲しい」だけを言ってくる会社さんは、正直ホームページではなく、チラシを作って、その画像をWebで公開するぐらいの方がいいかもしれませんね。

あとがき

最近は、Webエンジニアやデザイナーを育てることを仕事として行なっている自分としては、 こうした記事を書いて、学習対象者の人に読んでもらいたいと考えて書いてみました。 もちろん、見込み顧客のクライアントさんや、良いホームページ制作会社（担当者）を探している会社さんたちにも読んでもらいたいので、 一石二鳥のブログ記事として書いておきました。 この記事を興味を持って読んだ人でクライアントさんは、「いい制作会社とはどういう会社か？」という事のお話をさせていただきますし、 エンジニア、デザイナーの方（または学習中の方）は、自分の保持していないスキルについてのスキル獲得方法などについてもお話しさせていただいております。 色々な仕事につながることもあるし、チームや仲間としてジョインする機会になる可能性もありますので、 お気軽にお問合せフォームまで、ご連絡をくださいませ。