web制作会社レインボー・ジャパンのweb制作関連情報サイト

webサイト制作時に押さえるべき「3つの設計」

webサイト制作時に押さえるべき「3つの設計」

現在、私たちweb制作会社には、webサイト制作に対する明確な成果が求められます。 そのためには、設計の前に、サイトに求められる結果、現在考えられる課題を洗い出し、ユーザーを定義し、定義したユーザーにどのような体験を webサイトを通してしてもらうかを考え、サイトの方向性を定める必要があります。 webサイト設計とは、そのサイトの方向性にしたがって、設計図を描くことです。

1. 概要設計、2. 詳細設計、3. サーバ・インフラ設計

webサイト制作の方向性が定まった前提として、具体的にどういう設計項目があるか。レインボー・ジャパンでは大きく「概要設計」と「詳細設計」と「サーバ・インフラ設計」の3つの設計領域があると考えています。

webサイトの骨格を固める「概要設計」

主にwebサイトの構造・骨格を固める設計です。
webサイト全体像設計とも言い換えることもできるかもしれません。
この部分でサイトに訪問するユーザーにどういう体験をしてもらうのか、各々のユーザーが持つ課題をどう解決してもらうのかを整理します。

概要設計の成果物としては
- 主動線設計
- サイトマップ
- 回遊導線設計
- 集客施策(キーワード、コンテンツ案等)
- KPI設定
といったものが考えられます。

「概要設計」で大事なこと

ここで大事なことは、ページ単位の点ではなく、サイト全体を俯瞰して全体像を作りあげるという考え方です。

そこにおいて、いかに設計者自身が自分をユーザー視点に置き換えて考えられるかが重要なのですが、考えるべきユーザー属性は1つではありません。
一般人、同業者、リクルーター、 投資家といった目的別の属性もあれば、見込み客→既存客、新規ユーザー→リピーターといった関わり方により変動する属性もあります。
それら個々の属性のユーザーがwebサイトにランディングしてから離脱するまでに、どうwebサイト内を回遊し、どういうアクションを取って欲しいのか。
設計者は「ユーザーはきっとこう動くはずだ」という想定を持って全体像を設計をする必要があります。
アクセスログのデータなども活用し、俯瞰的かつ客観的に自分をユーザー視点に置き換えて設計することがとても重要になります。

画面単位で掲載要素や実装機能を詰めていく「詳細設計」

各画面の掲載要素や機能、プライオリティ、コンテンツなどページ単位まで落とした設計のことです。
詳細設計の成果物としては

- 画面設計書(レスポンシブデザイン設計、モジュール設計含む)
- フロントエンド機能設計書
- バックエンド機能設計書
- フロントエンド、バックエンド連携定義書
- 詳細アクセスログ取得設計
といったものが考えられます。

「詳細設計」で大事なこと

ここで大事なことは、先ほどと同様、視点はユーザー視点であること、また、ページの主役となるのは、「情報そのもの」であるということです。

- ユーザーが興味を引く情報の見せ方はどうか
- ユーザーのメリットとして伝わるコピーは何か
- 製品の魅力を最大化して見せられる写真の見せ方はどういうものか
- 一見複雑に見えるサービス体系をどうすれば分かりやすく伝えられるか

例えばこういったことを考えながら、概要設計で定めたことに沿って、各画面の構成要素や情報のプライオリティや実装する機能を定義、設計していきます。

設計時のコンテンツ(情報そのもの)の取り扱いについて

設計というと、「使う」という意味においてのUIをどうするか、ということに目が行きがちですが、「情報そのもの」をどう見せるか、ということに設計者はもっと心血を注ぐべきだと思っています。
※これは想像ですが、そうなりがちなのは、設計段階において、掲載する情報が未確定であることが多いのが、要因として大きい気がします。ただ、そこは設計者がいかに入るべき情報をマネジメントし、クライアントとコミュニケーションを取るかで解決可能だと思います。

ここでクライアントとすりあわせておかないといけないことがあります。それは「掲載する情報を誰がどう準備するか」ということです。
レインボー・ジャパンでは、そこの境界線は、案件個別に定めます。

- 取材などを通して、ゼロから作るケース
- 提供いただいた情報を元にレインボー・ジャパンで編集を行うケース
- 見出しやコピーなどユーザーがまず目に留めるものは提案するが、詳細情報はすべて提供いただくケース
ケースとしてはこのように色々です。上記をミックスして対応するケースもあります。

ご予算やご希望に応じた対応を行ないますが、これはプロジェクト開始時に予め明確にしておくべきことです。

詳細設計に含まれる機能設計

また、詳細設計に含まれる「機能」の設計についてですが、設計時点で、状態遷移も定義をしておくことが重要です。例えば、、

- これをタップしたらどうなるのか
- ここの選択肢に表示されるものは何か
- 条件に合致しないときに何を表示するのか

これらをきちんと定義しておかないと、後々のテスト・検証段階でトラブルになりかねませんし、使い勝手の良いものにはなりません。

webサイトの公開環境を定める「サーバ・インフラ設計」

サーバ、データベース、通信環境、連携サービス等、webサイトをどのような環境に配置するかという設計です。
レインボー・ジャパンでは、サーバ構築・システム構築を伴う案件ももちろん対応しています。
ただ、専用サーバや、クラウドサーバ等の設定を伴う設計については、専門のパートナー会社様と一緒に組んで対応させていただくケースが殆どです。
サーバ・インフラ設計の成果物としては主に次のようなものがあります。

- サーバー環境設計書
- 連携サービス・API設計書
- 保守・運用定義書

「サーバ・インフラ設計」で大事なこと

ここで大事なことは、クライアント様のご予算、サービスの可用性、セキュリティなどを総合的に見て、判断をすることです。
特にサーバ環境については、制作会社側とクライアント側双方での管理のスコープについて明確に定義し、その責任範疇を明確にしておくことが重要です。

誰がwebサイトの「設計」を行うか?

以上のように「設計」と一言で言ってもたくさんの要素が考えられます。
もちろん、上述のものに限らず「○○設計」と呼ばれるものはもっと他にもあると思いますが、特に意識・注力しているものとしてはこれら、ということです。
レインボー・ジャパンでは、これらをwebディレクターという職種のスタッフが中心となって、webマーケティングコンサルタント、デザイナー、 フロントエンドエンジニア など各職種と連携しながら進めています。