はじめに
写経をすると、最初は文字の練習のつもりがだんだんと文字のディティールやバックグラウンドに対して興味が湧くことがあります。
UIに関しても同様で、既存のUIを真似ていく上で表面上の情報から徐々に本質的に解決しようとしている課題に気が付くことがあります。
これらの経験は普段の開発でも流用することができるため、UIコンポーネント開発の練習として普段の生活に取り入れてみましょう。
この記事では、AppleのUIクローンを作りそのディティールに迫ります。
何を手本にするか
お手本にするUIがお粗末なものであれば、それ以上を学ぶことは出来ません。
なるべく自分がリスペクトできるものを選択しましょう。
iOSの場合は、Appleプラットフォームに沿ったUIを選択すると良いでしょう。
今回はUIColorPickerViewControllerに取り組みます。
他のデベロッパーが取り組んだプロジェクトに関しては、この記事の終盤でいくつか紹介しています。
基本理念を理解する
そのUIがどんな目的のものなのかは、HIGを参照すると確認できます。
ここで、どんなユーザーがどんな時に利用するのかを理解しておくことで、理解不能な挙動や表示が発生したときにそれを考察するヒントになります。
構成要素を捉える
UIは、グラフィカルな部分、アニメーション、Hapticなど多くの要素で構成されています。
まずはこれらを洗い出して、何に注目するかを決めます。
今回のUIColorPickerViewControllerでは、次のようなものが挙げられます。
UIコンポーネント
一般的なUIは、複数の小さなUIコンポーネントの集合で構成されています。
例えば①は、スポイト・タイトル・Xボタンの３つの要素が横並びになっている箇所です。
ここはUINavigationBarが使われていそうだなぁなどと、標準的なUIで使われていそうなものを考えます。
また、②はUISegmentControlのように見えます。なぜUITabBarではなくUISegmentControlを使ったのかなどと自分の常識と照らしてみます。
そして、③は明らかにオリジナルのUIに見えます。
この色はどのようなロジックで選ばれたのでしょうか。実際にUIColorを取り出して、hueの変化量をマッピングしてみるのも良いでしょう。
よく観察してみると、選択している場所によってコーナーの丸みが変わっていることに気がつきました。
このような細かい丁寧さは込み上げてくるものがあります。
④は色のプレビューを表示する箇所です。
ただの四角なので見逃しがちですが、角丸のサイズを測ってみましょう。
角丸や線の太さといった要素は、OSやアプリ全体で統一されていることが多いです。
もし異なる太さの線があったら、なぜそうなのかも気にしてみましょう。
コード上は@x1のスケールになるので、実寸の1/3（デバイスによりますが）で計算します。
⑤はUICollectionViewを使っているように見えます。
32x32のセルが5x2で並んでいます。
UICollectionViewといえば、画面のサイズに対応しやすいコンポーネントでもあります。
このUIが別のデバイスではどうなるのか、次はレイアウトを見てみましょう。
レイアウト
UIとは、決してスタティックなものではありません。ユーザーやデバイス、プラットフォームに応じて適切な姿に変化します。
その一番身近な例がレイアウトです。
次の画像は、iPhone, iPad, iPhone(横向き)を並べた画像です。
これらは、同じAppleのデバイス上で動作しているカラーピッカーですが、どれも微妙にレイアウトが異なっています。
例えば、iPhoneでは5x2だった画面下部のカラーパレットは、iPadでは8x2に増量しています。
もっと増やせそうにも見えますが、もしかしたらApple社内ではヒックの法則のような実験の末に決まった数なのかもしれません。そんな妄想も膨らみます。
次に横向きのiPhoneを見てみましょう。
今度はレイアウトが大きく変わります。セグメントが上部、グリッドとカラーパレットが左右に分かれました。
この画面はカラーを選択することに重点が置かれていますが、主に公式アプリではメモ帳やスクリーンショットのペンなどに利用されています。
そう考えると、実は細かな色の指定よりもそれっぽい色をすぐに選べることに主眼を当てているのではないでしょうか？そうであれば、右利きの人が届きやすい場所にカラーパレットを置くのも納得できます。
左利き向けのアクセシビリティが登場したらもう一度見直したいですね。
このようにユーザーの指が届く距離に応じてコンポーネントの重要度を整理する手法は一般的ですが、細かな動作を要求するにはどうすれば良いのでしょうか。
次はジェスチャーに関して見てみます。
ジェスチャー
ジェスチャーは、不可視トリガーと呼ばれるUIの一種で目で見ることができません。
そのため、代替手段を用意することが一般的になります。
これらの代替手段も、ユーザーのリテラシと共に不要になるケースがあります。
iOSがスキューモーフィズムからフラットデザインに転換出来たのも、ユーザーがPullToRefreshなどのスマホネイティブのUIを発明できるほど適応したからという背景もあります。
今日ではホーム画面に戻る動作を全員が理解しているので、ホームに戻るための代替機能はありません。
最近投稿されたゲームさんぽで、この辺りの話をしている回があったので興味のある人は見てみると良いと思います。
https://www.youtube.com/watch?v=uTNLr4AEmZ8
さて、ちょっと寄り道してしまいましたが、ジェスチャーを見ていきます。
カラーピッカーに限ったことではないですが、汎用的なモーダルのジェスチャーを見てみましょう。
カラーピッカーに限ったことではないですが、モーダルはこのように大きく下にスワイプすることで閉じることができます。
「閉じる」という大きな動作に対して、大雑把なジェスチャーを当てるのはOS全体で利用するジェスチャーに向いていそうです。
一方で実はこのジェスチャーは横向きだと次のような挙動になります。
これは縦に十分な距離がないため、大雑把なジェスチャーが出来ないからだと思われます。
モーダルのタスクを中断するというのは、小さなジェスチャーですべきではないからです。
つまり、横向きのiPadではこのスワイプで閉じる動作を使うことができます。
このように自分の考察が反例によって証明される気持ちよさはUIを観察する醍醐味です。
ジェスチャーを見るときは、ジェスチャーの難易度や一般性、ジェスチャーによって行われるタスクの重要度などを見ていくと関係性が見えてきます。
アクセシビリティ
Xcodeに付属しているAccessibility Inspectorを使うことで、アクセシビリティの設定が有効になった時の見え方が分かります。
ここではInvertColorを有効にしてみましょう。すると、アプリの色が反転します。
色情報はメディアではないため、Smart Invert modeを利用していても反転します。
このことから、もし色の部分を実装する場合はUIImageViewを使わないか、accessibilityIgnoresInvertColorsを有効にするべきではないということがわかります。
プラットフォーム
最後にMacでカラーピッカーを表示してみましょう。
すると以下のようなMac標準のカラーピッカーが表示されます。
ここで、グリッド表示はこのMacのカラーピッカーを模したものであることに気づきます。
デバイスが異なれば、このように大きくコンポーネントが変わることもあります。
実際に作ってみる
このような構成要素の分析をしながら、自分でも実装してみましょう。
もちろん、全部を作る必要はありません。気になったアニメーションを模写しても良いですし、角丸を真似ても良いでしょう。
その中で、ビューの命名に苦しんだり、標準的なAPIの存在に気付かされる場面が大きな経験値になります。
ズルをしてみる
実装上の命名規則や、ビューの構造を知るためにJailbreakされたデバイスを使って中を直接覗くこともできます。
いろいろな事情からやってみようとは言えないものですが、趣味の範囲で覗いてみると実装に困った時の助けになるかもしれません。
特にGUIは、表面上グレーに見えても実はUIVisualEffectViewだったなんてこともあります。
完成したら
フルスクラッチでUIを書いたということは、そこからは自由にあなたがカスタマイズ出来るという意味でもあります。
ユーザーに使いやすい基盤の上で、足りない部分を自分で拡張できます。
ライブラリとして提供することで、プログラミング的なインターフェイスの難しさや美しさに気がつくかもしれません。
そういったことに挑戦したいくつかのプロジェクトを紹介します。
UIやUXにパクリの概念はあるのか
UIのクローンを作る上での倫理的な観点にも触れておきます。
これに関してはbtraxが興味深い記事を書いています。
一般的に言えることですが、最終的には自分や弁護士の判断の上で自己責任で行動することになります。
さいごに
いかがだったでしょうか、カラーピッカー一つ取っても奥深さが分かったと思います。
一般的なデザインカンプは表面上の情報しかないため、この記事を参考にインタラクションやUIの意味を考えるきっかけを作ってもらえればと思います。
また、今回の記事を書くにあたって、カラーピッカーのクローンをOSSにて公開することにしました。
把握は出来ていても実装が追いついていない部分がありますが、ぜひスターをして参考にしてみてください。