Webサイト制作の基本と成果を出すために押さえておきたいポイント

Webからの集客を成功させて売上をアップさせたい、企業を成長させたいと考えて今この記事を見ている人もいるのではないでしょうか。そのために、Webサイト制作の基本的な流れや構成、制作方法について詳しく知りたいと考えていることでしょう。

この記事を読むことで、Webサイトの基本的な作成方法や手順、成果を出すための制作方法について詳しく知ることができます。外部への依頼をお考えの人の参考にもなりますので、ぜひ最後までご覧ください。

Webサイトとは、インターネット上にあるWebページの集合体のことを指し、一般的によく聞く「ホームページ」と同じ意味があります。事業を運営している企業であれば、Webサイトがあって当然といった昨今ですが、いったい何を載せればいいのわからないといったこともあるでしょう。

ここから、Webサイトを制作する理由やWebサイトそれぞれの種類について深掘りしていくので、各Webサイトにおいて自社は何を載せれば良いか、考えてみてください。

Webサイトを制作する理由としては、大きくは情報提供といった意味合いがあります。総務省が平成29年におこなった「ホームページ開設目的・用途」の調査では、

が主な目的となっています。

そのほかにも、決算公告や消費者の評価・意見の収集が制作目的であるといった会社もありました。Webサイトを制作する理由やメインで載せる内容も各企業でさまざまなので、自社にあったWebサイトを制作するようにしましょう。以下では、Webサイトの種類について解説していきます。

Webサイトには主に6つの種類があります。

作ろうとしているサイトが、どの種類かを考えてみましょう。

コーポレートサイトとは、企業の公式情報サイトです。会社概要や企業理念、沿革、新着情報、プレスリリース、IR情報などが掲載されており、企業の信頼性・信用性を見るサイトでもあります。

消費者、求職者、投資家、など全てのユーザーが訪れる会社の顔となるWebサイトなので、しっかりと作り込んでおく必要があるでしょう。

商品をオンラインで購入できるサイトが、ショッピングサイトです。ECサイト（electronic commerce）と呼ばれています。ショッピングサイトにも3つ種類があります。

メーカーがそのまま顧客に届けるメーカー公式ショップや、取り扱いジャンルや商品のコンセプトが決まっており様々なメーカーから仕入れているセレクトショップ、Amazonや楽天のようなプラットフォームに様々なショップが出店する形態のECモールがあります。

ランディングページは、商品・サービスをコンバージョンするために作られるサイトです。基本的には、1つの商品・サービスに絞り込み、コンバージョン率を高めることに集中して作られます。

基本的に縦長1ページで作られ、ヘッダーもなく、商品紹介と申し込みボタンだけでが目立つように表示されることが多いです。フッターにはリンクがありますが、基本的には他ページにも遷移がしにくい作りにし、商品・サービスを集中してみてもらうような作りになっています。

ブランドサイトは、ブランドの世界観を表現してブランドイメージを構築し、ターゲットのロイヤルティを高めるために作られています。

メーカーがブランドサイトを作っている場合、ショッピングサイトは別サイトで作られているケースが多いです。ボタンやセールス的なメッセージを排除し、ブランド表現に特化して作られています。

またブランドサイトとは別でキャンペーンサイトなどもあります。特別なキャンペーンや企画を告知し、ターゲットに参加してもらうように作られています。そこでも直接販売は行わず、認知度の向上を目的として作られます。

情報サイトは、主にオウンドメディアと呼ばれるサイトです。オウンドメディアは企業、メーカーなどが運営するメディアのことです。

自社の商品やサービスに関連する情報を発信するサイトのことを指し、商品・サービスだけではなく、ターゲットの悩みを解決するための情報を提供します。ターゲットが求める情報を発信し、解決方法などを紹介します。

企業は採用活動に特化したサイトを作る場合があります。求職者に向けた企業の紹介と、顧客等に向けた企業の紹介は異なるため、求職者に向けてピンポイントなメッセージを発信するために採用サイトを作成します。

新卒向け、中途採用向けなど、それぞれ採用サイト内でページを分けて制作することでよりターゲティングをして採用を進めることができるのです。

Webサイトを制作する手段は、大きく2種類に分けられます。自社で優良な人材を複数採用して制作する場合と、外部に委託する場合です。どちらもメリットデメリットがあるので、詳しくみていきましょう。

自社制作のメリットとしては、自由に思い描いたWebサイトが制作できる点です。自社での制作となれば、企業の熱量もそのままWebサイトに反映することができ、より魅力的な内容で制作ができます。

