Life is bitter

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

DailyUIを通じて得た知見ログ #011〜050

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

2ヶ月半ほど続いているDailyUIですが、ようやく折り返し地点の#050まできました。
前回のDailyUIのようにひとつひとつちゃんと解説(感想)をしていこうかとも思ったのですが、かなり冗長になってしまうのとルール上全てが良いクオリティで作れたわけでもないのでピックアップしていきたいと思います。

また、Sketchファイルの構造やFramer・After Effectsでどう動きを実装しているかについてオープンにすれば誰かの参考になるかなと思い、GithubでいくつかのSketchファイル・Framerフォルダ・Aeプロジェクトを公開することにしました。もしよろしければこちらも覗いてみてください。

前回のDailyUIログはこちらから。

ログ

#011 Flash Message (Error/Success)

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

#011は何かしらのアクションに対して成功・失敗のフィードバックを出すというものだったのですが、フィードバックのアニメーションに凝ってしまい「何かしらのアクション」が一体何であるかが抜けてしまいました。「何かしらのアクション」に沿った文脈でフィードバックのインタラクションを作るべきであったためこれはかなり反省しました。

また、実際のアプリにおいて成功・失敗フィードバックをここまでリッチするか(時間をかけるか)というと恐らくないと思うのでちょっと魅せるだけのUIみたいなところを意識しすぎたなと思います。

#015 On/Off Switch

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

いわゆるトグルスイッチ。スイッチ内の余白にONとOFFの状態を明記することでユーザビリティは向上しますが、実際の現場ではそもそもコンポーネントのサイズが小さくて、こうした文字を入れても視認できるほどのサイズを確保できないなどの悩みがあったりします。

#019 Leaderboard

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

Leaderboardって順位表、みたいな意味らしいです。なかなか馴染みのない単語。
ちょうどオリンピック真っ最中だったので国別のメダル数をテーマにしました。大きめのポータルサイトだとメダル速報みたいな形で知ることができますが、アプリだと意外とないですよね。オリンピック公式アプリ的なものはないのだろうか...。

#022 Search

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

検索対象を変更できる的なサーチ。しかしながらYahoo検索ではあらかじめ変更できる検索対象が見えるUIとなっており、そちらの方が使い勝手が良い...すごい...となりました(完)。

#024 Boarding Pass

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

iPhone(Android機種でもあるのかな?)でかなり好きな機能のひとつであるBoarding Passを手元で管理できるWallet。デジタルでありながらこれから飛行機に乗るぞ、チケットを持っているぞという欲を満たしてくれていい機能だなあと常々思っています。作っていて楽しいシリーズ。

#029 Map

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

電車の乗りかえ案内アプリを使うときいつも思うのですが、出発駅と乗りかえ駅と到着駅のそれぞれの通過駅についてどうして表示してくれないんだと。はじめて行くような場所とか特に乗りかえ駅の手前らへんってどの駅なんだろう、何駅についたら降りる準備しとけばいいんだろうという気持ちになります。

ということで路線図も見えるような乗りかえ案内アプリ欲しい(作るか)。

#030 Pricing

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

プライシングの表示って色による印象の影響をかなり受けているなと作っていて感じました。
例えば「Free」の部分って緑や青系統の色が来やすいのかな、逆に赤系統は「Free」に来ないしどちらかというと「Pro」かな、などなど。作る人の色に対する印象が反映されるので他のデザイナーならどんな色を使うか気になるところです。

#035 Blog Post

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

アイキャッチのビジュアルをメインで使ってユーザーを惹くタイプのブログ&横スクロールUIって意外とないなと思い制作。一覧性はあまりないですが、そのサイトの世界観を伝えるにはありかなと思ったり。実験的なサイトで実装してみたいです。

#037 Weather

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

これくらいシンプルでアイコニックなお天気アプリが欲しい。ただそれだけ。
既存のアプリは情報過多だったり無駄にリッチなUIだったりしてしっくりこないんですよね。本気で欲しいと思っているので天気情報を配信するAPIとか調べたのですが、正確な情報をちゃんと取るにはいろいろ面倒みたい&マネタイズできなさそうなのでややあきらめ気味。

#040 Recipe

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

海外のレシピサイトを調べていて得た気付きとして、材料の表示の仕方が日本と異なることがあげられます。「1/4 teaspoon salt」や「12 egg whites」など「○○○○…□□グラム」という日本の表示の仕方と異なるのでUIにどう落とし込むか言語で差が出るなと思いました(ちなみに今回は英語ですが日本っぽい表示にしています)。

#042 ToDo List

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

ToDoリストってその名の通りリスト表示が普通だと思うのですが、実際に作業をするときは優先順位をつけてひとつひとつこなしていくので左のように一つずつ表示して終わったらカードをスワイプするとかでもいいなというアイデアです。

あとは、あるタスクが別のタスクにブロックされているという状況も多々あるのでそれに対応しきるUIが思いつければ完璧だなと思って時間切れになりました。

#043 Food/Drink Menu

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

アプリ上でケーキ等を買えるという想定なのですが、食べ物は写真のクオリティ・シズル感がコンバージョンに大きく影響するのではないかという仮説のもとビジュアル推しのUIにしました。

購買系アプリでこうした写真・クリエイティブがCVRに与える影響とか徹底的に研究したい...!!

#044 Favorites

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

マイクロインタラクションをプロトタイピングするためのツール、ちょうどいいものがなさすぎる...!!

最初はFramerやOrigami Studioあたりで作ろうとしていたのですが、Framerはコード書くのが大変すぎる、Origami StudioはSketchからオブジェクトをペーストすると画像に変換されるというバグがあり、結局After Effectsで作りました。

アプリでこの動きを実装するの結構手間がかかるんだろうなと思いつつ、デザイナーとしてはここまで動きにこだわりたいなと思う今日この頃です。

#045 Info Card

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

Info Cardって何ですか...となって他の人のWorksを見てみるとカードっぽいUIを使っていればOKみたいだったのでフォント管理ツールを想定して制作。ちなみにここにあるSan Serifたちは私の最近のお気に入りたちです。かわいい。

#049 Notifications

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

マイクロインタラクションその2。
事例調査していたときに気付いたのですがFacebookのアプリの通知とかアニメーションが凝っててかなりかわいいんですよね。これくらいユーザーに対して反応あっても意外としつこくないなと実感。もちろんこちらもAfter Effects。

最後に

ここでピックアップされなかったものたちはTwitterのモーメントにまとめているのでもしよかったら見てみてください。

ようやく半分かという気持ちともう半分かという気持ちがせめぎあってますが、残り50個も引き続きやっていきたいと思います。次記事を書く時は#051〜#100かな。