Webサイト制作においてイケてる構成書の作り方

Webサイト制作において構成書の役割は、クライアントの求める効果を達成したり、ユーザビリティの高いサイトを作るためにとても重要です。
また、構成書には効率よくWebサイトの制作を進めるにあたってクライアントや制作チーム(WebデザイナーやWebエンジニアなど)と共有し、認識をすり合わせるために必要な情報がまとまっている大事な資料です。

この記事では効果的な構成書を作るためにどんな要素が必要か、また、どんな構成書だとクライアントや制作チームに情報が正しく伝わるかを解説していきます。

構成書をつくる前に大事なこと

サイト制作の依頼がきたからといっていきなり構成書の作成はしません。
大切なことは、始めに目的やゴールを決める(整理する)ことです。
目的やゴールがしっかりと決まっていれば制作者(WebデザイナーやWebエンジニアなど)もその目的やゴールに向かって制作や開発を進めることができます。
「いつのまにか間違った方向に進んでしまっていた」といったようなことを減らすためにもきちんと目的やゴールを決めるようにしましょう。

目的やゴールを決めた後は、全体の構造を考えます。各ページの中身を考えるのはその後となります。まずはハイレベルサイトマップを作成し、サイトの全体像を把握してから取り掛かると良いでしょう。

例)KROWLのハイレベルサイトマップ

※2019年7月時点のハイレベルサイトマップの一部です

▼最初にやるべきこと

  1. 目的・ゴールを決める
  2. 全体の構造を決める
  3. 各ページの構造を決める

構成書とは

そもそも構成書とはどのようなものでしょう?

KROWL MAGAZINEの過去記事を参考にしつつ整理していきましょう。

構成書とは、Webサイトのどこに、どんな内容が、どんな風に必要かを記載した資料のことです。機能やレイアウトを含め、クライアントから掲載内容についての承認を得ることを目的に作成します。
Webディレクターが作成する機会が多い資料ですが、WebデザイナーやWebエンジニアの視点から見てもわかりやすく作り上げる設計書となります。

ワイヤーフレームが枠線や箱のイメージで作成していく資料に対し、構成書はより具体的にテキストや画像も記載し、リンク先のURLや使用画像の指示なども入れ、不明点をなくすための資料といえるでしょう。

つまり構成書はWebサイト制作における設計書となる資料です。

わかりやすい構成書があれば、不明点がなくなるので、クライアントと認識を共有しやすく、後からの修正が減ったりするなどスムーズな制作作業が可能となります。

WebデザイナーやWebエンジニアも作業内容が明確になり、スムーズな制作作業が可能となります。

効果としては、

  • 時間的なゆとりができる
  • (時間の余裕ができると)ブラッシュアップでサイトの品質もアップ
  • (時間に余裕ができると)検証時間も十分とれてミスが減る

つまり、構成書の善し悪しが、案件の業務クオリティを決めるといっても過言ではありません。大げさに表現しているように聞こえるかもしれませんが現場で仕事をしていくと思い知らされることです!

では、そんな現場で本当に使える構成書を作るために書くべき内容、盛り込む内容はどのようなものでしょうか。

▼構成書の目次例

・表紙
表紙に「Ver.2.3(クライアントに2回提出、ファイル3回更新)」のように記載し、バージョン管理を徹底することで、最新の情報を見失わないよう注意しましょう。

・サーバー構成(なくてもOK)
既存サイトとの関わりや、導線を理解しましょう。

・ハイレベルサイトマップ
全体構造を把握することでリンク切れや対応漏れが無いようにしましょう。

・サイトの共通要素をまとめたページ
ナビゲーションのまとめ等、サイト内で共通して使用するものを一括管理できるようにしましょう。後々、修正対応がスムーズになります。
ナビゲーションやプルダウンなどの機能要素は、デフォルト状態だけでなく、展開時の内容まで書いておくと不明点がつぶしやすくなります。

・各ページの構成
サイトの目的を考え、要素を決めていきましょう。
より具体的にテキストや画像、リンク先のURLや使用画像も記載します。デバイステキストと画像化テキストを区別できるようにしたり、制作者が混乱しないように書きましょう。
文字も画像も具体的に載せ、後から修正が無いように工夫します。想定テキストや画像があれば入れておくといいですが、ダミーはダミーとはっきり記載しましょう。
不明点は、不明点として明確に書き、【ご確認ください】【要検討】などのように書くのも良いでしょう。

※こちらはサンプル用に作成した構成書の一部です

実際に私が普段の現場で求められていることをお伝えすると、これらのほかに
構成の考え方、意図も伝えることが重要です。
どういう目的を果たすために、こういう構成にしていると伝えるようにしましょう。
言われたことをやるだけでなく、クライアントの課題解決、目的を果たすよう考えましょう。

書き方のポイント

「エリア」をどう配置するかに正解はありません。目的やゴールによって様々です。

そのページでユーザーに、何を理解させるべきか、感じさせるべきか、どんな行動をとらせるべきかを考えることが一番重要になります。

ページの役割を考えて「エリア」の増減&大小を考えましょう。

サイトホーム、カテゴリートップ、詳細ページくらいの大枠で
基本のレイアウトを決めておくと、内容の整理もしやすく、構成書がつくりやすいです。

「要素」には大きく分けると、文字要素視覚的要素機能要素の3つがあります。

  • 文字要素:見出しテキスト、本文テキスト等
  • 視覚的要素:写真画像、文字画像等
  • 機能要素:リンク各種、入力フォーム関連等

構成書内でどの要素をどう記述するか事前にルール化しておくと、イメージの共有がしやすいので意識して構成書を作りましょう。
また、クライアント確認、デザイン・マークアップの作業もスムーズになります。

要素ルールとは、たとえば以下のようなものがあります。

  • 見出しのレベル(h1、h2、h3)で書き方を変える
  • コンテンツブロックの範囲が分かるよう枠線で囲む
  • リンクは下線とリンクマークを、外部リンクは別窓マークを付けるなど
  • クリックできるところと選択中のところで色を分ける
  • 動画は再生マークを入れる

など

あとはそのサイト、クライアントの特徴などでルールをカスタマイズしていきましょう。

構成の提出時にデザインの方向性も確認してもらう場合

提案としてデザインも見せる場合は、構成書にデザインのイメージも載せます。

デザインのパターンを提案する際や、ユーザーの利用シーンを具体的に想起させる際に有効です。仕上がりイメージの認識を合わせながらブラッシュアップしていけるので、クオリティの高い制作物ができます。

難点としては、制作工数がかかる点や、要件が固まらないと制作しづらい点があげられます。

スケジュールや規模によってうまくバランスをとりながら使い分けられるといいですね!

まとめ

イケてる構成書はどのようなものか、そしてその作り方は分かりましたでしょうか。

構成書はWebサイト制作における設計書で、構成書の善し悪しが、案件の業務クオリティを決めるといっても過言ではありません。

それなので、依頼が来たら、いきなり構成書の作成に取り掛かるのではなく、核となる目的やゴールを決めてから、その目的を果たすことを意識して構成書を作りましょう。
そのページでユーザーに何を理解してもらいたいか、感じてもらいたいか、どんな行動をとってもらいたいかを、きちんと考えることができるかどうかでクライアントの要望に応えられるか、課題を解決できるかどうかが決まります。

また、どんな構成書だとクライアントや制作チームに情報が正しく伝わるかを考え、同じようなものを機械的に作るのではなく考えて工夫できれば、制作がスムーズになり、Webディレクターとしても成長していけると思います。

関連記事