ホームページ制作の流れを徹底解説｜初めてでも失敗しない進め方と期間・費用の目安

ホームページ制作の全体の流れ【5ステップ】

ホームページ制作は、大きく分けて以下の5つのステップで進みます。

STEP1 企画構成(1〜2週間)
↓
STEP2 コンテンツ作り(2〜4週間)
↓
STEP3 デザイン制作(2〜4週間)
↓
STEP4 コーディング(2〜3週間)
↓
STEP5 公開・運用サポート

制作期間の目安：3〜4ヶ月

ページ数や機能により変動します

それぞれのステップで「何をするのか」「どんな準備が必要か」を詳しく見ていきましょう。

STEP1：企画構成(ヒアリング・目的設定)

ホームページ制作で最も重要なのが、この「企画構成」の段階です。ここでしっかり方向性を決めておくことで、後々「イメージと違う...」という失敗を防げます。

具体的な内容

• 目的・目標を明確にします
• 自社の認知度向上・ブランディング
• 商品やサービスの紹介
• 新規顧客からの問い合わせ増加
• 採用応募者の増加
• 企業の信頼性向上(SDGs・サステナビリティ情報の発信)
• 情報を自社で更新できる仕組みの導入

まずは「何のために作るのか」「誰に向けて発信するのか」を明確にします。

ターゲットユーザーを設定します

ターゲットユーザーは、どんな人に見てほしいのか、その人は何を知りたいのか
どんな行動をしてほしいのか(問い合わせ、資料請求、購入など)
ターゲットが明確になることで、サイト全体の設計がブレなくなります。

サイト全体の構成を決めます

どんなページが必要か、ページの優先順位、お客様の導線(※)

※導線とは：サイトを見た人が、どのページを順番に見て、最終的にどう行動するか(問い合わせなど)の流れのこと。専門的には「UI設計」とも呼ばれます。
コンテンツリスト(サイトマップ)を作成して、わかりやすい設計を心がけます。

※コンテンツリスト(サイトマップ)とは：全ページの一覧表です。
トップページ、会社概要、サービス紹介、採用情報…といった形で、
「どんなページを作るか」「どんな情報を載せるか」を可視化します。
制作前に一覧化することで、漏れのない構成と効率的なスケジュール管理が可能になります。

私たちがお手伝いすること

「まだ何も決まっていない」という状態でも大丈夫です。じっくりお話をお伺いしながら、一緒に整理していきます。専門用語は使わず、普段の言葉で大丈夫ですよ。

お客様側で準備すること(あれば制作会社も大変助かります！)

• 会社案内や既存のパンフレット
• 伝えたいこと、困っていることのメモ
• 参考にしたいサイトがあればURL

STEP2：コンテンツ作り(情報収集・原稿作成)

企画が固まったら、実際にサイトに載せる「中身(ワイヤーフレーム)」を作っていきます。

「ワイヤーフレーム」とは、ホームページの設計図のようなものです。

色やデザインを付ける前に、「どんな情報を、どんな順番で、どんな大きさで配置するか」を整理します。見た目よりも伝わりやすさを重視して構成を考えることで、完成後に「情報がごちゃごちゃして見にくい」といったトラブルを防げます。

掲載する情報を整理します

既存のホームページがある場合は、今のサイトで足りない情報は何か、古くなっている情報はないか、もっとアピールすべき強みはないかを考えます。難しい場合は、弊社にお任せいただければ叩き台として設計を行います。
初めて作る場合は、会社の概要から会社の魅力をどう伝えるか、競合と差別化できるポイントは何かを情報整理していきます。

原稿を作成・編集します

• 会社紹介文
• サービス・商品の説明
• 事例・実績
• 代表メッセージ
• よくある質問

「文章を書くのが苦手」という方も安心してください。ヒアリング内容をもとに、私たちが原稿の下書きを作成します。それを見ながら一緒に調整していく形です。

専門的な内容を「翻訳」します

