A8.netのコンテンツのことや
デザイナーのお役立ち情報などを発信します

新しいサービスやアプリを作るときの進め方~企画編~
  • 2021/9/8
  • WEB制作

新しいサービスやアプリを作るときの進め方~企画編~

  • さしみ

こんにちは、最近デザイナーという職業をイメージしたときの範囲が人によって結構違うなって思っているさしみさんです。
実は私、クリエイティブチームの中でもおそらく随一いろんな部署を経験しておりまして(職種は変わっておりません)新しい部署やサービスができたときの特攻デザイナーとして色々経験させていただいておりました。

そんな中で、アプリをとにかく作って試してみようぜ★という部署もありましたので、今回は新しいサービスやアプリを作るときの流れなどを思い出しつつしたためてみようという試みでございます。

これがベスト!というものではなく、あくまで私がこんな感じのプロセスでやっていたという1つの参考にしていただければ幸いです。
あわよくば、企画に対してのハードルが下がり、皆さんが気軽にできるようになると良いなあという下心がなきにしもあらずでございます。

どんなサービスにしようかな?一連の流れを妄想して具体的にする。

企画作成からラフまで

やりたいことを決める

例:iPhoneのカメラに静脈が測れる機能がついているので、それを使った何か作りたい!
・スマホのカメラを使う
・人の顔を撮影し、静脈や声の大きさなどで「怒り度」を測るゲーム

やりたいことを決めたら、同じようなアプリやサービスが無いか競合調査する

競合があったら

自分が考えたサービス(アプリ)の独自性・既存サービスとの違いを考えてみる

本来は収益化ポイント(課金?広告?買い切り?)や告知方法、予算、どの時点で黒字になる想定なのかなども考えねばならないかと思いますが…
一旦このタイミングでは置いておきます。

この段階では、技術的に可能かどうかは度外視してこうなったらいいな!という妄想力を全開放しましょう!

サービスの画面遷移図を作る

どんな画面が何ページ必要か?どんなことができる?
どんな機能が必要か?書き出してみましょう。

遷移図を作るメリット

  • ・ページの作り漏れが防げる
  • ・必要な機能が明確になる
  • ・出来上がりのイメージが湧きやすい
  • ・工数の見積もりがしやすい
例:
遷移図サンプル

プロトタイプ(ラフ)を作成する

※プロトタイプを先に作ってから遷移図を作る場合もあります(小規模なアプリの場合)

プロトタイプって?

実際の完成図に近いもの。設計図。
これを元にデザインを作る。
紙に手書きで書いたものを「ペーパープロトタイプ」と言う。
ペーパープロトタイプの場合、実機に近いサイズで作るとサイズ感や1画面に収まるパーツなどが見えてくる。
この時点で「このボタンは押したらどうなる?」「ページ遷移の方法は?スライド?フェード?」「データはどこに持つ?(アプリ内orデータベースorAPIなど)」動きや細かな仕様を想定しておくと、実装時のやりとりがスムーズになりやすい。

プロトタイプは完全手書き、デジタルツール(プロトタイプソフトやillustratorなどのドローソフト)、動きのあるものを一気に作る人もいます、スキルによってどこまで作り込むかはそれぞれ!
最近はAdobeXDがプロトタイプツールとしても頭角を現していますね!

例:
プロトタイプサンプル

自分でできない範囲はデザイナーさんやプログラマさんに制作依頼

遷移図やラフ、こうしたいという仕様が決定したら、実際にサービスやアプリの制作に移ります。
デザインや実装ができないよっていう人は、それぞれ専門のデザイナーやプログラマの皆様に依頼することになります。

その際に、前出の遷移図やラフ、やりたいことの仕様がまとまっていると依頼される側も実際にかかりそうな時間や見積が立てやすいですよ!

私の場合は動く部分は作れないので、企画・仕様・プロトタイプ・デザイン以外はプログラマさんと相談、という形になります。

例:
アプリ参考

いかがでしたでしょうか?
本気でサービスを出すとなると収益化が絡んでくるのでなかなか手が出しづらいと感じる方もいるかもしれませんが、企画を考えたりプロトタイプを考えるのはそこまで手間がかからないので(特に紙に手書きするペーパープロトタイプ)、ぜひ気になった方はチャレンジしてみてください★

クリエイティブチームでは、新しいことにチャレンジしてみたい!というメンバーを募集中です^^

クリエイティブチームメンバー募集中

それでは、良いデザインライフを!

※当サイトのリンクに関しては、アフィリエイトリンクは含まれておりません

注目コンテンツ