uncategorized

029,ウェブサイト構築の全工程

2025.03.29

解決する課題は、

  1. ウェブサイト(ホームページ)の制作に初めて取り組もうとしている
  2. ウェブサイト(ホームページ)の制作を進めてきたけど行き詰まった
  3. ウェブサイト(ホームページ)の出来がどうも、思っていたのと違う

そんな時にまず、見直して欲しいことは、ウェブサイト(ホームページ)を構築こうちくしていく工程についてです。

これは、わたし自身も長い間、勘違いしていたことなのですが、ウェブサイト(ホームページ)の構築=イコールがデザインや文章のライティングだと思っている人が、少なくても一定数いらっしゃるということがあります。

もちろん、デザインやライティングといった事はウェブサイト(ホームページ)構築の中でも重要なパートであることは間違い無いのですが、それらは全工程の中の3番目の1段階目にすぎません。

ウェブサイト(ホームページ)構築には、これまで先人たちが築いてきた効率的な工程があって、初めてウェブサイト(ホームページ)構築に取り組む時は、その工程に沿って取り組んでいくことが、納得のいく理想的なウェブサイト(ホームページ)を手にする近道になるということです。

途中で行き詰まった時や、完成してから「なんか違うな…」と思った時に見直すことは、その構築の工程です。もし、構築の工程が曖昧なまま進めてしまった場合は、多少遠回りに思えても、改めて構築の工程に沿って内容を再構築しながら、問題点を見つけ出していくことが重要なんです。

ウェブサイト(ホームページ)構築

ウェブサイト(ホームページ)の構築工程

では、ウェブサイト(ホームページ)の構築工程とは、一体どのような工程なのでしょうか?それは、大きく4つの工程に分けることができます。

その4つの工程とは、企画、設計、制作、公開の4つです。

ウェブサイト構築4つの工程

この4つの工程に沿って、順番に取り組んでいくことで、理想的で思い描いたような仕上がりのウェブサイト(ホームページ)を手にすることが出来ます。

実際、わたし自身がウェブサイト(ホームページ)制作会社で働いていた時に基本の工程を無視して、痛い目に合って何度も基本工程に立ち返ったという体験があります。

「予算が無いからデザインだけチャッチャとやってくれたらいいよ。」

「サイトのデザインはこのイメージをそのまま再現して。」

「よく分からないから全部任せた。」

こんな風に、“デザイン”だけ、あるいは、“全部を丸投げ”で作ったウェブサイト(ホームページ)の多くは、『良いんだけど・・・なんか違うんだよな…』といった残念な仕上がりになってしまいます。

でも、クライアントと一緒になって構築の工程に沿って、作り上げたウェブサイト(ホームページ)は、そのすべてがクライアントもわたし自身も納得が行く出来栄えになることが多く、そんな経験を重ねる毎に、構築の工程に重きをおくようになりました。

そんな、サイトの構築工程に沿って進めていくことは、ウェブサイト(ホームページ)をあなたご自身で構築される場合も、制作を業者さんに委託される場合でも同じです。それでは早速、その構築工程をひとつずつ分解していきましょう。

1第一の工程は企画

最初に取り組む工程は、企画です。

ここが最初に頭を使う工程で、この工程を簡単に説明すると、“目的”を決めて訪問者を想定し、目標を定めて手段を講じ、必要なコンテンツを洗い出すところまでを行うことになります。

企画の工程

2目的を明確にする

ウェブサイト(ホームページ)でも、住宅でも、料理でも、“何のためにつくるのか?”という“目的”が最初に存在します。

例えば、ウェブサイト(ホームページ)なら新規顧客を集めるため、住宅なら家族で居住するため、料理なら友人と楽しいひと時を過ごすためなど、何を作るにしてもその目的は様々です。そして、全ての事柄に対して言えることは、目的を曖昧なままにして進めると、意図しない成果物(最終的な完成形)が出来上がってしまうということです。

ウェブサイト(ホームページ)をつくる際に“目的”という言葉を、“ウェブサイト(ホームページ)から得たい結果”と置き換えて考えると、答えが浮かびやすくなります。ですので、ここからは目的を“得たい結果”という表現に変えて、考えてみてください。

