Webサイト制作を成功させるためには、各工程での注意点をしっかりと理解し、スムーズに進める必要があります。本記事では、自社制作や外部への依頼に関わらず、Webサイト制作の全体的な流れと、特に注意すべきポイントを詳しく解説します。明確なゴール設定や役割分担、運用計画の立て方から、HTML・CSSやCMSを使った制作手順、外注時の流れまで、実際の制作現場で役立つ内容をお届けします。初めてのWebサイト制作や、プロジェクト管理を任された方にとって、参考になる内容が詰まっていますのでぜひご覧ください。
目次
ピッタリの制作会社が見つかる完全無料で全国5000社以上からご提案
Webサイト制作の流れで注意すべきポイントとは
Webサイト制作の流れは、自社制作するか外部の制作会社へ依頼するかなどの条件で細かな違いがあるものです。しかし、どの制作パターンでも注意しておくべきポイントもあります。以下でご紹介するのは、Webサイト制作の流れで押さえておくべき注意点です。
●明確なゴールを設定する
Webサイトを制作してどのような目的を達成したいのか、明確なゴールを設定しましょう。Webサイトの種類やジャンルによって、目的は変わります。例えば、コーポレートサイトであれば自社の認知度やイメージアップ、問い合わせ率アップなどが目的となり、サービスサイトであれば問い合わせ率や申し込み率の向上、リクルートサイトであれば自社にマッチする優秀な人材の確保などが目的として考えられます。制作したいWebサイトのジャンルに合わせて、適切かつ明確な目標を設定しましょう。「問い合わせ率を◯◯％アップ」のように、定量的に計測できる目標を設定するのが理想的です。
●制作作業における役割分担をしておく
Webサイト制作では、サイト設計やコーディングなどさまざまな工程が必要となります。「誰がどの作業を担当するのか」「作業範囲はどの程度か」といった点を明確にして、事前に役割分担をしましょう。また、制作を外注する際は依頼する作業範囲と自社内で対応する作業範囲を決めておきます。例えば、専門的なスキルが必要なサイト設計やコーディング、デザインなどは制作会社へ依頼し、素材や写真提供は自社が担当すると良いでしょう。
●Webサイトの運用方法についても検討しておく
Webサイトの公開後の運用方法、方針も考えましょう。Webサイト公開後は、ユーザーのアクセス状況やWebサイトでの成果(CVR)などを継続的にモニタリングする必要があります。モニタリング結果を受けて、課題を解消しWebサイト全体をブラッシュアップしなくてはなりません。Webサイトの保守・運用はどのようなツール・運用体制で行うのか、各種解析ツールはどのようなツールを選ぶのかを固めておきましょう。
Webサイト制作の流れ：HTML・CSS編
HTMLとは、Webサイトのコンテンツの見出しやテキストを正しく記述する際に使用するマークアップ言語のことです。一方、CSSはWebサイトやページの装飾を実装する際に必要な言語を指します。ここからは、HTMLとCSSを使用してWebサイトを制作する流れをご紹介します。概ねの流れは次のとおりです。
- 課題の洗い出しと目標の設定
- ペルソナ設定
- 各種調査と分析
- テキストエディタへHTMLタグやCSSを記述
- ファイルを保存しアップロード
●1.課題の洗い出しと目的の設定
現状の課題を洗い出したうえで、「Webサイトを制作することでどのように課題を解消するか」という目的を設定するフェーズです。サービスサイトであれば「問い合わせ率が上がらない／問い合わせの質が良くない」、リクルートサイトであれば「応募率が低い／人材のミスマッチを防ぎたい」などの課題が挙げられます。課題を洗い出す際は、定量的な課題と定性的な課題にカテゴライズするとさらに整理しやすくなります。
・定量的な課題：「PV数が少ない」「応募率が当初目標より◯◯％不足」など数値で表せる課題
・定性的な課題：「一つの画面に情報が詰め込まれており見づらい」「どこに何の情報があるのかわかりづらい」など数値で表すことが難しい課題
●2.ターゲットやペルソナ設定
「どのような人物にWebサイトをみてほしいのか」を掘り下げるために、ターゲット設定とペルソナ設定を行いましょう。ターゲットとペルソナの違いは設定の粒度にあります。ターゲット設定は「首都圏在住の30代／男性／営業職」「関西在住の40代／女性／事務職」などのように、見込み客を大まかな属性で括るのが特徴です。
一方、ペルソナではターゲットをさらに深堀りして設定をつくり込み、架空の人物像を設定します。人物の氏名にはじまり、具体的な居住地や職業と職歴、興味関心、平日と休日の過ごし方などを詳細に設定するのがポイントです。人物のライフスタイルや価値観、思考を詳細にイメージできるレベルの細かなペルソナ設定をすることで、最適な導線設計を敷きやすくなります。
●3.各種調査と分析
ターゲットとペルソナ設定が完了したら、各種調査と分析へ移ります。競合となるサイトの構成や施策を調査し、業界全体の動向やトレンドを分析するのが有効です。特に、競合他社のWebサイトから学べる部分、見習うべき部分は積極的に調査して吸収しましょう。業界全体の動向を調査する際は、年齢・性別・家族構成などのデモグラフィックデータおよび国・住所などのジオグラフィックデータを収集したうえで調査すると効果的です。
●4.テキストエディタへHTMLタグやCSSを記述
目的の明確化からターゲットとペルソナの設定、各種競合調査などが済んだら、Webサイト制作の下準備は完了です。HTMLタグやCSSを記述して、Webサイトを構築していきましょう。HTMLとCSSは、テキストエディタと呼ばれるツールへ記述します。テキストエディタとはテキストの記述や編集に特化したツールのことです。Windowsに標準搭載されているメモ帳機能も、テキストエディタの一種です。メモ帳を使うという手もありますが、HTMLやCSSの記述により適したテキストエディタもあります。作業効率の面から、テキストエディタを導入するのが良いでしょう。
なお、HTMLおよびCSSの記述をまっさらな状態から行うと膨大な作業量となります。Web上で公開されているタグ例や、各種テンプレートを活用するのがおすすめです。
●5.ファイルを保存しアップロード
HTMLとCSSを記述したファイルを保存し、ブラウザへアップロードします。ブラウザでどのように表示されるのかをチェックして適宜調整を行い、サーバへアップロードすることで正式にWebサイトが公開されます。HTMLとCSSを使用してゼロからWebサイトを制作する方法は、自由度が高いのが魅力です。ただし、HTMLとCSSの高度なスキルが求められること、十分な作業時間が必要となることが難点です。開発環境や実装環境を構築しなくてはならないケースもあるため、初心者ではなく上級者向けの制作手段といえます。
Webサイト制作の流れ：CMS編
CMS（コンテンツマネジメントシステム）とは、Webサイトを手軽に構築できるツールです。コンテンツを構成するテキストや画像、デザイン情報などを一括管理し、それらを組み合わせてWebサイトを構築できます。ブログサービスのような管理画面で、直感的にWebページを作成・追加・更新できるサービスもあります。今回は、国内外で高いシェア率を誇るCMSツール「WordPress」を例にWebサイトの制作手順をご紹介します。
●レンタルサーバ契約
サーバとは、Webサイトのデータを保存するための場所です。自社サーバを構築すると時間的にも費用的にも膨大なコストが必要となるため、レンタルサーバを契約して利用するのが一般的です。サーバを介することで、Webサイト内の情報がWeb上で正常に表示されるようになります。
●ドメインの取得および設定
ドメインとは、Web上の住所のようなものです。Webサイトへアクセスしたり、メッセージを送ったりするためにはドメインが必要となります。レンタルサーバとセットでドメインを取得できるサービスも活用するとより効率的です。レンタルサーバ契約の特典として、無料または安価でドメインを提供しているところもあります。
●WordPressのインストールおよび初期設定
サーバとドメインが用意できたらWordPressのインストールと初期設定を行います。WordPressは世界的なシェア率を誇るCMSツールです。したがって、WordPressをスピーディーにインストールできる機能を備えたものも多いため、各サーバのマニュアルに沿って設定していきましょう。
●コンテンツやデザインの制作
WordPressのインストールと初期設定が完了したら、Webサイト内のコンテンツを構築します。具体的には、各種素材やデザインデータをCMS内へアップロードして装飾を実装したり、コンテンツ記事を執筆したりといった作業が必要になります。事前に考案したサイト構成をもとに、各種コンテンツ制作を進めましょう。
CMSを使用する場合は、ゼロからコーディングやデザインをする必要はありません。Web制作の知識がなくても、手軽にWebサイトを制作できるのが魅力です。ただし、一般的なCMSではデザインテンプレートが限られていたり実装できる機能に制限があったりします。自由度に限りがあるため、企業のWebサイトにしては物足りなく感じる場合もあるでしょう。
Webサイト制作の流れ：外注編
ここまでは、Webサイトを自社制作することを前提とした制作の流れをご紹介しました。しかし、Web制作の知識がある人材がいなかったり、十分な制作時間が確保できなかったり、「企業の顔となるWebサイトは、こだわって作りたい」と考えるケースもあるでしょう。その際の選択肢となるのが、制作会社への外注です。以下で外注時のWebサイト制作の流れをご紹介します。
●ヒアリング・要件定義
外注先を選定して正式な契約を結んだら、ヒアリングと要件定義がスタートします。要件定義とは、Webサイトを制作する目的やサイトへ盛り込むコンテンツ例、搭載する機能例などを洗い出し、そのために必要な条件をまとめる作業のことです。依頼会社と制作会社同士で認識をすり合わせながら、Webサイトの全体像や方向性を固めていきます。要件定義のフェーズでは自社の課題や改善したい点、強み、搭載したい機能といった希望を、できる限り具体的に制作会社へ伝えることが大切です。
●各種調査
競合他社のWebサイトやWebマーケティング例を調査し、自社の課題や強みを掘り下げるフェーズです。この時、ターゲットやペルソナのニーズ分析も忘れないようにしましょう。自社に既存サイトがあるのであれば、既存サイトのアクセス解析や見込み顧客の行動分析を行うのも手です。Webサイトの目的と調査して得られたデータをもとに、Webサイト全体のコンセプトを決定します。
●各種設計
Webサイト全体の構造を設計するフェーズです。ページの階層を整理して見やすい構造にしたり、導線の設置場所を試行錯誤したりします。
なお、設計のフェーズでは画面構成を大まかに決める「ワイヤーフレーム」も制作します。ワイヤーフレームをもとに、Webサイトおよびそれぞれのページの画面構成が構築されます。
●コンテンツおよびデザインの制作
Webサイトへ掲載するコンテンツ記事やデザインを制作します。コンテンツ記事の制作を依頼する際は、できる範囲で資料を提供し、アイデアを提案して積極的に協力することが大切です。デザイン案に希望があれば、参考となるWebサイトをいくつか提供するとよりイメージが伝わりやすくなります。
●実装作業
開発したプログラムや機能、デザインを実装するフェーズです。Webサイトにおける実装作業は、Webサイトのビジュアル面の機能を実装する「フロントエンド開発」と、一般ユーザーからは見えないプログラムの部分を構築する「バックエンド開発」に分けられます。したがって、実装作業はプログラマーをはじめコーダーやデザイナーなど、さまざまな職種の方が携わるフェーズといえます。
●保守運用
保守運用のフェーズでは、Webサイトが正常に表示されるか、実装した各機能が問題なく動作するかといった点をチェックします。問題なければ正式リリースとなります。ただし、Webサイトは公開して終わりではありません。顧客の動向やアクセス解析、CVRの推移などを分析したうえでWebサイトを適宜ブラッシュアップし、適切に運用していく必要があります。
Webサイト構築の流れは使用するツールや制作体制で異なります。より品質にこだわりたいのであれば外注するという選択肢も挙げられますが、自社に合う制作会社を1社1社比較、吟味するのは時間がかかるものです。
発注ナビであれば、全国5000社以上の加盟企業の中からご要望や案件内容に合ったWeb制作会社を厳選してご紹介いたします。
「自社に合ったWeb制作会社がわからない」「選定にできるだけ時間をかけずにスムーズに導入したい」とお考えの担当者様は、ぜひ一度検討してみてはいかがでしょうか。
ピッタリの制作会社が見つかる完全無料で全国5000社以上からご提案
■ホームページ制作に関連した記事
