現役UIデザイナーが徹底解説!2019.11.1882views初めまして!UIデザイナーになって1年半ほど、気持ちはいつでもフレッシュな粒木です。業務を行うかたわら、最近インプットが足りないかも、仕事以外でも何か作りたいな〜と悶々としていましたが、それを解決するために、しばらく前から「Cocoda!」というものを始めてみました。今回はそのCocoda!について、サービスの概要から実践例、続けるコツなどを粒木の実体験に基づいてご紹介します。いざ投稿!まとめCocoda!とは?Cocoda!とは、UIが学べる無料の学習サービスです。お題に沿ってデザインを作り、実際に手を動かしながらUIデザインのスキルを身につけられます。「自分のデザインスキルを高めたい」「ポートフォリオを充実させたい」と思っている中級以上の方にもおすすめです。その名の通り、初心者向けのお題です。XDやSketchといったツールに慣れることができます。Cocoda!」は、「音楽アプリの再生画面」「フードデリバリーアプリのリスト画面」などといった一つの具体的な画面をサクッと作成するお題で、毎日1題クリアするのが目標です。(粒木は毎日続けるのが難しいので、1〜2週に1題のペースでゆるゆるとやっています。難易度的には、最低限ツールに慣れてからの挑戦が良いかと思います。企業とコラボしてデザインを考える「スペシャル依頼」もあります。Cocoda!をやる3つのメリット粒木がCocoda!をやってみて感じたメリットは以下の3つです。1UIの引き出しが増える、UIのトレンドを知ることができるお題はいつも、競合のサービスを調べるところから始まります。普段使わないサービスはなかなか調べないものです。普段使わないサービスも調べることになり、自然とUIの引き出しが増えていきます。続けていくことでUIのトレンドにも敏感になることができます。Challengeと比較されますが、お題ごとに「誰向けか」、「コンセプト」など細かい設定がすでに決まっているのがCocoda!の良いところです。毎回、自分でターゲットを一から考える必要がないので、ハードルが下がって続けやすいと思います。3気づいたらポートフォリオができているデザイナーとして働く上で必要なものといえば、ポートフォリオ。何を作ったら良いのか迷う方も多いと思います。会社によっては作品をポートフォリオに載せられないこともありますよね。Cocoda!では、前述のように決められたお題があるため、お題を進めていくことで自然にポートフォリオが充実していきます。何を作ったら良いのかわからない......と悩む必要もありません。「UIの引き出しを増やす」、「自分が使いたいと思うポイントを1つは練り込む」という2点を目標にしています。「ツールに慣れる」、「画面遷移を重視する」などなんでもいいので自分なりの目標を持って始めると効果的かと思います。実際の製作過程や制作物の一部をご紹介します。今回は「天気予報アプリのアイコン」を製作します。ふむふむ、今回は「高校生」がターゲットで「ポップ・たのしい」雰囲気ですね。作るのはアイコン...アイコンだけで「毎日確認したくなるような」を伝えるの、けっこう難しいのでは...?どんなサービスかも合わせて伝えたいと思ったので、中の画面もあわせて作ることにしました。「毎日確認したくなるような」仕掛けが欲しいと思ったので、この時点で育成や何かのゲーム性を加えたいなとふんわり考えました。サービスの内容を考えるこうしてイメージが湧いてきたところで、下調べの時間です。Cocoda!では他の人が投稿した作品も見られるので、ぜひ見てみましょう。今回はiPhone標準の天気アプリや「Yahoo!天気アプリ」、「tenki.jp」といった他のサービスに目を通し、さらにPinterestやDribbbleといったサイトで参考にしたいと思うデザインを探しました。ゲーム性を加えるという点では、「Mountain」と「アビスリウム」というアプリを参考にしています。どちらも山や海底に様々な変化が現れ、グラフィックの美しさや小動物の動きのおかげで飽きずに眺めていられるところを真似したいと思いました。今回は「山を眺めて毎日の天気の変化を楽しめるアプリ」を目指すことにしました。3情報設計iPhone標準の天気アプリを参考に、中心に大きく山を追加しています。下に今後の天気の変化を載せることで、あと「○時間後には雨が降るからもう一回見てみようかな」と、アプリを再度開かせたくなる仕組みを練りこみました。場所によって山の形が違ったり、時間によって出てくる動物が変わったら楽しいと思ったので、イラストは2パターン作ることにしました。4ツールを使ってデザインここからはざくざく作っていきます。XDに不慣れだったため、UIデザインはSketchで行いました。Illustratorで製作しています。自動アニメーションの機能で地道にアニメーションを加えていきます。う、動いた〜〜〜〜〜〜〜〜!(感動)いやー、プロトタイプで動くようになった時が一番感動します。いざ投稿!完成したら早速Cocoda!に投稿しましょう。画面の画像をそのまま貼るよりも、投稿用にモックや背景を加えた画像を作ると、よりデザインの世界観が伝わりやすく、完成度も高く見えます。感想だけでなく、デザインの意図やターゲット、想定ユースケースなども記入するといいでしょう。Cocoda!だけでなく、TwitterやInstagramに投稿するのもおすすめです。ハッシュタグをつければ、同じようにCocoda!に取り組んでいる人たちと交流するチャンスにも。Cocoda!の講評チャンネルがあります。先輩デザイナーの方々から的確なアドバイスをもらえ、さらに他の人の作品も見られるので、自分もがんばらなければ...!とやる気にも繋がっています。@nijibox_jpCONTACTお仕事のご相談はこちらからお気軽にお問い合わせください。