あなたはウェブサイト(ホームページ)から“何を得たい”のでしょうか?

この“得たい結果”を熟考することが、この段階で取り組むべきことになります。

目的を明確にする

3訪問者(ユーザー)を意識する

ウェブサイト(ホームページ)でも、住宅でも、料理でも、そこには“対象となる人の存在”があります。

住宅に住む人、料理を食べる人、つくるモノによって人の行動は異なりますが、何かをつくるという行為には、対象となる人の存在を無くしては意味をなさないということです。

ウェブサイト(ホームページ)の場合、その対象となるのが“訪問者(ユーザー)”となります。

なので、ここで考えることは、あなたがこれからつくるウェブサイト(ホームページ)の訪問者(ユーザー)は誰なのか?ということになります。

この“訪問者(ユーザー)”を強く意識して考えることが、この段階で取り組むべきことです。

この“訪問者(ユーザー)を意識する”という考え方を専門用語で言えば“ターゲット設定”や、もう少し詳しく言えば“ペルソナ設定”とも呼ばれます。

訪問者(ユーザー)を意識する

4目的達成のために必要なこと(目標)を設定する

例えば、ウェブサイト(ホームページ)から得たい結果が〝新しいお客様を獲得すること〟だとします。

この場合、その得たい結果を得るためには「メルマガ登録者数を増やすこと」や「自社の商品イメージを確立すること」が必要になるかもしれません。

つまり、“得たい結果(目的)”を達成するためには、いくつもの“必要なこと(目標)”が存在し、それらを一つずつ実現していくことが求められるということになるわけです。

“必要なこと(目標)”は、“得たい結果(目的)”に到達するための道標のようなものです。

ここで少し時間を取って、あなたが得たい結果を達成するために必要なこと(目標)は何か?について考えてみてください。

この段階では、考えつく限りの“必要なこと(目標)”を洗い出していきます。

目的達成のために必要なこと(目標)を設定する

5手段を設定する

“手段”というのは、“必要なこと(目標)”を実現させるための具体的な方法のことです。

例えば、「メルマガの登録者数を増やすこと」が目標の場合、その手段として「価値ある情報を記事にして発信し続ける」ということが考えられます。

この手段を設定する際に重要なのは、その手段を実行することでなぜ目標が実現するのか、その理由を明確にすることになります。

例えば、価値ある情報を記事にして発信すれば、その記事を読んだ訪問者(ユーザー)の中から、より深い情報を求めてメルマガに登録する人が出てくるという可能性が考えられます。

ここで、また少し時間を取って考えてみてください。あなたが目標を達成するために必要な手段は何か?ということを。

この段階では、考えつく限りの手段をリストアップしていきます。

手段を設定する

6コンテンツを洗い出す

“コンテンツ”というのは、設定した手段を実現するための具体的な内容を指します。

たとえば、「メルマガの登録者数を増やすこと」を目標にし、「価値ある情報を記事にして発信する」ことを手段にした場合、必要なコンテンツには「メルマガ登録フォーム」「投稿記事」「メルマガ登録を促すランディングページ(LP)」などがあります。

ここで、また少し時間を取って考えてみてください。あなたの手段を実行に移すために必要なコンテンツには何があるか?ということを。

この段階では、手段に即したコンテンツを考えつく限り洗い出していきます。

コンテンツを洗い出す

7第二の工程は設計です

設計の工程では、大きく分けて3つのことに取り組むことになります。

それは、ウェブサイト(ホームページ)全体の構成(サイトマップの作成)、個々のウェブページの構成(ワイヤーフレーム)、そして情報と場所の整理(ディレクトリマップ)の3つです。では、それらをひとつずつ見ていきましょう。

第二の工程は設計

8全体の構成を設定します

ここは、いわばウェブサイト(ホームページ)の骨組みを作る段階です。

企画の工程で洗い出したコンテンツをもとに、ウェブサイト(ホームページ)全体の構成を決めていきます。

例えば、フロントページを起点に商品・サービスの案内ページや会社情報、お問い合わせフォームなど、掲載するコンテンツに合わせたページを想定し、全体を構成します。

このウェブサイト(ホームページ)の構成を表す図のことを“サイトマップ”といいます。