しかし、その分人的リソース・採用・コストが必要となります。企業のWebサイトをゼロから全て制作するとなれば、それなりの技術も必要になってくるでしょう。

大きく分けてみてもこれだけのリソースが必要となります。全てを兼ね備えた人材よりは、各分野のスペシャリストを採用する方が将来的なコストは抑えられるでしょう。採用に力を入れている企業や、自社でゼロから思ったように作りたいといった企業は自社制作を考えてみてください。

外部委託をする場合のメリットは、専門的な知識を持ったスペシャリストが既に揃っているといったことでしょう。前述したように、自社で制作をするとなればそれぞれの分野の人材を採用することから始まります。しかし、外部委託をすることによって、依頼時点で専門知識のある人材が既に揃っていることで、スピード感あるWeb制作をおこなうことが可能です。

その反面、自社で制作するよりもコンテンツの内容が深くならないといったデメリットもあります。業界知識、自社製品・サービスのことなどは、各企業自社の社員が一番理解しているでしょう。その面で自社制作よりも劣ってしまうことは考えられます。

デザインやマーケティングなどの部分は制作会社に外部委託、製品・サービス、企業に関するコンテンツ部分などのライティングは自社でおこなうなど、専門家に依頼するところと自社でおこなうところを分け、お互いの専門分野で協力して進めていくとスムーズに制作ができます。魅力的で集客力の高いWebサイトを制作するのに一番おすすめの方法と言える方法でしょう。
Webサイトの制作について相談してみる

ここでは、Webサイトを制作する際に事前に決めておきたい準備について解説していきます。いきなりWebサイトの制作から始めても、何のために誰のために制作をしているのか、途中で軸がブレてきたりするので、以下のことは制作に入る前に決めておくようにしましょう。

Webサイトを制作する目的を明確にしておくことは非常に重要です。何のために制作をして、どんな目的があるのか、チーム内で話して共有をしておきましょう。

以下で、具体的例を挙げてみます。

例1）企業や製品・サービスのブランディングを強化したい企業

目的：企業と製品のブランド構築
見込み客や既存顧客、株主、パートナー企業、求職者、従業員などステークホルダーとのつながりをより強くし、企業をブランド化していきたい。

そのためには、まず企業のコーポレートサイトの制作・改善が必要。別でブランドサイトの運用、製品・サービスサイトの運用もおこない、企業、製品・サービスの双方からブランディングをしていく。

例2）優秀な人材を確保し、会社の成長を加速させたい企業

目的：企業の成長を加速させるための採用強化
優秀な人材を確保するためには、企業の詳細な情報提供をする場所が必要なので、コーポレートサイトのコンテンツ改善をし、企業の信頼を構築する。

また、独立した採用サイトの制作で見込みの求職者に届ける情報を強化していく。採用サイトの制作・運用は求職者のみならず既存社員にも好影響となり、より会社の成長が加速する。

このように目的と手段をセットとした具体的な準備をしておくことで、制作後もしっかりと目的を意識して取り組んでいくことができるでしょう。

目的と同様、誰に向けてWebサイトを制作するのかは非常に重要です。ここのターゲット設定を間違えれば、目標としていたコンバージョンにつながらずWebサイトを制作しても全く成果が出ないといった結果になってしまいます。

これから作ろうとしているWebサイトは、

誰に向けてのものなのか考えてみてください。

ターゲットがイメージできれば、そのターゲットはいつもどんなことを考えていて、自社のWebサイトだからこそ欲しい情報はどんなものか？まで考えてみましょう。そこまで深掘ってイメージしていくと、Webサイトの構想も出来上がってきて、制作の戦略を考える時も円滑になるのです。

制作に直接かかわる目的やターゲットの設定も重要ですが、予算の設定も大切です。主に制作費用や制作後の運用費などをチームでしっかりと話し合って決めておきましょう。

Webサイトの制作は、制作過程でトラブルが起きることも少なくありません。追加でトラブル対応を依頼したり、ツールを利用したりして解決することもあります。万が一の時のために、予算は余裕を持って設定しておくことをおすすめします。

Webサイトの費用相場については、こちらの記事で詳しく解説しているので、参考にしてください。

Web制作の基本的な流れは下記の通りです。

以下では、それぞれのフェーズごとに解説していきます。

企画のフェーズでは、まず最初に「商品の売上アップ」「サービスの認知度アップ」といった具体的な目的に応じてゴールを設定します。

ゴールが決まった後に、サイトのコンセプトを決めるのですが、サイトのコンセプトは、デザインやコンテンツ開発の軸になるため慎重に決めることをおすすめします。

