10人100画面チャレンジ

今年の6月から社内で、Daily UI(参考：Daily UI お題一覧）プロジェクトを工夫した「10人で100画面」というチャレンジが始まりました。

10人 x 10課題 = 100画面を目標
・Daily UIのお題を毎週ランダム選択
・お題に沿ってUI制作・Slack内で発表
・毎週水曜日に1時間、Figma合同製作会を開催

今回心掛けたこと

・たくさんのUIに触れる
・幅広いビジュアルテイストを試してみる
・マイクロインタラクションの設計に挑戦

では実際、これまでどんな画面を作ってきたのか紹介していきたいと思います。

1. 404page

使用ツール：Photoshop
MZ世代向けファッションブランドサイトのエラー画面を制作してみました。レイアウトと配色を工夫し、ポップさと洗練さを表現してみました。

2. Social Share

使用ツール：Figma+ProtoPie
ビール好きのためのSNSアプリのSocial Share画面です。インスタストーリーのUIを参考にしました。

ちょうどこの頃、WWDC2019でiOSのダークモード対応が発表されてたので、その波に乗って、ダークトーンのUIを作ってみました。

このアプリは、人々が投稿した、ビールの写真と店の情報が次々と流れ、写真をシェア出来るのはもちろん、もし自分もここで「飲みたい！」となれば🍺アイコンを押して、アピールすることができます。

3. Weather

使用ツール：Figma
ミニマルなシェイプの組み合わせで構成した、お天気アプリです。抽象化したイラストでインパクトを与えつつも、現在の天気を分かりやすく表現できたらなと思いました。

4. Itinerary

使用ツール：XD＋Photoshop＋After Effects
宇宙旅行をテーマにしたUIです。テーマがうまく伝わるようなフォント選びと写真加工にこだわりました。この課題以降、After Effectsを触れるようになりました。

時間切れで完成できなかったもの↓↓↓

5. Countdown Timer

使用ツール：XD＋After Effect
ホラー要素の入った、The Death Timerという架空のアプリをデザインしてみました。12になると、画面の背景に血が飛び散ります、笑

6. TV App

使用ツール：XD＋After Effects
スマートTV用の映画アプリです。TV用のアプリは音声検索機能が重要だと思ったので、最後、Siriのようなアニメーションを入れて、音声検索する場面を表現してみました。この課題以降、アニメ作りに慣れてきました。

7. Progress Bar

使用ツール：figma＋After Effects
これまで、フラットな画面ばかり作ってきたので、ちょいリッチなグラフィックに挑戦してみました。

8. Calculator 

使用ツール：figma
明らかにUIではないですが、スキューモーフィズムっぽさがあるグラフィックに挑戦してみました。

9.  Testimonials

使用ツール：figma
高級なペットフードブランドのサイトを想像して、モダンなTestimonialsのページを作ってみました。猫ちゃんの画像探しは癒しの時間でした。この時期、忙しくてデザインを詰められなかった点が悔しいです。

10. Iconset

使用ツール：figma
10人100画面最後のお題はアイコン作りでした。ちょうど音楽関連の案件に携わっていたので、音楽サービスで使われそうなアイコンをネオン風に作ってみました。

感想

デザイナーとはいえ、毎週大勢の人の前で、自分のデザインを見せることに少々負担を感じてましたが、色んな方から応援の言葉を頂き、とても楽しく続けることができました。また、これを機会にAfter effectsやProtopie など、新しいツールにも慣れたので結果的にとてもよかったと思います。

考えたもの素早くビジュアル化することはデザイナーにとって欠かせない能力だと思います。その点で、Daily UIは、ビジュアルの引き出しを増やせる良い手段でした