見出し画像

【BONO】構造を捉えてデザインをシステム化するとは

K O S U

こんにちは！KOSU（こす）です。

UI/UXデザインが学べるオンラインコミュニティ『BONO』での学びを、振り返りとしてnoteにまとめはじめて、今回で3回目となります。

今回は「UIビジュアル基礎 - TRY2 ビジュアルシステムでリデザインしよう！-」の振り返りです。


【お題】 「動画共有サービスのホームUI」をリデザインしよう

「UIビジュアル基礎」シリーズは、UIデザインの見た目の”キホン”を学んで、デザイン動画共有サービスをリデザインしようというものです。
今回は、動画共有サービスの「ホームUI」のリデザイン編です。

サービス概要：デザイナーが動画を投稿して情報をシェアするサービス
noteの動画版のようなイメージのサービスを想定しています。

目的：見た目のシステム化を習得しよう
今回は、フォントや余白のサイズ、配色などのスタイルを定義してUIをつくると論理的なビジュアルが作れるようになる、ということを学ぶ回です。

UIビジュアル入門の詳細はこちら → (https://www.bo-no.design/series/uivisual)


（BEFORE）フォントサイズに差がないために情報が目に飛び込んできにくい、ナビゲーションもバラバラとしている印象です。


（AFTER）今回リデザインしたデザインです。フォントサイズや余白を情報の構造によって差をつけました。テイストは前回のお題TRY1をベースにリデザインしました。



見た目のシステム化とは？

見た目をシステム化するとは、「要素の役割に対して、フォントサイズや配色、ボタンなどを定義して、システム化していく」ことです。
フォントはどんなフォントを使うのか？フォントサイズは見出しとテキストでどんなサイズを使うのか？配色はどこにどんな色を使うのか？をルールを決めて運用しよう！ということです。
システム化するメリットは、デザインを構造で組みやすくなったり、論理的なビジュアルを作りやすくなる、などが挙げられます。

今回のお題でまとめたスタイル

こういったものをサービス全体で定義していくと、「デザインシステム」といった、サービス全体で一貫したデザイン・操作ができるための仕組みの素になると理解しました。

デザインシステムについては、デジタル庁やSmartHRさんなど色んな企業が提供しています。



構造を捉えたデザインのシステム化とは？

では、どうやってデザインをシステム化していくか。
情報がどんな構造になっているのか整理することで、ヒエラルキーに則って情報を役割ごとにサイズを定義していくことができます。

情報構造からフォントサイズを決めていくときの例。要素がどのような情報構造になっているかを整理し、そこからフォントのサイズや余白のサイズを決めていくとうまくいきやすくなります。定義したサイズ感が小さいな、大きいなと感じる場合は何回かサイズ調整のサイクルを回して適切なサイズ感を見極めていきます。

今回は、参考サイトのスタイルを参考に、サイズ調整を行っていきました。

参考サイトのスタイルを洗い出し。どんなサイズ感を使うといいかを検証していきました。


【学びと振り返り】

これまで、色・フォントサイズ・コンポーネントをFigmaで組んでいく、ということはやっていましたが、闇雲になんとなくタイトルだからこのサイズ感かな〜とか感覚的にやっていた部分が大きかったなと思いました。
「情報構造を捉えてサイズを組んでいく」ことを意識することで、論理的にUIを組みやすくなる、ということを実感しました。

ここまで読んでいただき、ありがとうございます🙇‍♀️

お題をやることで、デザインシステムについて調べたり、マテリアルデザインってどうやって読むんだ？と色々動画や記事を漁ったりと、お題以外でも学びになるなと思います。

それではまた👋

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