なぜなら、次のステップである設計や開発の段階でコンセプトを変えてしまうと、また企画からやり直しになってしまう可能性があるからです。

したがって、コンセプトを決める際は、決裁権のある人を含む、関係各所のすり合わせを慎重に行う必要があります。十分なすり合わせを行い、これ以上ないコンセプトが完成したら、次のステップへと進みましょう。

Webサイトのデザインやコンセプトを設定する際は、こちらの記事も参考にしてください。

これまでの打ち合わせをもとに、制作会社がプロジェクト計画書を作成します。プロジェクト計画書とは「要件定義書」とも呼ばれ、サイトの目的から開発までの計画を記した書類です。

プロジェクト計画書に記載されている具体的な内容は下記の通り。

→動作環境、技術要件、大枠のサイト構成など

→開発仕様、サーバー仕様など

→サイト運用で解決したい課題、運用のリスクなど

→プロジェクトリーダー、マネージャー、開発者などの体制

→プロジェクト全体の大まかなスケジュール

これらの内容を確認し、お互いの考えに相違がないかどうかを確認しましょう。依頼する側の担当者は決裁権のある社内の人物から承認を得る役割があります。

Webサイトの基本的なレイアウトについては、こちらも併せてご覧ください。

設計書をもとに開発やデザインを終えたあとは、サイトを公開し、運用に移ります。

公開後にしかテストチェックができない下記のポイントを確認しておきましょう。

これらのポイントがチェックできたら、自社で運用するSNSを通してサイトの開設を公表します。

加えて、検索エンジンにサイト公開を知らせる作業も忘れないようにしておきましょう。Googleの検索エンジンは、クローラーという巡回ロボが各サイトを見回り、その情報をWeb上に公開しています。

Web上には無数のサイトがあるため、こちら側から自発的に「このサイトも巡回してくだしさいね」とアピールする必要があります。やり方が分からない人は、制作会社の担当者に聞いておきましょう。

Web制作の基本的な制作方法は3つあります。

上記3つの方法に分類されます。CMSとホームページ作成サービスについては、活用できるツールも紹介します。まずは種類を理解しましょう。

ホームページは、HTMLやCSSというマークアップ言語と、JavascriptｙPHPなどのプログラミング言語で構成されています。HTMLは、ホームページの構成・レイアウトを構築とデザインを実装するもので、CSSは装飾を実装するものです。

Javascriptはホームページに動きをつけるときなどに使われ、ホームページのトップページなどでよく見るスライドショーはJavascriptにより作られています。PHPはお問合せフォーム等を実装するときに用いられます。

これらのコードでコードを書くことができれば自由度の高いサイトが制作ができますが、技術と知識を習得していくのはハードルが高く、初心者にはむずかしい制作方法になります。

CMSとは、コンテンツ・マネジメント・システムの略称です。HTML/CSSやPHPなどのプログラミング言語などを使用せず、テンプレートを使用して、サイト構築を行うことができるシステムです。最も有名なCMSは「wordpress」です。

CMSは完全に自作するよりは自作のハードルは低いですが、CMSの操作方法以外にSEO対策なども別途学ばないといけません。

3つ目のホームページ作成サービスは、初心者にとって最もハードルが低いが低い制作方法です。

CMSは、サーバーにシステムをダウンロードする作業などがありますが、ホームページ作成サービスの場合は、クラウド上で全て完結します。「Wix」や「Jimdo」などがあり、月額課金のサブスクサービスになっています。

Webページは基本的に3つの構成で制作していきます。

ファーストビューは、サイトに訪問してはじめに閲覧する画面です。FVと略して書かれることもあります。通常のサイトであれば、グローバルメニューやお問い合わせ、ヘッダー、キャッチコピー等が書かれたトップ画像があります。ランディングページであれば、キャッチコピー等が書かれたトップ画像のみでしょう。

ターゲットはファーストビューを閲覧して、下にスクロールしてメインコンテンツを閲覧するか、別ぺージに遷移するかを瞬時に判断しています。

このファーストビューがターゲットに響かなければ、すぐに離脱してしまいます。

そのため、このファーストビューには、ターゲットが求めている情報を、ピンポイントで訴求していく必要があります。 基本的には、ターゲットにとってのベネフィットを提示しましょう。ベネフィットとは、「顧客が得られる利益」のことです。ターゲットは、欲求を満たしたり、悩みや課題を解決するために、ホームページを閲覧しています。このファーストビューで求めているものがあると分かれば、直帰することはありません。

一般的にファーストビューのトップ画像のすぐ下からが、メインコンテンツになります。コンテンツの内容、種類などを掲載していきます。上部がトップ画像の次にユーザーが訪れる位置なので、閲覧してほしいコンテンツは上部に掲載しましょう。

