View more

自由に活用OK!株式会社デパートのWeb制作における設計資料を公開!

Blog

自由に活用OK!株式会社デパートのWeb制作における設計資料を公開!

Webサイト制作としてヒアリングや要件定義は重要な最初のプロセスです。 お客様へのヒアリング項目を聞き逃さないことや、取り決めをした内容を振り返ることができることは、双方にとって大切です。 また設計を行う時に、設計書を用意するのは重要ですが、サイトの規模やデータ量的に大袈裟な設計資料が必要ではないパターンもあります。 そこで、株式会社デパートの制作時に使用している設計資料の一部をご紹介しますので、活用できる資料があれば活用してみてください。
自由に活用OK!株式会社デパートのWeb制作における設計資料を公開!

ヒアリングシート

資料のダウンロードはこちらから

 

どういう書類?

お客様へ最初に内容をヒアリングする時から、制作がスタートする時まで活用できるシートです。

一度に全ては難しいとおもいますので、順次ディレクションのタスク進行と共に埋めていってください。

使い方

基本構造

シートには各項目毎にヒアリング内容が記載されています。

基本項目にはお客様情報やサイトの情報を入力し、システム項目や、デザイン項目に関しても設けています。

プロジェクトによってはより詳細なヒアリング項目がある場合があります。

その際には自由に行を足して記載いただいて問題ありません。

下部に「その他」欄も設けていますので、項目の構造に合わない内容はこちらに入力してください。

 

シート右側の「必須」「お客様向け」関して

必須でヒアリングが必要であろうものには必須のチェックを入れています。

また、お客様向けにシートお渡しして入力してもらう場合に望ましいであろう項目に関しては

お客様向けにチェックを入れています。

※プロジェクトにより項目の必須などは変わる部分もあるとは思いますが、お客様に入力をお願いする場合にはよく確認をしてください。

※項目に関して専門的な部分は、別途お客様へ説明が必要になります。

 

サイト規模でシートが分かれています

 

下のタブ(他シート)にて、それぞれの規模に合わせて分けています。

内容自体は同じですが、シート右側の「必須」や「お客様向け」という部分に違いがあります。

「プロジェクトの種別的に何が必須なんだろう?」と思った場合に活用してみてください。

制作進行する際には、入力したシートのみを残して不要なシートは削除して大丈夫です。

要件定義書

資料のダウンロードはこちらから

 

どういう書類?

要件定義書は、本来は請け負ったプロジェクトの基本情報から要件を全て記載しまとめる書類です。

※内容はヒアリングシートとも同じ項目がありますので本書類を作成しない場合にはヒアリングシートを活用しても大丈夫です。

使い方

基本構造

下記の項目を記載し、制作の内容や要件をまとめた資料になります。

お客様への納品書類として使用することも目的としていますが、設計や仕様を把握するための入り口的な情報集約にもなります。

※別紙で表やイメージ図を作成した場合の案内なども記載。

  • 基本情報
  • 制作範囲
  • デザイン要件
  • HTML要件
  • システム要件
  • サーバーサイド要件
  • 機能要件
  • インフラ構成
  • 非機能要件

 

例:基本情報、基本要件

お客様情報や、この制作は何をゴールとしているか、などの情報をまとめる必要があります。

提案やお客様相談の後、最終的な確認としてお客様と制作メンバーと相互に確認できていると良いです。

 

特定の内容が必要ないプロジェクトの場合はそのページは省いてもOK

プロジェクトスケジュール、プロジェクト体制、業務フローなども記載するページを用意していますが、別紙にしていることも多いと思いますし、規模や内容的に必要がない場合もあると思います。

そういったページや項目は省いてしまっても大丈夫です。

必要な記載項目に絞ってお客様とすり合わせができている状態を目指しましょう。

 

ディレクターでは書けない内容に関して

ヒアリングシートでも言えることですが、要件定義書は決定内容を記載していくため、制作メンバーでないと詳しく書けない部分もあります。

そういった箇所に関しては制作メンバーに記載をしてもらっても良いと思います。

ディレクターの方で内容の理解と説明ができるように、必要箇所に関しては制作メンバーと会話をし疑問点が無いようにしておきましょう。

簡易設計キット(画面設計)

資料のダウンロードはこちらから

 

どういう書類?

Webサイトの制作においてワイヤーフレームを引くと思いますが、出力データや項目自体をワイヤーフレームに全て書き込むことが難しいです。

本資料はそういったデータをサイト全体を1シートとして書き込めるようにしています。

大規模なWebサイトの場合はページ毎、機能毎に定義をした方が良いので、あまり大きな規模ではないような時に使用してください。

 

使い方

基本構造

1シート目にはサイトマップがあり、2シート目に各ページの要素の定義を記載できるようにしています。

ワイヤーフレームだけではどのようなデータが入るのかがわからないケースがありますので、静的の場合であれば各要素に入れるテキストなどを記載してもらえればと思いますし、CMSなどの場合にはそのデータの定義をしてもらえればと思います。

 

共通パーツの定義

ワイヤーフレームでは共通パーツに当たるヘッダーやフッターが複数のページにあり更新が大変になったり、情報を簡易に作成していて必要な情報や機能が漏れていたということもあります。

こちらのシートでは一箇所にしかないので、変更の反映漏れなく入力ができます。

また、GAなどメタ情報の設定に関しても記載することができるので、このシート一つでデザイナー・エンジニアに伝達すべきデータ情報をまとめることができます。

 

動的要素・ページに関して

細かい設定がわからない、けどこれは必須で設定してほしい!

という場合でも簡単に記載いただくだけでも大丈夫です。

デザイナーからはエラーメッセージや項目が足りているかの確認を行ったり、エンジニアから文字数やバリデーションの条件など後から確認したり、相互に確認と追記を行うようにすると良いです。

そのため、あらかじめチームメンバーと共有しておくことが必要になります。

まとめ

Web制作はサイト規模や内容によってさまざまな資料を作成することが多いと思います。

今回は小規模から中規模の制作時に活用できる資料を公開させていただきました。

内容に合わせて構造を変えていくことや自社の制作スタイルに合わせていく部分も必要ですが、参考にしていただければと思います。

 

資料のダウンロードはこちらから

ヒアリングシート

要件定義書

簡易設計キット(画面設計)

 

 

株式会社デパートでは、Webサイトの構築やリニューアルを承っています。Webサイトの制作だけではなく、運用や運営、オウンドメディアの立ち上げまで対応可能です。改善支援も対応できるため、運用に不安がある方もお気軽にご相談ください。

 

 

Webマーケティング、Web制作に関することなら
お気軽にご相談ください

 

 

デパート採用情報

株式会社デパートでは一緒に働く仲間を募集しています