この段階では、ウェブサイト(ホームページ)にどのようなページを組み込んでいくかを考察し、実際にサイトマップを作成します。

全体の構成を設定する・サイトマップ

9個々のページ構成を設定します

ウェブサイト(ホームページ)の全体の構成図であるサイトマップが完成したら、次に取り組むのは、個々のページの構成を組み立てることです。

“ワイヤーフレーム”と呼ばれる、ウェブページのレイアウトやコンテンツの配置を定めた設計図を作成します。

この段階のゴールは、ウェブサイト(ホームページ)を構成する各ウェブページの設計図を作ることです。

個々のページ構成を設定する・ワイヤーフレーム

10情報と場所を整理します

ウェブサイト(ホームページ)は複数のウェブページが集まって構成されているため、ウェブページの設置場所やURL、ページタイトル、ページの概要を記したもの(メタディスクリプション)を把握することが欠かせません。

そのウェブページを管理するためのツールがディレクトリマップです。

このウェブサイト(ホームページ)には、どのようなページが何ページあり、それぞれのページにどのような情報が掲載されているのかを一覧表示にしておくことで、サイト構築時にしっかりと作り込むことができます。これにより、サイト運営時の管理ツールとして役立ちます。

ウェブサイト(ホームページ)はページ数が増えていくと、どこにどのようなコンテンツがあるのかを把握することが難しくなります。また、重複したコンテンツが同一サイト内に存在すると、SEO(検索エンジンを最適化すること)的にも良くありません。だからこそ、ディレクトリマップの存在が欠かせないのです。

ディレクトリマップ

11第三の工程は制作です

この工程でようやく、ウェブサイト(ホームページ)の現場でよく聞かれるライティング、デザイン、プログラミング、コーディングといった専門用語や専門技術が登場します。

住宅建築に例えると、木材やボード、設置するキッチンやトイレなどの資材を調達し、実際に大工さんがそれらの資材を使って住宅を建築していく工程にあたります。

この段階にまで来ると、目的はもちろん、方向性なども固まっているため、後はそれらを元に実際にウェブサイト(ホームページ)を組み立てていく段階になります。

第三の工程は構築

12文章のライティングとデザインとコーティング

この段階は、コンテンツの制作になります。コンテンツというのは、ウェブサイト(ホームページ)に掲載する文章であったり、画像であったり、動画であったりするわけです。

そしてこの段階で最初に取り組むのが文章執筆、つまり“ライティング”ということになります。

ライティング

ライティングを一通り終えたら、次は画像や動画の配置を行い、ウェブページのベースを整えていきます。

文章が整い、画像や動画の配置ができて、ウェブページのベースが整ったら次はデザインです。

デザインには二種類あり、ここで取り組むのは文章や画像の配置を調整するレイアウト・デザインと、タイトルの装飾やバナーの装飾などの装飾です。

この段階で活躍するのがウェブデザイナーですが、自力で構築する場合はあなた自身のデザインセンスの見せ所になります。しかし、よく見かける自己満足なデザインにならないように注意して進めることが求められます。

訪問者(ユーザー)に沿ったデザインを設定する

13プログラムを組み込んでコーティングを施す

文章、画像、動画が揃い、デザインも施されたら、次はお問い合わせフォームなどのウェブ上で動くプログラムを構築します。

例えば、ウェブサイト(ホームページ)の訪問者がその商品・サービスに興味を抱いて、コンタクトを取ろうと試みた時に必要なものが、“お問い合わせフォーム、コンタクトフォーム”などのコミュニケーションツールです。

そういったツールを動かしているのがプログラムです。この段階では、そのようなプログラムをウェブサイト(ホームページ)に組み込んでいきます。

プログラムを組み込む

この工程、つまり制作の工程の最後はコーディング作業です。“コーディング”を簡単に説明すると、ウェブサイト(ホームページ)をパソコンやスマートフォンで閲覧した際に、意図した通りに表示されるように専門の言語を使って整えていく作業のことです。

コーディング作業

制作の工程のゴールは、ウェブサイト(ホームページ)を後は公開するだけという状態に持っていくことです。

14第四の工程は公開

