WEBサイトの作成手順とは？初心者向けに手順を分かりやすく解説

WEBサイトを作成すると言ってもどのように進めたらいいかわからないと言う方も多いでしょう。本記事では、WEB制作会社に勤める私が実際にどのような流れでWEBサイトが作られているのかを初心者の方向けにわかりやすく解説します。

全体の流れだけでなくそれぞれの工程に関係する職種についても解説するので、ぜひ自分がWEB制作の中でもどの分野に興味があって、どの職種につくべきかも考えてみてください。

1. WEBサイト制作の基本的な流れ

いきなり細かく説明しても分かりづらいと思うので、まずはWEBサイトを制作する際の基本的な流れを説明します。簡単に以下のような流れでサイト制作が行われます。

上記が主なWEBサイト開発の流れです。

しかし、上記以外にも複雑なサイトや大規模なサイトになると、インフラエンジニアやバックエンドエンジニアなども大きく関わってくる場合があります。ここではあくまで初心者の方向けの解説になるので、一般的な簡単なサイトを作る際の手順の説明になります。

では、それぞれの工程について詳しく説明していきます。

2. 要件定義

要件定義とは、どのようなサイトにするのかといったサイトの目的、またそのサイトにする上で必要な機能や情報を明確にすることです。

簡単にいうと、これから作成するサイトの方向性を決めることです。

これがしっかり定まっていないと、クライアントの要望に応える質のいいWEBサイトはできないので、WEB制作においてとても大切な工程です。

一言でWEBサイトと言っても、コーポレートサイト・ECサイト・ランディングページ・メディアサイトなどさまざまな種類があります。またその中でも、コンバージョン重視か集客重視かなど目的の違いによっても作り方は異なります。

そしてデザインについても、

などのようにクライアントの望むものを明確にしておく必要があります。

私が現在勤める受託開発の会社では、しっかりと詳細が決まった上で依頼がくるクライアントもあれば、「サイトが古いからとにかく今よりよくしたい」といったようにほとんどこちらにお任せする形でざっくり依頼してくるクライアントもあります。

ただ、ここで気をつけなければならないポイントが2つあります。

ポイント1

1つ目は「クライアントがざっくり丸投げしてきたからといって好きに作るだけではいけない」ということです。

「え、向こうが任せて来たんだからいいんじゃないの？」と思うかもしれませんが、これは罠です。ちなみに私も思ってました（笑）。

お任せすると言いつつも、クライアントはなんとなくイメージは持っているものです。それも当然のことで、クライアントは、他のサイトや競合他社を見て自分のところのサイトもよくしたいと思ったわけですから、こういうサイトいいなという気持ちは少なからず持っているわけです。

そのためいざ作って見せられたものが、なんとなくイメージしていたものと違ったら「なんか思ってたものと違う」となってしまい、作り直しや大幅な修正につながってしまいます。

それから上がってきたものを見て、もっとこうしてほしいやこんなイメージ感でといったように追加要望がくることも多いですが、それだと必要以上に作成に時間をとられてしまい、制作スケジュールなどにも影響が出てきてしまいます。

できることなら一発でOKをもらいたいですし、修正するにしても少ない修正にしたいですよね。

そのために、クライアントが何も言ってこなかったとしても、「なんとなくのイメージや参考デザインはありますか」であったり、こちらが探した参考デザイン、しっかり作り込む前のざっくりした色合いの段階のものを見せて「イメージ感だとどちらの方がいいですかね」と言ったようにクライアントのなんとなくのイメージをヒアリングの中でしっかりと引き出す必要があります。

ポイント2

2つ目は、「クライアントはデザインやWEBサイトの専門家ではない」ということです。

どんなクライアントにしろ、専門家ではないからこそこちらに依頼をしてきているわけです。そのためこういったものがいいと言っていたとしても、「今回のサイト作成の目的を考えるとそれは違うんじゃないか」といったことは全然あります。

クライアントが望むものを作るのがWEB制作の目的ですが、それはクライアントの言いなりで作ることではありません。

