トレース07：Googleカレンダーアプリ
対象アプリ
https://www.google.com/calendar/about/
webサイトもかっこいいですね…！
※DMM AUTOのアプリのトレースをしようと思ったのですが、車を所持していないので肝心な部分に進めることができず断念しました。少ししかさわれなかったのですが、それでも余計な画面がないように感じましたし、全くストレスのかからなそうだなと思ったので、めっちゃいいんだろうなぁ。と思っています。
見本
トレースしてみました
まとめ
デザイン
- テキストの色ですが、アクティブの場合は#212121、非アクティブの場合#757575でした。
- フォントは、日本語が「Hiragino Sans」、英語が「SF Pro Display」だと思います。
- 英数字と日本語でフォントの大きさが異なっていました。
例えば、「6月」は、「6」が20px、「月」が19pxで割とぴったりあいました。
何故なのか…
- 線は1pxではなく、0.5pxという細さでした。
- 予定と時刻線の間には必ず1.5px分の隙間があいてます。スマホ画面で拡大・縮小を行っても固定みたいでした。この隙間があることでパンパンのスケジュールをみたときに圧迫したかんじがしないのかな？と思いました。
UI
- カレンダー追加画面のこの隙間をめちゃくちゃ誤タップしてしまうのですが私だけでしょうか。
- 「タイトル、時間、参加者、場所を入力」にて、いつもタイトルだけを入力していたのですが、時間や参加者を入力すると、下の項目も埋まっていくんですね！知らなかった。
- 「ゲストを追加」をタップすると直近でスケジュール登録したメンバーが表示されるのがありがたいです。
- 時間入力部分で指を離した時点だったり、他の場所をタップした時点で確定されても良いなと思いました。
所感
はじめてのSketchでのトレース楽しかったです！19px、31px等の等間隔でオブジェクトが並んでいるような気がしましたが、Sketch、XDに限らず距離を調べる方法をきちんと理解できていないので、ワザを習得後あらためて測ってみようと思います。
