効果的なWEBサイト制作をするには？上流工程からリリースまでの進め方を解説します！

最新テクノロジー、UIUX、アート、マーケティングなどあらゆる技術・メソッドを用いてクライアントのデジタルトランスフォーメーションを支援しているスパイスファクトリー株式会社です。

こちらの記事では、当社で数多く支援してきた経験をもとにWEBサイト制作プロジェクトの進め方を解説いたします。

WEBサイト制作とは

WEBサイトの制作方法にはいくつかの種類が存在します。まずはその種類から見ていきましょう。
たとえば以下のようなパターンがあります。

• WordPressを利用する
• ホームページ作成サービスを利用する
• ブログサービスを利用する
• ゼロからコードを書く

どの手法も一長一短がありますが、オリジナルのデザインにしたい場合など、本格的にサイトを制作したいのであればWordPressを用いる、もしくはゼロからコードを書いて作成する方法が適しています。
WordPressを用いる場合も、ゼロからコードを書く場合もHTMLやCSS、PHPといったプログラミングの専門知識が必要になるため、社内や自分自身にノウハウがない場合はサイト制作のプロに依頼して作成してもらうのが一般的です。
当社では主にWordPressを用いたサイト制作を行っています。本記事ではWordPressを用いたサイト制作プロジェクトを想定して解説をしていきます。

WEBサイト制作の工程

この章では、当社が実際に行ってきたWEBサイト制作の事例にもとづいて、WEBサイト制作の工程を順にご紹介します。

サイト制作の目的整理

サイト制作のプロジェクトではいきなりサイトを作り始めるといったことはほとんどありません。
まずは、サイトを制作する目的を整理します。
たとえば、採用サイトであれば優秀な候補者が応募してくれること、ECサイトであれば商品の販売ができ、大きな売上を作るといったことが目的として考えられます。
作成したい理由や、クライアントの抱えている課題によっても目的は異なりますが、サイトが完成した後に「こんなはずじゃなかった」といったことにならないためにもプロジェクトメンバーが目的を共有することは非常に重要な工程です。

競合調査

競合他社のサイトの調査・解析を行います。
基本的には同業他社のサイトなどを参考にすることが多いですが、デザインや情報の見せ方などの参考として無関係の業界や海外のサイトを参考にする場合もあります。
他社サイトの良い点、悪い点を洗い出し、自分たちのサイト制作プロジェクトに活かします。

ペルソナ・カスタマージャーニーの策定

次にサイトのペルソナを作成します。
ペルソナとは、サービスやユーザーのターゲットとなる人物像を具体化したものです。年齢や性別、家族構成やライフスタイルに至るまで本当にその人物がいるかのように人物像を設定します。
プロジェクトに関わるメンバーがペルソナを共有することで、サイトを使うユーザーがどんな情報を必要としているか、情報の優先順位や伝える順番、使用する単語はどうするべきかといった課題をスムーズに解決することができます。

また、このタイミングでカスタマージャーニーマップもあわせて作成します。
カスタマージャーニーは、作成したペルソナが実際にサイトに訪問してから離脱するまでに取る行動や思考、感情を時系列で表したものです。
カスタマージャーニーマップを作成することで、ペルソナがサイト内で取る行動のどこに課題が生じるか、どんなタイミングでどんな情報を欲しているかを把握しやすくなります。
ペルソナ・カスタマージャーニーの作成にあたっては、ユーザーの理解を深めるためにアンケート調査やユーザーインタビューなどの調査を実施する場合もあります。

カスタマージャーニーについては以下の記事が参考になります（外部サイト）↓
カスタマージャーニーとは？ジャーニーマップの作り方や具体的な事例をご紹介
ペルソナについてはついては以下の記事が参考になります（外部サイト）↓
今さら聞けない「ペルソナ」とは。意味やマーケティングでの活用方法、作り方も解説！

ユーザー目線の導線設計

ユーザーにとって適切な導線設計（サイト内のリンクや案内の設計）を行います。あるページに来たユーザーが次に欲しい情報にスムーズにアクセスできるように、ペルソナ・カスタマージャーニーを踏まえて考えていきます。
関連性が深いコンテンツに関しては、双方向での行き来が可能となるようにリンクを設計することも重要です。

ワイヤーフレーム作成

ワイヤーフレームやペーパープロトタイプなどのプロトタイプを作成して、どのようなUI（ユーザーインターフェース）が有効かを検討します。
ワイヤーフレームとは、ページのレイアウトを決めるために作成する設計図のようなものです。
ユーザー目線の導線設計のフェーズで決めた導線を実現するために、ページのどこにリンクを設置するか、どのページにどんな情報をどんな順番で配置するかなど、要件や骨格の検討を繰り返し、UIの具体化を行います。
ワイヤーフレームについては以下の記事が参考になります（外部サイト）↓
ワイヤーフレームとは何か？webサイト制作に重要なページ設計図を理解しよう！

デザインヒアリング・トンマナ策定

サイトの目的やブランドのコンセプト、ユーザーに与えたい印象などをヒアリングした上で、ページ全体のトンマナ（トーンアンドマナー）を決定します。
トンマナはデザインをする際の色調や文字フォント、デザイン様式などのルールのことを指します。トンマナに沿ってデザインすることで、サイト全体にわたってデザインの統一感を保つことができます。
具体的には、デザインのキーワード、カラー、ムードボードといったものを決定・作成してルールを共有していきます。

ビジュアルデザイン作成

