仕様書とは？開発事例をもとに成功する仕様書の書き方を解説

「仕様書」とは、Webサービスやアプリなどのプロダクトを作るうえで満たすべき要件をまとめた開発者への説明書のこと。「どこにどのような機能を持たせるのか」「どこからどのように遷移させるのか」といったプロダクトのあるべき姿を記載します。

開発の要となる重要な要素だけに、作成に苦労している企画者やディレクターの方も多いかもしれません。

特に海外で開発する場合は言語や距離の問題で依頼者と開発者の間の意思疎通が難しく、仕様書の重要性がさらに高まるでしょう。しかし、これは仕様書さえしっかりしていれば国内であれ海外であれ難なく開発を行えるということでもあります。

そこで本記事では、国内外問わず幅広く案件を担当し、自社サービスの開発に携わった筆者が、重要視している仕様書作成の注意点をお伝えていきます。

➡︎【資料ダウンロード】アプリ開発の企画～発注の教科書＜2023年最新版＞

仕様書とは？　

Webサービスやアプリの開発を進める際、「仕様書」という言葉を耳にすることが多いと思います。まずは、開発における仕様書の意味合いをおさらいしていきましょう。

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

受託開発の場合は受注側・発注側で一緒に協議しながら制作していくケースが多く、要件定義で定められた要求を満たしていることが求められます。

仕様書には複数の種類があり、「●●仕様書」のように目的や機能ごとの資料がさまざまな開発フェーズで展開されます。

➡︎【資料ダウンロード】アプリ開発の企画～発注の教科書＜2023年最新版＞

仕様書の重要性：なぜプロジェクトの成否に関わるのか？

仕様とは、満たすべき要求事項のこと。その定義が曖昧になっていると成果物に対して認識齟齬が生まれてしまうため、仕様書は開発において“絶対的な存在”と考えた方がいいでしょう。

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

仕様が曖昧だと開発途中の仕様変更が生まれやすくなり、工数の増加につながります。さらに、仕様変更は発注者が考える以上にコストがかかる作業ということも見逃せないポイントです。できるだけ仕様変更が減らせるように、あらかじめいろいろなパターンを想定しておくことが肝心です。

もちろん技術的な知識が乏しいと難しい部分はありますが、ユーザーの導線を落とし込めているかどうかによって実装までにかかる時間が大きく変わることにも留意してください。

スタートが大切な開発において、あらかじめ準備できる部分は可能なかぎり整えておくことをおすすめします。

設計書との違い

「仕様書」と同様に、Webサービスやアプリの開発に欠かせないのが「設計書」。それぞれ意味合いや役割が異なるので、まずはその違いを整理しておきましょう。

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

つまり「こんなWebサービスやアプリを作りたい」という要求に対し、仕様書は着地・結果を示すもので設計書は制作過程を示すものということです。

➡︎【資料ダウンロード】アプリ開発の企画～発注の教科書＜2023年最新版＞

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

それではさっそく過去の案件を例に、良い仕様書・悪い仕様書を分析していきましょう。

まずは、筆者の経験上「こういう仕様書にしておけば間違いない」と実感した“わかりやすい仕様書”の特徴を解説します。

画面遷移図がしっかりしていてわかりやすい

画面遷移はWebサービスやアプリを利用するうえでユーザビリティに直結する重要な要素。また、どのように遷移させるかという部分ではさまざまなケースが想定されることから、設計自体にも大きな影響を与えます。

仕様書内に画面遷移図があると、システムの全体像を関係者が素早く理解/共有でき、画面間の相互関係も明確になります。つまり、画面遷移図があることにより、全体像を俯瞰して確認できるので、機能間の関係性や影響に対する考慮漏れを減らすことができます。

イメージ画像が入っている

「イメージ画像」と単に文字だけで記載している仕様書では、Webサービスやアプリの完成像を正しく伝えることができません。

あらかじめ仕様書内にイメージ画像を挿入しておくと、サービスの目指すべき方向性とビジュアル面のイメージ共有がより一層深まります。

下記に実際の仕様書の一部を掲載するので、ぜひ参考にしてみてください。

➡︎【資料ダウンロード】アプリ開発の企画～発注の教科書＜2023年最新版＞

図やビジュアルをつけて解説すればイメージがよりわかりやすくなる

