見出し画像

【UIデザイン学習】見た目のUIシステムを使ってホームUIをリデザイン

katomi

こんにちは！
今日は前回に続き #BONO のUIビジュアル基礎のTRY「ホームUIをリデザイン！」で行なったことをまとめていきます。


はじめに〜学びのポイント〜

今回のリデザインで学ぶポイントは下記の３点です。

見た目のキホン

自分なりにTRYに取り組む前に今回のゴールで目指すべき学びは下記と解釈しました。

「UIのシステム化つまり、配色やフォント、余白など一定のデザインの決まりをまず作成しそれをライブラリやコンポーネントで登録し使い回すことで、統一感のあるビジュアルに仕上げる。」

１. 今回のお題（TRY）の振り返りと自分の解釈

■誰が・何のための画面か？

対象：デザイン学習中の人
目的：学習記録を動画に残すこと
用途：プレゼンや言語化の練習のために投稿する
機能(want)：投稿された動画が一覧でみられる

■誰にどんな風に活用して欲しい？

  • 誰（どんなデザイン学習者の人か？）
    →頭が硬く、真面目だけど本来のデザインの楽しさや遊び心がなくなってしまっている人

  • どう活用して欲しい（制作側の想い）
    →もっと肩の力を抜いて、交流や学習の楽しさを見つけ、ポジティブな気持ちになれる為に活用してほしい

■UI制作に含む情報（機能）

お題の詳細

■使う見た目の”キホン”

①ビジュアルシステムを制作してUIを作る
②コンポーネントを活用し、構造・優先度を意識してUIを作る
③デザインデータを設定した値で制作する

上記のお題の詳細を理解した上で取り組んでいきました。

2. BeforeのNGな点を見つけてリデザインする

下記の画像がリデザイン前のデザイン。私が気づいた良くないと思う点はこちらです。大きくこの３点に注目してリデザインしていきました

・見出し、フォントの強弱がない
・サーチボックスに背景カラーが濃く入ってしまいテキストが読めない
・テーマカラーに統一感がない

<Before>

3. リデザイン前に行なったこと

動画を見ながら、実際に自分でもシステム化にチャレンジしました。

■テキスト・配色・ボタン・余白のルールを決めて設定する

今回、用意してくれていた役割別の要素を登録していきました。

＜やったこと＞※Figmaを使っています

●要素の設定

要素の設定

  • Text styles にテキストの要素の指定設定をする
    TitleとTextをそれぞれ設定していきました
    ※line-hightは140％か160％を当てる

  • Libraries に配色を役割別に設定
    ※例ではカラーバリエーションをブルー系で明度を上げて作られてました。グレー文字をどのくらいの明度を上げたものを選ぶか参考になりました。

  • コンポーネント でボタンを役割別に設定

  • 余白のルールを決める
    ４の倍数でサイズを設定する。

4. リデザインにTRY！

  1. 大きさ、配色、強弱を調整

  2. 余白の調整

  3. 最終微調　

のシステム化した要素どおりに上記の順序で行いました。

リデザイン


5. 解答と修正

まず、解答のお手本と自分のリデザインを見比べます。
左：お手本
右：私のリデザイン

お手本と自分のリデザインの比較

こう見ると、一目瞭然で爪の甘い部分が見えてきます。

■比較して気付いた点

  • サイドバー（ナビゲーション）と右のコンテンツとの間に謎の余白を作ってしまっている

  • 検索ボックスの横幅が中途半端なのと、背景色を入れられてなかった

  • コンテンツのアイコン横の名前とサブテキストの強弱がつけられてなかった

  • ニューバーのテキストサイズが大きすぎた

  • メニューバーの（Webデザイン・UI/UXデザイン・フリーランス）のテキストの濃さを変えられていない

  • 余白の使い方もなんか違う

■大きく勘違いしていた構造について

私は先に余白の入れ方を下記のように入れてしまっていました。
これはもちろん良くない例で、それがなぜ違和感のある余白になっているかというと、”パーツ構造”を理解していなかったからです。

誤った解釈をしてつけてしまっていた余白（NG例）

構造ブロック毎に分けて配分をする必要がありました。
※何が親で、何が子なのかの親子構造を理解する！

■修正バージョン

解答を見て、ポイントを振り返った上修正してみました。

＜After＞


■感想

今回のTRYはGoodだった点と、BADだった点があると振り返ってます。
＜Good＞
まず、最初のUI基礎からコンポーネントやカラー/テキスト機能のついてはトレースとかでも何度もやっていたこともあり、すぐに理解して取り組めた事で、修正も早く終わったこと。（自分の進歩を感じた！！やったー）

＜Bad＞
構造という概念をいまいち理解していないが故に、テキストの強弱や余白の付け方を適切に修正できなかった。
構造の親子関係はしっかり意識していこうとおもいます！

今回、システム化について理解できたことで、微妙なサイズの違いによるズレを排除できたり、今後エンジニアさんとお仕事する時にもデザインを形にする上での大事なコミュニケーション要素となると思うので、繰り返し使っていきたいと思います。

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