仕様と設計

どんなものをどうやって作るのかを考えよう

概要

アプリケーションの開発を始める前に仕様と設計を決めましょう。そうすることで手戻りを少なくすることができます。

仕様とは、アプリケーションで解決したい課題や実現したいことなど、開発の目的や目標をまとめたものです。仕様では、ユーザーがアプリケーションを使ってできることや、負荷に耐えうるシステムの性能なども決めます。

設計とは、仕様を実現するための具体的な方法をまとめたものです。設計には概要設計詳細設計の2段階があります。概要設計では画面や機能などユーザーに見える範囲のものを決めます。詳細設計では各々の機能のモジュール構成データ構造など、開発者が実装するために必要なものを決めます。

あるグループ内で写真を共有するためのWebアプリケーション開発について、仕様と設計を考えてみましょう。この場合考えられる仕様は、「一般ユーザーは写真を投稿し・閲覧できる」や「管理ユーザーは、会員登録を承認し管理する」などです。

この仕様に対する概要設計は「投稿画面や一覧画面などのレイアウト」や「一般ユーザーと管理ユーザーの機能の一覧」などです。詳細設計は「ユーザー登録とユーザー管理機能の詳細」や「写真投稿機能の詳細」や「写真テーブルの構成」などになります。

仕様と設計

学ぶ目的

仕様をチームで共有できていると、ユーザーがどんな風にアプリケーションを利用する想定なのかを、各メンバーがイメージできるようなります。

さらに設計もできていれば、機能とその実現方法に認識のズレを生むことがなく、手戻りを抑えながら作業を進めることができるようになるでしょう。

仕様や設計を不完全にして実装作業に入ると、手戻りが多発しアプリケーションが完成しない可能性もありえます。そうならないためにも、仕様で決めるべきものや、設計するべきものについて学びましょう。

ここから学ぼう

ここでは、Figmaというデザインツールを使ってWebページの画面遷移図を作ることを目標に学んでいきましょう。最初はページ構成や大枠のレイアウトを整理することを意識するのがおすすめです。

  • Webページの画面遷移図を作ってみよう

    Webページに必要な要素や機能を決めよう

    Webページの構成を決めよう

    各ページのレイアウトを決めよう

    Figmaを使って画面遷移図を作ってみよう

おすすめ教材

  1. Free Design Tool for Websites, Product Design & More | Figma

今日学ぶことをシェアしよう