web制作の流れとは？～企画から運用までの4つのステップ～

Webサイトは今や企業に欠かせない情報提供手段。もしあなたが会社のWebサイトを制作することになったら、まず何から取りかかりますか？今までに個人のブログやポートレートサイトは作ったことがあっても、会社のWebサイトを作るとなるとユーザー層や載せる情報量、デザインの考え方が違ってきます。ここでは、企業のWebサイトを制作する時にどのような流れがあるのか、企画から運用までの過程を4つのステップに分けて詳しくご紹介します。

 

Web制作のステップ1　企画

課題・目的を決める

新しくWebサイトを作りたい時やリニューアルをしたい時など、その考えに至ったキッカケがあるはずです。例えば、「新規サービスの立ち上げにともなって自社のサービスや商品を大勢の人に知ってもらい、お問い合わせを増やしたい」、「今まで使っていたWebサイトはパソコン用とスマホ用が分かれていたので、1つのサイトをどの端末でも表示できるレスポンシブのWebサイトにを作りたい」などです。それは会社のPRのためなのか、販売促進のためなのか、顧客とのコミュニケーションのためなのかなど、Webサイトを作る目的を明確にしましょう。
社内で自社のサービスや商品に詳しいのは、営業や販売の担当者です。お客様からどのような相談をうけるのか、自社のサービスや商品はライバル会社とどのような違いがあるのかなど意見を聞いてみましょう。また、広報などWebサイトに掲載するコンテンツの内容を考える部署に、課題になっていることなどないか意見を聞くことで、新機能のアイディアが生まれることもあります。

どんなWebサイトにしたいかを決める

Webサイトを作る課題が明確になったら、その課題を解決するためにはどのようなWebサイトにするか考えましょう。会社のPRのためにWebサイトを作るなら、自社の実績や強み、特徴などを顧客に分かりやすく伝える必要があります。
販売促進のためにWebサイトを作るなら、商品やサービスの紹介ページや新商品を告知するためのコンテンツ、商品をサイトから購入できる機能などがあると効果的です。顧客とのコミュニケーションのためなら、お問い合わせフォームや、SNSにリンクする機能があると、顧客からの問合せや相談に応えられます。このように目的を達成するためには、どのようなコンテンツや機能があるといいかを考えると、どんなWebサイトにしたらいいか見えてきます。
その他に考えなければならないのがデザインです。デザインを考えるにあたっては、どのような人がWebサイトを見るのか、ターゲットを意識する必要があります。例えば、Webサイトを見にくる人の年齢層、性別は男性なのか女性なのか、どんな職業の人か、どのような趣味嗜好を持っている人かなどです。ターゲットが明確になってくると、ターゲットが好む色や表現を取り入れて、ターゲットが興味を持つようなデザインにしていきます。

企画書の作成する

どんなWebサイトにしたいか決まったら、構想を社内の部長や役員にプレゼンテーションを行い、Webサイト作成の予算を得る必要があります。そのプレゼンのために必要になるのが企画書です。この場合、Web制作に費用をかけることで、どれだけの売り上げアップが見込めるのか、ブランドイメージを向上させることができるかを、理解してもらうことがポイントになってきます。

Web制作のステップ2　設計

Webサイトの設計では、サイトの戦略に基づいて必要なコンテンツをどのように配置したらいいか決めて、サイト構造の作成までを行います。例えば、トップページにどのようなカテゴリページが紐づいているのか、さらにカテゴリページにはどのような詳細ページが紐づいているのかなど、階層を表や図を使って示したものが設計図の大枠になります。このトップページから複数のページが枝分かれしていく階層構造は、ツリー構造又はディレクトリ構造と呼ばれています。ディレクトリ構造が分かりやすく整理されていると、サイトを訪れたユーザーも情報を探しやすく、サイト内で迷って離脱することも少なくなります。また、人だけでなくクローラーにとってもサイト構造が分かりやすい方が効率よく巡回ができるので、検索エンジンの評価にもつながってきます。
サイト設計では、サイト全体の構造をまとめた地図のようなもの、サイトマップを作成します。どんなWebサイトにしたいかを決める時に設定したターゲットの視点でどのようにページを辿っていくかを考えて階層を考えましょう。

サイトマップが完成したら、今度は画面のレイアウト図となるワイヤーフレームを設計していきます。ワイヤーフレームは、ページのデザインやコーディングの前段階のラフ画のようなもの。線と文字、色で平面的に表現されていて、パッと見ただけでどこに何を置くかが分かるように作られています。ワイヤーフレームがあることで、デザインやコーディングに入る前にページ内に入れる要素や導線をチェックでき、1つのページに複数の人が関わって制作するときでも個々の認識のズレを防ぐことができます。
このように、サイトの構造を考えてサイトマップを作成し、ワイヤーフレームを設計するまでがWebサイトを作る際の設計の段階になります。

