ある日のできごと
こんな感じでツイートすると、早速 @ikutani41さんから返信が来て、その翌日にレクチャーを受けることになった。
きっかけ
BootstrapやMaterial UIのイケてるライブラリがたくさんあるので、プログラミングができるとこういったツールをすぐに利用でき、それっぽくプロダクトのUIを作れる。しかもすごく楽しい。
しかしながら、イケてるコンポーネントを使っているはずなのに自分でなんとなくUIを作るとどうしてもチグハグ感がでてしまう。エンジニアあるあるだと思うのだが、デザインの最低限の決まりごとを知らずに カッコイイコンポーネントを並べていくだけではどうしても違和感のあるUIになってしまう 。普段はiOSをSwiftで書いていたが、ReactやReact Nativeでアプリを作ろうとするとカッコイイライブラリがあるのに、思うようなUIにならないのだ。
大切なのはVisual上の取り決めと情報設計
デザイナーに相談すると、 いい感じのライブラリを使って、すでにあるコンポーネントから見たことある画面を作ろうとしてしまって、結果的に統一感がなくなる んだと思うよ、とのことだった。エンジニアで最低限知っておくと良いのは、大きく分けて 1. Visual上での取り決め / 2. 情報設計 の2点になると言われた。細かい理論は置いておいて、エンジニアがデザイン無しでUIを作る時に知っておくと良いことを書いていく。
1. Visual上での取り決め
最低限考える必要があるのは 配色 / トンマナ である。
配色
アプリで利用される色は主に以下のように分類される。
- Primary color
- アプリのテーマカラー
- Secondary color
- アプリのサブのテーマカラー
- Accent color
- アクションボタン等に使うための目立たせる色でPrimary colorの補色であることも多い
- Base color
- 背景色に相当する色で、文字の視認性を保つ
これらを自力で決めるのは大変なので以下のツールを使ってさっと決めてしまうと良さそう。
トンマナ
- borderの太さ
- borderの色味
- corner radius
- elevation（影の付け方）
ココらへんを統一することが大切。手前にあるものほど丸みを帯びるのが自然である。
2. 情報設計
この画面は何をするところなのか、を考えるのが極めて重要。先にVisual上での取り決めについて述べたがこっちの方が重要。ここで大切になるのは ナビゲーション / ページ構成 / ページの役割 の3点だ。
OSの違いからナビゲーションとページ構成を考える
ナビゲーションとページ構成を考える時は、OSの依存性を考慮する必要があるが、ここはエンジニアであればなんとなく理解しているところだと思う。AndroidだとMaterial UIに従っているデザインが多く、AppBarの機能をしっかり理解しておけば最低限はオッケーらしい（僕自身がもともとiOSエンジニアだからそう言っただけかもしれない）。左上のハンバーガーアイコンにはナビゲーション関連の機能、右上のアイコンにはその画面に関連するアクションコントロールを置くようにする。
iOSだとAndroidのAppBarに相当するのがNavigationBarである。しかし、最近はAppStoreのようにNavigationBarがないデザインも増えてきている。だいたいは下タブを利用すると良いだろうとのこと。
Webだと画面が大きいからページの構成の時に考えることがだいぶ変わる。ただしスマホ版の画面は制約が多いので、先にそちらで設計を考えると良いということだった。アプリはわざわざインストールした人がUIに触れるが、Webは目的なく訪れる人が多いのでそれを引き止めるためにも、情報が完全に整理されていることよりアイキャッチが非常に効果的になる。あとは余白をどうやって使うのかが大切で、意味合いが近いものは余白を詰めて、そうでないものは余白をあけて表現する。
ただし、最近はReact Nativeで開発されるネイティブアプリが増えてきており、React NativeだとOS特有のコンポーネントに頼るというよりは、若干Web寄りの思想が入ってくる。iOSでは当たり前にサポートされている機能を利用するのもReact Nativeだと少し手間だったりして、結果的にiOSらしさが失われるということは感じる。たしかに、React Nativeで実装するときの頭の使い方も、ストーリーボードでよくあるiOSのUIを作るというよりは、ReactでWebのフロントを書いている時の感覚に近くなる。
ページの役割を考える
どんな経緯でこの画面に来て、そこでユーザーは何がしたいのか、何をさせるのか を考える。
- 見せたいもの
- させたいこと
をまず考える。
たとえば、友達一覧を見せたい、と考えると、リスト情報を載せる => 検索機能、詳細に遷移 といったアクションが必要そう、という風に決まっていく。メインの情報を出して、それに対して何をさせるのか考えて、必要なコンポーネントを置いていく。この時に必要なコンポーネントが多くなると削って画面に収まるように整えていく。
自分がしていたミス
Material UIのCardコンポーネントがおしゃれだから、このコンポーネントにメインの目立たせたいコンテンツを入れたらいい感じなのでは、と思っていた。デザイナーに聞くと、Cardコンポーネントはリスト情報を表現するコンポーネントの一つだと知らされた。Cardコンポーネントは、一個一個のコンテンツ性があったり、Visual性が強いリスト情報を表現するのに有効で、たとえばSNSのシェアである。ユーザ一覧のような情報は、SNSのポストほどコンテンツ性は強くないので、大量に目を通しやすい(Grid)Listコンポーネントが有効になる。
リストでもなく単体のコンテンツで目立たせるためにCardコンポーネントを使うと、Cardはコンテンツを前面に持ってくるため、他の情報が背景と化してしまうのだとか。
まとめ
1時間半ほどのレクチャーだったが、これらを知っているだけでも全然違うと思う。特に配色などVisual上の取り決めは知らないとないがしろにしてしまう箇所なはず。なぜカッコイイコンポーネントだけではイケてるUIが作れないのかしっくり来た。
まず情報設計をして画面の役割を考える。実装するOSによってナビゲーションやページ構成を整理していき、配色やトンマナを当てていく、こういうイメージだろうか。
