概要
アプリケーションの開発を始める前に仕様と設計を決めましょう。そうすることで手戻りを少なくすることができます。
仕様とは、アプリケーションで解決したい課題や実現したいことなど、開発の目的や目標をまとめたものです。仕様では、ユーザーがアプリケーションを使ってできることや、負荷に耐えうるシステムの性能なども決めます。
設計とは、仕様を実現するための具体的な方法をまとめたものです。設計には概要設計と詳細設計の2段階があります。概 要設計では画面や機能などユーザーに見える範囲のものを決めます。詳細設計では各々の機能のモジュール構成やデータ構造など、開発者が実装するために必要なものを決めます。
あるグループ内で写真を共有するためのWebアプリケーション開発について、仕様と設計を考えてみましょう。この場合考えられる仕様は、「一般ユーザーは写真を投稿し・閲覧できる」や「管理ユーザーは、会員登録を承認し管理する」などです。
この仕様に対する概要設計は「投稿画面や一覧画面などのレイアウト」や「一般ユーザーと管理ユーザーの機能の一覧」などです。詳細設計は「ユーザー登録とユーザー管理機能の詳細」や「写真投稿機能の詳細」や「写真テーブルの構成」などになります。
学ぶ目的
仕様をチームで共有できていると、ユーザーがどんな風にアプリケーションを利用する想定なのかを、各メンバーがイメージできるようなります。
さらに設計もできていれば、機能とその実現方法に認識のズレを生むことがなく、手戻りを抑えながら作業を進めることができるようになるでしょう。
仕様や設計を不完全にして実装作業に入ると、手戻りが多発しアプリケーションが完成しない可能性もありえます。そうならないためにも、仕様で決めるべきものや、設計するべきものについて学びましょう。
ここから学ぼう
ここでは、Figmaというデザインツールを使ってWebページの画面遷移図を作ることを目標に学んでいきましょう。最初はページ構成や大枠のレイアウトを整理することを意識するのがおすすめです。
Webページの画面遷移図を作ってみよう
Webページに必要な要素や機能を決めよう
Webページの構成を決めよう
各ページのレイアウトを決めよう
Figmaを使って画面遷移図を作ってみよう
おすすめ教材
Free Design Tool for Websites, Product Design & More | Figma
Figmaはブラウザやデスクトップアプリから、簡単に使い始めることができます。Figmaの使い方やWebページの設計方法は、さまざまな記事があるので調べてみましょう。
Free Design Tool for Websites, Product Design & More | Figma
Our free, website design software allows you to create, collaborate & streamline your workflow. Bring together powerful design features built for the future of web.
www.figma.com