アプリ模写100本ノック #3

こんにちは。現在、学びなおしでデザインを学んでいます。
と、いいつつも半年くらいサボっていました。

今日から再開。
と、いうことで100本のうち3本目です。

アプリ模写100本ノックとは?

アプリ模写100本ノックとは、
「骨格を即興で模写する」

観察力・瞬発力を鍛えるための、
1回30分のトレーニング

詳しくは以下の記事に詳しくまとまっています。

手順は簡単

  1. 模写したいアプリを1つ選ぶ
  2. アプリを触りながら、気になったことをメモする(10分)
  3. ふせんを縦にして、選択した3画面を手書きで模写する(10分)
  4. 用紙にふせんを並べて貼り、気づきを足す(10分)
  5. (できたら)気づいたことについて、数人で話し合ってみる

本日のメニュー:「時計アプリ」(Androidのデフォルトアプリ)

普段はアラームをたくさん設定していて
身近だったため、選択しました。

シンプルなアプリですが、
そのシンプルさがどこからきているか
模写を通して考えてみました。

模写してみた

※相変わらず字が汚いのはごめんなさい!

  • アラーム画面
  • ストップウォッチ画面
  • タイマー画面

アプリを触ってみて気になったこと

  • 右側にON・OFFがある。右利きの人のほうが多いから?
  • スクロールは縦で、一番上に戻るボタンが前に表示されている
  • ボタンは少なくて、シンプルな構成
  • 右上は設定のボタンがあり、メニューは時計の種類が4つあった
  • ONにすると紫色。OFFにするとグレー。ボタン系はON・OFFで色が統一されていた
  • キャンセルは左側、保存は右側にある
  • 各ボタンやカードの角が丸っぽい

3画面での気づき

アラーム画面

  • ダークモードにしていたので、背面が一番黒い。カードは背景グレー。文字は明るめのグレーでボタンがONになると紫になった。
  • 時刻と日付、ボタンのOFF時の色は同じ色だった。
  • 一番上のよく使う時間のカード以外は、同じ高さで間隔も同じで整列していた。

ストップウォッチ画面

  • うまく模写できなかったが、でかでかと時分秒が中央揃えで表示されている。
  • ボタンはラップと開始2つだけ。開始ボタンが紫でよく使うボタンだとわかりやすい。

タイマー画面

  • 時間、分、秒でスクロールして設定できる。
  • 10分、15分、30分でボタン選択すると、選択した分数になる。選択時は枠が紫になる。
  • それぞれ上下に薄くグレーで前後の時間が表示されている。
  • リセットボタンと開始ボタン2つ並んでいた。開始ボタンが紫のボタンとなっていた。
  • 三点リーダーを押すと小さなモーダルが表示された。

今回のアプリの模写を通して、考えたこと

身近に感じていたアプリをじっくり30分観察したのは新鮮な体験でした。

シンプルに感じるには

アプリのシンプルさって何だろう?個人的に考えてみると、

  • 色が少ない、統一されている
  • ボタン数が少ない(意思決定が必要ない)
  • コンポーネントの整列・均一(見やすい)
  • 画面ごとの構成の統一(類似していて覚えやすい)
  • 不要な機能の排除(すぐ使える)
  • 広告がない(邪魔されない)

こんなところが浮かびました。

広告はビジネス的に必要なアプリもあると思いますが、
やはり、使うものだけすぐ使える、邪魔されない設計

これはユーザーにとって超大事、と思います。

配置ってどうなの?原則は、右側に配置する

今回、アラームのON・OFFするボタンや、開始ボタンは右側に位置していました。

これはWEBデザインで視線誘導(Z型、F側)という
内容を理解したうえで最後に選択を判断する視線の流れから
右側に位置していたと理解しました。

大事なボタンは、見た目を変える

ONの時や開始ボタン、選択したときの状態は「紫」
OFFの時は「グレー」

UIでは「迷わせない」ことが重要ということで、
「紫」が大事ということを直感的にわかるように目立たせる色味となっていました。

まとめ

基本的な配置やカラーの大事さを改めて学べました。

久しぶりに取り組んだためか、
雑多な感想が多かったかもしれませんが、
まずは、継続をすることと様々なアプリに触れることを目的に引き続き取り組みます!

以上です。