アプリデザインができるまで

みなさん、働いてますか。
社長になるとうっかり働いてしまって大変なとりいです。

今日はアプリデザインができるまでにどんな手順を踏んでいるかをご紹介します。
これはUI/UXデザインを標榜して食ってる会社のやり方で、他のところでは別のやり方をしているかもしれない。うちではこうしてるよ〜みたいな情報があればTwitterとかで教えて下さい。

今回は、かんたんなアプリのデザインを例に、どのような考えでアプリデザインができているかを順に追っていきます。
※アプリ内で使われているアイコンは株式会社sosoのあまみやさんから許可を得て使用させてもらっています。

書いた人：とりい @kinakobooster
株式会社Xemono代表。
人のパソコンをシールまみれにするのが趣味。

つかうもの

- 人間の脳
- 好きな筆記用具（おすすめはコピー用紙とサインペン）
- 好きなデザインツール（おすすめは無料でもブラウザから使えてマルチプレイもできちゃうFigma）

アプリデザインを作るまでの手順まとめ

1.コンセプトを企画する
2.コンセプトからほしい機能をつくる
3 ほしい機能から画面にいるものをリストアップしてラフをつくる
4 ラフから画面の絵にする　色とかもここで決まる
5 デザインから動くものをつくる

これから作るもの

実際に弊社で立案された企画、「開くのが怖くないタスクリスト」を例に使って説明します。

こんな感じのシンプルな画面一覧ができるまでを紹介します。

できるまで

1.コンセプトをつくる

デザインは何かを伝えるためにあります。
なので、何を作るにしても、まずはどんなことを伝えたいのか、その中身を詰めるところから始まります。

きっかけは「秘書の民主化ってできないのかな」という雑談の中の一言。
大金持ちやエグゼクティブだけが雇うことができる秘書という存在。テクノロジーの力で、誰もが自分の秘書を持てるようになれないか？というところから、具体的に秘書は何をするものなのかを考え、みんな本当は秘書に何を求めているのかを雑談しながら考えました。
以下はその議事録

結局「秘書とは何か」から脱線に脱線を重ねましたが、「実はタスクリストを開くことは怖い」という知見を得ることには成功しました。

じゃあ開くのが怖くないタスクリストを考えよう！

ということで今回のコンセプトが決定しました。

2. コンセプトからほしい機能をつくる

開くのが怖くないタスクリストはいったいどんな機能で山積みタスクへの恐れを軽減してくれるのか。

Push通知で赦してくれる
タスクを倒すと褒めてくれる
大量にタスクがあっても一度に一個ずつ提示してくれる

のような機能があるとよさそう。

「実はTodoアプリではなく、LINE Botのような見た目で居たほうがよいのではないか？」
「まずはスマホで作りたい、Push通知を出したいからPWAかネイティブアプリにしたい」
とまで決まればいよいよ紙に四角を描き始めます。

※紙に四角
UIデザイナーが初手でよくやること。四角は画面を表している。
なんでもいいから紙の上で手を動かすと、それにつられて考えが進んだりする。

3 ほしい機能から画面にいるものをリストアップしてラフをつくる

紙に四角を書いても、四角（つまり画面）の中を慌てて埋めはじめるとドツボにはまります。
まずは一つの四角の中にどれだけの情報を入れるかを考えます。

基本的にスマホアプリでは、
一画面一機能で考えると混乱を招きづらいです。

一覧は一覧で一画面、編集は編集で一画面、新規作成は新規作成で一画面……
大体見慣れているアプリもそんな感じになっているはず。

使い慣れているアプリからあえてあんまり遠ざけないことで、ユーザーに素早く馴染んでもらえるものができます。

逆に、いままでになかった新しい操作をさせたかったりする場合は、全く新しいUIにしたほうが混同されなくてよいかもしれない。
似たものはどれだけ似せられるか、そしてどこを新しく見せていきたいのかを考える必要がある、意外とたいへんな作業です。

ここは画面いらなくね？ というところまで考えられると強いUIデザイナーになれます。

4 ラフから画面の絵にする

今回はさくっと作ることを重視したプロトタイプなので白黒のまま。

本来は色などもこのあたりで決まります。

今回はFigmaを使用してさくっと。

※プロトタイプ
今回は、最低限の機能だけ作って、本当に意図した効果があるかを検証するためのものという意味で使っています

以下のことを気をつけて作ります。
- できるだけ見慣れたパーツの組み合わせで作る
- 押せる部分をわかりやすくする
- 世界観を出すために重要なポイントなので、グラフィックデザイン・ウェブデザインの知見が役に立ちます

5 画面の絵のデザインから動くものをつくる

- ここからは大体別の人、エンジニアとかの仕事になります
- でもコード書けるデザイナーが全部やっても良い
- ひとりで企画して一人で開発するとめっちゃ強くなれます。まずはなんでもやってみよう。

求人

弊Xemono社では
- 4ができるデザイナー
- 1と2をギャーとかいいながら一緒にできるUXの人
を募集しています。
われこそはって人は弊社（都内）に遊びにきてください。
（@kinakoboosterにDMかウェブサイトのアドレスにメールで申し込めます。こわくないよ！）

歓迎事項
　人にデザインを教えられる
　室内にテントがあっても引かない
　65インチのモニターに突然ライブ映像が流れ出しても引かない