RepotchのUIデザインについてのお話

どうも。Reoです。

Xcode のアップデート中で暇なので、Repotch のデザインについてのお話でもしようかなと思います。

先日リリースしたiOSアプリ「Repotch」については「【iOSアプリ】がんばりを可視化するタスクレポートアプリ「Repotch」をリリースしました！」を参照してください！

AppStoreで配信中なので、是非入れてみて読んでいただけると嬉しいです。

私はデザイナーでもなんでもない、ただの個人アプリ開発者にすぎないので、そこは悪しからず…。デザインも多少は勉強しているけれど…。

デザインの方針

今回、Repotch のUIデザインをするにあたって決めていたことは「とにかくApple公式のアプリに寄せる」ことでした。

主に「ヘルスケア」にあわせて作っています。

公式アプリに寄せるメリット

公式アプリに寄せるメリットは

• ユーザーが新しい画面操作を覚える必要がない
• 実装でハックすることがあまりない
• ダークモード対応が楽

全然思いつかないぞ…ｗ

ユーザー面

ユーザー的には、公式アプリの見慣れた画面で使うことができることが一番のメリットじゃないでしょうか。

ヘルスケアと同じ使い心地で操作できることを目指したので、新しく操作を覚えるという手間が減ります。

実装面

システムカラーしか使っていないので、ダークモード対応も何もしていません。何もしてないけど対応してた。楽！！

アイコンはiOS13から追加されたSF Symbolsを用いているので、アプリ内のアイコンは一つも作っていません。楽！！

UIButton や UISegmentedControl やその他諸々のパーツも、ほぼデフォルトのまま使えばいいので、すごく楽なんですよね。色を変えたりバーの高さを変えるのにハックしたりなんてことは、しなくていいんです。

公式アプリに寄せるデメリット

ただひとつ、とにかく審査が怖かった。

App Store Review ガイドライン のデザインの部分に以下のように書かれています。

4.1 模倣

独自のアイデアを生み出してください。自分だけのアイデアがあるはずです。それを形にしましょう。App Storeで人気のある最新Appを単にコピーしたり、別のAppの名前やUIを少し変更して自分のAppとして提出したりすることは避けてください。知的財産侵害の申し立てをされるリスクがあるだけでなく、App Storeの運営が困難になり、また、他のデベロッパにとってもフェアではありません。

2回の審査を通り抜けているので、大丈夫なはず。いや怖い。

例えばUITableViewをそのままの形で使うとか、そういうのと同じ扱いなのかな？と考えているんですが、どうなんでしょう。パクリ判定はされなかったです。今のところ。

デザインの比較

実際にApple公式アプリのどこを参考にしてきたかの比較を書いてみようと思います。

比べるとほんと模倣じゃんってなってしまう。ただ、やっぱりAppleには敵わなくて、劣化版だなーとも思います…。

タスクリスト画面

パク…

ヘルスケアみたいにアイコンつけたかったけれど、タスクの定義はユーザーによるので、つけていません。

あと文字サイズとかも意外と違ってますね。

レポート画面

iOS13から14になって、このヘルスケアのグラフ少しデザイン調整されてますね。まじで自分しか気づかないレベルかもしれないけれど…。

グラフの上の線がなくなっていたり、グラフをタップした時のラインが下までこなくなったり。

気づかないうちに変わっていってるんだなぁ…。ただ自分のアプリでも変えるかっていうと微妙なところ…。

この画面に関しては、真似しようと思って簡単に真似できるもんでもないと思っているので、妥協している部分は多いです。グラフスコープが変わった時のアニメーションとか…ね…

平均

あっラベルの色が違う…！寄せたい…！

でも余白とかは自分がいいと思った通りにしてますね。余白少なめ。

タスクの終了画面

この画面、みたことない人の方が多いんじゃないでしょうか。

自分も開発中にみつけて、こんな画面あったのか！！！！ってなって、わざわざ変更しました。ちなみに生理周期の記録のやつです。

変更前後でこんなに変わりました。

いやーこの画面見つけてよかったと思う。ただ、今は共有機能はつけていないので、つけるとしたらどこにおくかも考えないと。

