サイト構築・運営

ウェブサイト(ホームページ)をつくる時はこの工程に沿ってつくると上手くいく

2023.09.22

この記事で解決出来る課題は、

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

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

これは、わたし自身も勘違いしていたなんだけど、ウェブサイト(ホームページ)の構築イコールデザインや文章のライティングだと思っている人が一定数いるということ。

だけど、それはウェブサイト(ホームページ)構築の全工程の中の3番目の中の1段階目にすぎないのだ。

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

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

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

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

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

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

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

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

このことは、わたし自身がウェブサイト(ホームページ)制作会社で働いていた時に何度も痛感したので本気でそう言える。

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

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

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

こんな風に、“デザイン”だけ、あるいは“丸投げ”でつくったウェブサイト(ホームページ)のほとんどが、『う〜ん、なんか違うんだよな…』といった残念な仕上がりになったのに対して、クライアントと一緒になって構築工程に沿って取り組んだウェブサイト(ホームページ)はその全てが、クライアントもわたし自身も納得のいく、想像以上の出来栄えになった。

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

1第一の工程は企画

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

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

企画の工程

2目的を明確にする

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

それは、ウェブサイト(ホームページ)なら新規顧客を集めるためだったり、住宅なら家族で居住するためだったり、料理なら友人と楽しいひと時を過ごすためだったりと、つくるモノによって目的は様々だが、目的を曖昧なままにして進めると、まず間違いなく意図しない成果物(最終的な完成形)が出来上がる。

ウェブサイト(ホームページ)をつくる時の“目的”という言葉を、“ウェブサイト(ホームページ)から得たい結果”と表現を変えて考えると、答えが浮かびやすいので、ここからは“得たい結果”という表現を使っていく。

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

この“ 得たい結果 ”を熟考することがこの段階だ。

目的を明確にする

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

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

住宅に住む人、料理を食する人、つくるものにより、人の行動は変わるが、何かをつくるという行為には、そこに相手となる人の存在が必ずある。

ウェブサイト(ホームページ)の場合はそれが“訪問者”だ。

つまり、あなたがこれからつくるウェブサイト(ホームページ)の訪問者は誰か?

この“訪問者”を強く意識して考えることがこの段階ですることだ。

この“訪問者を意識する”ということは、専門用語で言えば、“ターゲット設定”もっと絞れば、“ペルソナ設定”とも言い換えることが出来る。

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

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

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

その場合、その結果を達成するために必要なことは、メルマガの登録者数を増やすことだったり、自社の商品イメージを確立させることだったりする。

“得たい結果(目的)”を達成するために、その前提には“必要なこと(目標)”がある。

この時に注意してほしいことは、“必要なこと(目標)”は一つではないということ。

“得たい結果(目的)”は一つに絞る場合がほとんどだが、その得たい結果(目的)を達成するためには、いくつもの“必要なこと(目標)”があり、それらを一つずつ実現していくことが求められるし、それがウェブサイト(ホームページ)運営になる。

つまり、“必要なこと(目標)”は、“得たい結果(目的)”に辿り着くための言わば、道標みちしるべのようなものと言える。

あなたが“得たい結果(目的)を得るために“必要なこと(目標)”とは?

この段階は、“必要なこと(目標)”を考え書き出していくこと。

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

5手段を設定する

手段は、“必要なこと(目標)”を実現させるための策だ。

例えば『メルマガの登録者数を増やすこと』が“必要なこと(目標)”だとする。

そのための手段として考えられるのが、“価値ある情報を記事にして発信する”ということが挙げられる。

この手段を設定する時に大切なことは、その手段を実行すれば、なぜ?“必要なこと(目標)”が実現するのか?の理由が明確であることだ。

“因果関係がハッキリしている”とも言い換えることが出来る。

“価値ある情報を記事にして発信する”と、その記事を見たユーザーの中から、もっと価値ある情報が欲しいと考える人が出てくる。そしてメルマガなら、さらに高い価値の情報を得られるだろうといった前提のもと、メルマガ登録してくれるというのが理由にある。

何をすれば、“必要なこと(目標)”が実現するのか?その因果関係は明確か?を考える

この段階では、ひとまず、考えられるだけの“手段”を書き出していくこと。

手段を設定する

6コンテンツを洗い出す

“コンテンツ”とは、“内容”という意味で、それは状況によって変わる。

例えば、Netflixネットフリックスのコンテンツといえば、映画やドラマのことを指す。

では、ウェブサイト(ホームページ)のコンテンツとは何を指すのか?というと、先に設定した手段に即した内容と、いうことになる。

これは、どういうことか?というと、

例えば、“メルマガの登録者数を増やす(目標)”ために、“価値ある情報を記事にして発信(手段)する”場合、この手段に即したコンテンツとして、“メルマガの登録フォーム”や“投稿記事”、“メルマガ登録へ促すLP”そして、“価値ある情報を解説した映像”などが考えられる。

この段階では、先に設定した手段をもとにして、とにかく考えつく限りのコンテンツを洗い出すことが重要になる。

コンテンツを洗い出す

7第二の工程は設計

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

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

第二の工程は設計

8全体の構成を設定する

ここは、言わばウェブサイト(ホームページ)の骨組みをつくる段階。

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

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

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

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

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

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

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

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

この段階のゴール地点は、ウェブサイト(ホームページ)を構成するウェブページの設計図をつくることになる。

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

10情報と場所を整理する

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

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

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

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

ディレクトリマップ

11第三の工程は制作

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

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

第三の工程は構築

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

ここで構築するものは、コンテンツとなる。つまり、ウェブサイト(ホームページ)に掲載する文章であったり、画像であったり、動画であったりするわけだ。

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

ライティング

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

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

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

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

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

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

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

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

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

プログラムを組み込む

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

コーティング作業

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

14第四の工程は公開

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

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

>第四の工程は公開

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

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

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

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

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

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

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

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

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

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

これで、本当の意味でウェブサイト(ホームページ)の完成となるわけだ。

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

18公開後の確認をする

ウェブサイト(ホームページ)の公開後にやっておくことが、“リンクエラーなどのチェック”だ。

“リンクエラー”のチェックとは、ウェブページ内に設定した“リンク”が意図した通りの挙動をするか?などを入念に見ていく必要がある。

後は、お問合せフォームはキチンと機能しているか、画像は問題無く表示されているか、など確認することは多数ある。

公開後の確認をする

ここまでやって初めて、ウェブサイト(ホームページ)の構築工程が完了となる。

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

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

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

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

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

“技術力が無いのか…”

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

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

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

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

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

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

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

-サイト構築・運営
-, ,