BLOG ブログ

デジタルマーケティングにおけるお役立ち情報やトレンドなどをお届けします。

  • カテゴリ:アプリ開発
  • 2019.07.05(最終更新日:2019.07.06)

Webサービス・アプリの開発事例から見る成功する仕様書の書き方

Webサービス・アプリの開発事例から見る成功する仕様書の書き方

仕様書は、Webサービスやアプリを開発する上でエンジニアの説明書になります。

仕様書によって、開発がうまくいくか、いかないか大きく左右します。

本記事では、GDTでプロジェクトマネージャーを担当し、開発のディレクターをしている筆者が、仕様書作成における注意点をお伝えしたいと思います。

 

仕様書とは

仕様書とは

仕様書とは、「どのような機能がいるのか」、「どこからどのように遷移させるのか」などプロダクトのあるべき姿を記載したものです。

受託開発の場合は、受注側・発注側で一緒に協業しながら開発していくケースが多いです。

仕様書と似たものに、設計書があります。

設計書は、完成するまでの制作工程を明確にした資料であるのに対して、仕様書は完成イメージを明確にした資料である違いがあります。

仕様書の重要性

仕様書の重要性

仕様書は開発における欠かせない存在です。

定義が曖昧になっていると成果物に対して認識齟齬が生まれトラブルになったり、工数が増えてしまいます。

エンジニアもプロジェクトマネージャーも仕様書を基に開発を進めるため、あるべき姿である仕様がまとまっていないと良いプロジェクトにはなりません。

技術的な知識があるかないかも大切ですが、ユーザーの導線を落とし込めているかどうかによって実装までの開発スピードが変わることも注意点です。

開発の前に、あらかじめ準備できる部分はできるかぎり整えておくことをおすすめします。

わかりにくい仕様書の特徴

わかりにくい仕様書の特徴

仕様書の意味と重要性を確認した上で、こういう仕様書はエンジニアが困るという特徴を紹介します。

わかりにくい仕様書の特徴

  • プレゼン用のパワポで作った資料しかない
  • 図やビジュアルがない
  • 画面遷移のイメージがない
  • 内容がざっくりしすぎてしている

プレゼン用のパワポで作った資料しかない

Webサービスやアプリ開発の経験が少ない人の場合、プレゼン用に作ったパワポの資料を仕様書にしている場合があります。

これだけだと、どういうWebサービスやアプリを作りたいのか具体的なイメージが湧きません。

プレゼン資料と仕様書は別物であることを理解しておきましょう。

図やビジュアルがない

ミーティングで、イメージを話しても、文章におこしても、深くイメージするためには、図やビジュアルがないと伝わらないこともあります。

図とビジュアルを用いて仕様書を作成することで、エンジニアに伝えやすくしましょう。

画面遷移のイメージがない

画面遷移は、Webサービスやアプリ開発をする上で、ユーザービリティに直結する重要なポイントです。

どのように遷移させるのか仕様書内に画面遷移図を用意して、Webサービスやアプリの全体像や画面間の相互関係を明確にしましょう。

内容がざっくりしすぎてしている

仕様書の段階で、不確定要素が残っているのはよくありません。

あいまいなまま開発が進むと、明確にしなかったことで認識齟齬が生まれます。

最初の段階で可能な限り要件を詰めることが大切です。

 

わかりやすい仕様書の特徴

わかりやすい仕様書の特徴

次に、わかりやすい仕様書の特徴について紹介します。

わかりやすい仕様書の特徴

  • イメージが入っている
  • 画面遷移図が具体的でわかりやすい
  • シーケンス図が用意されている
  • 細かな部分の説明がある

イメージが入っている

画像を挿入する場所に、イメージ画像を挿入しておくと、よりいっそう目指すべき方向性とビジュアル面のイメージが共有できます。

完成イメージに近い画像を挿入しておくことで、完成像が共有しやすくなります。

画面遷移図が具体的でわかりやすい

画面遷移図は、リリース後のユーザー行動の導線を把握する上で、重要です。

事前にユーザーの行動パターンをしっかりと考えておくと、想定外のトラブルは起こりにくいです。

時間がかかっても、手は抜かない方が良いでしょう。

シーケンス図が用意されている

シーケンス図は、システムの設計を視覚的に把握するためのものです。

時間軸に沿ってクラス・オブジェクト間のやりとりを表現することができます。

ユーザーがどういうアクションをして、それに対してシステム側でどう対応するのか一連の流れを把握することはソフトウェア開発で欠かせません。

細かな部分の説明がある

コンテンツの文字制限数、ポップアップのメッセージ、フォーム入力チェックの文言など細かな部分まで仕様書に落とし込みましょう。

開発中のコミュニケーションコストの削減にもつながるので、確定している要素は仕様書に落とし込みましょう。

 

仕様書の書き方

仕様書の書き方

わかりやすい仕様書の特徴を把握した次は、実際の仕様書の書き方を紹介していきます。

ワイヤーフレームを書くときのツール

仕様書作成時に活用するワイヤーフレームを書くときのおすすめツールは「Moqups」です。

ブラウザ上でワイヤーフレームを作成でき、操作性も良いです。

エンジニアとのミーティングで、細かな部分まですり合わせることが可能です。

Moqupsに加えて、フリー素材を活用して仕様書を作成することで、デザイナーとの間でもイメージを共有しやすくします。

プトロタイプツール

Prottは、仕様書に落とし込むのが難しい部分をカバーしてくれます。

スワイプしたときの次の画面にどのようなエフェクトで遷移するのかといった動作を可視化できます。

遷移だけでなく、それに伴う動きや表現を確認できるのが特良です。

GDTのアプリ・Webサービス開発サービスのご紹介

GDTのアプリ・Webサービス開発サービスのご紹介

GDTでは、お客様からのWebサービスやアプリの開発に関するお問い合わせ・お見積もりのご依頼を随時受付ております。

ご興味のある方はお気軽にこちらからご連絡くださいませ。

まとめ

まとめ

アプリやWeb開発の成功の鍵は、仕様書にかかっています。

開発するアプリやWebサービスの完成した後の姿について、仕様書に落とし込みましょう。

この事業についてもっと詳しく知りたい方へ

Web制作のページへ

この記事を書いた人

GDT(編集部)

デジタルマーケティングやWebマーケティングに役立つ記事をご紹介します。

サービスに関するお問い合わせ

サービスに関するご相談やご質問などはこちらからお問い合わせください。

お問い合わせ

GDTメルマガ購読
(無料)

GDTの更新情報や、ホットなニュースを毎週お届けします!

GDTのオススメ記事

  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク
  • リンク