DailyUIまとめ:#001〜#010

Tsubasa Shiraishi
5 min readAug 27, 2018

--

さて、7月の初め頃にDailyUIを始めたのですが、やっと10個作り終えたのでまとめたいと思います!
全然毎日続けることできなかった😅けどマイペースに進めていきます!

以下のソーシャルにもまとめてあります!
tiwtter:https://twitter.com/i/moments/1016678861436698625
dribbble:https://dribbble.com/tsubasa_sris

#001

365日毎日違う種類の餃子を届けてくれるサブスクリプションサービスのsing up画面。

画像を使ったページを作ってみたかったので、こんな感じにしました。
シンプルだけどわかりやすく、を意識しました。
ロゴもちゃんと作りたかったけど時間かかりそうなのでやめました…

#002

ECアプリのチェックアウトページ

これはリサーチに時間かかってしまいました…
他のdailyui見てると、クレカ情報入力して即購入!みたいな感じ多いけど、購入完了までのステップを視覚的にも操作的にもわかりやすくしました。1回クレカ情報入力したら、次からはそのカードを選択するだけ、みたいになると良さそう〜

#003

自分の好きなものをひたすら並べるLP(ファーストビュー)

基本的にスマホ縛りで行こうと思ったんですが、PCにしちゃいました😅
最初は映画のLPにしようとしてたけど、最近練習したイラスト作成の成果をLPに載っけてみた!LPのファーストビューでどう見せるか、というのが肝な感じするのでもっと実用的なのも作りたい。

#004

色をカスタマイズできる電卓アプリ

ひねりづらくて難しかったので無難にしました。
昔デコ電卓みたいなアプリ誰かが使ってて、色変更できたの楽しかったから🎨ボタンをおいて見ました。個人的に計算結果を共有することがあるので、共有ボタンを設置。

#005

牛乳のアプリ(詳細決めてない…)

HIGにあるように、「見ただけでアプリの概要が伝わる」を意識してシンプルなものを目指しましたが、よくわからなくなりました…
逆になんのアプリだと思いますか…

#006

保健所の動物を紹介するアプリのプロフィール画面

普通のプロフィールから少しひねりたかったので、動物のプロフィールにしました!実際にあるアニマルシェルターのサイトを元に画面を作りました。情報がたくさんあるので、見やすいように且つビジュアルでも興味を引けるようにしました。固定ボタンってアプリだとあまり無いかな、、

#007

とあるゲームの設定画面

ゲームの設定画面にして見ました!Life is Strangeが好きなのでトレースみたいになってしまいましたが、ゲームの世界観を壊さない設定画面を意識しました。 BACK は親指が届きやすい右下に。

#008

コーポレートサイト風の404ページ

あえて404 と書くのはやめて、ページがないことをテキストで伝えました!(404とは?となる人もいると思うので)
ナビゲーションバーとフッターは残して、迷子になっても帰れるようにしました。ブランディングも意識したデザインにしました。

#009

musicアプリ

appleのmusicアプリとspotifyを参考に作りました。2つとも結構最適化されてると感じてしまっているので、代わり映えしない感じになってしまった、、けどスピーカーなどに繋げるアイコンを左上においたり、サビだけ聞きたい時があるので、音楽の盛り上がりを可視化したりしました。歌詞もすぐ表示できるようにしたり、深い階層に行かないで色々できるよう工夫しました。

#010

ニュースアプリのシェア画面

アプリのシェアといえば、デフォルトのアクションシートが多い印象ですが、カスタムのシェア画面を想定して作りました。何をシェアするのかわかりやすくするため、イメージを置きました。sptify、youtube、airbnbを参考にしました。

以上が#001〜#010でした!!

結構一つ一つに時間かかってしまっている(お題が広いと題材を決めるのにすごく迷ってしまう)ので、もっとサクサク50目指して頑張ります!

--

--

Tsubasa Shiraishi
Tsubasa Shiraishi

Written by Tsubasa Shiraishi

Hello World :) I design, code and sleep.

No responses yet