あと微妙に無限スクロールがうまくいっていない感じになる時があるんですが、公式もなるからいいか…と思っている節があります…。

チュートリアル

チュートリアルのこの画面もiOS14になって変わっていますね。ボタンの色が変わってる！！くそー！

このチュートリアルは結構汎用性あるなって思っていて、実装も楽だし、説明をしっかり書くことができるので、わかりやすいですよね。

検索画面

ここからはヘルスケア以外のアプリを参考にしています。

「すべて」がメールと逆なのはちょっと気持ち悪いかなぁ…どうだろう…。

これは UISearchController に UISegmentedControl を載せるっていうだけなので、実装も素直にやるだけなので簡単でした。

オンボーディング

ここはかなり迷ったんですよね。

長々と操作を１つずつ説明するオンボーディングにするのを考えていたんですよね。汚いメモですが、以下のように本当に１つずつ順を追ってやってもらうタイプのオンボーディングを作ろうと考えていました。

んで、じゃあ公式アプリはどうしているんだろう？って見てみたら、1枚で簡潔に示されたものになっていたんですよね。

あとは以下の記事を読んで、初回起動時の機能説明は最小でいいなと思い、オンボーディングもApple公式に寄せたものにしました。

アプリの初回起動時の体験設計を考える

ただ、「スライドで始める」だけはここに置きたかったんですよね。

私の作ったOKAIMOというアプリでも、メインであるチェックマークを入れる操作をオンボーディングにいれています。メイン操作を、一番最初にやってもらうっていうのだけでも、1つのチュートリアルになるはず…と思っています。

スライドではじめる

スライドではじめるってやつは、昔のiOSのホーム画面から思いついたものなんだけれど、後々電源や電話にあることに気付いて参考にしました。

ただ、スライド後の処理っていうのが難しくて、そこは頑張って考えてアニメーションをつけました。

フォント問題

昨日と画面が完成して、一番最後に、フォントを SF Pro Rounded に置き換える作業をしました。

ヘルスケアに寄せたい！というのでフォントまで一緒にしたわけですが、それでも公式アプリのようにするのはなかなか難しい。

というのも、SF Pro Rounded が日本語対応しているわけではないので、システムフォントから SF Pro Rounded に置き換えることにより、日本語フォントとポイントの差が出てしまうんですよね。

【iOS】System Fontの和文（日本語）について

上記の記事を参考に見ても、和文と欧文でポイント数が違うんですよね。

それがフォントを置き換えることによって、差が出てしまう。この問題が結構厳しい。

結局あんまり対応できていなくて、単純にローカライズで場合分けして日本語の時はフォントサイズを落とすようにしています。ただそれだと、和文と欧文が一緒に来た時にうまく行かないので、結局微妙なんですよね…。

だいぶ、困っています。

おわりに

良いものを真似すると良いものになるか、というのはかなり微妙なものです。

それに、寄せようと思っても寄せられない部分も多々あります。グラフとかも完璧に同じにしようと思うと、かなり難しいです。むしろこれでも結構頑張ってる方だと思います。

Repotch でいうと、 UINavigationBar の Large Title や UITableView の Inset Grouped をベースにする。（本当はUICollectionViewでやりたかったけれど、iOS13から対応にしていたので…）それだけでもApple純正にかなり寄せることができます。

今回思ったのは、iOSアプリの特にツール系のUIデザインをする際には、UIKit を素直に使うのが良いのかなーと思いました。（SwiftUIは未着手なので UIKit …）

昔のアプリとか、UITabBarやUINavigationBarの高さを変えたり、変な風にアイコンを置いてみたりしていたけれど、結局そんなことしない方が良いんじゃないかっていう。素直に使う方がよっぽど綺麗だし、楽。

結局UIKitを正しく理解することが大事なのかも知んないですね。自分もデザインスキルが上がったとはあんまり思ってなくて、ただUIKitへの理解が前より深まっているだけで、それが結果的にこういうアプリとして出来上がったんかなぁと思います。

まぁ納得行っていない部分も多々あるにはあるんですけどね。

それではこの辺で！

ダウンロードもよろしく！