アプリ開発をスマートに!スマートフォンアプリ設計でモックアップを作ろう!!

どうも!Reedexの百合野です!
iOSエンジニアを長々と細々やっています。
百合野 ブログ初めます!

初回のテーマは「スマートフォンアプリの設計手法」です。

 

初回なので、自分の経歴を少し紹介しつつ”スマートフォンアプリの設計手法”についてまとめました。
まぁ…設計と言っても見積もりする前にこれして下さい!!って単なる切なる願いです。

 

-初めに
iOSエンジニアと自己紹介しましたが、
スマートフォンアプリオンリーではなく、Webアプリ+モバイルでの開発するケースがほとんどでした。

今回紹介内容は、モバイルのみで開発される方には
「何当たり前の事言っているんだ?」と思われるかもしれませんが、ご容赦ください。

-目的
ざっくりな表現ですが、”手戻り”を減らし、幸せになる為
・顧客との認識齟齬を減らす

・開発者間での認識齟齬を減らす

・作るイメージと操作イメージができるので仕様の後出しが減る

-結論
見積もり段階よりも前にモックアップを作ろう!!

-自分が実際やったこと

1.ラフスケッチ

アプリの概要が決まった後に、大まかな画面遷移と画面イメージを手書きで作成してみました。

[メリット]

・手軽

[デメリット]

・修正し辛い
・絵心がないと「小学生かよ」と言われる

 

2.ワイヤーフレーム

いろんなものがネットに落ちてるので、iPhone 2サイズ分とiPadのフレームで作ってみました。

[メリット]

・手軽
・印刷してもデータ上でもどちらでもいける
・絵心なくてもフレームがそれっぽさを出してくれる

[デメリット]

・実際の動きが想像出来ない
・ボタンとか入力フォームとか結構誤解を生む
・絵の表現力がないと「え、これスクロールできるの?わかんないよ!!」と言われる

 

3.モックアップ

Sketch等で主要画面のレイアウトを作りました。
UIパーツ等はネット上に落ちてますが、iOSの標準パーツを使いました。

[メリット]

・認識合わせに最適
・ボタンとか入力フォームが明確

[デメリット]

・実際に動作するわけではないのでUIの挙動で認識齟齬が発生する

 

4.プロトタイプ

XcodeのStoryBoardで画面を作りました。
AutoLayoutを大まかに付けてiPhone,iPad用にレイアウトが大きく崩れないようにしました。
大まかに画面遷移だけ付けて実機での動きを見てもらいました。

[メリット]

・レイアウトの元になるので、実装が少し簡単になるかもしれない
・UIの改善点が見つかるかもしれない
(入力フォームが画面中央に寄っているから入力し辛いとか)
・あ、ここスクロールするんだと実際に触ってもらえる

[デメリット]

たぶんない

 

 

 

-補足
モックアプリを作れ!と言ってきましたが、
時間と工数に余裕があればプロトタイプまで作ってしまうほうが安心できます。
ただ、予算的に…時間的に…てケースもあると思うのですが、最低でもモックアプリを作りましょう!

以上です!次回があるかどうかわかんないけどお楽しみに!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です