➡︎【資料ダウンロード】アプリ開発の企画～発注の教科書＜2023年最新版＞

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

シーケンス図は、システムの設計を視覚的に把握するために用いられるもの。時間軸に沿ってクラス・オブジェクト間のやりとりを表現することができます。

ユーザーがどういうアクションをして、それに対してシステム側でどのように対応しているのかという一連の流れを把握しておくことはソフトウェア開発上で非常に重要です。

工数はかかってしまいますが、のちのち開発上の認識齟齬が生まれないように準備しておくことをおすすめします。

細かな部分についても説明がある

コンテンツの文字数制限、ポップアップ表示されるメッセージ、フォームの入力チェックの文言など、細かな部分まで仕様書に落とし込んでおくことも非常に有効です。

例えば、既に決まっている事実を書き連ねるだけではなく、なぜこうした作りになっているのかという背景や理由までしっかりと記載されていると、仕様変更や改版が入った際に修正しても問題ないかをすぐに確認することができます。

また、仕様書の段階で細部まで厳密に決めきれていることは稀だと思いますが、開発中のコミュニケーションコストの削減にもつながるので可能な限り確定している要素は仕様書内に落とし込んでおくといいでしょう。また、決めきれていないことや保留となっていることがある場合でも、その事実を記載しておくだけでも意味があります。

さらに、仕様書が変更された際は内容をその都度漏れなく更新し、メンバー全員に最新版を共有するようにしましょう。共有漏れを防ぐためにも、ブラウザ上で閲覧でき、リアルタイムに情報を反映できるツールを活用するのもおすすめです。

➡︎【資料ダウンロード】アプリ開発の企画～発注の教科書＜2023年最新版＞

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

次は逆に、筆者の経験上「こういう仕様書は本当に困った」という“わかりにくい仕様書”の特徴を解説します。

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

画面遷移図はリリース後のユーザーの行動・導線を把握するうえで重要な役割を担っています。事前にユーザーの行動パターンをしっかりと考えておけば、想定外のトラブルを起こりにくくすることができます。

例えば、画面遷移図を用意しなかったことにより、似たような画面を複数作ってしまったり、初めて仕様書を見た人が全体像を掴むためのキャッチアップに時間がかかってしまったりする恐れがあります。

念入りに画面遷移図を作成するのは工数がかかって大変ですが、のちのちのリスクを避けるためだと考えれば手を抜くことはできないはずです。

プレゼン用の企画書がそのまま仕様書になっている

Webサービスやアプリの開発経験が少ない人の場合、プレゼン用に作ったようなパワーポイントの資料（企画書）を仕様書と混同してしまっていることがあります。

「こういうことをやりたい!!」という戦略的な狙いは伝わりますが、これだけでは「どんなWebサービスやアプリを作りたいのか」という具体的なイメージが湧かず、実際に開発を進めていく段階で手が止まってしまいます。

➡︎【資料ダウンロード】アプリ開発の企画～発注の教科書＜2023年最新版＞

仕様書において重要なのは、企画書に記載されている要求から、それを実現するために必要な機能や性能を要件として定義し、しっかりと明記していることです。

プレゼン時に制作した資料はあくまでも企画書としての役割で仕様書は別物ということをきちんと理解しておきましょう。

図やビジュアルがない

いくらミーティングでイメージを熱く語っても、メールやチャットなどのテキストベースで説明しても、イメージを深く共有することはできません。

「百聞は一見にしかず」とことわざにもあるように、図やビジュアルを用意して解説すれば相手にはっきりとイメージを伝えることができます。

特に海外で開発する場合、言葉の壁を乗り越えるためにも視覚的に訴えることが大切です。下記のようにイメージ画像を挿入して仕様書を作成するようにしましょう。

イメージ画像を挿入しておけば、アプリの完成像が共有しやすくなる

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

仕様書の段階で不確定要素が残っているのはあまり望ましくない状況です。ざっくりとした曖昧な記述のままで開発が進んでしまうと、明確化しなかった行間の部分の工程で認識齟齬が生まれてしまう懸念があります。

仕様書において重要なのは、事実を濁さずに記載することです。つまり、「こうだと思う」「かもしれない」のような憶測情報を書き込んではいけません。