Web制作のステップ3　制作

デザイン

Webサイトのデザインでは、「ユーザビリティ」コンテンツとして掲載する機能をユーザーがいかに使いやすいようにするかが大切になってきます。また、さまざまな環境・条件によってアクセスしてくるユーザーに対して、「アクセシビリティ」他の人と同じようにアクセスしやすくすることが求められます。「ユーザビリティ」と「アクセシビリティ」この2つはWebデザインするのに欠かせない概念です。

Webサイトは何十ページ、何百ページもあるサイトをデザインしますので、1つ1つのページをデザインしていたら膨大な時間と手間がかかってしまいます。そうならないためにも、あらかじめサイト内で共通して使用する部分とそうでない部分を洗い出して、制作ルールを決めてデザインしましょう。そうすることで作業時間の短縮になり、見た目にも統一感のとれたサイトにすることができます。

デザインの具体的な作業としては、ワイヤーフレームで決めたレイアウトに具体的に色や画像などを指定していきます。ロゴやアイコンなどのパーツを統一して配置したり、サイト内に掲載するイラストのテイストをトーンアンドマナーに従って統一したりします。ページをデザインしていく順番は、初めにトップページを作成し、その後トップページからのリンクによって表示される各カテゴリのトップページ、さらにその配下のページというようにサイトマップの階層に沿ってデザインを進めていくのが一般的です。

Webサイトに掲載するテキストに関しては、フォントと呼ばれる書体を選ぶことができます。フォントは、基本的にユーザーのPC環境に依存して表示されますので、表示したいフォントをデザインの段階で指定しても、そのサイトを見るPCにインストールされていなければ表示されません。どうしても、特定のフォントを表示させたいときは、フォントを画像化して使用しましょう。

デザインの作業自体は、PhotoshopやIllustratorなどのソフトを使って行います。Webサイトは、リンクで複数のWebページがつながった集合体ですが、PhotoshopやIllustratorでできるのはWebページの見た目を作ることまでです。それぞれのページをつなぐリンクの設定はコーディングの段階で行います。

コーディング

コーディングは、HTMLやCSS、JavaScriptなどのプログラミング言語を使って、Webサイトとして配信するためのデータファイルを作る作業です。プログラミング言語は、コンピューターに命令を伝えるための言語で、Webページに設置する様々な機能をプログラミング言語で指示することで、その通りに画面に画像や文字、色などを表示したり、ボタンを押すとリンク先のページに飛ぶなどの動作を行ったりします。

HTML、CSS、JavaScriptはそれぞれに役割が違うデータファイルです。HTMLは、主にページの構成要素を記述しているファイルです。テキストや画像、動画、イラスト、ロゴなど、構成要素のデータの格納先をHTMLファイルに記述することで、サイトに表示させることができます。CSSは、ページのレイアウトや色を指定するためのファイルです。JavaScriptは、動きを指定するためのファイルです。小さく表示されている画像をクリックすると拡大して表示させたり、アコーディオンメニューの開閉の動きや、お問い合わせフォームに入力した情報をサーバに送るなどの動きを指定することができます。このようにコーディングしてはじめて、Webサイトとしての機能を実際に使うことができるようになります。

コーディングを行うには、HTMLやCSSなどの専門的な知識が必要で難易度が高かったのですが、近年では、そのような専門知識がない初心者でもWebサイトを作成したり、更新したりすることができるCMS（Contents Management System：コンテンツ・マネジメント・システムの略）を導入するサイトが増えてきています。

動作確認・表示チェック

HTMLコーディングを行った後は、実際に表示できるかをブラウザ別に確認します。ブラウザの種類、動作OS、バージョンの違いなどで、表示結果が異なる部分も多く、場合によってはプログラムが動作しないことも想定されます。トラブルを未然に防ぐためにもWebサイト公開前にチェックが必要な項目をご紹介します。

ブラウザのチェック

Webサイトでは様々なブラウザが使用されています。ブラウザによって動作の不具合や表示崩れが起きていないかを確認しましょう。
次の5つは使用率の高いブラウザです。

OSのバージョン別に確認

同じOSのブラウザであってもバージョンによって表示が崩れる場合がありますので、OSバージョン別にも確認が必要です。
一般的に使われているOSは次の4つになります。

端末別に確認

この10年でインターネットを利用する端末が多様化しています。主な種類としては、スマートフォン、パソコン、タブレット端末、テレビ、ゲーム機、携帯電話などです。その中でもスマートフォンは63.3％※と最も多く利用されています。この状況から、制作したWebサイトはパソコンだけでなく、スマートフォンやタブレットでも確認しましょう。そのときに確認する端末は、普及している人気のものを選ぶなど注意が必要です。レスポンシブのサイトをスマートフォンで確認する際は、縦と横の両方の向きで確認し、スマートフォンの実機で確認できないときは、PCのブラウザを縮めるなどしてレイアウトが崩れないかを確認しましょう。
※参照元：総務省｜令和元年版 情報通信白書｜インターネットの利用状況