クライアントが望むものは質の良いサイトです。

そのため、こうした方がよくなる、それはやめたほうがいいといった意見は、専門家として積極的に言っていっていいのです。もちろん最終的な決定をするのはクライアントですし、自分の好みでこうした方がいいなどの意見はだめですが、こちらから提案をしていくことはとても大切です。

実際私もクライアントとやりとりをする中で、「こういう理由でこうした方がいいと思いますがどうですか」などしっかりと理由のある提案をすると、「確かに」「その方がいいですね」と提案を受け入れてくれることは非常に多いです。

このように、要件定義の段階では、クライアントの目的・気持ちをしっかりと汲み取り、それに対して専門家としての提案をしていくことが大切です。

そうすることで、クライアントが当初求めていた以上のお互いに納得のいく質の高いWEBサイトを作ることができるだけでなく、この人・会社に依頼してよかったといったようなWEB制作の専門家としての信頼構築にも繋がります。

ヒアリングでした内容をもとに「サイトマップ」と呼ばれる必要なページをまとめた表を作ったり、必要な機能や方向性をまとめた要件定義書などを作りクライアントと認識に違いがないかすり合わせを行います。

ここで会話以外のものでしっかりとすり合わせをしておかないと、あとで希望していた内容と違う、言った言わないなどのトラブルにもつながるので、必ず行うようにしましょう。

3. 構成（ワイヤーフレーム）作成

構成（ワイヤーフレーム）とは、要件定義で決まったサイトの目的を果たす上で必要な機能やコンテンツなどを白黒で形として組み立てていくことです。

デザインの骨組みの部分になるので、ワイヤーフレームがしっかりしていないと、デザイン作成後に「あの要素が足りない」、「このページが足りない」といって、付け足し付け足しでせっかく作ったデザインが微妙な完成度になってしまったり、必要以上に時間をとられてしまうことにもつながるので、気をつけましょう。

競合調査やサイトマップ、要件定義書を元に、ヘッダー、メインコンテンツ、フッターの位置を決め、各ページにどんな要素、情報を配置するのかといったレイアウトを整理していきます。

4. デザイン作成

構成（ワイヤーフレーム）を基に、デザイン（デザインカンプ）を作成します。

競合サイトやクライアントのデザインの参考や要望、ターゲット層、企業イメージなど、様々なことを考慮しながら魅力的なデザインを作成していきます。

ここで大切なのはしっかりと参考を探すことです。

初心者の方ほどやってはいけないのにやってしまいがちなのが、自分の感覚などでデザインしすぎることです。いいデザインが急に降ってくるなんてことは、そうそうありません。初心者なら尚更です。

世の中にはいいデザインが多く出回っていますし、WEBなので無料で見放題です。その点をしっかりと活かし、初心者の方ほど色々なデザインを見てインプットし、デザインにおける自分の引き出しを増やしていくことが重要です。

5. コーディング

コーディングとは、作ったデザインを実際にサイトとしてWEBで見れるようにするための作業です。ここではマークアップ言語、スタイルシート言語、プログラミング言語と呼ばれる言語でコードを書いていきます。

コンピューターはデザインを見た目などでは読み込むことができず、文字列として読み込んでいます。決められたコードを読み込むことで「この色を表示する」「この動作を行う」といった動きを行います。

例えば、CSSと呼ばれるスタイルシート言語で【color: #ffffff;】と記入すると文字色が白色になります。

WEBサイトはこのような記述をした大量のファイルを読み込むことで、皆さんが普段見るような見た目のWEBサイトとして機能しています。

6. 公開

最後に、先ほどコーディングで作ったファイルをWEB上にアップすることで、ユーザーが見れるようにします。

公開の手順などは初心者の方には少しハードルが高く、説明も長くなってしまうため、この記事では説明を省きます。

7. WEB制作に関係する職種

最後にWEBサイト制作に関わる職種について解説します。
以下の説明を見て、自分がどの職種に興味があるのか、向いているのかを考えてみたください。

