Tootoise の画面は “見やすい、シンプル、ちょっとかわいい” を心がけて作ってます。
UI を作るときは、まずはなんとなくのイメージをノートに書いて、それを元に Adobe XD でプロトタイプイメージを作って、さらにそれをコードで書く(というか書いてもらう)という感じです。
ホーム画面のプロトタイプイメージはこんな感じで。
これはアンケート表示対応の時のなのですが、今のバージョンとほとんど変わってないですね。アイコンとかはシミュレータの画面のスクリーンショットを撮って切り貼りしたりして作ってました。Adobe XD 便利。
ちなみに最初に作ったホーム画面はこれです。
当時は iPhone SE を使ってたので、そのサイズで考えてました。カラーテーマは最初から4種類で考えてたんですが、まずはダークとライトの2種類で。アイコンとかだいぶ違ってますが、v1.0はこんな感じでした。こうやって比べてみると今のバージョンはだいぶいい感じになってるんじゃないかなぁと思います。
現バージョンのアイコンは Adobe XD を使って作ってるんですが、初期のアイコンは CLIP STUDIO PAINT を使って作ってました。そのあたりの話も気が向いたらそのうち書くかもしれません。
そしてタイムラインを構成するセルのサイズはこんな感じで設定してます。
こうやって見るとけっこう細かく設定してますね。画面の横幅が端末によって違うので、横幅に合わせて可変する部分を作ってます。
こういう図の書き方とかぜんぜんわからないので適当ですが・・・なんとなく伝わればいいかなと思います。