例えば製造業の技術説明や、医療機関の専門的な治療内容など、一般の方にはわかりにくい内容も多いですよね。私たちがお客様の言葉を「誰が見てもわかる表現」に翻訳します。専門知識がない人が読んでも理解できる文章に仕上げることで、より多くの人に貴社の魅力が伝わります。
実際に、BtoB製造業の技術を取引先企業にわかりやすく伝えるページや、医療機関の専門的な治療内容を患者様が安心して読めるページなど、「難しいことを、やさしく」に取り組んできました。

写真・素材を準備します

• 会社の外観・内観
• スタッフの写真
• 商品・サービスの写真

必要に応じて、カメラマンの手配もお手伝いします。スマホで撮影した写真でも、使えるものはそのまま活用することもできます。

お客様側で準備すること

• 既存の会社案内やパンフレット
• 載せたい写真データ
• ロゴデータ(あれば)
• 伝えたい内容のメモや箇条書き

「何もない」という状態でも、ヒアリングしながら一緒に作っていけます。

STEP3：デザイン制作(UI設計・デザイン)

コンテンツが揃ったら、それを「どう見せるか」を決めるデザインの段階に入ります。

お客様の動きを考えた設計をします

「サイトを見た人が、迷わず目的の情報にたどり着けるか」を設計します。

• トップページから各ページへの流れ
• 「問い合わせ」や「資料請求」などのボタンの配置
• スマホで見たときの操作のしやすさ
• 情報の優先順位

ページの並び順やボタンの位置一つにも、全部「意味」があります。お客様に「どう行動してほしいか」を考えながら設計していきます。

デザインの方向性を決めます

企業イメージに合った色や雰囲気を決めていきます。
もしお好みのサイトなど、そのサイトを共有していただければ、その方向性で進めますし、こちらからご提案することもできますので、気軽にご相談ください。

デザイン案をお見せします

実際のサイトイメージをデザインツールで作成し、お見せします。「もう少しこんな感じに...」というご要望も、遠慮なくお聞かせください。何度か調整しながら、「これだ！」というデザインに仕上げていきます。

スマホ・タブレットにも対応します

今やサイト訪問者の7割以上がスマホからです。パソコンだけでなく、スマホでも見やすいデザインに仕上げます。これを「レスポンシブデザイン」と呼びます。

レスポンシブデザインとは：パソコン、スマホ、タブレットなど、どの画面サイズでも見やすく表示されるデザインのこと。

お客様側で準備すること

• 参考にしたいサイトのURL
• 「こんな雰囲気にしたい」というイメージ
• 使ってほしい色(コーポレートカラーなど)

企業によっては、コーポレートルールというものが存在する場合もあります。(グループ企業間での共通ルールのようなものです。)デザイン案を見ながら、一緒に調整していきます。

STEP4：コーディング(サイト構築)

デザインが決まったら、それを実際に動くWebサイトにしていく「コーディング」の作業に入ります。

コーディングとは：デザインデータを、ブラウザで表示できる形に変換する技術作業のこと。HTML、CSSといった言語を使います。

各種ブラウザに対応します

Google Chrome、Safari、Microsoft Edge、Firefoxなど、どのブラウザで見ても、きちんと表示されるように調整します。これを「クロスブラウザ対応」と呼びます。

すべての人が使いやすいサイトにします

2024年4月から、障害のある方への配慮が義務化されました。

• 音声読み上げソフトへの対応
• キーボード操作への対応
• 文字サイズの変更対応
• 色のコントラスト確保

すべての人が使いやすいサイトを目指します。これを「アクセシビリティ対応」と呼びます。

検索エンジンに見つけてもらいやすくします

SEO対策(※)として、以下を実装します。

SEO対策とは：検索エンジンで上位に表示されやすくするための施策のこと。Search Engine Optimization(検索エンジン最適化)の略。

• タイトルタグ・メタディスクリプション(検索結果に表示される文章)の設定
• 見出しタグの適切な設定
• 画像の代替テキスト(画像の説明文)
• ページ表示速度の最適化

