伝わり易いスマホアプリ画面仕様書のフォーマットを大公開【Part1】

伝わり易いスマホアプリ画面仕様書のフォーマットを大公開【Part1】ものづくりに欠かす事のできない「仕様書」や「設計書」。

スマートフォンアプリ制作の世界でも画面仕様書やワイヤーフレームというドキュメントが存在します。

このドキュメントが無いと、クライアントや上長に説明して承諾を得たり、エンジニアやデザイナーへ仕様を伝え開発を開始してもらうことが出来ません。

つまり、画面仕様書は「無くては始まらないドキュメント」なのです!

 

しかし、画面仕様書を作ろうとしてフォーマットを探しても、専門的過ぎたり、用途が違ったりとなかなか解り易いドキュメントは転がっていないと思います・・・

 

そこで、今回から数回に分けて、「ガラパゴス画面仕様書フォーマット」を紹介していきます。

2013-06-18-20.56.52

 

まず始めに、このドキュメントの「目的」は先にも言った通り、

・クライアント様や上長にアプリの詳細を説明すること

かつ、

・エンジニアさんやデザイナーさんに作りたいアプリを説明すること

です。

 

また、資料が増えて煩雑にならないようにしたいし、なるべく同じフォーマットで、見やすくて、印刷もしやすい方が良いですよね?

なので、大前提として

・ドキュメントには説明すべき全ての要素を入れる

・1ページにつき1画面の説明にする

・パワーポイントかGoogleプレゼンテーションで作成する(用紙サイズが一緒だし、印刷も一括)

とします。

 

そのために、ガラパゴスフォーマットは1画面に対して下記3つの要素で説明する画面仕様書を採用しています。

①アプリの見え方(ワイヤーフレームやデザイン)

②エリアの名称や挙動

③詳細な説明

すると、このようなフォーマットになります。(iPhone5版)

2013-06-18-22.29.57

 

ちなみに、 AndroidOS4系以上アスペクト比9:16版はこちら↓

2013-07-01-13.36.48

左から「アプリの見え方」「エリアの名称や挙動」「詳細説明」です。

「アプリの見え方」には、ワイヤーフレームやデザイン案をはめていき、デザイン的なFIXを頂きます。

「エリアの名称や挙動」には、下部の凡例を用いて、どの範囲はどういう名称でどういう挙動が出来るのかを可視化します。

「詳細説明」には、「エリアの名称や挙動」に対して細かな指示を記載します。

その他、資料のアップデート、FIXした場合、検討事項をちゃんとドキュメント化してあげます。

 

※実は、iPhone5もAndroidもアスペクト比9:16の画面枠を同じ位置にしてあるので、片方作ればもう片方は瞬殺できます。

※実は、A4用紙に1ページ当りのスライド数を2の枠なしで印刷すると…実端末サイズになります!

 

次回から、このフォーマットを用いた画面仕様書の作り方をご紹介していきます。

ドキュメントのフォーマットには正解がないとは思いますが、今のところ弊社ではこのフォーマットに落ち着いていて、クライアント様からも見やすいと好評を頂いています。

ご興味のあるディレクターやプロマネの方々がいましたら幸いです。


この記事はあなたの役に立ちましたか?他の人達にも役立ちそうでしたら、上のボタンより共有をお願いします。共有して頂けたら今後提供する記事の参考やモチベーションアップにつながります。