こんばんはシオンです。

一週間でアプリをリリースすると決めてから3日目。
昨日今後の予定を立てて、あとは前に進むだけです。残りの工程としては、デザイン（今日）、プログラミング（4〜6日目）、リリース（7日目）。

今日は予定通りAdobeXDを使ってデザインを完成させます。さっそくやっていきましょう。

■アプリのデザインを完成させる

まずは、AdobeXDを開きます。
デザインを作っていく上で、軸にするデバイス（iphone〜とかのやつ）ですが今回はiphone8で作っていきます。理由は今使われているデバイスの中で一番小さいからです。（昔のiphoneSEとかは考えません！）

ちなみに立ち上げた瞬間はこんな感じ。

さて、デザインを作っていきますがデザインを作るために昨日考えたことを思い出します。

＜アプリのデザイン＞
　┣　デザインを作るソフト　━　AdobeXD
　┣　デザインソフトを使う知識　━　すでに持っているからOK
　┗　ソフトでデザインを作るために必要な要素
       ┣ アプリのコンセプト ┳ 何をする？　━　愚痴を書き込んで消化する。　━　消化して次に進むためのアプリ　━　だから灰色、黒などはNGでも赤、黄色もテンションが違う。
       ┃              ┣ 誰が使う？　━　愚痴ある人、OL、20代の女性向け。　━　女性らしい色合いが良さそう。ピンク、紫
       ┃              ┣ いつどこで使う？　━　愚痴が溜まった時、他にいう人がいない時。　━　すぐに書き込みたいからトップ画面に愚痴書き込み画面にしたい。
       ┃              ┗ なぜ使う？　━　吐き出して乗り越えるため。周りに言いたくないことを言う。言ってはいけない悩みを言う。　━　秘密、乗り越える勇気づけ、優しい、落ち着く　━　紫色、緑色を使って秘密かつ落ち着く配色が良さそう。
       ┣ アプリの機能　┳ 愚痴を書き込む ━　書き込むフォーム、題名とかあったほうがいいか？　あと客観的に自分の状況を見るためにその愚痴がどのくらい嫌かの愚痴レベルをつけると良さそう　━　題名、愚痴の内容2つを書き込むフォーム。愚痴レベル評価ボタン。
       ┃           ┣ 消化する ━　愚痴を消す。消化、乗り越えるだから、書き込み完了ボタン　→　「愚痴を乗り越えて次に進みますか？」　→　「では今から何をしますか？」　みたいな感じで次の行動につなげる表示を出す。
       ┃           ┗ 消化した数を表示する。 ━　乗り越えた愚痴の数を表示する。これまでの積み上げ、一つの勇気になるか？　━　画面の右上に表示。余裕があれば別画面に表示してメッセージとかをつける。
       ┗ アプリの制作期間　━　一週間。　━　Flutterの勉強をしながらになるから1~3画面に収める。

なるほど、なるほど即席にしてはなかなかいいですね。昨日の自分。

デザインを完成させるために必要なことを考えます。
デザインを作るためには
・アプリのコンセプト
・使う色
・画面数
・画面ごとの機能
この辺があれば作っていけそうです。一つ一つ決めていきます。

＜アプリのコンセプト＞
まず、アプリのコンセプトとしては昨日を参考にしましょう。
昨日考えたことを一言でまとめると
「ユーザーが愚痴を吐き出して前に進むことを後押しをするアプリ」
という感じでしょうか。ぱっと見良さそうですね。

このコンセプトから使う色を決めていきます。

＜配色を決める＞
このコンセプトの中でフォーカスする点としては、愚痴を吐き出す。前に進む後押し。この二つでしょうか。
愚痴を吐き出す　＝　秘密、落ち着き　＝　紫、緑、茶色
前に進む後押し　＝　勇気付ける、背中を押す　＝　黄色
こんな感じでしょうか。もう時間もないのでこれでいきましょう。
ちなみに色のイメージとかはぐぐれば出てきます。こちらを参考にしました。

＜画面数と画面毎の機能＞
これを決めるためにはまず、実装する機能を決定しましょう。
実装する機能としては
①愚痴を記入する機能
②愚痴を消す機能
③背中を後押しする機能

①と②はフォームを置いてボタンをつければ良さそうです。
③を考えます。
背中を押すためには昨日の考えから行くと
・次に何をするかを決める機能
・乗り越えた愚痴の数を表示する機能

この二つをつければ良さそうです。つまり今回作るアプリは

①愚痴を記入する
↓
②愚痴を消す
↓
③次に何をするかを決める
↓
④乗り越えた数を表示する

というアプリになりそうです。
ここから画面数と画面毎の機能を決定していきます。

①と②の昨日は一緒の画面で行けそうです。
③の機能で１画面。
④は次に何をするかを決める画面で+1の表示。合計数はスタート画面を設けてそこに表示しましょう。

ということで、画面数と画面毎の機能としては
スタート画面：　乗り越えた数と愚痴を記入するページへのボタンを設置。
愚痴解消画面：　愚痴のタイトル、内容のフォームと消すボタンを設置。
乗り越え画面：　次の行動を記入するフォームと、ボタンを設置。できればメッセージとかあれば尚良し（時間次第）。

以上の３画面を作れば良さそうです。

■デザインを作る

では、さっそくこの３画面のデザインを決めていきます。

あ、そういえば今XDのファイルを保存するところで名前を決めなければいけないことに気づきました。何がいいでしょうか？とりあえず、解消くんにしておこうと思います（あとで絶対に変えます。）

では、スタート画面から作っていきます。
タイトルとボタンと乗り越える数を配置していきます。そして色を調節していきます。うーんこのパーツだけだと結構物寂しい感じになってしまいました。（配置と配色の問題か？）

これはだめですね。。。
これだと3つパーツあって何をどこをみたらいいのかわかりませんし、ダサいし。コンセプト的に乗り越えた数よりも愚痴を吐き出すがメインだからそっちを目立たせて、乗り越えた数はサブにします。

なんかこねくり回している間によく分からなくなってきました。（これは良くなっているのだろうか）
ちなみにこのしたの花はサザンカといい、花言葉は「困難に打ち勝つ」だそうです。コンセプトにあってるなーと思いましたが、なんか花に頼っておしゃれ感出そうとしてるのが見え透いているのがダサいですね。てか、解消くんって何・・・

今日デザインを完成させる予定だったのですが、だめです。全然出てきません。そもそも配色の設定が間違っているのかもしれません。

ちょっと日程的にキツキツですが明日デザインを決めてプログラミングに入ろうと思います。
これは雲行きが怪しくなってきましたね。。。

■まとめ

最初から完成する気が全くしていなかったのですが、今日で1%から0.01%に完成する確率が下がった気がします。。

どうでもいいんですけど、なぜFlutterを学ぶために始めたのに、3日目にしてコードが書けていないのだろうか。
いやでもリンカーンさんが準備は大事って言ってたしな。。
明日の自分に期待しましょう！

目次

■アプリのデザインを完成させる

■デザインを作る

■まとめ

■アプリのデザインを完成させる

■デザインを作る

■まとめ