見出し画像

Daily UIの取り組みまとめ #003-#004

こんにちは。アジケの新卒UIデザイナーonoです。
研修の一環で、DailyUIに挑戦しているので制作の記録をまとめたいと思います。
今回は、お題003と004についてのまとめになります。
また、お題001と002のまとめ、取り組むための準備編も公開いていますので、ぜひご覧ください。

▼お題001と002のまとめ

▼取り組むための準備編



#003 「ランディングページ」

制作時間:4h

テーマ:料理・食べ物・飲み物(クックパッドのようなレシピ系アプリ)
001で作成したアプリのランディングページを作成

【サービス概要】
サービス名:クイックメシ!
時短レシピを主に掲載している料理レシピアプリ(クックパッドのような)

ターゲット:一人暮らしの学生や10-20代で時短レシピで料理したい人
ニーズ:自炊で時短料理が作りたいけど、レシピが分からない、、、パッと探して、パッと作りたい!

【制作したワイヤーフレーム】

【制作したデザイン】

スマートフォン版とPC版のランディングページ

【工夫したこと】

  • 様々なランディングページを調査し、構成の分析をした上で、ワイヤーフレームの検討を行いました。

  • アプリのコンセプトが時短料理レシピを扱っているため、アプリの要点もパッと伝わるように文章ではなく箇条書きにしました。

  • 料理の写真をはみ出して配置することにより、豊富な種類のメニューがあることを表現しています。

  • また、アプリ画面のスマホの下にもお皿に見立てた白い丸を配置し、美味しいレシピがこのアプリ内にあることを表現しています。

【気づき】 

  • スマートフォン版ランディングページは思ったより小さく、情報を精査する必要がありました。

  • 今回は全てブランドカラーでまとめていますが、目立たせることを考えたらダウンロードボタンはアクセントカラーを設定しても良かったなと、見返して思いました。

#004 「電卓」

制作時間:3h10min

テーマ:シンプルで洗練された計算機

【サービス概要】

  • 入力した履歴が残る

  • 気分に合わせてデザイン(色)を変更できる

  • ニューモフィズムを用いた、シンプルで洗練されたデザイン

【制作したワイヤーフレーム】

【制作したデザイン】

ライトモード、ダークモード、色変更バージョン

【工夫したこと】

  • ニューモフィズムデザインに挑戦したいと考えていたため、調査しながら取り組みました。

  • ボタンを背景色と同じにしないと立体的に見えないため、色をつけたい箇所をどう表現するかで悩みましたが、ボタンよりも小さい円を配置し、レイヤーブラーをかけることで馴染ませることができました。

  • ダークモードに関して基本的に使用している色は同じですが、シャドウの濃さやメインカラー、サブカラーの調整も細かく行いました。

【気づき】

  • ほぼ形が決まっているものではありましたが、ペルソナなどによってデザインの余地があるということがわかりました。新しいジャンルに挑戦することができてよかったです。

まとめ

今回はDaily UIのお題003と004の制作記録をまとめました。
ランディングページの構成や、新しいデザイン手法に取り組み、作り方や注意点などを制作を通して学ぶことができました。


🤝メンバーを募集しています!【チーム伴走型のサービスデザイン会社|アジケ】✒️

アジケでは、一緒に「人にとって豊かな体験をデザインすることで、『味気ある世の中』をつくる ”同志”を募集しています!

<働き方>
・フルリモートワークOK
・フレックスタイム制(コアタイム11:00~16:00)

<現在募集中のポジション>
・リードUI/UXデザイナー
・リードエンジニア(テックリード)

詳細は採用サイト、またはWantedlyをご覧ください!

<アジケってどんな会社?を3分でお伝えします>

<数字で見るアジケ紹介 〜こんな社員が働いています〜>


選考の前段階として、お互いを知るカジュアル面談も大歓迎です!
「まだ応募までは決めきれないけど、会社のことを知りたい」という方もお気軽にご連絡ください🙌
現在カジュアル面談は行なっておりません。

採用に関するご不明、ご質問などがございましたら、お気軽に recruit@ajike.co.jp までご連絡ください📩
▼アジケのカルチャーを知りたい方|アジケのカルチャーデック

▼アジケの事業内容と今後の展望を知りたい方|アジケの事業紹介


この記事が気に入ったらサポートをしてみませんか?