問い合わせフォームを設置します

• 入力しやすいフォーム設計
• 確認メールの自動送信設定
• スパム対策

更新システムを導入します(弊社オプション)

お客様自身でお知らせや事例を更新できるシステム(CMS)を導入できます。

CMSとは：Contents Management System(コンテンツ管理システム)の略。専門知識がなくても、簡単にサイトの情報を更新できる仕組みのこと。
当社では、WordPressなどのツールより操作が簡単で、セキュリティも高い自社開発のCMSをご用意しています。
<専門知識不要で更新可能><操作マニュアル付き><高セキュリティ>

Cookie対応やリダイレクトの設定もご相談ください

近年、Cookieの利用やプライバシーポリシーの表示が義務化・推奨される流れが強まっています。
新サイトへの移行時には、Cookieポップアップ(同意バナー)やアクセス解析の設定変更などが必要な場合もあります。

Cookie同意バナーはなぜ必要？
現在は、ユーザーの個人情報保護の観点からCookieの利用に同意を得ることが推奨されています。企業サイトでも対応が進んでいます。

お客様側で準備すること

この段階では、基本的にお客様側での作業はありません。定期的に進捗をご報告し、確認していただきます。「今どうなってるんだろう？」という不安を感じさせないよう、こまめにご連絡しますね。

STEP5：公開・公開後のフォロー

いよいよサイトを公開します。でも、公開がゴールではありません。むしろ、ここからが本当のスタートです。

最終チェックを行います

• リンク切れがないか
• 誤字脱字がないか
• 全ページが正常に表示されるか
• フォームが正しく動作するか

お客様にも最終確認していただきます。

操作方法を丁寧にお教えします

CMSを導入した場合、操作方法を丁寧にレクチャーします。

• 記事の投稿方法
• 写真のアップロード方法
• 編集・削除の方法

操作マニュアルもお渡しするので、後から見返すこともできます。「パソコンが苦手で...」という方も、安心してお任せください。

公開後もずっとサポートします(保守対応)

「新しいスタッフの紹介を追加したい」
「キャンペーン情報を載せたい」
「スマホで見たら、ちょっとずれてる気がする...」
こんな小さなことでも、遠慮なくご連絡ください。

アクセス解析を設定します

Google Analytics(GA4)などを設定し、どれくらいの人が見ているか、どのページがよく見られているかを確認できるようにします。必要に応じて、わかりやすいダッシュボード(管理画面)の作成も承ります。

定期的に改善提案をします(保守対応)

「このページ、もう少し詳しく説明した方がいいかも」
「問い合わせボタンの位置を変えてみましょう」
「ブログを始めると、もっと見つけてもらいやすくなりますよ」
データを見ながら、継続的に改善のご提案をします。Webサイトは「育てるもの」。完成がゴールではなく、そこからのお付き合いを大切にしています。

ホームページ制作にかかる期間は？

基本的な制作期間：3〜4ヶ月
ただし、以下の要因で変動します。

期間が短くなるケース

• ページ数が少ない(5〜10ページ程度)
• 原稿や写真が既に揃っている
• デザインの方向性が明確
• 特殊な機能が不要

最短：1.5〜2ヶ月

期間が長くなるケース

• ページ数が多い(30ページ以上)
• 原稿作成や撮影が必要
• 会員機能など複雑なシステム導入
• 多言語対応

目安：5〜6ヶ月以上
「○月までに公開したい」というご希望があれば、逆算してスケジュールを組みます。

最後に

ここまで読むと「けっこう大変そう…」と感じるかもしれません。
でもご安心ください。私たちは、企画から公開・運用まで、常に伴走しながら進めるパートナーです。専門知識がなくても大丈夫。最初のご相談から一緒に整理していきます。
「まずは話を聞いてみたい」そんな段階でも大歓迎です。
ぜひお気軽にお問い合わせください。

アイビーネットのホームページ制作はこちら

お気軽にご相談ください。

コラム カテゴリ

コラム一覧