見出し画像

DailyCocoda!#001 Profileにチャレンジしました!

まずは要件確認

こんな感じでターゲットユーザと要件がゆるっと定義されています。
これに従って作っていくよー!
写真をおしゃれに見せたいらしいです。

Cocada!_DailyUI_#001_要件

やったこと01 - リサーチ

リサーチとか大げさに言ってますが、ターゲットユーザーの属性にジルスチュアートとルミネが合ったので、その辺で好みをリサーチしました。
なんとなく淡くてコントラストが弱めだったり、文字のジャンプ率が小さめだったり、余白を大きく取ってたり。大文字の細めのフォント(しかもサンセリフ)にしがちだったり。

画像5

やったこと02 - リサーチ2

今度は、参考アプリと書いてあった部分で、インスタグラムとピンタレストの表示項目を調査。Twitterは今回写真を投稿するSNS想定だったので、違うなと思い端折りました。w
インスタグラムとピンタレスト共通で表示されている項目を洗い出してみました。

画像4

やったこと03 - 画面を作り込み

表示する項目を決めたので、次は画面を作り込んでいきます。
写真の表示領域を2カラムにするか3カラムにするか迷ったのですが、おしゃんな写真を大きく見たいかなと思って、2カラムに決めました。

あとは毎日使いたいってなってたので、飽きのこないシンプルな配色と、ジルとルミネのとこでリサーチした要素を取り入れてみました。(淡め、コントラスト弱め、ジャンプ率低め、おしゃんなフォント取り入れる)

あとはちょっと毎日の日記をつけるような感覚で写真を投稿してもいいんじゃないかなと思い、写真の上に日付を入れてみました。要らないかもなーと悩みましたが。。

そんなこんなで完成しました。作り込みがすごく時間がかかってしまった・・

Cocada!_DailyUI_#001_感想

最後に振り返ってみる

シンプルにしようと思いすぎて、ちょっとワイヤーちっくになってしまったので、ボタンのカラーとか少し変えても良かったかもしれないと思いました。

ターゲットユーザの好みのサイトとか参考にできそうなWebサイトをリサーチするのが結構楽しいし、そこから知れることがたくさんあるので、結構そのリサーチする時間が大切だなと思いました。

あと、余白のルールがぶれるのでどうにかしたい。w
(アイキャッチずれてたけど、もう直す元気がない)

今回のCocoda!のリンク
https://cocoda-design.com/daily-products/27059




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