見出し画像

[BONO] UIビジュアル基礎~ビジュアルシステムでリデザインしよう！~で学習したことの備忘録

mayuko



システム化とは

システム化とは下図のように使用する要素のサイズや色を予め設定（登録）して使用すること。

イメージ図：デジタル庁のデザインシステムの一部抜粋

システム化することのメリット

サイズや色のルールを決めて運用することにより、以下のメリットがある。

  • デザインを構造で組みやすい。

  • 管理しやすい。

  • チーム内でのコミュニケーションが円滑になる。

  • 微妙なサイズの違いなどがなくなり、統一感がでる。

見た目の要素を役割で設定する（意味で構造を伝える）
＝デザインをシステム化する

具体的に何をシステム化するのか

  • UIで使えるフォント

  • テキストサイズ

  • ボタンの種類

  • 色の種類

  • アイコン

具体的に登録する値

▼デフォルトフォント

~Web~
・mac
日本語：ヒラギノ角ゴシック
欧文：Helvetica, Arial, Verdana
            Times New Roman, Georgia
・Windows
日本語：メイリオ
欧文：Arial, Verdana
            Times New Roman, Georgia

~アプリ~
・iOS
日本語：SF font (ほぼヒラギノ)
欧文：SF font, Helvetica, Neue
            Times New Roman, Avenir
・AndroidOS
日本語：Noto Sans JP/ CJK (Webフォントもある為、ブラウザでも使用可)
欧文：Roboto

▼テキストサイズ

タイトルはH1, H2, H3, H4くらいを用意する。
テキストはNormal, Sub, Sub Explain, Tinyを用意する。

・Normal：16px　ブログの文など普通に読んで欲しいもの。
　　　　　　　 　 長文だとしても読んで欲しいもの。(14~18px)

・Sub：14px　補足に近いけど読んで欲しいもの。

・Sub Explain：12px　本当に補足のもの。

・Tiny：10px　補足過ぎるから読まなくても良いもの。
　　　　　      （10px以下は読めないから使わない。）

・Line-Height：140, 160%辺りが標準的。（文字に対して1.4倍, 1.6倍）
・Letter-spacing：基本的に0%で良い。

▼ボタンの種類

サイズ展開は重要度順にLarge, Normal, Smallの3サイズ。
種類は重要度順にPrimary, Secondary, Linkの3種類。
状態の変化として、Default, Hoverの状態のもの。(iconがsetになっている場合のものも用意すると良い。）
サイズは4, 8の等倍にする。

  • Large：64, 56px

  • Normal：48px

  • Small：36px

PrimaryはFillを塗ったもの。SecondaryはFillでなくStrokeのゴーストボタン。

▼配色（以下は最小限）

Main Color：1色（ボタンなどにも使う）
Text：真っ黒, グレー, ライトグレー, (白)
Border：ライトグレー, 更に薄いライトグレー
BG：グレー, ライトグレー, （白）

▼アイコン

よく使うものをセットしておく。（作りながら決まってくる。）

▼余白

4, 8の等倍でサイズを決めていく。

目で見た方がイメージつきやすい為、BONOに登録していなくて実際にみてみたい場合はこちらが分かりやすいと思います。↓
Open in Figmaでスタイルの部分にテキストや余白があり、
コンポーネントの部分にボタンがあります。

Figmaでの登録の仕方と使い方

▼色の登録

  1. 登録したい色のFillをクリックする。

  2. +アイコンをクリックする。

  3. Styleタブを選択する。

  4. Nameに登録したい名前を入力する。（Theme/pinkやText/blackなど" / "で分類すると一覧で見える為、使うときに見つけやすい。）

  5. Create styleボタンを押下する。

登録した色を使う場合

  1. Librariesを選択する

  2. 適応したい色を選択する

Theme / や Text / で分類されていて見やすい。

編集機能で色を変更することもできる。
大元の色を変更すれば適応した箇所の色も連動して変化する為、管理しやすい。

▼テキストの登録

  1. Text横の4つの点をクリック。

  2. Text Style横の+をクリック。

  3. Nameに登録したい名前を入力する。（Title/H1やText/Normalなど" / "で分類すると一覧で見える為、使うときに見つけやすい。）

  4. Create styleボタンを押下する。

登録したテキストを使う場合

適応したい文字を選択して、登録してあるスタイルを選択すると反映される。カラーと同じで大元のスタイルを変更すれば適応した箇所のテキストも連動して変化する為、管理しやすい。

TitleとTextに分類されていて見やすい。登録する際に" / "で区切る。

▼ボタンの登録

  1. ボタンを作成したらoption + command + Kでコンポーネント化する。

  2. Shiftを押した状態で同じカテゴリー(PrimaryのDefault, PrimaryのHover, SecondaryのDefaultとか)の全サイズのボタンを選択する。

  3. command + R で名前の一括変換を開く。選択したボタンの名前の共通する部分を入力する。(Primary/Default/Large, Primary/Default/Normal, Primary/Default/Smallと名付けたい為、Primary/Default/までを入力する。)

  4. Renameボタンを押下する。

  5. 1つずつボタンを選択してPrimary/Default/の後のLarge,Normal,Smallを付け足す。

登録したボタンを使う場合

  1. Assetsを選択する。

  2. 配置したいボタンを選択する。

  3. Insert instanceボタンを押下する。

感想

Sassを勉強していた頃に色を変数で指定して使っていた為、
似た感じで使いやすくて便利だと思った。
今回疑問に思ったのは、カラーの登録方法である。
記事の中で紹介したのはStyleだがVariable（2023年6月頃に追加されたFigmaの機能）というものもある。
Variable = 変数という意味だが、Styleも変数のように扱っていた。
使い分けが知りたい。。。

今回書いた内容はここで学びました↓


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