こんにちは！
Webディレクターをしていて、デザイン分野も勉強したいな、と思って
Daily Cocoda! やってみたお話です。

ワイヤーフレームまでは仕事でやっていますが、デザインをするのは初めてになります！

Daily Cocoda!とは

UIデザインを学びたい人向けのサービス Cocoda! から毎日お題が与えられ、そのデザインをアウトプットするというものになります。

Cocoda!上の架空の依頼に取り組むことでUIデザイナーに求められるユーザーを意識した設計力・ビジュアルの表現力を身につけていくことができます。

何のデザインをするのか、最初は分からないと思います。お題があって、他のユーザーのアウトプットも見ることができるので、学びも大きかったです。

Daily Cocoda!に挑戦

最初のお題は「プロフィール画像」
ターゲット、コンセプト、雰囲気、参考アプリが指定されています。

1. 情報を整理して、構成を考える
日常の写真をUPするSNS・・・気軽さがあった方がいいよね、STORYの機能を入れようというような感じで、与えられた情報から構成を考えていきました。

2.手書きでラフを書く
以下のように、簡単なラフを書きました！

手書きのものに加えて、作っていくうちにあれも必要？ってなって以下のようなコンテンツになっていました！

ユーザーネーム
ハンバーガーメニュー
名前
文章
プロフィール画像
投稿数
フォロワー/フォロー数
STORY
画像
HOMEボタン
検索ボタン
UPボタン
新着ボタン
プロフィールボタン

3.実際に作成
Adobe XDを使用して作成。XDは無料でも使用することができるので、初めてデザインする方でもおすすめです。

こんな感じで、完成！！

POPなイメージを出したくて、丸っぽくしてみたり、カラーを明るい緑色にして、男性にも使ってもらえるように工夫しました！！

4.Cocoda!に投稿

投稿したデザインはフィードに掲載されて、リアクションやコメントが送りあえます。

Cocoda!をやってみて

仕事でもかなり使っているXDを使ってみたので、そこまで「難しい」ってならなかったけど、「フォントと余白」が大事ってデザインしながら気づけた。

途中、おしゃれではあるけど、本当にPOPで可愛い？？？っていう状態になって、かっこよかったフォントを変更。全体的に丸いデザインにすることでPOP、可愛いようなデザインになったかなと思う。

 POPなフォント、かっこいいフォントはこれだ！と言えるように引き出しをあらかじめ作っておくといいかも。

「ほんとに、フォント。」「けっきょく、よはく。」は読んでおいた方が良さそう。

1回軽く作って、遠目から見て、「本当にクライアントが求めているもの？」と問いを投げて、なんどもその問いに応えていくことが大事だな、と実感。

XDだとフォントが限られているので、Photoshopで作り直して、もっと本格的なデザインに近づけようと思う。

Cocoda!の存在は結構前から知ってたけど、ちゃんと向き合ってやってみて、UIデザイン作成することで意識するところが分かったし、お題や情報が与えられているので作りやすかった。

これからもどんどんお題に取り組んでいこうと思います💪💪💪