特に海外で開発する際には十分な配慮が必要です。国内で開発するのであれば、意図を汲み取って対応してもらえることもあるかもしれませんが、海外で開発する際に国内と同様の対応を期待するのは難しいです。

海外での開発においてコミュニケーションコストと品質低下のリスクを削減するためには、最初の段階から可能な限り要件を詰めておくことが大切です。

➡︎【資料ダウンロード】アプリ開発の企画～発注の教科書＜2023年最新版＞

仕様書の書き方：お役立ちツールを紹介！

ここまでわかりやすい・わかりにくい仕様書の特徴を解説してきましたが、実際に仕様書を書くときはどのようにすればいいのでしょうか？

筆者も頻繁に活用している定番ツールの紹介を通じて、仕様書の書き方を紹介していきます。

Figma

Figmaは、プロダクト開発でよく用いられるデザインプロトタイピングツールです。フロントデザインで仕様書を作成する際にこのツールさえあれば事足り無いことはほぼありません。

ブラウザ上で操作でき、シンプルな使用感で簡単にUIデザインやグラフィックデザインを作ることができます。

また、共同作業もできるので、チーム間でデザインを共有する際にも便利です。何度もファイルをダウンロードする必要がなく、ブラウザ上に常に最新の状態がアップデートされるため、最新版のファイルが埋もれたり共有漏れが発生することもありません。

drawio

drawioは、モジュール図やアーキテクチャ図を描く際によく用いられる無料の作画ツールです。

図の作成にはPowerPointやGoogleスライドなどさまざまなツールがありますが、drawioは、他のツールと比較してもさまざまなバリエーションの図を簡単に描画でき、アイコンなどの素材も豊富です。また、単一ファイルをバージョン管理できるのも利点です。

こちらもFigmaと同様ブラウザ上で操作できるため、GithubやDropBox、Googleドライブへの連携も楽です。

PlantUML

PlantUMLは、コードベースでシーケンス図などのUMLを描画できる無料ツールです。

このツールの特徴は、前述のようにコードベースの描画が可能である点。前述のFigmaやdrawioなどのGUIツールとは異なる使用感ですが、コードベースでの描画が可能なので、GitHubと連携することで変更差分を管理でき、仕様変更時に簡単に差し込み・削除が可能といったメリットがあります。

また、作成したダイアグラムはテキストファイルとして保存されるため、ファイルサイズが軽量になることもメリットといえるでしょう。

Confluence

Confluenceは、さまざまな企業の社内ナレッジシェアに活用されているWebベースの企業向けWikiです。

直接的に仕様書の作成には関係ありませんが、仕様書作成前の情報共有や、仕様書にするほどでもない情報の共有に最適なので、仕様書作成のコミュニケーションにおいて重要な役割を担ってくれるツールです。

こちらもオンライン上でリアルタイムで共同編集でき、常に最新版にアップデートされるので無駄なやりとりが発生せず、工数の削減になります。

➡︎【資料ダウンロード】アプリ開発の企画～発注の教科書＜2023年最新版＞

まとめ：アプリやWebサービスの成功の鍵は仕様書が握っている

開発するアプリやWebサービスの完成した姿について、とことん思案できるのが仕様書を作る醍醐味。

「こんな機能があったら便利だろうなぁ」と思案したり、浮かんだアイデアを「どういった仕様で作る」という部分までしっかり落とし込むのはとても重要なことです。

アプリやWebサービスが成功を収めるための大きな鍵を握っている部分であることを忘れずに、しっかりと取り組みましょう。

アプリ・Webサービスの開発を検討している方へ

モンスターラボは、2200件以上のサービス・プロダクト開発の実績から得られたデジタル領域の知見を活かし、企業のDX推進戦略をあらゆる面からサポートいたします。

ご提案・お見積もりの段階から、デジタル領域の知見を持つコンサルタントをアサイン。新規事業の立ち上げ・既存事業の変革などのビジネス戦略を上流工程からサポートいたします。

開発プロジェクトでは、UXリサーチ・設計、UIデザイン、ブランド開発、デジタルプロダクト開発、グロースハックまでの全行程をワンストップで提供。

モンスターラボが提供するサポートの詳しい概要は、下記のボタンから資料をダウンロードしてください。
DX支援サービス紹介資料ダウンロード