Cocoda!β版 0からデザインを学ぶ(2)

今回からトレースのコースをやっていこうと思います。感想の意見として

• 全くデザインについて知らない初心者
• 同系統の他サービスを利用(主にProgate)

といった視点で書いていこうと思います。

まずはbosyuのUIトレースのコースをやろうと思います。

トレースのコースではすぐにトレースを始めるのではなく、bosyuに関する説明、またデザインの前準備の説明があります。そして実際にサイトを触ってみてサイトの構造についてまとめ、気づいたことや感じたことを書くといったことをします。一度触ることで感覚的にデザインを知ることができるため、デザインを学ぶ上では大切だと思うのですが、最初に構造をまとめて、感想を書いてと言われても何も思い浮かばなかったです...。（というよりそもそも何を募集することがなかった...）

なのではじめの方はさらっと読むだけにして、トレースに入ろうと思います。

このコースで最初にトレースする画像はこちら。

最初に見本画像をダウンロードできるのですが、この画像とは違っていました。動画の説明ではこちらの画像を使っていたので多分こっちであってるのでしょう

コースの中では動画によるトレースのやり方の説明、アクションのポイントとして主な流れ、デザイナーさんからのワンポイントアドバイスなどが書いてあります。

動画では目標のものを作るまでの工程が見れるので分かりやすいのですが、文字や言葉の説明がないので、どのボタンを押したらいいかというのもなんとなくでしか分かりません。例えば、途中の工程で角の丸い四角を作るのですが、そのやり方などの説明はないので自力で調べて作りました。(radiusという項目を弄ると角を丸く出来るみたい)

あと一つつまづいたのが、作った図形が背景の後ろに回りこむ問題。色々やってわかったのはこの左に並んでるのは図形の上下関係のこともいっているんですね。上にやりたいものは位置を上にずらすことで隠れなくなりました。

図形の大まかなトレースをしたら次は文字のトレース。文字の書体や大きさ、行間などを考慮しながら同じものを作っていきます。ここでも動画で工程を詳しく説明しているのですが、自分の今のバージョンが違うせいか、画面構成が違い、同じようにできない。文字の厚さみたいなのどうやって設定するんですかね......。

あと思ったのが前の工程を見るにはホームに戻ってまたコースを選ばないと見れないということ。どこかポチッと押してすぐ戻れたらいいなと思いました。

なんか文句ばっかりいっているような気がしますが、β版で色々意見を集めているということで思ったことをつらつらやりながら書いていきました。

まだまだ時間かかりそうなのでとりあえず今回はここまでにします。もっとさっさとトレースできるようになりたいです。では、また。