Cocoda!を使ってデザインの勉強をしました。

こんにちは、きなこです！
ここ最近、学校が始まりデザインを自由にする時間が減ってきたことからデザインスキルを高めたいという欲が今まで以上に高まっております。

そこで今回は、自分のデザイナーとしてのスキルを高めると共にポートフォリオの作品を増やそうと考え、Cocoda!というサービスを使って架空のアプリ作りにチャレンジしてみました。

Cocoda!とは

www.cocoda-design.com
用意されたお題(架空の依頼)に取り組んでアプリなどのデザインを行うだけで、ポートフォリオが充実する&デザインスキルが高まるという素敵なサービスです。
無料登録するだけで始めることが出来ます。

やってみた

ログインするとこんな感じでお題が表示されます。ワクワクしますね！

私は今回、「髪を切った時の記録ができるアプリを作って！」というお題に取り組みました。

概要の把握&アプリの設計(35分くらいかかった)

お題の詳細画面に入るとこんな感じで依頼主と依頼詳細が表示されます。

依頼取り組みページには、依頼主の詳細プロフィールと作成して欲しいもの、類似サービスが書かれているのでイメージしやすくなっています。 また、制作の目安時間（設計:45分、デザイン:45分）が設けられているため、終わりの目処が立てやすくて使いやすいなぁと思いました。

そして、ページの下の方にはお題の進め方があるので、こちらに沿って取り組むだけで簡単に作成することが出来ちゃいます。

機能の決定

こんな感じでメモ帳に思いつく限りの機能を書いていきます。

実はこのアプリの目的は「以前のヘアスタイルをわかりやすく伝えること」だったのですが、なんと作成中に自分の中で「なりたいヘアスタイルをわかりやすく伝えること」に変わってたみたいです…。

時間の間隔を空けて取り組んだことで記憶が抜けて、本来の目的から軸がブレてしまったため、次はちゃんと時間に余裕がある時に一気にやろうと思います💦

ここからMVPの機能を絞って機能決定していきます。

アプリの設計

そして、出来上がったワイヤーフレームがこちら↓

これを元にXDでプロトタイプを作っていきます。

デザイン(80分くらいかかった)

ここで一部の画面のワイヤーフレームを作り忘れていたことに気付き、足りない画面はその都度よしなに作っていくことにしました。グダグダ…。

こんな感じで各画面のデザインが完成しました。

インスタを使っている10代女性がターゲットだったので、キレイでオシャレな配色とUIを意識しつつ、使いやすくわかりやすいアプリになるように作りました。

また、Cocoda!で設定されている時間よりも大幅にオーバーしてしまったのですが、自分の気が済むまで取り組んで完成させました。笑

まとめ

Cocoda!に取り組むとデザインのスキルに加えて、UXDや機能設計のスキルも高めることが出来ます。
考える力が付くので、成長してることを実感しやすいかと思います。

また、依頼人と依頼詳細だけ見てターゲットの絞り込みや目標設定から取り組んでみても楽しいかもしれませんね！

デザイナーになりたい、デザインが好きな人にはぜひ一度やってもらいたいなと思います。
それでは、きなこでした！