2021/9/29:一部加筆しました。
こんにちは、初めての方は初めまして。
AstCrowと申します。
タイトルのとうりですが、この回ではionicでアプリ制作の前にまずはどんな構想を練ったのか書いていこうと思います。
今回は
- アプリのコンセプト的なもの
- デザインイメージ（初期時）
- この時点での失敗、反省点
あたりを書いておこうと思います。自分への忘れないようメモ書きでもあります。
次回から実際の制作、ionicでの制作について書いていく予定です。
アプリのコンセプト的なもの
大元は前の記事でも書いていた第五人格での試合登録・分析ツールの構想をベースに発展させて、片手間にぽちぽち簡易操作で他の対戦ゲーム等でも汎用的に使うことができる分析用ツールです。
最初ionicでアプリ開発してみたい！いざやってみようと思った際に、実はパッと思いつくものがなく一体何を作ろうか迷った末に、過去挫折したものにトライしてみよう、ただトライするだけじゃない発展させてみようと思いました。
ゲームとかも最初考えていたのですが…肝心のストーリーや詳細な内容が私にはさっぱり思いつかず…。（でもいつかトライしてみたい）
また私は通勤族だったため、できれば通勤時間とか片手間にぽちぽち操作して強くなるための分析・準備に使えるアプリにしたいとも思いました。電車通勤とかで立っていると、満員電車だと両手が使えなかったり…出来る限り片手の簡易操作で使えるようにデザインしようとも考えていました。
アプリとしては万人受けするツールとは思っていません。対戦ゲーム等でデータを記録、分析して勝率等出したい割とガチゲーマ向けだと認識していました。が、実はここの認識、想定が甘く後で大きくデザインを変える事になります…。
最初って大事ですね。アプリ作る際はどんなアプリにするのか、まずはしっかり練ったほうがいいですね。後々の変更が少なくなります。（実話）
デザインイメージ
設計の段階です。
Ast制作の際しっかりとしたカンプは作りませんでした。なくてもしっかりイメージが固まっているなら大丈夫かと思いますが、ラフとか軽く書いてみるのをお勧めします。
個人差はありますがデザインを起こしてそれに向かって作る方が、実際手を動かす際に手惑いがちになりにくい気がします。
イラレやフォトショップでデザインしたり色々だとは思いますが、まずはざっくり紙にアプリのイメージを書いていました。かなり汚いですがこんな感じです。ちなみにこれは一部です。
これを最初に書いていた際出来る限りアイコン等の作成は最小限に、表現はできる限りcssで作成しようと考えていました。
いろんなラフやページがあってごっちゃりしていますが、最終的にページ変移を減らした３タブがあるデザインに決めました。
またこれと前の記事のアプリのスクショもしくは実際のアプリのAstを見て、ん？なんかこれ…と思ったかもしれませんが、かなりデザインが異なっています。
汚いラフなのでわかりづらいですが、なんとなくファイルっぽい、メモとか付箋、ノートとかがイメージされたデザインになっています。この当時は、アプリ内でデータを記録するためノートやファイル等記録媒体風のデザインをイメージしていました。またラフは色は乗っていないのですがベージュを基調、他差し色は淡め（蛍光マーカ風）として考えていました。
今のAstと比べるとだいぶ温かみ、優しい感じのあるデザインです。これがのちに大変化しますが、それはこの時点での構想と、ユーザへの配慮が甘かったためです。上記のコンセプトでも書いてある件ですね。
この時点での失敗
想定、デザインが甘いです。
コンセプトで書いていますが、このアプリの対象のユーザは間違いなく対戦ゲームにハマっているゲーマでしょう。
対戦ゲームにハマり、ランキングマッチを何時間も潜る方なら気がつくと思いますが、こういう対戦ゲームでしかもガチ勢の方って男性の方が比率が多いんですよね。
女性の方ももちろんいますが、なんというかガチでやっている方はなかなか精神が修羅の世界の人というか（失礼）…私も女性ですが、こういう対戦ゲームって生半可な精神ではやっていられないんですよ……。特に対人だと煽りや喧嘩が絶えないので。
第五人格辞めたのは気持ちが疲れた、というのもあります…。話が逸れたので閉廷。
ラフだとわかりにくいので、実際の開発途中の画面スクショ出しますが…どちらかというと女性向けですね。まま別に男性が使ってもおかしくはないけれども…。もうちょっとどちらが使っても気にならないデザインにするべきでした。
また差し色が淡すぎて肝心の分析グラフ部分が色弱の方には見えづらいかも…。
あとちょっと子供ぽいというかチープで軽い印象が…。
とても恥ずかしいのですが細かい所でボロがいっぱいです。ですが反省としてのっけておきます。
▼初期段階のデザイン
▼今
ちなみに上記のことが後々作っていくうちに気になり、途中で今のデザインに変更になりました。
大まかな形は変更していないものの画面は黒を基調にし、かなりグラフの発色が良くなっています。
黒を基調にしたのは、シックな重厚感や高級感、ツール感を出したかった（その際フォトショやVScodeのイメージを思い浮かべた）、対戦ゲームで酷使したお目目を少しでも労れればと思いこの色にしました。
文字が細く感じるかもですが、実際のアプリを覗くとそこまで細いと感じなかったため、前よりスマートなゴシックにしました。
また、コンセプトのところで描いた通勤時間とか片手間にぽちぽち操作ですが、上記のスクショだとわかりにくいので下記にもスクショを載せますが、ボタンや試合データを登録するチェックアイコンが基本的に右か下に集中させています。
片手で操作する際、下側に片手でもつ方が多いと思います。なるべく頻繁に使うボタンは押しやすいように片側（世間的に右利きが多いため右に）にボタンを寄せ、押しづらい反対側や上部には置かないようにしています。
データ管理画面だと上部に青い選択削除用のボタン、隣にデータ順の上順 /下順変更ボタンがありますが、これらは普段から常用的には使用しないもしくは操作毎に使用するとは限らないボタンであり、こちらは押しづらい上部に配置しました。誤操作を防ぐ目的もあります。
頻繁に使うもの⇒右寄り、下より
あまり使わないもの⇒上より
といった感じです。
実はラフ描いてた時点でボタン位置は片方に寄せる感じにしようと考えていましたが、そこまで徹底してはいなくデザイン変更の際に徹底しました。
個人的には変更して良かったと思っています。ですが途中までそのデザインで作成してしまったため、cssやhtmlの修正に時間が余計に取られてしまいました………。
最後に
今回は一旦ここで切ります。
重ねて書いてしまいくどいかもですが、本当最初の構想、デザインは大事ですね…。