ワイヤーフレームを元に、表層のデザインや画面遷移を施したデザインカンプ（デザインの完成イメージ）を作成します。
この段階までくると見た目のデザインに関してはかなり完成品に近いものとなっています。デザインカンプを作成することによって、実際の操作性やサービスを通して得られる体験といったユーザーの「感性・感覚」までチェックすることができます。

コーディング・CMS構築

ビジュアルデザインが決定したら、コーディングをしてWEBサイトを作成していきます。この工程はWEBエンジニアが担当します。
具体的には以下のような作業を行います。

• HTML,CSS,JavaScript等コーディング
• CMS設計・構築
• 各デバイスへの表示対応（レスポンシブ）
• SEO対策

CMS については以下の記事が参考になります（外部サイト）↓
CMSとは？初心者でもわかるCMSの基礎知識とメリット、導入事例

多言語機能実装

プロジェクトの内容にもよりますが、日本語だけでなく、英語などの多言語での表示が可能になるように設計することもあります。
プログラムで実装することも可能ですが、WordPressではプラグインを用いて比較的簡単に実装することができます。

セキュリティ対策

不正アクセスによる WEBサイトの改ざんや情報漏洩の被害が近年急増しています。
そのため、WEBサイトのセキュリティ対策は必須です。

企業にとって甚大な被害を引き起こしてしまう前に、セキュリティ対策をすることが大切です。

WEBサイトにはさまざまな脆弱性が存在し、そこを狙って悪意のある人物が攻撃を仕掛けます。
たとえば、以下のようなものをあげることができます。

• SQLインジェクション
• OSコマンドインジェクション
• ディレクトリトラバーサル
• クロスサイトスクリプティング
• バッファオーバーフロー

上記のように脆弱性を狙った攻撃パターンは多岐に渡ります。加えて、サイバー攻撃の手段は日々巧妙化・多様化しています。
こうした脅威からWEBサイトを守るためにも、以下のような取り組みを行うことが大切です。

• 定期的なアップデート
• 不要なファイルやページを公開しない
• 不要なアカウントを削除する
• ログの管理・保管を行う
• （WordPressの場合）セキュリティプラグインを使用する

以上のような比較的取り組みやすい対策はもちろんのこと、より専門的な対策をするとさらに安全が高まります。
専門的な対策としては、以下のような例をあげることができます。

• ファイアウォールの活用
• IPS（侵入防止システム）の活用

これらの対策はこの後ご紹介するサーバーの選定の際に対策が可能です。

サーバ選定

WEBサイトのデータを格納するサーバーを選定します。
クライアントが用意しているサーバーを使用する場合もありますが、当社ではサイト公開後の運用保守やセキュリティおよびメンテナンスにまで携わらせていただくことを考慮してレンタルサーバーをご提案することが多いです。前の項で述べたファイヤーウォールやIPSといったセキュリティ対策についても、レンタルサーバーの企業側で対応してくれることが多いため安全性の担保もできます。

また、海外でのサイト公開時には海外専用のサーバーで対応するケースもあります。
たとえば中国でWEBを公開する場合、現地企業の限定されたICP登録が必要です。
そのため、国内レンタルサーバーを使用することができません。
このような場合、AWS中国リージョンアカウントを現地運用会社およびプロバイダーに依頼して立ち上げる、のような対応をする必要があります。
目的や要望に合わせて適切なサーバ選定を行います。

テスト・リリース

リリース前には対象デバイス、ブラウザでの表示テストや、フォームテスト、境界値テスト、ブラックボックステストなどの各種テストを行います。
PC・スマホ・タブレットなど、異なるデバイスで見やすく正常に表示されることや、画面サイズが変化しても表示が崩れないか、リンクの遷移先が正しいかなどを総合的にチェックしていきます。
そして、テスト完了後にリリースします。

運用保守

リリースができたら、いよいよサイト運用開始です。
リリースはサイト制作の一旦のゴールではありますが、ビジネスとしてはサイトの完成はむしろスタートといえるでしょう。リリース後もサイトが安定して稼働し、制作の目的に合致した運用ができるように運用保守を行います。
リリース後は通常、サイト解析などを行い、ユーザーがサイトの目的に合った行動を取れているかを確認します。課題が見つかればデザインや導線修正をしたり、コンテンツの追加をしたりします。
具体的には以下のようなことを行い、サイトをより良いものにしていきます。

• Google AnalyticsなどのWEB解析ツールでサイト解析をする
• バグが発見された場合の修正
• デザインテンプレートの追加
• 追加コンテンツの作成
• CMS追加機能のカスタマイズ
• （WordPressの場合）バックアップやアップデート対応

WEBサイト制作はプロに任せる選択肢もある

以上、WEBサイトの制作工程についてお伝えしてきました。
WEBサイト制作にはやることがたくさんありますが、目的をぶらさず一つひとつの工程を丁寧に実施することで着実に良いサイトになっていきます。
システムやデザインの知識など、専門性が必要な部分もあるので、ノウハウがない場合はプロに任せることも選択肢の一つです。
当社、スパイスファクトリーでも上流工程からデザイン、運用保守まで一貫してサイト制作をすることが可能です。
何かお困りのことや弊社に対するご質問がございましたらください。
また、詳しいサービス内容に関しては、当社ホームページのをご参照ください。

参考文献

執筆にあたり、以下の記事を参考にさせていただきました。

Webサイトを作る4種類のおすすめ方法の比較！
Webサイト立ち上げ時にやるべきセキュリティ対策
webセキュリティとは？基礎知識やWebサイトを守るための対策法について紹介！