WEBマーケター

WEBマーケターは、サイトの「成果」を上げるための戦略を考える職種です。
サイトのアクセス数を増やしたり、商品購入やお問い合わせといったゴールへつなげたりするために、以下のような施策を実行します。

制作段階から関わることもあり、サイトの目的やターゲットに合った構成や導線設計をディレクターやデザイナーに提案することもあります。

WEBディレクター

WEBディレクターは、プロジェクト全体の指揮をとる「司令塔」のような役割を持ちます。
クライアントとのやり取りを通じて要望を整理し、それを制作チームに正確に伝え、納期・品質・コストを管理します。

業務内容としては以下のようなものがあります。

プロジェクトをスムーズに進めるための「調整役」であり、コミュニケーション能力や問題解決力が求められる職種です。

WEBデザイナー

WEBデザイナーは、見た目のデザインを担当する職種です。
ユーザーにとって見やすく、使いやすく、ブランドイメージにも合ったビジュアルを作成します。

業務内容には次のようなものがあります。

デザインツール（例：Photoshop、Figmaなど）を使いこなし、時にはUI/UXの視点も取り入れながら制作します。

WEBコーダー、フロントエンドエンジニア

WEBコーダー（またはフロントエンドエンジニア）は、デザイナーが作成したデザインをHTML・CSS・JavaScriptなどで実際のWebページに仕上げる職種です。
見た目を忠実に再現するだけでなく、動きのあるUIやレスポンシブ対応、SEOに配慮したマークアップも求められます。

主な使用技術・業務内容

最近では、Vue.jsやReactなどを使った開発を行う場合もあり、エンジニア寄りのスキルが必要になることもあります。

その他の職種

この記事ではあまり解説していませんが、他にも以下のような職種もWEBサイト制作には関係することがあります。

UI/UXデザイナー

UI/UXデザイナーは、見た目だけでなく「体験」や「使いやすさ」を考慮した設計を行います。
WEBサイトやアプリを訪れたユーザーが「迷わず目的を達成できる」ように、操作性や導線設計を最適化するのが仕事です。

主な業務には以下があります。

WEBデザイナーと役割が重なる部分も多く、近年ではUI/UXの視点を持つことが求められるケースが増えています。

バックエンドエンジニア

バックエンドエンジニアは、WEBサイトの「裏側」で動くシステムを開発する職種です。
ユーザーが入力した情報をデータベースに保存したり、会員機能や予約システムを実装したりと、動的な処理を担当します。

使用言語や業務例

フロントエンドと連携しながら、WEBサービスの根幹を支える重要なポジションです。

インフラエンジニア

インフラエンジニアは、WEBサイトが正しく・安定して動くための「土台」を整える職種です。サーバーやネットワークの構築・保守・セキュリティ対策などを行い、トラブルが起きないように見えない部分から支えます。

業務内容には以下があります。

特に大規模なサイトやWebアプリを運用する場合、インフラの設計が非常に重要になります。

8. まとめ

ここまでWEBサイト制作の流れを説明してきましたが、必ずしも全てをできるようになる必要はありません。もちろんできるに越したことはありませんが、それぞれの分野ごとに奥が深いですし、得意不得意もあるので中々難しいと思います。

企業でもそれぞれでディレクター、デザイナー、コーダーといったように担当領域を分けていることがほとんどなので、初心者の方は全体をざっくり理解しつつ、自分の興味のある分野を突き詰めていくと良いでしょう！

みやび

WEBディレクター＆ブロガー

2000年生まれ、WEB制作会社でWEBディレクターとして働きながら、副業でブログを運営している社会人です。大学では体育を専攻し、教員免許を取得しましたが、コロナ禍をきっかけにWEB業界に興味を持ち、未経験からWEBデザイナーとして就職。その後転職し、現在はWEB制作会社でWEBディレクターとして勤務しながら、WEBに関する様々な情報を発信しています。