何のためにWebサイトを制作するのか「目的」を明確にしましょう。
例えば、サービス・商品サイトなら「売り上げを伸ばす」「サービスの認知度を上げる」などが目的になります。

Webサイトを作った後のことも、考えておくことが重要です。
目的が達成度合いを評価するための指標を決めましょう。

どの数値を獲得できれば達成なのか基準があれば、改善施策を検討しやすくなります。

Webサイト利用が想定されるメインのターゲットユーザーを決めましょう。
ターゲットユーザーの決定は調査・分析と並行して進める必要があります。

目的・ゴールを達成するには、ターゲットユーザーをイメージしながら、どのようなコミュニケーションを行うべきか調査・分析が必要です。

たとえば以下のような情報を収集し調査する必要があります。
可能な限りさまざまな情報を集めてみましょう。

・広告、SNS、検索エンジンなどのオンラインで可能な施策
・店頭POPや雑誌、新聞、業界紙などのオフライン施策
・業界業種の動向やトレンド、ベンチマークとしている競合の施策

集めた情報を分析することで、最適なコミュニケーション方法を決定しましょう。

目的・目標、ターゲット、調査情報をもとに、Webサイトがどのような役割をもつのか、企画とサイトのコンセプトを決めます。

このコンセプトはプロジェクトの基本方針となり、以降の設計やコンテンツの開発、デザインのすべてにおいての指針となります。
後のステップに進んでからコンセプトが変わると、後戻りができなくなり、制作のやり直しにもなりかねません。そのため関係各所の認識のすり合わせと同意形成が必要です。

UXとはUser Experienceの略で商品やサービスに触れてもらう中でターゲットに対してどのような体験をしてもらうのか設計する工程となります。
どのようなタイミングで、どのようなコンテンツを、どのように魅せていくのか。どのように感じてもらうのか？といった体験をデザインしていきます。

「カスタマージャーニーマップ」や「ユーザーシナリオ」といったフレームワークを用いて、判断する根拠を作り進行していきましょう。

UXデザイン設計に基づいて、どのようなコンテンツを提供すべきなのかを考えます。サイト運営者の「伝えたい」と、ユーザーの「欲しい」が合致するよう、目線を合わせ、心地よい体験を提供することを主眼に企画を行いましょう。
関係者への掲載したいコンテンツのヒアリングはもちろん、同業他社などのWebサイトも参考にして決めていきましょう。

SEO対策への配慮
コンテンツ企画はSEO（検索エンジン最適化）への配慮も重要となります。どのようなキーワードを検索しているユーザーが存在し、その検索意図にどのようなコンテンツが重要かという視点でコンテンツを考えることも重要です。

サイト構造の設計とは、コンテンツをユーザーの閲覧にあわせ、どのような優先順位で掲載するのかを決定することを言います。
例えるとすると、スーパーを開店するにあたり、どの入り口からお客さんが入店し、最初にどの棚を見てもらい、進んでいくのかを決定するのに似ているかもしれません。
しかし、違いとして以下のような項目があるため注意が必要です。

・Webは入り口が無数にあり、入店時の動機が多岐にわたる点。
・Webサイトはリンクをすることにより直接コンテンツに移動できる点。
・Webサイトの土地の広さなどの制約がないため、拡大、縮小が起こる点

サイト構造の設計は以下の作業工程で行います。

1. コンテンツのまとまりを体系化
2. コンテンツごとの関連性を明確化
3. ターゲットユーザーが快適に遷移できるナビゲーション設計
4. コンテンツを正しく整理するラベリング

同じカテゴリのコンテンツが散らばって配置されていると、見ているユーザーは大変です。再度アクセスしてくれないかもしれません。
使いやすいWebサイトにすることで、ユーザーをひきつけることもつながります。

サイトが複数にまたがる場合などは、どのようなドメインにするも構造に合わせて検討しましょう。

アウトプットとしてはサイトストラクチャ、サイトマップなどが作成されます。

サイトマップをもとに、ワイヤーフレームと呼ばれる画面設計図作ります。
ページごとに「どのような情報」を掲載するのか構成要素を定義する工程です。情報の重要度に応じて、情報の流れやレイアウトなどの定義する場合もあります。

ワイヤーフレームは関係するメンバーがどのようなページを制作するのか共有・理解するための重要なドキュメントとなります。

ワイヤーフレームには「一番重要な内容なので目立つように！」など、指定や意図を添えて、参画するメンバーが同じ理解を持てるようにしましょう。

与件やサイト構造をもとに、どのようなシステムを導入するかの設計を行います。
更新が多い箇所にはCMSを導入するのか？その場合、どのようなCMSが最適なのか？他のCMSも検討すべきか？一から開発するのか？といった様々な条件を考慮して検討が必要です。

システム設計で考慮するポイント
・必要要件を十分に満たすことができるか
・サーバーやドメインなど取得は必要か？
・構築予算内で実装可能か？
・必要なセキュリティを担保しているか？
・メンテナンス性を考慮できているか？
・拡張性を考慮できているか？

プロジェクト内での共通の認識を持たせ、主観的な意見に左右されず、一貫したビジュアルデザイン作成ができるようにデザイン上のコンセプトを設定します。
商品・サービスのコンセプトやコミュニケーション設計をベースとして、ユーザーに適切なデザインはどのようなものであるかを言語化していきます。
また、イメージボードといったイメージを共有するためにビジュアライズした制作物などを作成したりしながら、より高い精度での共通イメージを持つことが、メンバー間での「良いデザイン」を共有し、スムーズな進行を実現します。