またコーポレートサイトなどは、事業内容などのサービス紹介を一番上にもってくるケースが多いです。コーポレートサイトは企業の紹介がメインなので、最近力を入れている事業や企業の柱となる事業から先に掲載することが多いです。

また、新着情報／ニュースなども定期的に更新するようにしましょう。新しい情報を更新し続けることで、企業の信頼性を得ることができます。

メインコンテンツの下には、ターゲットに行動を起こしてもらうよう、申し込みやお問合せのボタン等を設置します。

ファーストビューとメインコンテンツで興味・関心を持たせることができても、申し込みやお問合せが分かりにくいとコンバージョンに繋がりません。 そして更に下にフッターがあり、ここに会社概要やプライバシーポリシーの情報などを掲載します。サイトの信用性は最後にここが確認しますので、漏れのないようにしましょう。

「これから自社のWebサイトを作りたい！」という人に向け、Web制作で気を付けるべきポイントを紹介していきます。

これらのポイントについて詳しく解説していきます。

まずは基本として、ターゲットやゴールの軸をブレさせないことが大切です。

ターゲットがブレてしまうと持続的な効果測定ができなくなるため、サイト運営を最適化しづらくなってしまいます。そのため、最初に決めたターゲットを軸にして、サイト内のコンテンツをブラッシュアップしていく必要があるのです。

加えて、ゴールをブレさせないことも重要です。

サイトを運営していると「PVをとること」「検索順位を上げること」などに着目してしまう傾向があるのですが、ゴールは「商品の売上アップ」「サービスの認知度アップ」など、その先にあるはずです。

目の前の課題をクリアしていくことも大切ですが、目指すべきゴールは常に念頭に置いておきましょう。

競合調査をすることで、競合が持っていない自社の強みが明確になります。

競合が持っていない強みで差別化することができれば、Googleからも「他に無いユーザーにとって有益な情報」であると認められ、Webサイトとして高い評価を受けることができます。

Googleから高い評価を得ることができれば、自然とPV数も上がるため、集客や商品の認知度アップなどにつながりやすくなります。

競合分析のことについて詳しく知りたいならこちらの記事も併せてご覧ください。

Webサイトは、制作後の運用がWeb制作成功のカギを握ります。公開後は、定期的に効果測定をおこない、分析と改善を繰り返していきましょう。

企業のブランディング、製品・サービス、採用、など何に関してもコンテンツの更新が非常に大切となってきます。制作することに振り切りすぎていて、制作後の運用のことは何も考えておらず作っただけになってしまった、といった企業や運用体制を組んでいたが、すぐに体制が崩れてしまい運用ができなくなったといった企業も多いです。

サイト制作後の運用を継続していくためにも、自社でしっかりと体制を組むか制作を依頼していた企業に更新代行を依頼するなども考えてみましょう。

繰り返しになりますが、Web制作の成功は制作後の運用にかかっています。戦略的に運用していくことで、成果を最大限にしていきましょう。

制作会社は日本中にたくさんあり、それぞれ特徴も異なるため慎重に選ばなければなりません。

会社選びを間違えてしまうと、サイトが完成した後に目的を達成できず、予算の無駄遣いになってしまう可能性があります。

後悔を防ぐために、会社選びの段階で

などといったポイントを必ずチェックしておきましょう。

現在の課題に合わせたWebサイトを制作するには、緻密な分析や調査、企画力を求められます。コンバージョンやユーザー体験の最適化をおこなうには、制作の経験値と分析データベースが必要です。

THINkBALは大手企業から中小企業まで幅広く制作をしてきた経験から、ビジネス成果を出すWebサイトの制作を得意としています。実績を見てみる

THINkBALでは、

などといったサービスを、満足していただける費用でご提供しております。まずはお気軽にご相談ください。

Web制作に必要な基本的なスキルは下記の通りです。

これらの専門知識があれば、Webサイトを一人で制作することもできます。以下にてスキルの詳細を見てみましょう。

HTMLとは、「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略称で、コンピューターに文書構造を伝えるためのマークアップ言語です。

普段、多くの人が目にしているサイトのほとんどは、このHTMLによって、Webページの土台が作られています。

CSSとは、「Cascading Style Sheets（カスケーディングスタイルシート）」の略称で、Webページのレイアウトを形にするためのスタイルシートです。

CSSは、HTMLで作られたWebページをより見やすく、キレイに表示させるためのものであるため、文字色や背景色などを変更させる際に使用します。

