見出し画像

デザイン未経験からDaily Cocoda!やってみた!#001

こんにちは!
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デザイン作成することで意識するところが分かったし、お題や情報が与えられているので作りやすかった。

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


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

5

mai.watanabe( まいまい )

プログラマーからUI/UXディレクターに。 大学時代に留学と海外インターン、バックパッカーを経験。 休みの日は社会人ながらもヒッチハイクをしたり遠出をしたり アクティブに過ごしています! 趣味はランニングで、マラソン4回完走。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。