デザインコンセプト設計で確定するものは以下のようなものがあります。
・デザインの方向性をまとめたテキスト
・メインとなる色のルール
・フォントのルール
・画像素材などの方向性のルール
・レイアウトの大まかなルール
・共通するパーツルール

デザインコンセプトにそって、Webサイトで使用する画像やテキストやイラストなどを準備します。
営業資料や社内資料、写真といった素材の準備。
また、すでにある素材でまかなえない場合は撮影などを行い素材の用意を行うこともあります。
Web制作会社でストックフォトなど画像素材の購入やリースサイトより素材を手配することも可能です。何を誰が準備するのかを明確にしておきましょう。

※素材の著作権を確認することを忘れずに注意してください。（コピペや無断転載は厳禁です。）

素材の準備ができたら、各ページのデザインを進めます。できあがったものはデザインカンプと呼ばれます。
デザインコンセプトにそって制作されますが、ビジュアル化した際に印象のずれ、違和感がないかをチェックしながら進めましょう。これによりクオリティの高いデザインが実現できます。

デザイン制作時の注意
よくあるトラブルが、実現不可能な機能がデザインに表現されていることです。
見た目は確認はだけでなく、システムが動作した際にデザインとして問題がないかも合わせて確認するようにしましょう。

デザインカンプと同じものがインターネット上でも見られようにする、主にビジュアル面を調整する工程です。ソースコードと呼ばれる言語で記述する作業です。
Webページに表示されるテキストはもちろん、装飾なども実装していきます。主にHTML、CSS、JavaScriptといった言語で構築されます。

サーバーで動くプログラムを開発する工程です。目に見えない部分の作業なので、あまりピンと来ないかもしれません。

たとえば、レストランの予約サービスでお店の予約をしたとします。その場合、お店への連携や予約受付メールなど、さまざまな処理を行われます。そういったユーザーに見えない裏側の部分がバックエンドの出番です。

よくあるシステムとしてはWordPressなどのCMS（コンテンツ管理システム）やオンラインショップ構築でつかわれるEC-CUBEなどパッケージシステムがあります。
これらのシステムインストールや設定のカスタマイズなども担当します。
もちろん、独自システムを構築する場合もバックエンドエンジニアの担当となります。

そして、バックエンドの領域では、プログラミングのほかにもWebサイトの公開するためにサーバー設計やドメイン設定などインフラの準備も行います。
続いて、サーバー設定とドメイン設定についてご紹介します。

サーバー設定とは？
一般的にはサーバーといってもイメージがわかないかもしれませんが、簡単に説明するとユーザーに要求された情報を格納しているデータの格納庫と考えてください。
しかし、格納しているだけで情報を提供することができません。
そこで、情報を提供するにはサーバーで情報を配信するためのプログラムが動くようにしなければなりません。そのためのパソコンで言うところのOS（オペレーティングシステム Windowsなど）や、その他に必要なソフトウェアのインストールや設定が必要となります。
これらの作業を一般的にサーバー設定と言います。

主な作業

・サーバー選定と契約
・OSのインストール
・ミドルウェアのインストール
・ロードバランサーなどの設定
・セキュリティ設定
※具体的な作業内容は契約するサーバーによって異なります、契約内容をエンジニアと確認しながら進行しましょう。

ドメイン設定とは？
ドメインとは皆さんがサイト閲覧する際に入力するURLの○○○○○.comや○○○○○.co.jpのことを言います。

情報はサーバーに格納されると説明しましたが、その情報がどこにあるのかがわからなければ、ユーザーはたどり着くことができません。そこで
サーバーはIPアドレスという151.101.1.195というような数字が郵便番号のように割り当てられます。しかし、この数字だけではどのような情報なのかわかりませんし、ユーザーに覚えてもらえません。
この問題を解決するためgoodproductionsjp.comというような文字列とを紐づけることにより、ユーザーにたどり着きやすくするのがドメインの役割といえます。
そして、この設定作業をドメイン設定といいます。

主な作業としては以下になります。

・ドメインの選定、契約
・サーバーの選定契約
・サーバー設定
・サーバーとドメインの紐づけ

フロントエンドやバックエンドのエンジニアの作業が完了したら、テストを行います。この工程は、「動作検証」「デバッグ」などと呼ばれています。

ユーザーがWebサイトを見る環境は様々。どのユーザーにもデザイン通りの表示を見えているか、仕様通りシステムが動作しているかチェックを行います。
問題点があれば修正が必要です。

修正点が一つもなくリリースができることは非常にまれなので、テストと修正期間のスケジュールを確保しておきましょう。

また、テストでのトラブルを避けるため、実装前にどのような環境での動作を担保するかを決定しておくことが重要です。そして、どのような機能をどのような環境で動作のチェックを行うかといった「テスト設計」もあわせて行っておきましょう。

テストで動作に問題点がなければ完成ですので、リリース作業を行います。 リリース当日は、デザイナー・エンジニアのどちらも稼働できるように手配をしておくとベストです。 万全を期してからリリース作業を行うはずですが、予想外の要因でエラーが発生することもあります。 必ずリリース直後に公開されたサイトでテストを行い、問題があれば即座に調整できる体制を整えておきましょう。