最後の工程は公開です。ここまで進められたら、ウェブサイト(ホームページ)は完成した状態といえます。

あとは、必要に応じてSEO対策を施し、サーバーとドメインを用意してそこにアップロードし、チェックを行ったら完了です。つまり、公開となります。

第四の工程は公開

15公開する場所(サーバー)を用意する

ウェブサイト(ホームページ)はサーバーという場所に設置して、世界中からアクセスできるようにすることで、多くの人達がそこから情報を取得するという役割を果たします。

そのため、ウェブサイト(ホームページ)を一般に公開するためにはサーバーを用意する必要があります。

公開する場所(サーバー)を用意する

16公開する住所(ドメイン)を用意する

サーバーに置いたウェブサイト(ホームページ)にドメインという名の住所をつけます。

ドメインとは、“https://sbcc.jp/”などの“sbcc.jp”の部分を指すもので、同じドメインはこの世に二つと存在しません。

公開する住所(ドメイン)を用意する

17公開する場所(サーバー)にデータを置く

サーバーを用意して、ドメインを取得したら、いよいよそこにウェブサイト(ホームページ)のデータを“アップロードして世界中の人が見られるようにします。”

これで、本当の意味でウェブサイト(ホームページ)が完成することになります。

公開する場所(サーバー)にデータを置く

18公開後の確認をする

ウェブサイト(ホームページ)の公開後に行うべきことが、“リンクエラーなどのチェック”です。

“リンクエラー”のチェックとは、ウェブページ内に設定した“リンク”が意図した通りの挙動をするかどうかを入念に確認する作業になります。

さらに、お問合せフォームが正しく機能しているか、画像が問題なく表示されているかなど、確認すべき点は多数あります。

公開後の確認をする

ここまで、ウェブサイト(ホームページ)の構築工程が完了となり、ここから先は〝運営〟のフェーズに入ります。

“企画”、“設計”の工程をすっ飛ばすと・・・

これは、わたし自身の失敗からの教訓ですが、これまで、いきなり構築の工程から入ることを何度もしてきました。

自身の事業のウェブサイト(ホームページ)構築の時も、クライアントから請け負って構築していた時も、“企画”、“設計”の工程を雰囲気で乗り越えて進めてきたことが多々ありました。

そうなると、当然出来上がりも納得のいかない、なんだか違うものばかりになります。クライアントから請け負った案件は何度もやり直しになりますが、やり直してもやり直しても、“これだ!”というものは仕上がりません。

“デザイン力がないのか…”

“技術力がないのか…”

と考えてデザインの勉強をし、ウェブプログラミングの技術を磨いてきましたが、それでも何も改善されませんでした。

仕上がるのは、いつも洗練されたデザインなのにごちゃごちゃしていて、何を伝えたいのかよく分からないウェブサイト(ホームページ)です。

Amazonでウェブサイト(ホームページ)構築の書籍を何冊も買って読み漁っても、そこに書かれていることはデザインと技術に関することがほとんどで、“企画”や“設計”については、ほんの触り程度しか書かれていませんでした。

しかし、ウェブサイト(ホームページ)構築においては“企画”、“設計”こそが命で、そこに一番時間と労力を割かなければいけなかったのです。

このことに気付いて周りを見渡してみると、わたしと同じ過ちを犯している人が実に多いことに気付きました。

だから、最後にまとめの意味を込めてもう一度お伝えしておきます。

ウェブサイト(ホームページ)構築には、きちんと工程があり、その中でも特に頭をひねって時間をかけて取り組むべきなのが、“企画”、“設計”の工程だということです。

  • この記事を書いた人
  • 最新記事

川村 みきを

アメリカで暮らしていた時に〝パソコンとインターネット〟に触れて、
帰国後の1997年にプログラマーの仕事に従事。

その後、人材派遣会社で〝IT人材の派遣事業〟を立ち上げ事業運営に従事。

ウェブサイト制作会社での新規事業を経て2007年に独立。

〝ウェブサイト制作〟、〝映像コンテンツ制作〟の事業を経て、今は、

〝ITのテクニカルサポート〟

〝オンライン講座の企画運営〟

で、事業活動をITの側面から手助けをしています。

-uncategorized