この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
デザイン勉強中のアシスタントデザイナー、秋田です！
UI設計って何・・・？
からスタートした私。
そんな私に先輩デザイナーが教えてくれたのが【Cocoda!】です。
Cocoda!って何？
Cocoda!とは、モバイルアプリやWebサイトなどのUI設計を実践的に学べる無料の学習サービスです。
Cocoda!には大きく2つ、【基礎トレーニング】と【Daily Cocoda!】というお題があります。Daily Cocoda!は比較的ツールの操作や、UI設計に慣れている中級者以上向けかなと思います。
本記事では、私の取り組んだ【基礎トレーニング】についてご紹介をします！
基礎トレーニング
その名の通り、初心者向けのお題。今回私が取り組んだものです！
デザインのポイントが丁寧に記載されていたり、色やサイズ、パーツの配置位置など細かいビジュアルの指定もあるため、設計力・ビジュアルの表現力を身につけていくことができます。
Cocoda!の基礎トレーニングのデザインカリキュラムは全部で7つ。
- はじめてのデザイン
- UIデザインをはじめよう
- デザイン4原則
- レイアウト
- ガイドライン
- マイクロインタラクション
- 情報設計
（一つのカリキュラムごとに各3,4章程お題があるので、数えたところ全部で21点作成します）
こちらが実際に作成したものです！
「UIデザイナーになりたいけれど、何から始めたらいいのかわからない」という初心者の方に特におすすめです！簡単なところからスタートし徐々に難易度が上がっていくため、無理なく進められます！
作成の流れ
作成の流れを一つ、具体的にご紹介します。
左側の【基礎から学べる】を選択したページです。（Cocoda!ページをスクショして引用しています。）
カリキュラムは左上から順番に進めていくの良いと思います！
こちらは【まずはここから！はじめてのデザイン】ページです。
一番最初は名刺の作成からスタート！
ステップごとに、作成手順やポイントを丁寧に教えてくれます。また、動画での説明もついていてとてもわかりやすいです。
こちらはsketchでの実際の制作画面です！Cocoda!の手順に沿って、作成しました。
Cocoda!サイトと、デザインツールを行ったり来たりしながら制作を進めます。
基礎トレーニングで学んだ３つのこと
①UIデザインツールの基本操作
- Sketch
- XD
- Figma
これらはUIをデザインをする上で主に使われているツールです。
Cocoda!トレーニングで使用する素材のダウンロードはXDファイルです。クラスメソッドではSketchを使用することが多いので私はSketchでの制作をしました！
Cocoda!の基礎トレーニングは、色やサイズなど細かいビジュアルの指定があるため、自然とツールを隅々まで触ることになります。作成を進めるうちに基本操作は習得できました！
②UI設計のポイント
- 余白の取り方
- 必ず4原則を意識する
- デザインは情報解決の手段
- ユーザー視点、ユーザーが迷わない設計の重要性
- 情報のまとまりを意識し、統一させること
もちろんこれが全てではありませんが、未経験の私には多くの学びでした。
③実案件で必要となる具体的な留意点
- 画面内で同じ振る舞いをする部品は空白やサイズを統一する（実装するエンジニアが迷わないよう）
- ガイドラインを意識してデザインする（iOS、Androidそれぞれのガイドラインに沿う）
- 小数点を極力出さない（見た目にぼやけるのと、小数点数値はプログラマが困る）
- アイコンはベクターを使用すること（.svgだと数値の変更で色や形をエンジニアさん側で変更が可能で、柔軟な対応ができる）
上記は、Cocoda!の基礎トレーニングには表記ありません。基礎トレーニングでの取り組みを通して先輩デザイナーから頂いたフィードバックです。
Cocoda!の基礎トレーニングを通して実践で生きる具体的な学びにも繋がりました。
Cocoda!の素晴らしいところ
お題、素材が用意されている点
未経験だと何から始めていいのかそもそも分からなくて腰が重いですよね。Cocoda!は作成するものが決まっていて素材も用意されているものを使用するので、気軽に始められます！基礎トレーニングは、一から自分で考えるというよりも、ツールの使い方に慣れたり形を整えたりと、初歩な部分に集中して取り組むことができました。また、お手本となるXDファイルが用意されているため、わからない時はそちらを確認することもできます！
ポートフォリオができる点
作品を完成させると、【投稿する】ことができます。マイページで今まで自分が作ったものを一覧することもできます。それら全てがポートフォリオになるため、勉強しながらポートフォリオが溜まっていく仕組みです。一石二鳥でとても素晴らしいと思います！
UIデザインの基礎を知れる点
どういう考え方でデザインするのか、ユーザーのためにどこに気を配るのかなど、UIデザインにおける必要な考え方やポイントを重視していてとても勉強になりました。作り方の手順だけのサイトでは、得られない学びがあります！
やってみた感想
UI設計についての知識ゼロからスタートの私ですが、基礎トレーニングを全て終えて思います。
「やってよかった・・・！！！」
実際に手を動かすことでしか得られない学びでした。また【お題の通り忠実に作る】ことがこんなにも難しいのかと思い知りました。確認不足や詰めの甘さを実感したので、自分の課題として改善していけるよう努力したいと思います。自分の足りない課題もたくさん発見することができ、改めて取り組んでよかったです！
私は基礎トレーニングが完了したので、次はDaily Cocoda!に取り組みます！
UIデザインを勉強したい！という初心者の方に【Cocoda!】おすすめします。