ブログサービスを勝手にREDESIGNしてみた③UIからコンポーネントに反映してルールを決定した

勝手にREDESIGN第3回目です。カワムラです。

前回作成したコンポーネントを実際のUIにいれてみたところ、あまりうまくいかない…？！ということで改めて「方針決め直して、再度作り直してみた」回でございます。

前回の記事はこちら👇

ブログサービスを勝手にREDESIGNしてみた② -ルール化し、デザインを実際の画面に入れてみた-

なぜうまくいかなかったのか？

• ポップアップは左右バランスが違和感
• ボタンの組み合わせが違和感
• 組み合わせの種類をある程度持っておく？
• ポップアップ専用のボタンとかがもしかしたら必要になるかも
• 下線のボタンをアプリであまり見ないので違和感

など意見がでました。

そこで、作り方を変えてみよう！ということで

前回は 言語化👉コンポーネント でしたが

今回は コンポーネント👉言語化 にしてみることに。

言語化と実際のUIを行き来して精度を高めることに！

UIに実際にボタンをいれてみて、ボタンのデザインから考えてみる

ここからはFigmaをつかって、ボタンをみんなで作ってみました。

Figmaを使った理由としては「共同作業ができる」ためです✨これが本当に便利だった！！その場で良し悪しの判断ができるし、パターン出し一緒にできるし、なによりあとあとルールを書いていくときもみんなで書ける・見られるので本当に便利だった。。。

さっそくデザインガイドラインや他サービスを見てみたりしながら、UIを作ってみます。主要な画面をピックアップし、UIベースでボタンのデザインを起こしていきました。

記事を書く：設定周り

記事を書く：時間設定

記事を書く：写真選択/アフィリエイト・SNS埋め込み

カテゴリ選択（ポップアップ）

パターンを出したあと、この中からデザイン的に良さげなものをピックアップし、ボタンのデザインを一旦決めます。

UIベースで良さげなボタンをピックアップ

良さげなデザインが決まったので、ボタンを言語化してみよう

ボタンのデザインが決まってきたので、ここでルールを言語化してみました。

ここではデザインをならべて、こういう分類だなーというところまで。

Button

• Brand
• Primary
• Default
• Subtle
• Disable

Text button

• Default
• Subtle
• Disable

Image button

Destructive button

Button分類・ルール：一旦分類だけしてみたバージョン

良さげなボタンをベースに分類を決めたので、UIにもう一度反映してみます。ここではまだルールの言語化が難しい。。。

再度UIに入れて、さらにルールをアップデート

良いね！となったボタンを他のページにも入れてみます👀

ここで、

• これはもしかしてボタンではないのでは？
• こういうルールを追加したほうが良さそう！

などを詰めていきます。

ホーム面：フォローボタンをDefaultに置き換え。（Brand Buttonにすると何個も続いてしまうため）その他テキストボタンの見直し。下部メニューについてはボタンの定義から除外。

ブログ管理面：上部のボタンをBrand ButtonとDefaultに差し替え、テキストボタンを統一した。

ブログを探す面：ボタンをDefaultに置き換えて、色や形も統一

ブログ一覧：メイン機能であるフォローをBrand Buttonに。またアイコン色などを統一。

ブログ記事詳細①：メイン機能のフォローをBrand Buttonに置き換え。下部のリアクションはページ自体に影響を及ぼすものではないため、ボタンでないと定義し、ルールからは除外した。

ブログ記事詳細②：ページ下部のフォローあとの表示（フォロー済み・通知受け取り）についてはボタンでないと定義した。特殊パターン！

UIにいれてみて、こういうルールならうまくいきそうといったところを言語化していきます。かなりルールが詰まってきた気がします。

Button分類・ルール：最終的なルール反映したバージョン。組み合わせなども明記した。

完成したボタンのルール

Button

Brand

• メイン機能のみで使うことができる

ブランドボタンを使えるのは下記の2パターンのみ。

• ブログを投稿するとき（ブログ投稿体験でもっとも大事なもの）
• ブログをフォローするとき（ブログ閲覧体験でもっとも大事なもの）
• 上記の2パターンをPrimaryやDefaultで代替えは可能（複数件Brandボタンを出したいとき）
• アイコンを組み合わせるのはOK、テキスト色と揃える

Primary

• 1ページ内で1度だけ使用できる
• なにかのアクションが起きるときに使用する — 保存/登録するなど
• アイコンを組み合わせるのはOK、テキスト色と揃える

Default

• 1ページ内で複数個使用するとき
• ページ内で何度も使用できる
• アイコンを組み合わせるのはOK、テキスト色と揃える

Subtle

• 単独では使用しない
• Primary buttonまたはDefault buttonと組み合わせて使う
• Text buttonのDefault / subtleとは組み合わせはできない

Disable

• すべてのButtonは非アクティブのときに、こちらのデザインを使用する

Text button

Default

• 1ページ内で複数個使用するとき
• ページ内で何度も使用できる
• アイコンを組み合わせるのはOK、テキスト色と揃える

Subtle

• 単独では使用しない
• buttonやText buttonのDefaultと組み合わせて使う
• アイコンを組み合わせるのはOK、テキスト色と揃える

Disable

• 全てのText buttonのDisableはこれで表現する

Image button

• ボタン内にアイコンを入れる
• 1ページ内で複数個使用できる
• サービス内のアイコンを使う場合は＃999999 に統一する
• 外部サービスのアイコンやロゴを使う場合は、そのサービスのブランドカラーに合わせる

Destructive button

• 色固定

下記の3つのパターンのみ使用可能

• ブログ記事削除
• アカウント削除（退会時）
• ブログ削除

コンポーネント👉言語化することで、実際のUI上でも成立するようにルールをブラッシュアップすることができました！

コンポーネントと言語化を行き来することで、精度が高められたのがよくわかりました💮