Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?
@kana-t

UIの学習ツール「Cocoda!」をやってみた

More than 1 year has passed since last update.

アプリUIの学習ツール「Cocoda!」

アプリUIを実際に手を動かしながら身につけられる無料学習ツール「Cocoda!」をやってみました。

UIデザインやXdは前から触っていましたが、もっと幅を広げたいな〜と思っていたらちょうど良いのがあるじゃないですか!

Cocoda!サイト
https://cocoda-design.com/top
スクリーンショット 2019-03-28 15.58.51.png

実際に作ってみた

  • チュートリアル
  • UIを完成させよう
  • ECサイトの商品ページをデザインしよう
  • 名刺アプリの「ホーム画面」を改善しよう
  • 名刺アプリの「名刺詳細画面」を改善しよう
  • 名刺アプリの「名刺詳細編集画面」を改善しよう

今日始めたばかりなので、今のところ上の5項目しかできてませんが。。。

チュートリアル

Xdをダウンロードからはじまります。

Cocoda!のチュートリアル

Xdのチュートリアル

という感じの流れでした。

UIを完成させよう

Instagramのホーム画面のような見た目を説明を見ながら実際に自分で作ってみる。という感じです。

ECサイトの商品ページをデザインしよう

ここからはデザインから考えます。
いくつか架空の依頼主から要求があり、それに合わせてUIデザインをしていくような流れです。

ポイント

  • カラー表示を、ベースカラーと柄カラーで表示させた。
  • お気に入り機能
  • カートボタン

反省点

  • ボタンがイマイチ(もう少し大きくてもいいかな)
  • 詳細内容をもう少し左に寄せてもよかったな。

名刺アプリの「ホーム画面」を改善しよう

これもECページと同じ感じです。

ポイント

  • カメラで名刺を読み込む機能
  • +ボタンで新規手動登録

反省点

  • ありきたりなデザインになってしまった

名刺アプリの「名刺詳細画面」を改善しよう

「ホーム画面」の続きになります。

ポイント

  • 連絡先のアイコンを押すとメール画面やMAP画面が表示されるイメージ
  • ヘッダー右のアイコンで編集画面へ
  • ページしたの「削除」ボタンで情報の消去

反省点

  • ちょっと見づらい??
  • 名前にふりがな付けれたほうが良かった

名刺アプリの「名刺詳細編集画面」を改善しよう

これまた続きです。

ポイント

  • 名刺画像も再アップロードできる機能

反省点

  • 詳細画面と同じくふりがな入れる欄があってもよかった

良かった点

  • 実案件のようなリアルな課題形式で、ワクワクする
  • Xdを使うので、使い方も覚えられる
  • すでに同じ課題をやった他ユーザのUIデザインが見れるので参考になる
  • いいね!機能やコメント機能もあるので、モチベも上がる
  • 「今日のお題」で日替わりで課題があるので飽きなさそう

2、3時間程度でここまで出来たので、1日1課題やるのも良いかもしれませんね。

また新しい課題やって溜まったらアウトプットしようと思います。
ありがとうございました。

8
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
8
Help us understand the problem. What is going on with this article?