Cocoda!+と共に過ごした私の1ヶ月の歩み


初めましての方もそうじゃ無い方も、こんにちは!Erryと申します。初めてのnote投稿に少し緊張しています。

今回はCocoda!+で過ごした私の1ヶ月の活動と迷走と学びの記録を残そうと思います

こんな人もいるんだなーと気楽にみていただけたら嬉しいです。いたらないところがあればこそっと教えてください🙇‍♀️


そもそもCocoda!+とは?

Cocoda!、デザイン学習する人へのメンタリングサービス「Cocoda!+」を始めます。(https://note.mu/cocoda/n/nd40a184fa7df

Cocoda!を運営している株式会社almaで、Cocoda!のユーザーを始めとしたデザイン学習をしている人に向けて、1対1でのメンタリングをしてくれるサービス「Cocoda!+」(読:ここだぷらす)のことです。         


なんで参加しようと思ったの🤔?


私のことを簡単に説明すると現在印刷会社で働きながら2019年3月からUI/UXデザインの勉強をしています。学生時代にデザイン系学科に出てはいたものの自分にはセンスが無いし無理なんじゃないか…と諦めていたところもあってデザインとは少し離れた仕事につきました。でもやっぱりデザインやりたい!作りたい!🔥と意欲が湧いてきたのでデザイン業界について調べていた時にUI・UXデザインの存在を知って、課題の上流からデザインできるなんて面白そう!と思って勉強をはじめました。

本を読んだり、色々な人のnoteをみて真似てトレースをやってみたり、勉強仲間が欲しい!と思ってTwitterで勉強用アカウントを開設したり、Cocoda!の初心者入門編お題に挑戦したりしてました(ざっくりな説明ですいません 笑)


そんな時にTwitterでCocoda!+が始まると知り知りました。


フィードバックやメンタリングを無限にしてもらえる。         質問も無限にもらえる


無限という言葉に素直に惹かれてしまいました 笑           

自分が「これがいいと思う!」と思って作ったものもデザイナーや現場で働いている側からしたら「う〜ん?🤔」なイマイチなものかもしれない。でもcocoda!+でならフィードバックやメンタリングをしてもらえるので自分に何が足りないのか、どう改善していいか、方向性の核となる判断基準が見つかるのでは?と思い応募しました。


🏃‍♀️【当初の目標】🏃‍♀️

初回のメンタリング日より、4週間(28日間)がCocoda!+の期間でした。  (初回メンタリング日3/19~成果発表日4/24まで)

基本的にSlackでメンターの方と相談して週1でappear.inの方でオンライン面談をする流れです。

因みに私のメンタリングの担当はタクミ=カイさんでした🙏       

始めるときの私のLevelは「UIデザイナースキルレベル」で表すところの Lv.1のUIグラフィック力を鍛える「情報がわかりやすく、アプリっぽさがあるUIを作成できるようになる」が1ヶ月の目標でした。

スキルとしてもPhotoshop illustratorは簡単な図形を書いたり軽いレタッチができたりする程度、XDはCocoda!+に入る一週間前から触っていた程度です。

今回の製作はほぼXDで作業しました。


🏃‍♀️【取り組んだこと】🏃‍♀️

①UIトレース4サービス
②Daily Cocoda!5個とそれぞれFBを元にブラッシュアップ(day001~005)
③サービス設計お題2個

実際の流れは↓

1週目 トレース4サービス+Daily Cocoda! #001
2週目  Daily Cocoda! #002、003をやる+Day001、002、003のフィードバックを元にブラッシュアップ
3週目 サービス設計お題1つ+Day003ブラッシュアップ+Day004、Day005
4週目 サービス設計お題2つ目+day002、003のお題をブラッシュアップ
 
                              




①トレース

twitter、Pinterest、Wantedly Visit、Facebookのトレースを行いました。


(↑突っ込みどころ沢山あると思いますが直さずに取り組んでいた時の状態そのまま晒しますね。数値や考え方とか全然合ってないので自分で必ず測定、考察してください。。箱で考えるのができてなかった。。)


トレースするのにnote記事を色々読んで参考にしました↓(一部紹介します)

・UIトレースの学びを振り返る - キレイに真似るから次のステップ       (https://note.mu/masa8aru/n/n33e7a43841ac)             ・05 上達する方法は「模倣し盗む」、そして「作る」こと      (https://note.mu/design_school/n/nf97c3a3132a8?  magazine_key=m636b0cb71357)                   ・11 UIトレースの良さと足りないところ(https://note.mu/design_school/n/n23c8b008b9ca)           ・UI/UXデザイナーを目指す若手に知っておいて欲しいこと  (https://blog.tsubotax.com/n/n30a70afd1f0c)

できるだけ毎日手を動かして作ろう!とのことから一日1サービスをトレースしたのですが、ものすごく時間がかかりました…。(20:00に取り掛かって25:00に終わるなんて日もありました…)

XDの使い方が分からずに「影ってどうやってつけるの!?」とか「グラデーションってつけられるの!?」と一個一個調べながらやっていたせいですね😅

最初は正直にいうとトレースする意図がよく分からないまま見よう見まねで作っていたのですが何かしら一つでも多く理解したい!と思って余白感が知りたくって寸法を測ってみたり、アイコンも作ったり、実際にアプリを動かして気付いたことを箇条書きで書いて見たりしました。

トレースするのが3、4個目になったあたりから比較するものが出てきた時にやっと「こことここが同じ寸法だ!」とか「基本的に偶数が使われている!」とか気づきがありました。

それぞれのサービスのガイドラインも読んだのですが、Twitterの鳥のデータって配布されてるんだ!とかPinterestの赤って Pinterest Red(Pinterest レッド)って名前ついてるんだ!とか面白いです。


他のトレースしている方達のようにゴリゴリの考察するまでにはたどり着けなかったのですが自分的にはXDの操作に抵抗感が減ったのと作ることの達成感を感じれたのが大きかったと思いました。



追記

トレースは箱で考えるのが良いみたいです…!

未来の自分が感謝する!適切なレイアウトを意識したUIトレース方法https://note.mu/k_aoym/n/n8828e08749cd


すごく丁寧に書かれていて、参考になりました!

cocoda!+期間中に箱の概念は教えていただいてましたが、私の理解不足で習得できてなかったのと、このnoteをみた方達が私の滅茶苦茶なトレース方法を真似してしまっていたことでご迷惑をかけてしまい申し訳ありません。


できてないところが分かったので(できてないところだらけですが)これから益々改善、勉強頑張ります!ありがとうございます!




②Daily Cocoda!をFBをもらいそれを元にブラッシュアップ


2週目からはDaily Cocoda!を進めつつフィードバックをもらってそれをまた作り直すという作業を行いました。


旧データ→新データ

作ったものと簡単な説明↓

Daily Cocoda!001。プロフィール画面

日常の写真をおしゃれにUPできるSNSだったので写真をメインに中央に配置し、カテゴリ分けがあったら写真が苦手な人でもまとまって綺麗に見えるのでは?と思いカテゴリ別に表示できるように作りました。


↑Day002。新規登録画面

新規登録画面とのことで登録するまでそのアプリ・サイトが使用できないため登録する前に登録した後のことがわかるように、ちゃんとレコメンド機能があることを表示した。


↑Day003メッセージ画面

コンセプト:ビジネスシーンでも使えるチャットアプリだったので、ビジネスでの会話だとどうしても会話内容が長くなりがちなのと情報共有をしたいと思うのでlineやmessengerの様な会話形式の画面は辞めslackの様な縦に並ぶリスト形にました。


Daily Cocoda!に取り掛かるまで正直に言うと本当に私みたいな初心者がCocoda!+入ってよかったのかな?もっと勉強してから入った方がよかったんじゃないかな?とかTwitterで色々な人が毎日更新されているのを見ていて毎日作ってる凄い!それに比べて私は…と落ち込むことがありました。(Slackの方は鍵がかかっていたのでCocoda!+参加者がどういった進捗で進めているかは分からない状態でした。)

でも見るべきものは自分自身と言い聞かせてやるからには徹底的にokがもらえるまで作ろう!と思ってFBもらうごとに作り直しました。

2回目の直しを送ったあたりから「私相当しつこいのでは🤔?」と思いはじめましたが(本当にすいません)毎回すごく丁寧なFBを頂けるのでデザイナー視点をインプットするんだー!🔥と自分を鼓舞していました。




(字が凄く汚い…)                          後半になるとFBも似ているところに指摘をいただくので自分なりに注意されやすいところのチェックリストを作って確認してました。

何回も作り直すことによって自分でもビジュアルがスッキリ見やすくなったなと感じます。整列や文字に優劣をつけるだけでも雰囲気が変わりました。実際に自分で作って組んで見たら思っていたよりも、どこに配置するか、形は大きさはどうするかが難しくって、一個一個に集中していたら今度はバランス感や目立たせたいところがぼやけて行ったので全体を引いてみるのも必要なんだと思いました。

一通り終わった後にCocoda!の「初級編 - UIグラフィックの基礎を網羅しようーデザイン4原則とは何かを知ろう」を行ったらより理解が深まった感じがしました。

あと凄くためになったのはAppleのガイドラインやMaterial Designです。これを読んだらUIデザインの意識が変わりました。英語で書かれていますが、私はGoogle Chromeの翻訳ツールを使い読みました。全部読みきれてないのですが、作ろうとしているもののガイドラインを読んでみて参考にしつつDailyCocoda!をするという流れで使ってます💡



③サービス設計お題


後半2週間はDailyCocoda!をやりつつサービス設計お題を行いました。

残りの2週間で何が知りたいか考えた時に核となる思考方法やデザインの基礎的部分を鍛えたいと思ったからです。


ユーザー整理の考え方からプロトタイプに落とし込むまでを行いました。

まだ改良途中ですが💦「作業がしやすいカフェ(場所)が見つかるサービス」と「同僚のカレンダーを同期して、お互いが空いている日程に、予定を入れられる機能を設計」を作りました。


「作業がしやすいカフェ(場所)が見つかるサービス」

IT界隈の20代男性はいつも安定のスタバに行ってマンネリ気味。かつ混んでいてwifiも繋がらないので新しい作業に適した場所を簡単に探したいが想定でした。

そのことからコワーキングスペースを探せるサービスにしました。コワーキングスペースを調べていたら月額支払いのメンバー制か時間支払いのドロップイン制があることがわかったが、月額制に入ってしまうと新しいものに出会って気分を変えることができなくなるのでは?と思い、「ドロップイン制があるお店を紹介してくれるサービス」と仮定して考えました


同僚のカレンダーを同期して、お互いが空いている日程に、予定を入れられる機能を設計

職場の人たちとGWにBBQを行うことになった。幹事を任された奏子と同僚は場所取りや買い出しを行うために事前に打ち合わせをしたいが、職種が医師で緊急の予定が入ったり、時間が不規則だったりで予定が立ちにくい。なのでお互いが空いている日程に予定をいれられるサービスがあったらいいなと考えている。と仮定して作りました。(小ネタですが作業が多いと思ってサ行を多くしました。。どうでもいい情熱。。)


長くなってしまうのでサービス設計は詳しくはまた別でまとめようと思います。。

作業しやすい場所が見つかるサービスの方を先に作ったのですが、何から作ればいいのか?、必要な情報は?などなど迷走しまくってブレブレな状態で作りました。

それを踏まえてお互いが空いている日程に、予定を入れられる機能の方は教えて頂いたステートメントシートを使って作ったのですが考えがまとまって何を作るべきか、作らなくていいかがわかって、作っている途中も見返すことで気持ち的にブレずに意志も固まって作れたと思いました。設計お題はビジュアル面よりもなぜそう設計したかを決めないとブレブレになりましたが逆に言えばちゃんと細かく決めればそれだけユーザーに刺さる設計ができそう!と思いました。

直感的に使えるかやユーザーに刺さるサービスにはまだ遠いしサービス全体を考えるのも正直難しいって思いましたがその分やりごたえと楽しさがあってもっと次はこうしてみよう!とか自分に足りないことに気づけました🔥


【👻成果発表会👻】


最後の週で成果発表会がありました。ここで初めて各々がどういう進捗で作業してたのかわかったのですが、Cocoda!+に参加されていたみなさん熱量が凄くていい刺激になりました⚡️オンライン場でのミートアップでしたが最後にお会いできて嬉しかったです。

最後にはなんと修了証まで頂きました🙏🙏🙏              可愛すぎませんか!?(お化けの所は本名を隠してます 笑)

この修了証はメンターの方からのメッセージ付きなんです…!(私だけの宝物😎)修了証を頂けるなんて思っていなくてかなり嬉しかったです。。結構うるっときました。。😭



🔥【まとめ】🔥

知らなかったことをたくさん知れた学びの多い1ヶ月でした。始める前はふわっとした不安がずっと頭にあったのですが、終わった今はあの不安は自分が行動していないが故の不安だったんだなと思いました。

デザインはビジュアル面を気にしがちですが設計やユーザー視点で考えることもが大切なんだと改めて思いました。

今後の個人的目標は終わっていないサービス設計お題を形にする
のとdailycocoda!も引き続き作っていこうと思います。


私はこんなやり方で学んできましたが毎日コツコツDaily Cocoda!に取り組んでいた方、コンセプトやユーザー設定から細かく考えて作られた方など様々な方法でみなさん学ばれていました。

同じ参加者の方がnoteを書かれたのでこちらもぜひ読んでみてください💡

mayaさん


ミユキさん


最後にメンターをしてくださったカイさん。いつも細やかなFBをして頂きありがとうございました。私の方こそ至らない所だらけでしたが一緒にCocoda!+をできて嬉しかったです!

そしてCocoda!の運営の方々、素敵なサービスをありがとうございます!

一期生のみなさん、間接的にですが繋がりをもてて嬉しかったです。

Twitterで私と関わって頂いた方達、みなさんが素敵作品をバシバシあげていたので自分も頑張らねば…!とモチベーションが保てました!ありがとうございます


まだまだ私は勉強を始めたばかりだし絶賛転職活動中ですが引き続き勉強を頑張っていこうと思うのでみなさんこれからもよろしくお願いします!

読んで頂きありがとうございました!

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

嬉しいです🙏
18

Erry

現在印刷会社で働きながらUI/UXデザインの勉強をしています。94年生まれ。 犬の頭の匂いとお笑いと舞台が好きです 。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。