dailyUIをはじめたよ(#001〜#005)

サトゥー

お久しぶりです、サトゥーと申します。

現在東京大学理科I類を半年間休学中で、ベンチャー企業でデザイナーとして働かせていただいております。

今日はデザイン系の記事になります。

 

ついにdailyUIをはじめた

サトゥー

はい、ついに#dailyUIをはじめました。

 

dailyUIというのは、平日1日1個のお題に沿って、UI(ユーザーインターフェース)画面を作りましょうという有名な企画で、まぁデザイナーでSNSやってるなら君もやるでしょ?みたいな登竜門的なサムシングです。

登竜門と今言いましたが、全部で100個あるのでこれを全てこなすのはなかなか難しく、全部達成するとものすごい祝福を受けます(きっと)

dailyUI

ということで、僕も先日からスタートして、忙しくて時間がまじで取れない日以外は基本的にやることにしました。

平日に毎日やったとして、終わるのが20週間後ですから遠い未来ですね…

 

僕の場合、順調に平日毎日やったとしても終わるのが4月中旬という...達成感のありそうな一大企画ですね!!!

 

とまぁそんな感じで空いてる日の90分くらい使ってやっています。今日は#005まで終了したのでその記録を書いておきましょう、という更新です。

 

なんでdailyUIをはじめたのか

で、まずはなぜこのタイミングでdailyUIをはじめたのか、色々書いてみようと思います。

人に気軽に見せられる作品が欲しい

僕はありがたいことに環境にとても恵まれていたので、デザインをはじめてから間も無く仕事でデザインをさせていただくことができました。(もちろん最初の頃はわけわからんUI作ってはダメ出しされて…の連続でした)

 

で、まぁとてもありがたいし、おかげさまでかなり成長できたというのはあるのですが、

「人に見せられるような自分の作品が少なすぎる… !」という事実に気づいてしまいまして。

 

これでは休学したのに「お前何やってんの?なんか怪しくね?」と言われてしまっても何も言い返せないわけです。

ということで、仕事とは全く別で、自分の作品を他人に気軽に見せられるような形で持っておきたいというのが大きなきっかけになっています。

 

UIデザインは経験値だな、と思った。

これはデザイン全般に言えてしまうのですが、UIの世界は特に、経験があるか(=膨大な知識があり、かつそれを適切に運用できるか)がものをいう世界だと思っています。

デザイン界隈だけでなくビジネス界隈でも有名な「センスは知識から始まる」なんていう本もある通り、経験に裏打ちされた知識の引き出しを大量に持っておくことがデザインの世界では重要であるということを身を以て感じています。

ということで、dailyUIみたいな毎日UIに触れ続ける企画は、UIデザインの訓練にはぴったりだと思いまして。経験値を貯めるため、という理由もあります。

 

ネット上で発信しないとやばい、と思いはじめた

これが3つ目の理由になりますが、僕はデザインを勉強してからほとんど、このブログでデザインの記事を書けていません。

デザインの記事というのは大きく2つあると思っていて。

  • お役立ちTips
  • 自分の作品について

前者はデザイン強い人たちがネットの世界にはたくさんいて、彼らはとても優しくて色々な知識を無料で公開してくれるので、僕がやる必要がそもそもなくて。

で、後者なんですが、これはへなちょこひよっこみたいな僕がやってもあまり効果がないわけですよ。

 

でも記事書かないと勿体ない。

ということで、dailyUIという企画にしてしまって、あくまでトレーニングの一環としてパッケージングしてしまいましょうというのが目的です(逃げやないかい)

 

まだまだ自分の作品をネットに出せるほど、量的にも質的にも足りないなぁと思いまして。まぁそのうち公開できるものはやりますけどね。まずはdailyUiで発信の方法を身につけつつ、自分のデザイン力を上げていきたいなぁと思った次第でございます。

 

自分の処理能力を知る&向上させる

仕事でデザインをこなす以上は、自分が時間単位でどれくらいのことを出来るのか、自分の仕事量を見積もれるようにならないといけない気がしています。のちに述べますが、今回のdailyUIは時間制限を設けて行うので、自分の処理能力が(嫌でも)作品になって現れてしまいます。

ということで、自分の処理能力をまず知り、そこから向上させるというのもdailyUIで出来ることかなぁと考えています。

 

dailyUIを進めるにあたって、自分ルール

さて、そんな感じで始まったdailyUIですが、やる上でいくつかルールを設けておきます。

仕事を優先すること。

当たり前ですが仕事の方が圧倒的に優先度高いので、「dailyUIのせいで仕事遅れてます状態」には絶対にならないようにします。

時間的に無理ならやらない。出来る日にコツコツやって、100日分なんとかこなします。

 

制限時間は長くても90分。その時点での作品を公開すること。

自分の処理能力を見積もるため、90分という時間制限を見積もってやっています。できたものはinstagram上に公開しています。

そのため、全然満足いかない日もあれば、しっかり作り込める日も…それも込みでのdailyUIかなと。

今は平面の静止画を作るのでいっぱいいっぱいですが、だんだんと処理能力が上がってきたら、アニメーションや立体にも目を向けていきたいと思っています。

 

5つ進むごとに、ブログに記事を書くこと。

これは自分の記録用ですね。一応毎日note上に有料マガジンとして更新はしていますが、5回ごとにまとめという形でブログ記事を更新したいと考えています。

自分の制作物の意図、感想などをメモして成長の過程が分かるようにしておきます。

 

制作プロセスを意識すること。

これは仕事の効率化のためでもありますが、noteに記録するときは制作のプロセスを意識しています。

現在だったら、

  1. お題についてtwitter,instagram,note,pinterest,dribbleで調べてなんとなくのイメージを掴む
  2. 調べて参考になりそうなものをいくつかピックアップ
  3. 作成してみる
  4. 微調整、見せ方まで考えてモックアップ作成
  5. 公開

という感じのプロセスを踏んでいます。

 

より効率的でより効果的なプロセスを習得してしまえば、普段のデザインワークもかなり楽になってくると思うので。

 

 

 

というわけで、実際の制作物をここから載せていきます〜〜!!

dailyUI #001 SignUp

 

 

View this post on Instagram

 

#dailyui #dailyui001 SignUp 登録画面 架空のアプリの新規登録画面です。

サトゥーさん(@9satoooh)がシェアした投稿 –

記念すべき第一回はSignUp(新規登録)の画面。

まず、友人にいくつか欲しいアプリを聞いてみて、一番作って面白そうだったのが

過去問とかレジュメとかの写真共有するのにLINEとかDropboxつかいづらい

という大学生あるあるっぽい良い着眼点だったので、これを想定してアプリを作ることにしました。

 

アプリ名は『「落単」から「楽単」へ』ということで、「Rakutan」という名前にしてみました。

もうすでに楽天っぽいのですが、このまま簡単にRの文字でロゴを作ってみますと、

丸にRとか完全にRakutenですね。

もうやっちまった感が半端ないのですが、なんとか色だけは青系で逃げて、面倒なのでこのまま進みます。

 

というわけで、要素を極力減らし、ユーザーの負担を下げることで新規登録をして欲しいというこちらの意図を達成してもらえるような新規登録画面を意識しました。

SNS認証は、Google、Twitter、LINEと、今の大学生がめっちゃ使ってそうなアカウントを設定しました。そのためFacebookは削除しました。

 

感想としては、

サトゥー

思ったより90分って短い!

サトゥー

アカウント持ってます?サインインします?みたいなの入れるべきだったな

 

サトゥー

テキスト入力中の画面、ボタンをタップした時の画面など、他にも作るべきは色々あったな

など。まぁこの辺はだんだんと改善していきましょう。

 

dailyUI #002 Credit Card

2日目です。クレジットカードの決済画面を作成しました。

 

View this post on Instagram

 

DailyUI002 Credit Card Checkout #dailyui #dailyui002 #design #uidesign

サトゥーさん(@9satoooh)がシェアした投稿 –

前回の反省を生かして、複数の画面を作成しました。4つのStepに分けて、決済完了までの導線を意識して作成。

サトゥー

クレカのスキャン機能はつけるべきだった、普通に忘れてた

サトゥー

あとは戻るボタンはどの画面にも基本的につけるべきだな、と思った

 

dailyUI #003 Landing Page (above the fold)

3日目。ランディングページのファーストビューのデザインですね。

ランディングページというのは、広告踏んだ時に表示されるようなページのことです。ユーザーを「登録」や「ダウンロード」などの特定の行動に誘導するためのページが多いです。今回はファーストビューということで、ページを開いた時の一番最初の表示の部分をデザインしようということですね。

 

View this post on Instagram

 

DailyUI 003 Landing Page (above the fold) 難しい。40点。 #dailyui #dailyui003 #design #uidesign #designs #anthonyboydgraphics #lp #lpdesign #landingpage

サトゥーさん(@9satoooh)がシェアした投稿 –

正直、こんなの1時間半で出来るわけないでしょ。というのが感想。

一度「ペライチ」というデザイン的な自由度がなくて非常に使いずらいツールを利用してLPを作ったことがあるけど、あれ使っても1日で終わらなかったし。
まぁ最低限のクオリティはできたのかなぁと。

サトゥー

LP製作は広告と同じくらい難しいです

 

dailyUI #004 Calculator

4日目は電卓ということで。僕が想定していた「Rakutan」の機能にはない(予定)なので、完全に別のアプリとして作成することにしました。

写真スキャンとか高度な計算とか、手書きとか、色々な機能を盛り込みたかったんだけど、最初の画面を整えるので精一杯で…時間内に満足いくようなものを作ることはできませんでした。

サトゥー

精進します

電卓アプリはUIの型みたいなのがあるので、基本はここから外さない方が良さそうでした。

 

dailyUI #005 App Icon

5日目。今日はアプリのアイコンを作りました。

普通に結構時間かかった。

サトゥー

サービスロゴ完成してるのに70分かかりました

 

大きさを2pxずつ変えたり、グラデーションのかけ方を変えたり、思い切って色を変えたり…

大きさが数px違うだけで、だいぶ見た目の印象が変わるのがわかるかと思います。

 

まず見た目が良さそうなものを絞って、5個のうちから最終的なものを選びました。(ここ大変だったー。個人的に真ん中が捨てきれず、でもトンマナずれるし…みたな葛藤がありました)

 

という感じでした。また#006~#010が完成したらブログ書きます。インスタにいいねとフォローしてくれると喜びます。

それではまた。

 

サトゥー

デザインって楽しい!!!!!!!(デザイナーズ・ハイ)

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)