こんにちは。
UIの練習をちゃんと進めていきたいと思っていたのですが、転職活動が終了したこのタイミングで、かねてから気になっていたサービス、Daily UIを始めてみました。
Daily UIとは、UIに関するデザインのお題に1日1問×100日間出題してくれるサービスです。非常にシンプルなそのサービスの最大のメリットは、チャレンジした方のたくさんの成果物をSNSのハッシュタグ（#DailyUI）で辿れることだと思います。即座に他の方の作品を参照できるので、仮に「要件定義からわからん……」となっても、とりあえずスタートできます。
今日は、Day 1のお題「Sign Up」をテーマにデザインしていきました。マイルールとして、お題は英語ですが、基本的に日本のサービスを想定していこうと思います。なので、今回は「登録画面」ですが、「ログイン」か「新規登録」かがシングルページで分かれているのが一般的ではないかと感じたので、そういった形で作ってみました。
さまざまな気付き
デザインしてみた感想として、本当にたくさんの気づきがありました。今後の備忘録として記してみます。
セクションで使うボーダーは細く薄く
見出しでもあり、セクショニングでもありという感じでボーダーを使ってみたのですが、なぜか暑苦しい印象がありました。太く濃い色の線だったので、ヘアラインにして色味も落としてみたら、本当に見違えるほど見やすくなり、なんならセクショニングもはっきりしました。
そもそもボーダーは悪目立ちし、うるさくなりがちなので、項目が少ない階層で使用した方がいいと思いました。それでも使用するなら、くどさを少しでも軽減するために、振り切って細く薄くするというのは有効のようでした。
もっと言えば、セクショニングとしてのボーダーは、あるのがギリギリわかるくらいの気持ちで大丈夫そうです。大体わかるし、必要以上に目立ってしまうので。
項目が増えてきたら、反復のしすぎ注意
反復は異なる場所にある要素のレベル（階層）を揃える効果がありますが、逆に連続した要素が全て同じデザインだと、逆に暑苦しさを感じました。
今回の場合、例えば「ユーザー名」「パスワード」などの入力フォームが、場合によっては延々と続きがちになりますね。デザイン的な統一感は感じるものの、過度な反復は、同時に入力作業の冗長さを際立たせる役割も買ってしまうのではないか、というのが気付きでした。
とはいえ、さすがに同じレベルにある項目のデザインを変えるのは愚策だと思うので、デザインとは別の形で対処するのがいいと思いました。入力作業が続かないように、選択式の質問が間に挟まれるように順番を調整するなども有効でしょうか。
項目が増えてきたら、揃わせすぎも注意
反復と同様、揃えもデザインの基本だと思いますが、意外にこれも、時に暑苦しさを増長させる原因となることに気付きました。
具体的には、フォームとボタンの横幅です。当初は同じ幅にしていましたが、ボタンの幅を狭くしたところ、フォームとボタンの違いがはっきりとし、見やすくなりました。
反復や揃えのようなトンマナの統一を進める考え方は、違うものははっきりと区別すべしというコントラストの考え方に時に反します。何を持って揃えるか、区別するかの境界は難しいとろだと思いますが、要素の役割（ボタンなのかフォームなのかなど）で分けるというのは一つの指標になるような気がしました。
ボタンや項目の色分けは慎重に
前の項目の続きでもあります。コントラストの出し方として色分けが一番オーソドックスかつ効果的だと思うのですが、トンマナを意識すると、色数を増やすのは難しくもあります。
そこで色々と試してみたのですが、色相はいじらずに明度を変える方法も思った以上に効果的だと気付きました。
色相よりはマイルドなコントラストですし、加減が難しいところではあります。さらに、背景色などに対して目立つかどうかがはっきり出てしまうというデメリットもあります。
しかしながら、例えば並列的な項目でも明らかに優先順位をつけられるもの（代引きに対し、より利用者が多いだろうと思われるクレジット払いなどでしょうか）はトーンを揃える必要もないかもしれません。そういった場合には、明度によってはっきり区別してしまった方が、多くの利用者にとって快適になるのではないかと思います。
Daily UI 1日目を終えて
たった1日のチャレンジでも多くの気づきがあったので、今回は言語化してみました。書いているうちにそう言えばあれも、これもと浮かんでくるものがありましたが、チャレンジを進めてみて、重要度が高そうならまた書いていこうかなと思います。
あと、作業ペースは速めていきたいです。今回は2時間くらいでしょうか。初めてということもあり、いろいろとこねくり回しながら作業しましたが、癖になると良くない気がするので。
明日からも頑張ります。