Life is bitter

日常生活で考えたことやデザイン・写真・インテリアをはじめとした役に立ちそうな知識をまとめて記しています。

DailyUIを通じて得た知見ログ #001〜010

f:id:life-is-bitter:20180217160011p:plain

DailyUIというものをはじめました。
Daily UI Design Challenge, Design Resources, Design Inspiration

このサイトにメールアドレスを登録すると毎日(平日のみ)UIデザインのお題が届いて、それを自分なりに解釈してデザインするというチャレンジです。
お題はなんと100個もあり、無事に完走できればUIデザインの基礎力と持久力が身につきそうだと思い、始めました。
毎日お題に沿って作ってはアウトプットのみTwitterに投稿しているのですが、思っていた以上に得られる気付きがあったので10個を区切りとして記事にまとめていこうと思った次第です。

今回設定したルール

本来このDailyUIでは細かいルールはないのですが、時間があればいくらでも作り込むことができてしまうので1回90分というルールを今回は設けました。90分に設定した理由としては、私がゼロベースからある程度のクオリティで1つの画面を仕上げられるのにかかる時間が60分であり、そこにバッファとして30分を取ったためです。

DailyUIの流れ

DailyUIの1回あたりの流れは以下のようにしています。

  1. その日のお題を確認する
  2. お題に沿った既存アプリ・WEBのリサーチ(10分)
  3. 必要要素の洗い出し(5分)
  4. UI・インタラクション作成(75分)
  5. Twitterへ投稿
  6. 他の人が作ったものをTwitterやDribbbleで見て比較する

良いアウトプットを出すには良いインプットが必要なため90分の時間全てをUI作成に割くのではなく、10分は必ずインプットの時間を入れています。
UI・インタラクションを作成時に使用するツールとしては主にSketchとFramerの2つです。基本的にはSketchで完結させる、動きやインタラクションを入れるときはFramerで、という使い分けをしています。

ログ

#001 Sign Up

f:id:life-is-bitter:20180217124442p:plain

記念すべき第1回目はSign Up。

「UNTITLE」というinstagramほど気負わない架空の写真SNSアプリで、という設定で作りました。
Sign Up即ちアカウント作成なのでメールアドレスとパスワードのフォームを置いていますが、作った直後にこれメールアドレスである必然性はないなと気付いてしまいました。Usernameで全然よかった...。

また、Sign Up画面をリサーチしていて気付いたこととして、海外のアプリやサービスでは確認のためにパスワードを2回入力させておらず、確認のためにもう一度パスワードを入力するという考え方があまりないようでした。
確かに手数が1つ増えてしまうので純粋にユーザーへの負担を要求してしまうのですが、確認のためにもう一度パスワードを入力させないとタイプミスで意図しなかったパスワードに設定されるリスクがあります。

決済などが生じるようなサービスだと確認入れたほうがいいのかな〜という気持ちです。

#002 Credit Card Checkout

f:id:life-is-bitter:20180217133957p:plain

カード決済はなかなかリファレンスが無くて少し苦労しました。

反省点としては、カード決済はあくまでカート確認画面から購入完了画面までのフローの一部なので今このフェーズだよというフローのナビゲーションを入れた方が親切かなと思いました。

また、どのカードかの目印(VISA等)は最初不要かなと思いましたが、あると自分が自分のカードを入力できているかある程度の安心材料になるため、そこは気付きでした。

#003 Landing Page(above the fold)

f:id:life-is-bitter:20180217135151j:plain

ランディングページのファーストビューのみ。調べるとabove the foldはファーストビューのことみたいです。

一流シェフをオフィス等へ派遣してその場で料理してくれる「Parandium」という架空のサービスを設定しました。ロゴがかなり雑。そして英語でのコピーを全然書けなかったので日本語にしました。

リサーチの段階で感じたこととして海外のLPと日本でのLPでは好まれるテイストが明確に異なっており、海外はシンプルでビジュアルを多用しない、日本ではビジュアルやインタラクションをリッチにするという傾向がありました。

LPはLPで奥が深いのでいくらでも作り込めるなあという感想です。

#004 Calculator

f:id:life-is-bitter:20180217141504g:plain

計算機は自分の好みでサクッと作りました。

世にある電卓アプリの大体はフラットなボタンですが個人的にボタン感が強い方が電卓っぽくて好きなのでトレンドに逆行してみました。

ボタン押下時の反応も作りGIFにして気付いたことは、オブジェクトとして同じ大きさの円に対してinner shadowをかけると視覚補正がかかって小さく見えてしまうということです。ご覧の通り押下時の「1」のボタン、サイズが小さくなっているように見えますよね?
本来ならばこの視覚補正も考慮してオブジェクトの大きさを調整するのですが今回は時間がギリギリだったので見送りました。

#005 App Icon

f:id:life-is-bitter:20180217143527p:plain

シンプルにアプリのアイコンです。

寝る前にちょっと1〜2文を書く日記アプリ「SUNSET」を設定して作りました。
試行錯誤しているとシンプルで安っぽくならないようにするにはうまくグラデーションを使うのが有効だという気付きを得ました。

このアプリ、ふつうに欲しいので自分で作ろうかなと思っています。

#006 User Profile

f:id:life-is-bitter:20180217144144g:plain

ざっくりとSNSっぽい何かを想定してそのUser Profileを考えました。

挑戦したかったこととして「縦長に画面を使ってみる」ということを設定しており、コンテンツもコンポーネントも効果的に縦長で使うにはどうすればいいか模索してみました。

ツッコミどころは満載なのですが、この縦長のダイナミックさをどこかで取り入れたいなと思ったりしました。

#007 Settings

f:id:life-is-bitter:20180217150049p:plain

エアコンの設定画面を想定しました。

Settingsのこの回、なぜかものすごく悩んでしまって実質20分で作ることとなってしまいました。
AUTOのアイコンがリロードだったりCOOLのアイコンが雪だったりと正直ツッコミどころばかりですが、普段私たちが使っているエアコンのリモコンは完成度が高いのではという気付きを得られました。

かなりリベンジしたいです。

#008 404 page

f:id:life-is-bitter:20180217151156j:plain

#003のLPの404を想定して作りました。ビジュアルありきですね。
404はリサーチしてみると各サービス個性的なものばかりでデザイナーの遊び心が見られて良いです。

#009 Music Player

f:id:life-is-bitter:20180217152328p:plain

リファレンスはほぼiOSのミュージックのみですが、現在のiOSのミュージックではリピートとシャッフルがスクロールしないと隠れている仕様で、それが個人的にわかりづらいため常時表示させたいという想いを反映しています。

右上のメニューをタップすると何が出るかまで詰められていないためちょっと甘いかなという感想です。

#010 Social Share

f:id:life-is-bitter:20180217153601g:plain

1つのWEBページにおけるSocial Shareというよりもコンポーネントとして作りました。

本当は角丸にしたかったのですがFramerはかゆいところに手が届かずいい感じにアニメーションできませんでした。さすがにSVGアニメーションをごりごり書くほどの時間はなかったですね。

最後に

このように毎日こつこつとUIを作っていくことは継続がなかなか難しいのですが、#010まで作った時点でリズムができてきたので#100まで駆け抜けていき、そして10個ずつこのように気付きや感想をまとめていきたいと思います。

そして1回90分という制限があるため毎回必ず80点以上のものが出せているわけではなく、これを毎回80点以上のものを叩き出せるようにしていきたいです。