コンセプトを決めて制作したDailyUIのお話

👩‍🎨こんにちは、おさない（@nanammeon）です。早速ですが今回の記事はDailyUIのお話です。

DailyUIといえば、平日送られてくるテーマを元に1つずつデザインを考えて作品を仕上げていく素敵な取り組みのこと。

私も過去2度このDailyUIを挑戦しています。100個作るどころか総数50個にも満たない作品数です。途中で挫折してはまたやり直すか…の繰り返し。はじめることは簡単だけれどつづけることは難しい、深いです。

そんなこんなこれで3度目のDailyUI。
二度あることは三度ある、三度目の正直、今度こそ100個作ってみましょうよ、自分。ということで今回のDailyUIの試みは以前とは違います。

コンセプトを決めたうえでテーマをこなす

お仕事としてアプリのリデザインを担当することになった私はいざ画面制作に思ったことがひとつ。一貫したアプリデザインってものすごく難しい。

DailyUIではテーマを元に1つずつ画面を制作し出来た気になっていたけれどいざアプリデザインを作ろうと思った時、手が止まりました。ど、どこから手をつければいいんだろう……と。

というわけで今回の課題をこなすべく考えたのが「ひとつの仮想アプリを元に複数のDailyUIのテーマに沿って画面を作っていこう」です。

今回のコンセプトはこちら。

・今日できたことを投稿するアプリ（投稿タイミングは夜を想定）
・サービスに込めたいワード：「気軽」「かんたん」「クリーン」
・テイスト：「シンプル」「きれい」「優しい」
・イメージカラー：ブルー系（アクセントでピンク/イエローを入れたい）

どんなアプリにするか、込めたいワード・テイスト・カラーをざっくりと決めていざ制作。ちなみに制作期間は1週間です。

実際にコンセプトを決めて制作したDailyUIの作品

実際に作った画面たち。
「Clairmoi」というアプリ名をつけましたが「Clair（明るい）」「moi（わたし/ぼく）」を組み合わせました。ちょっとそれっぽくなって自分でもびっくりしています。でもアプリアイコンであったり、ロゴのフォント選定も楽しく出来ました。

制作したDailyUIのテーマ

・Sign Up - アカウント登録
・Credit Card Checkout - クレジットカード登録
・Landing Page (above the fold) - LPのファーストビュー
・Calculator - 電卓
・App Icon - アプリアイコン
・User Profile - ユーザー情報

今日できたことを投稿するアプリ、と決めたにも関わらず2つめのテーマで「クレジットカード登録」が来てしまい、ぞっとしましたがなんとか制作することができました。

こんなテーマ、このアプリの画面には想定していないぞ…！と意固地になるよりも、こんな機能があるとしたらこんなデザインかなというふわっとしたイメージで作っています。電卓なんて悲鳴をあげそうになりましたが、いっそのことおこづかい帳的な役割だったら…まあ、ありかな……という感じです。

実際に作ってみて

すごく作りやすかったです。
今回、Sketchで作成し特に気をつけたところが一貫したデザインとResizingしやすい画面制作を心がけること。

シンボルで例を挙げると「form/input」は非常に汎用性の高いコンポーネントになりました。入力項目として見出しある/なし、サイズ変更でもいい位置に文言がくるなど工夫を凝らしました。

実際に作ったSketchのアートボード/シンボル群 

あとはTwitterにも投稿したResizing機能を使ったアートボードのサイズ変更でレスポンシブになる画面。サイズ可変するとちゃんとコンポーネントが伸び縮みして楽しい＆嬉しいの2連コンボ。

反省点

各項目の文字サイズが小さすぎる、淡い色を使いすぎているため白黒にしたとき判別がしにくい、というのが一番の反省点です。

UIを考えられていないデザイン、デザイナーがこれはきれいだ！見た目がクリーンだ！という思いだけで突っ走ったアプリになってしまいました。（特にユーザー情報や電卓（という名のおこづかい帳）部分ですね。

今回はXシリーズのサイズで作ってみましたが、ユーザー情報画面のメモが3カラムになっている部分ですが、画面にこそ収まっていますが実機で見た際はとんでもないくらい見にくいと思います。分かっていてなぜ修正しなかった……。

「きれい」と「つかいやすい」は全く別物ですよね。
今回は「きれい」に振り切ったデザインとなってしまいました。猛省。反省点を踏まえて次回に活かしたいと思います。

次回のDailyUIもゆるゆると作っていきたいと思います。それでは👋