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

WEBサイトを作成するには何から始めるべきか迷っている方も多いでしょう。本記事では、初心者向けにデザイン作成やコーディング、ワイヤーフレーム作成といった手順を解説します。また、具体例やコツも交えて分かりやすく説明しますので、この記事を参考にすれば、効率的にWEBサイトを作ることができます。

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

WEBサイト制作は基本的に以下のような流れで進みます。

それぞれ詳しく解説していきます。

2. 要件定義

要件定義とは、どのようなサイトにするのかといったサイトの目的、またそのサイトにする上で必要な機能や情報を明確にすることです。簡単にいうと、これから作成するサイトの方向性を決めることです。
これがしっかりと定まっていないと、クライアントの要望に応える質のいいWEBサイトはできないので、WEB制作においてとても大切な工程です。

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

サイトの種類について詳しく知りたい方はこちらの記事をご覧ください。

【サイトの種類】

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

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

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

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

ポイント1

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

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

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

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

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

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

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

ポイント2

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

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

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

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

このように、要件定義の段階では、クライアントの目的・気持ちをしっかりと汲み取り、それに対して専門家としての提案をしていくことが大切です。そうすることで、クライアントが当初求めていた以上のお互いに納得のいく質の高いWEBサイトを作ることができるだけでなく、この人・会社に依頼してよかったといったようなWEB制作の専門家としての信頼構築にも繋がります。

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

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

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

【画像：ワイヤーフレームの例】

構成（ワイヤーフレーム）は以下のような手順で作成していきます。

① 目的に応じたページ構成を考える

競合調査などを通して、トップページ、商品一覧ページ、コンタクトフォームなど、サイトを作成する上で必要なページやコンテンツの洗い出し（サイトマップの作成）、訪問者が必要とする情報を整理します。
【サイトマップ例：画像】
【サイトマップ例：画像】

② 要素を配置する

ヘッダー、メインコンテンツ、フッターの位置を決め、各ページにどんな要素、情報を配置するのかといったレイアウトを整理していきます。

③ 動線を考慮する

ユーザーが自然な流れで目的の情報にアクセスできるよう、ナビゲーションを設計します。

4. デザイン作成

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

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

ここで大切なのはしっかりと参考を探すことです。
初心者の方ほどやってはいけないのにやってしまいがちなのが、自分の感覚などでデザインしすぎることです。いいデザインが急に降ってくるなんてことは、そうそうありません。初心者なら尚更です。
世の中にはいいデザインが多く出回っていますし、WEBなので無料で見放題です。その点をしっかりと活かし、初心者の方ほど色々なデザインを見てインプットし、デザインにおける自分の引き出しを増やしていくことが重要です。

色味やデザインを決める上でおすすめのツールとサイトをご紹介します。

Adobeカラー

参考コンテンツ

他にも知りたい方はこちらの記事をご覧ください。

【デザイナーにおすすめのツールとサイト10選】

5. コーディング

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

コードの画像

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

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

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

コーディングについては、以下の記事で初心者の方にもわかりやすく解説しているので、興味のある方はぜひご覧ください。
【サイト作成で必要なコーディングとは】

6. 公開

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

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

公開について詳しく知りたい方はこちらの記事をご覧ください。

【WEBサイトを公開する方法】

7. まとめ

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

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

みやび

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

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