サイト公開

テストの状態でWebサイトが問題なく表示されたら、今度は本番のサーバーにデータを転送します。データを転送するために必要になのは「FTPソフト」です。FTPソフトには「FFFTP」「FileZilla」「WinSCP」などの種類があり、ネット上で無料でダウンロードできます。「FTPソフト」をお使いのパソコンにインストールし、サーバーにアクセスする情報設定すると接続されますので、制作したWebサイトのデータをサーバーに転送してください。
無事に転送が完了したら、取得したドメインのURLにアクセスするとサイトが表示できるようになります。表示されなかった場合は、ブラウザのキャッシュを削除し再度アクセスするなどして確認してください。これでWebサイトの公開は完了です。

Web制作のステップ4　運用

Webサイトは、公開が完了したらそれで終わりではありません。新しい情報に更新や、お客様からの問合せに対応しながら、Webサイトを企画したときに立てた目的を達成するために運用を続けていくことになります。さらに運用の段階では、サーバーのメンテナンスやセキュリティ監視、アクセスログの解析などの業務も発生してきます。ここでは運用する際に具体的にどのような作業を行うのかを解説します。

Webサイトの更新

Webサイトの更新と一口に言っても「デザインの変更」「コンテンツの更新」「掲載商品の変更」などさまざまです。「デザインの変更」は、Webサイトに掲載した写真やイラストの変更、色の変更、リンクボタンやバナーなどのパーツの変更があります。「コンテンツの更新」は、例えば季節性のあるイベントの告知情報を差し替えたり、新サービスの紹介記事を掲載したりなどです。「掲載商品の変更」は、自社の商品を紹介している場合には、商品がリニューアルしてパッケージが変わったり、値段が変わったりすると情報を差し替える必要が出てきます。Webサイトは訪問しても変わらないと、リピートする気持ちが薄れ訪問者数の低下につながってしまいます。いつ見ても新しい情報が載っていたら興味がわいてまた見てみようという気持ちになりますよね。Webサイトへの訪問者数を増やすためにもWebサイトの更新は必要です。

お客様からのお問い合わせ対応

Webサイトにお問い合わせフォームを設置していたり、問合せの電話番号を掲載している場合は、お客様からの問合せが発生しますので、問い合わせがあった時に誰が対応するのか、どのように対応をするのかを事前に決めておきましょう。どのように対応をするのかについては、対応マニュアルを作成しておけば、急な予定で別のスタッフが対応することになってもスムーズに行えるでしょう。

ドメインやサーバーの管理

Webサイトをネット上に公開するために必要となるドメインとサーバーは、定期的に更新が発生します。ドメインは、1年や3年、5年など契約年数ごとに契約を継続するか止めるかを判断し、継続する場合は更新料を支払うのが一般的です。サーバーの契約年数は、数カ月単位のものから年単位のものまで、サーバー会社や契約するサーバーの種類によります。ドメインもサーバーも更新の費用を支払わないと使用できなくなってしまうので、契約更新を忘れていたために突然Webサイトが表示できなくなることが無いよう、更新時期や更新費用の支払いはしっかり管理しましょう。

危機管理の体制

サーバーがダウンやシステムの不具合で一定の期間サイトが表示されなくなった場合、お問い合わせができなくなったり、ECサイトなら商品の購入ができなくなるなど大きな影響があります。そのような時に現場の担当者は誰に連絡すればいいのか、どうすればいいかのマニュアルを用意しておくと慌てずに対応することができるでしょう。復旧後にはサイトが表示されなくなったことの説明とお詫びの文面をサイトに掲載するなど、どのような対応をするかも決めておくことも重要です。

Webサイトの流入状況の分析

Webサイトを企画した時の目的に対して公開後にどれくらい効果があったのかを検証することは、Webサイトの運用に欠かせない業務です。検証では
Google Analytics（アナリティクス）やGoogle Search Console（サーチコンソール）がよく利用されるツールです。Google AnalyticsはWebサイトに設定すると自動的にアクセス解析を行ってくれます。Google Search Consoleは、googleの検索結果を分析できるツールで、キーワードの表示回数や順位の推移、サイトの問題点などを確認することができます。これらのツールを活用しWebサイトを検証した結果は、Webサイトをより良く改善するために活用しましょう。

まとめ

この記事では、企業のWebサイトを制作すると仮定して企画から運用までのWeb制作の流れをご紹介しました。これがECサイトやサービスサイト、オウンドメディアであっても基本的な流れは変わらないので活かせる内容になっています。Webサイトは今や企業のブランディングや、商品、サービスの販売促進に欠かせないものになってきていますので、自分が制作するサイトに必要だと思われる部分は参考にしてみてください。

 

サイト良くして委員会　トップページに戻る