見出し画像

デザイン初心者が、canvaで、ランディングページを作ってみた12(要件定義書)

デザインに関しては素人なのですが、最近canvaでサイトのデザインを実験的に作ってみてます!
部分的なデザインを作っていますが、前回からの続きで「WEBシステムの仕様書が書けるようになるコツ」をテーマに、どのようなデザインが良いかを考えていこうと思います。

前回の記事

前回までに作ったデザイン

前回作ったデザインは、「見出し箇所」と「困っているところ箇所」を作りました。(2つのデザインを並べてみると色に統一感がないので、後ほど修正ですね、、)

今回は以下を作成

今回は、「困っているところ」に対する「解決方法」エリアの、「システム用語は使わない」についてまとめていこうと思います。

システム用語を使うパターンと使わないパターンの図を作る

「システム用語を使用すると、わかりにくくなるから〜」という文章の説明だけでは何がわかりにくいかのイメージがしにくいので、「システム用語を使うパターン」と「システム用語を使わないパターン」を明記した仕様書のサンプルを作って、比較しやすいようにしていきます。

まずは仕様書(要件定義書)のサンプルを作る

とりあえず、実際の要件定義書っぽい仕様書を作り、その仕様書ベースに「システム用語を使うパターン」と「システム用語を使わないパターン」をまとめていきます。

要件定義書は、サイトの画面の仕様をドキュメントにまとめたものです。
家電の取扱説明書にも似ています。
仕様書を作成するに伴い、サイトの元ネタは以前作成したデザインを使います。

要件定義書には、サイトに表示する項目ごとに、どのような条件で表示されるかなどを記載

この架空のサイトの仕様書を作っていくわけなのですが、要件定義書には、サイトに表示する項目ごとに、どのような条件で表示されるかなどが記載されるイメージです。

(要件定義書はパワポやエクセルでしか作成したことがなかったですが、今回はCanvaを使用して作成してみました。なんとなくパワポに近いようなイメージで作成できる感じ。)

システム用語を使用しているパターンと、使用していないパターンの例を追加していく

サンプルの仕様書ができたので、「システム用語を使用しているパターン」と「システム用語を使用していないパターン」の例を追加していきます。

もう1パターン作ってみます。

システム用語を使用しているパターンと使用していないパターンを見比べると、前者の方はテーブル名やシステムで使用するファンクション名が記載されており、そのサイトの開発に携わっている人以外は仕様がわからない状態です。

なので、要件定義書を記載する際には、一般の人が読んでもわかりやすいようにシステム用語をせずに仕様を表現する必要があります。

おわりに

最後まで読んでいただき、ありがとうございます!

今回は仕様書(要件定義書)のサンプルを作ってそれをベースに説明用の文面を追記していきましたが、Canvaで仕様書を作るのが意外と楽しく、今後も仕様書の書き方サンプル的なものも作ってみようかと思いました!

前回までの記事



いいなと思ったら応援しよう!

この記事が参加している募集