UIデザイン | Cocoda Daily UI（毎日のUI制作）

私のCocodaポートフォリオ：https://training.cocoda.design/ys2431

「Cocoda Daily UI 」とは

「Cocoda」というのは、株式会社almaが運営するというデザイン学習サイトです。
デザイン学習者向けに企業とタッグを組んで実践的なお題を提案したり、デザインの基礎学習教材も提供しています。

その中の「Daily UI」は、1日1画面制作できるお題を、50日分提案してくれるサービスです。

【提示してくれるもの】

・制作する画面内容
・ターゲットのプロフィール
・情報項目の例

制作の際には下記のことに気を付けています。

• できるだけ3時間以内に終わらせること
• 制作前に、ターゲット設定やアプリの概要の整理、既存類似アプリの調査を欠かさないこと。そしてそれを記録すること。
• 画面デザインだけでなく、UXをできる限り考え、サービスのイメージまでを決めること。

特に注目していただきた作品一覧

#12 料理アプリのレシピ画面

「自炊に目覚めた20代前半の女性」をターゲットに設計したレシピアプリです。
このアプリ上で手軽に料理を見ることができます。

毎日アプリを開きたくなることを狙って、「日々の小さな積み重ね（＝ページ数の記録）」が分かるような読書記録画面を作りました。

料理の画像のすぐ下にレビュースターを置いたりレビュー画面をつけること簡単に自分の作りたい料理に出会うことができます。

手書きでまずユーザーがどうレシピを選ぶかなどを行動フローを考えてラフを作ってみました。

反省点としては予約の組み方が狭くみづらさが残ってしまいました。

＃19 旅行予約アプリの検索画面

「一人旅が好きな25歳の女性」をターゲットに設計した飛行機の予約アプリです。煩雑な手続きなく気軽に飛行機の検索ができることを意識しました。

既存サービスのリサーチを中心に行い、各コンポーネントや画面構成をどう構成しているかなどを観察してみました。

検索導線を1画面で用意するか、もしくは2画面以上用意して1画面＝1操作とすべきなのか判断に迷いましたが、検索入力と検索結果画面を行き来する行動フローが考えられるので検索画面は1画面にしています。

またこの時はMaterial Designdでの定義に注意しながら作成しています。

＃30 ECサイトのカート内の画面

「新しい物好きの35歳主婦」を想定したアプリデザインを考えてみました。
シンプルでみやすい設計を考え、掲載する情報についても最低限の情報にとどめることを意識しました。

その際にしっかりと情報項目を整理した上で既存アプリのリサーチなどを踏まえてUIの画面を作成してみました。

反省点としては商品の追加削除ボタンのプラスとマイナスのアイコンが少し小さいため、選択範囲が小さくなってしまったことです。

これらの反省点を改善するものとしてデザインのシステム化を自主制作の中でも積極的に行い、余白の使い方や文字組みなどの統一感を出さないといけないと思い、
現在はコンポーネント定義やデザイン定義などをおこなった上でUIに起こすことを意識しています。

その他、日々アウトプットを継続していますので、よろしければCocodaのポートフォリオを覗いていただけると幸いです。