システム化×UIリデザイン
今回、UI/UXデザインコミュニティのBONOによるUIビジュアル基礎コースの「ビジュアルシステムでリデザインしよう！」という課題を完了したので、その行程をご紹介する。
1.構造をシステム化するとは？
1-1.まず、Before, Afterから
今回の学習の目的は「UIの構造をシステム化し、それを利用してUIを設計すること」である。Webデザインをしている人ならCSSフレームワークのような概念であると考えれば理解が早いと思う。
早速だが、リデザイン前とリデザイン後のUIを比較する。
■リデザイン前のUI
■リデザイン後のUI
■リデザイン後のUI（別案）
TRY1と比べると大胆な変更はないが、リデザイン前と後では、フォントのサイズや位置、配色、ブロック毎の余白を変化させている。これらはすべて、システム化された構造で形成している。これらを順々と説明する。
構造のシステム化とは、UIを構成する要素の役割を決めてあげること、ルール化することで、作業の効率化や繰り返しに強いデザインシステムを創れるというものである。
今回は主に以下の要素をシステム化する。（＝スタイルを定義する、役割を与える等、様々な言葉が飛び交い、少し混乱する…）
フォント（システムフォントはOSでだいたい決まっている）
配色
ボタン、パーツ
余白
1-2. Figmaを使ってシステム化する
構造のシステム化をするために、まず、まず！大前提として
「Figmaを使ったから簡単にできた」
ということを強調しておきたい。InvisionやAdobe XDも同等の機能があるけれども、フォントや配色の登録/呼び出し、コンポーネントの作成、Auto Layoutなどが簡単にできてしまう。しかも無料でweb上で。今になってFigmaの便利さを知り始めた私はデザイン赤ちゃんである。
今回よく使った機能を以下に紹介する。
2. UI構造をシステム化するために
UIの構造をシステム化するために、与えられたUIの各要素の問題点を洗い出した。
2-1. フォント
■リデザイン前のフォント
リデザイン前のフォントは、サイズに規則性がない。どの情報が重要なのか判断してもらうため、フォントに以下の内容を適用する。
使用されている文字の役割を決める
フォントのサイズを決める
役割が与えられた文字に対し、スタイルを定義する
■noteのホーム画面
noteのホーム画面に着目してみる。フォントのみに注目すると、
・選択しているタブ
・カテゴリー名
・記事のタイトル
に最も視線が向かうようにサイズやウェイトが与えられている。つまり、ホーム画面においてフォントの重要度は以下のように考えられる。
・コンテンツに関連のある情報（カテゴリー、タイトル名）＝重要度高い
・コンテンツに関連性の低い情報（日時情報、投稿者、グローバルナビゲーションなど）＝重要度低い
上記を考慮し、それぞれの役割に優先順位を与えた。
ホーム＞カテゴリー（おすすめ、人気の動画）＞タブ（おすすめ、Webデザイン、UI/UXデザイン、フリーランス）＞動画タイトル＞投稿者名＞アップロード日
■リデザイン前のフォントにスタイルを適用する
各フォントに対し、以下のようにスタイルを決める。
2-2.配色
次に配色である。情報の重要度は色相や濃淡で表現できる。
■リデザイン前の配色
左カラム、ホームが選択されているのに分かりづらい（色相の不一致）
重要な情報が薄い（ホーム、選択されたタブ、おすすめ、投稿者、動画タイトル）
検索バーの背景色が濃く、バー内の文字が潰れている（重要度の問題ではない？）
重要度の低いアップロード日の文字色が濃い、薄くしたい
■noteのホーム画面
noteでは、ブランドカラーを使って優先度の高そうな要素に色を与えており、重要な情報に注目できるようになっている（※最近デザインガイドラインが変わったため、noteの色指定がなくなっていた）。
■Spotifyのホーム画面
グローバルナビ：選択したページのフォントが濃く太く表示されており、今どこにいるのか分かりやすい。
コンテンツ：ページの背景よりコンテンツのあるブロック背景のほうが明るく、視線誘導性が高い。
2-3.ブロック構造
全体のUI構造を捉えることで、適切な配置や必要な余白を設定できる。
リデザイン前のUIではブロックをすでに分類できており、ブロック内の配置やブロック間の余白を決めるだけで良さそうだ。
■リデザイン前のUIのブロック構造
■Behanceのブロック構造
Behanceはヘッダーに要素をぎゅっと詰め込み、下部のコンテンツを大きく見せるために文字領域は控えめである。グラフィックだけで勝負する、という威圧さえ覚える。
2-4.余白
構造のシステム化をする上で、最も気になったのが「余白」である。
余白を設定することにより、UIの構造を簡単に見分けてもらえるように緩急を持たせることができる。
■pixivのホーム画面
pixivではヘッダー、タブ、アイキャッチ間は40px、メインコンテンツ上部には100pxの余白を設定しており、ゆとりを持たせている。ピックアップされたイラストを目に焼き付けるにちょうどいい。
コンテンツの内容次第で、余白をどう使うかを検討する必要がある。
また、ブロック内の余白は小さくしてまとまりを出している（インタフェースデザインの心理学でも学んだ）。
3.リデザインと検証
前回の課題である「コンセプトからUIデザインを行う」に加え、上記２．を踏まえてリデザインを行った。
3-1.リデザイン１回目
■リデザイン前のUI
■リデザイン後のUI
■リデザイン後のUI（余白を表示）
■フォントの定義
UI内の文字（フォント）に対してスタイルを適用した。
ホーム：H1 40px
カテゴリー名：H2 32px
タブ：H3 24px
グローバルナビ、動画タイトル：H4 16px
投稿者：H5 12px
検索バー：Normal 16px
所属名、アップロード日：SubExplain 10px
■配色の定義
UI内の配色に対してスタイルを適用した。
重要度の高いフォント…black
（ホーム、カテゴリー名、動画タイトル、投稿者）
重要度の低いフォント…gray
（選択されていないグローバルナビ、タブ、所属名、アップロード日、検索バー）
選択されているフォント、最重要アクション…オレンジ
（グローバルナビ、タブ、動画を投稿）
■余白の定義
「リデザイン後のUI（余白を表示）」の図に表示されている矩形のスペースは余白を示している。４の等倍で定義し、適切な箇所に挿入した（Auto layoutで配列）。
・ヘッダーとコンテンツ間は最も大きく余白を取り（64px）、コンテンツであることを強調する
・ブロック内の要素間は余白を小さくし、まとまりを出す
3-1.リデザイン２回目
それぞれの要素にスタイルを定義し、構造上問題ないと思われる１回目の段階で終了するつもりだった。
が、動画コンテンツをもっと際立たせたいと思い、左カラムを削除してその情報をヘッダーに集約した。グローバルナビゲーションの視覚情報を小さくし、動画ストック領域を多く見えるように演出した。
■リデザイン後のUI（２回目）
■リデザイン後のUI（２回目、余白を表示）
■気になった余白
全体的に見やすくなり動画にフォーカスできた気がするが、間延びした感じが否めなかったので、ヘッダー部分の余白を短くすることにした。この辺は微調整という感じでいいのだろうか？
微細な変化のパターン出しをしておくといい（普通やるんだろうな）。
■リデザイン後のUI（最終版）
■リデザイン後のUI（最終版、余白を表示）
・「ホーム」のスタイルをH1→H2に変更
・ヘッダー内の余白を40px→16pxに変更、間延びを解消
・ヘッダーとコンテンツ間の余白を64px→32pxに変更、間延びを解消
・ヘッダー内アイコンに文字を追加
・コンテンツブロック内の余白を12pxに統一
4. まとめ
4-1.ワークについて
あまり難しい考察はできないが、UIを構造化したことによって以下のメリットが挙げられる。
・作業の効率化
・リズム感を出せる
・情報を整理して伝えられる
そして何よりも、ユースケースを踏まえたコンセプトを基軸として、UIを構造化することが重要だと思う。構造化ばかりに気を取られ、最も伝えたい「ユーザーの想い」がそこに現れなければ、どのデザインシステムを使っても構わないことになってしまう。いついかなる時でも、コンセプトを大事にしながらプロダクトデザインを意識していたい。
また、Figmaの機能にもよると思うが、webデザイン的な思考が働いたのでUIの構造化は取っ付きやすかった。境目はないはずなので、Webデザインを学ぼうとしている人にも是非やって欲しいワークである。
4-2.リデザインしたUIについて
元のUIを大きく変更する内容ではなかったので、そこまで見栄えの変わるものではなく作業時間も短かった（1時間弱）。むしろ、参考を探す時間の方が長い。3DCGを勉強していたときにもよく言われたことだ。
個人的には１カラムのデザインが好きなので、自分でwebサイトを作る場合はそうなってしまう。色んなパターンでデザインを試せるようにしたい。
まだうまく言語化できなかったり、冗長な文章になりがちである。noteを書き倒して、行動や思考の言語化を行って参りたい。あと、普段はとても口語的です。どーもありがとうございました。
この記事が気に入ったらサポートをしてみませんか？