見出し画像

【UIデザイン】8月に学んだこと

Yu

こんにちは！こんばんは！
8月の中旬頃から、UIデザインなどの勉強をし始めたので、8月の学習内容をまとめたいと思います。

  1. UIトレース

  2. Daily UI課題

  3. 書籍

8月に主に取り組んだ内容として、上記の3点になるかなと思います。基礎中の基礎を固めるといった意味ではかなり役に立つ学習内容になりました。


1. UIトレース

UI/UXの学習を始めるにあたり、何をすればよいかと考えた時にツールの使い方の学習やUIトレースが思い浮かびました。ツールに関しては、photoshopやIllustrator、XD、Figmaなどは一通り業務で扱ったことがあるため、改めて学ぶ必要はなく、制作しながら学んでいけばよいと思ったので、UIトレースから行うことにしました。

私が行ったトレースはモバイルアプリがメインで、インスタグラム、メルカリ、Spotifyのトレースを8月中に行いました。（iOSの画面です。）

spotifyのトレース画面

上の画像が実際にトレースを行った時の制作物になります。トレースのやり方としては、まずは単純にiPhoneでスクリーンショットを撮り、それをfigmaに持ってきてトレースをする方法です。
ここでの学ぶ目的としては、普段自分が使っている有名アプリはどれぐらいのフォントサイズ、余白、ボタンの大きさを取っているかです。

フォントサイズ

まずはフォントサイズですが、3アプリを通して11pxが最小サイズとなっていたことが共通点としてありました。これはアプリとは別の話になりますが、Google Chromeでは10px以下は指定できないみたいなことがあるので、アプリも同様に10pxを切るというサイズはあまり好ましくないのだとわかりました。
さらに、各アプリの最大フォントサイズはインスタ 13px(タイムライン画面)、メルカリ 17px、Spotify 24pxとなっていました。
読ませるテキストのサイズは12px〜14pxが多い印象でした。
このように3のアプリのトレースをするだけでも、最小、最大、読ませたいテキストサイズを読み取ることができ、今後自分がアプリデザインをする時の参考になりそうだと思い、かなりの学びに繋がりました。
個人的には、Spotifyのフォントサイズの使用感がとても見やすく感じ、見出しのサイズが大きく、各セクションがはっきりしている印象を受けました。

余白

余白については、やはりよく言われている8の倍数で取られていることがモバイルアプリにおいても多い印象です。（トレースの質が悪くて、8の倍数にならない部分もありますが、、）
あとは、必要に応じて、4pxや12px、20pxも多かった気がします。ボタン内のpaddingなどは奇数になって仕方ない場面はあると思いますが、やはり各要素間（margin）は8の倍数または偶数で統一する方が良さそうです。
実際に8の倍数で余白は取るという決まりを作った方がデザインもコーディングもやりやすいかもしれないですね。

ボタンサイズ

ボタンサイズは今回のトレースでボタンというボタンは出てこなかったのですが、44px × 44px以上が良いと考えました。（もちろん下回っているものも存在するので、例外もあると思いますが。）
実際に、Appleの開発者サイトでは44pt × 44pt以上を推奨しています。また、Material Designのサイトでは48dp × 48dp以上となっていました。ptとdtですが、Web上では1pt=1px、1dp=1pxと考えても問題ないのかなと思います。（印刷物だとかなり違ってくると思いますが。）
この辺のdpやptも今後詳しく学べたらと思います。詳しい方がいましたら、教えていただけると嬉しいです！


2. Daily UI

UIトレースだけでは、成長のスピードが遅いので、自分で考えてできるアウトプットとして、Daily UIからのお題に取り組みました。（毎日はできていないですが、、、）
Daily UIは大きなテーマをくれるので、何をデザインしようか迷わないところがとても良いです。
8月中旬から取り組んだ画面数として、下記の4画面のデザインを作成しました。

  • Sign up

  • Credit card check out

  • Calculator

  • User profile

8月の制作物

Daily UIでは、大きなテーマだけ決まっており、あとは自由なので自分で詳細を決めて取り組めることが大きな学びに繋がると思います。
Daily UIに取り組むにあたり実行するステップは3ステップになります。

  1. 【詳細を決める】

  2. 【UI調査】

  3. 【デザイン作成】

1. 【詳細を決める】

ここでいう【詳細を決める】とは、SignUp画面を例にするとこんな感じになります。
どんなサービスのSignUp画面か、どんな人が扱うことが予想されるかということを考えます。
むやみに、SignUp画面を作ってしまうとただ単にデザインのかっこいいものになってしまい、使いやすさなどが反映されない可能性があります。そのために一番最初に詳細を決めることを意識しました。
実務になってくるとどんなアプリかやコンセプトなどが最初に決まっていると思うので、このステップを踏むことは必須かなと思います。

2. 【UI調査】

これは単純に世の中にはどんなSignUp画面があるのかを観察するために行っています。
実際に普段使っているアプリのUIを見てみたり、MobbinやDribbbleなどのサイトを見に行ったりします。
UI調査を行うと、それぞれの画面で共通する部分や逆にそれぞれの画面で違う部分が見えてきたりするので、どうUIを組み立てるべきかがわかってきます。
単純に見るだけではなく、なぜこれはここに配置されているのか？などという疑問を持ちながら、調査をすることが今の自分には大切だと思っているので、それを心掛けています。

3. 【デザイン作成】

このステップでは、figmaを使いデザインを組み立てていきます。
基本的に制限時間を設けて取り組むことを意識しています。
短時間で良いものを作る癖をつけたいと思い、制限時間を設けることを決めました。
デザイン作成で、気をつけている観点としては、UIトレースで学んだ余白の使い方、フォントサイズ、他オブジェクトのサイズなどを意識しています。
あと大切だと思っているのが、エンジニアのことを考えてデザインすることです。自分は仕事でコードを書くことがあり、コードへの理解がある程度あるため、ここは簡単そうに見えて、コードで実現するのは少し工数がかかりそうだなというものをできるだけなくす意識などを持ってデザインすることを意識しています。

Daily UIに取り組めば、他のアプリのUIをしっかりとインプットして、すぐにそれをアウトプットできるのでとてもやりがいがあると思います。
また、各画面にはどのような情報が必須でどう配置している場合が多いかなど、より実践的な内容を学べる機会に繋がっています。

少し長くなってきたので、8月に読んだ書籍についてはまた別でまとめたいと思います。
読んでいただき、ありがとうございました！

この記事が気に入ったらサポートをしてみませんか？