「HTMLでWebページの大枠を作り、CSSでキレイなWebページにする」というのがWEBページ制作の基本的な流れです。

Javascriptは、サイト上でユーザーが使用するギミックを作成するためのプログラミング言語です。

たとえば、

といった役割を持つギミックを作成することができます。

PHPとは、Web上のデザインではなく、ユーザーがサイトを快適に使えるようにするためのシステムを作るための言語です。

たとえば、PHPを用いることで

などといったハイテクなシステムを作ることが可能です。

以下では、Web制作で使えるツールを「無料」「有料」に分けて紹介していきます。

まずは無料で使えるWeb制作ツールを見ていきましょう。

無料で使えるWeb制作ツールはご覧の通りです。以下にて解説していきます。

Wordpressは、世界中で使用されているWebサイト制作ツールです。サイトの作成から文字の装飾までをCMS（コンテンツ管理システム）を使用することで一括操作することができます。

「初心者でも簡単に利用できる」「短時間でクオリティの高いサイト作れる」などメリットが多いWordpressですが、その反面「サイトの脆弱性が高い」「似たり寄ったりなサイトになりがち」といったデメリットもあります。

Wixは、ホームページを開発するための環境を無料で提供している企業です。

Wordpressは開発の知識が不要ですが、Wixは開発の知識を要します。その代わり、作成者が持つ技術によってはクオリティの高いサイトを制作することが可能です。

STUDIOは、簡易的な操作でサイト作成ができる無料ツールです。単にテンプレートを使用するだけでなく、1から自分好みのサイトをデザインすることができます。

「共同編集」「モリサワフォントを使用できる」などといった特長があるため、一般的に使用率が高いとされているWordpressと差別化したい人におすすめです。

Amebaは、株式会社サイバーエージェントが提供する無料ホームページ作成ツールです。「アメブロ」という愛称で親しまれているため、すでに知っている人も多いかもしれません。

クリック操作のみでサイトが作成できる手軽さがある反面、カスタイマイズ性が低く、簡易的なSEO対策しかできないというデメリットがあります。

Jimbo（ジンドゥー）は、無料で使えるサイト制作ツールで、世界的に使用されています。表示される質問に回答するだけでAIが自動的にサイトを制作してくれるため、わずか数分で自分だけのサイトを持つことが可能です。

テンプレートが豊富なのですが、デザインの細かい調整がほとんどできないため、こだわりたい人はWordpressかSTUDIOを利用するとよいでしょう。

BASEは初心者でも簡単にネットショップを開設できる無料のツールです。月々にかかる費用や初期費用も一切ありません。

商品が実際に売れた際に手数料が発生する仕組みになっており、それ以外での費用がかからないため「手軽にECサイトを作ってみたい」という人におすすめです。

次に、有料ではあるものの、手軽でクオリティが高いサイトを制作できるツールを紹介していきます。

紹介していくツールは下記の通りです。

以下にて見ていきましょう。

ferret oneは、直感的に使用できる編集画面を用いることで、初心者でも簡単にサイトを制作できるツールです。

すでに約1,000社で導入が進んでいるという実績があり、サポート機能も充実しているため、非常におすすめできるサイト制作ツールです。

AMSは、手軽な操作でサイトが制作できるツールです。電話サポートを実施しているため、初めてサイト制作に挑戦する人でも安心して利用できます。

また、集客ツールも充実しているため、商品の認知度アップや問い合わせ増加にも期待できるでしょう。

BiNDup（バインドアップ）とは、株式会社デジタルステージという日本の会社が提供しているホームページ作成ツールとなっています。

デザイン性の高いサイトを制作できるため、サイトの見栄えにこだわりたい人におすすめです。

Adove Dreamweaverとは、アドビ社が提供するWebサイトとアプリをデザインするためのソフトです。

アドビ社は「Photoshop」「illustrator」といった品質の高いソフトを提供している有名なサイトであるため、安心して利用することができます。

自由自在にデザインを変更することができますが、Webデザインに関する専門的な知識が少ないと、完成度の低いサイトになってしまう可能性もあります。

Shopifyは、カナダで生まれたECサイト制作ツールで、世界中で約180万人の人に使用されています。

管理画面が充実しているため、売上レポートをスマートフォンでチェックすることも可能です。開発から運用までを手軽に行うことができる万能ツールといえるでしょう。

Webサイトは、「作成する目的」「向かうべきゴール」によって最適なサイト設計が異なるため、事前の打ち合わせや企画が非常に重要になります。

この記事を見て、「すこし分からないことがある」「不安だから制作会社に依頼してみたい」という人はぜひTHINkBALにご相談ください。