Daily UIまとめ(21～30)

お久しぶりです。

最後に更新してから約１年経ちました。

おまんなにやってんだよ！おまん遊んでたな！というコメントには何も言えないのですが、言い訳させていただくとたしかに遊んでいました。そりゃあもう。

だがしかし、今年からは絶対DailyUI完走させるぞという意気込みで再スタートしましたので、生温い目で見ていただけると嬉しいです。

では21個目からレッツゴー！！！

ーーーー

そもそも私がDaily UIを始めたのは↓

前回（11～20個目）はこちら↓

21. Home Monitoring Dashboard

テーマ：太陽光発電の発電量が見れるアプリ

作成ソフト：illustlator CC

想定媒体：iphone SE

■工夫したこと

一目では発電量と使用してる電気料がわかるといいなと思って、最初のファーストビューに持ってきました。

タブでリモコンやその他の詳細画面に移れるように作りました。

日時単位でも見たいなーと思って日付もつけてます。

■反省点

デザインがださい。今見ると。背景灰色だと暗い印象があるから、白で組み合わせればよかったなーと

22. Search

テーマ：検索エンジンの最初の画面

作成ソフト：illustlator CC

想定媒体：iphone SE

■工夫したこと

wordとimageのみ検索できるようにしました。（googleさんを参考）

色合いが結構気に入ってます。黄緑とむらさきの組み合わせが地味に好きなんですよね～

ロゴも結構気に入ってます。かわいいと自己満足。

■反省点

カーソルまで作りこむべきでした。

あとボックスのデザインがなー角丸のところと角丸じゃないところが統一できていませんね。

あと音声入力と動画検索入れればよかったな。

今は動画の検索も結構需要あるだろうしなーあとは各アプリ飛ばなくてもgoogleの検索画面一つで全部検索できたら楽だろうな。

23. Onboarding

テーマ：蔵書管理アプリの使い方

作成ソフト：illustlator CC

想定媒体：iphone 6.7.8

■工夫したこと

蔵書管理アプリの使い方です。

個人的に読書メーターというアプリを使っているんですが、あのアプリ使いにくいんですよね～

バーコードで検索する機能ありますが、結局検索しちゃうっていう。あの機能あまり使われていないだろうなあ～

■反省点

各ステップはかなりわかりやすく作ったつもりですが、スタートボタンを作ればよかったなと反省しています。ただのテキストて…

24.  Boarding

テーマ：飛行機の電子チケット

作成ソフト：illustlator CC

想定媒体：iphone 6.7.8

■工夫したこと

これは作ったことがなかったので、ジェットスターさんのチケットを参考にさせていただきました。

ただ作るのはおもしろくなかったので、天空の城ラピュタまで行けるチケットを作りました。うふふ。

ほら、名前のところは本名が載っているでしょ。あの女の子の。

今回は色もきれいにグラデーションかけられたかな～と思います。空へ行くんだから抜けるような青で。

■反省点

特になし。

そもそもチケットを生体認証とかにすると、いちいちこういうの見せなくても楽ですわな～

登録して、電子メール受けとって…という過程すら面倒に感じるので、早く楽な世の中になったらいいですね。

25. TV app

テーマ：テレビのアプリ。映画選択画面。

作成ソフト：illustlator CC

想定媒体：ＰＣ、ＴＶ

■工夫したこと

画像は各所からお借りしました。

カーソル当ててる画像に対してはジャンプするような想定です。悪人がそんな感じ。

レコメンドはカテゴリごとを想定しています。今回のチョイスはミステリでしたので、他のミステリ作品を並べています。

個人的に容疑者Ｘの献身は邦画の中で最高に好きなので、今回はこちらをチョイス。堤真一さんがたまらないんですよ。まじで。よかったらみてください。

■反省点

最初は再生するボタンに色を付けていたのですが、無駄に目立っていたので、白抜きにしました。

ただやっぱり見にくいかな～

この頃から、綺麗なデザイン＝よいUIではない、と自覚した時期です。

だからボタンはもっとわかりやすくするべきかなと今は思っています。

26. Subscribe

テーマ：写真ダウンロードサイトの登録画面

作成ソフト：illustlator CC

想定媒体：iphone 6.7.8

■工夫したこと

とにかく情報は少なくしました。

コピーもできるだけ簡易的に、この画面は何をする画面なのかを考えなくともわかるようにしました。

なので登録する、というＣＶボタンになっています。

■反省点

いやー後ろに写真置くと文字読みにくいのはわかっていたのですが、失敗したなーーー

もっと暗くするか、上にオブジェクトかなんかを載せればよかったな～

27. Drop down

テーマ：ドロップダウン（まんま）

作成ソフト：illustlator CC

想定媒体：すべて

■工夫したこと

いろんなサイトで使われているドロップダウンの特徴を残したまま作りました。

新しいやつを作っても使いにくいかなーと思ったので、ＬＯＶＥをクリックしたら、下からぺろーんと出ます。

クリックしたリンクは下線と色がつきます。

■反省点

特になし。

いろんな方のDailyUIを見ましたが、しばらくのドロップダウンはこういう形式ですね。

もしくはドロップダウンじゃなくて新しいＵＩが出たらいいなーーもうちょい作りたい。

28. Contact Us

テーマ：お問い合わせページ

作成ソフト：illustlator CC

想定媒体：iphone 6.7.8

■工夫したこと

とにかくユーザーが楽なように、入力項目を減らしました。

そしてメールアドレスの＠以降は選択できるようにしました。メルアドほど入力がめんどいのはないよなーー

画像は地味に気に入ってます。

■反省点

画像…よく見たらちょっとおかしいのです。

むりやり合わせました。ここらへんがめんどくさがりの証です。はあ…

あともしかしたら、入力項目じゃなくて、他のＳＮＳアカウントとかで楽に入力できるようにすればよかったのでは？

29. Map

テーマ：マップのアプリ

作成ソフト：illustlator CC

想定媒体：iphone 6.7.8

■工夫したこと

位置情報をオンにしたら行きたいところを検索する。そしたら今いける場所まで教えてくれる、そんなマップを想定しました。

この場合、営業中ってのが一番知りたい情報かな～と思ったので、わかりやすく横に配置しました。

■反省点

これは機能を考えすぎて、デザインそっちのけになってました。クールじゃないぞ自分。

まあでも意図は伝わるから時間内ではこれが精いっぱいかなーと。

30. Pricing

テーマ：電子書籍読み放題サイト

作成ソフト：illustlator CC

想定媒体：iphone 6.7.8

■工夫したこと

各プランの何が違うのか、わかりやすく文字の色を変えました。

で、おすすめのプランについてはしおりのようなアイコンをつけました。これはわかりやすいかなー

大体サービスよりもまずは価格を見てから判断する人がほとんどなので、価格は一番ビックに出しました。

■反省点

全部オレンジにしちゃったけど、色でも強弱つけられたなーと反省。

同じ色だと違いがあまり伝わらなかっただろうなーここでも色についてはまだまだ勉強する必要がありますね。

ーーーー

やっとまとめられました。

001個目よりはだいぶ作りこむことができたのではないかと思ってます。

カラーもまとまってきたし、なんとくさまになってると思う。たぶん。

続きもどんどん上げていこうと思います。