ブログサービスを勝手にREDESIGNしてみた② -ルール化し、デザインを実際の画面に入れてみた-
こんにちは！渋谷のIT企業でデザイナーをしているみゆきです！
社内の有志メンバーで、デザインの分析や再構築の方法を学ぶため、某ブログサービスを勝手にREDESIGNしてみたシリーズ！第2弾です🌈
前回の記事では、対象の課題を発見し、パーツに分解・分析するところまでをまとめました。
前回の記事はこちら👇
言語化・ルール化
パーツに分解・分析したら、次に言語化です。
今回はボタンにフォーカスすることが決まったので、世の中の様々なデザインシステムを参考にして、ボタンのルールを決めていきました。
参考にしたデザインシステムについてはこちらの記事に書いてあります🌟
ボタン自体を言語化してみる
最初にいきなりボタンの分類（Primary、Secondaryなど）をしようとしたら上手くいかず失敗したので、まずはボタンとは何か？というところから定義しました。
- 選択状態が必要（active）
- 押せない状態も必要（disable）
- 危険状態（警告・エラー）もあったほうが良さそう
- アイコンだけでも成立する
- アイコンとラベリングの組み合わせも可能
- 押せるサイズは確保されるべき
- 複数ボタンがあるときに強弱表現・優先度がわかる
- ボタンのコントラストを担保すべき
- デザインの一貫性をもたせるべき、ルールの統一化（形、文字、大きさ、色、選択状態など）
- テキスト表現に一貫性をもたせる（名詞・動詞だけなのか）
集めたボタンパーツを分類
そしてボタンの定義を元に、ボタンを種類別に分類していきました。
この分類の仕方がキモで、とても悩みました！！
他のデザインシステムの分類は参考にはなりますが、そのままどのサービスでも使えるわけではないので、サービスの構造や特徴に合わせて考える必要があります。
今回はこのように分類してみました。
- Primary
- 基本的にはページ/ビュー/セクションで単一で使うべきもの
- 一番重要なアクションを表す
- ポジティブな表現で利用
- アイコンとテキストの組み合わせもOK,
- アイコンのみの利用はNG - Default
- 何回でもページ内で使える
- フラットな表現で選択肢を促すときに使う（ex.自販機のように選択肢が並列なもの）
- Primaryとセットでは使わない、組み合わせるときはSubtleと使う（３つのレベルのものが並ぶとユーザーが選択肢を迷ってしまうため）
- アイコンとテキストの組み合わせもOK
- アイコンのみの利用はNG - Subtle
- 何回でもページ内で使える
- ネガティブな意味合いで使う（組み合わせるボタンと逆の意味合いで利用する）
- PrimaryやDefaultとセットで使用することが可能
- アイコンとテキストの組み合わせもOK
- アイコンのみの利用はNG - Disable
- 押せない状態のときに使う - Destructive（破壊）
- 削除や退会などに使う - Image button
- ページ内で何個でも使える
- 画像とテキストは必須
- テキスト色は固定
- 画像のサイズはデザインつくって決める - Image button sub
- 画像/iconは必須
- テキストは不要
- image buttonより小さくする
- 単色のみ利用可能 - それぞれのボタンに以下の状態を用意する
- normal
- active
- focus - ボタンサイズ
- よく使いそうな最小サイズと中サイズを決めておく（大は必要になったら追加）
- ボタンのサイズ＝タップ領域は最小44px
- フォントサイズ 12px
ルールに沿ってボタンを作ってみた
定めたルールに沿って、ボタンを作ってみます！
実際にデザインに起こすと、新たな課題やルール化すべきところが見えてきました。
色やサイズは他のUIパーツとの兼ね合いもあるので、実際に画面に当てはめながら決めることにしました。
Primary
- ブランドカラーは使わない（画面内がブランドカラーだらけになり、チープな印象になってしまうため）
- 代わりに何色を使うかは画面に当てはめながら検討（ニュートラルな黒か、リンクっぽい青がいいかな？）
- 塗りつぶし
Default
- ブランドカラーは使わない
- 枠線+テキスト
Subtle
- Primayとセットで使うことを考えて、テキストメインのデザイン
- 他のテキストと差別化するため、テキスト+下線が良さげ。テキストの下に線いれる（ベースラインをブチ抜かない）
Disable
- 色はグレーで決定
- ボタンによってDisableのスタイル分ける必要なさそうなので、Disableのスタイルは統一
- Disableもアクセシビリティ的にコントラスト比守った方がいいか迷ったけど、アクションできないものなのでコントラスト比守らなくてOK
Destructive
- 色は赤で決定
- 塗りつぶし
実際に画面に入れてみた
そしてついに！作ったボタンを、実際の画面に入れてみます！！！
どんな素晴らしいものができるのでしょうか…ドキドキ…！
………あ、あれ？
なんか上手くいかないな。。。
ボタンを縦積みで配置してみたパターンも作ってみたけど、やっぱりしっくりこない…おかしいな。。
違和感を感じたのはここらへん。
- DefaultとSubtle組み合わせてみると、結構サブトルが強い…
- DefaultとSubtleに色を使わないと、画面全体がモノクロになる…
- Subtleの下線微妙かも…？バランスおかしい泣
- ポップアップの囲みの中に、さらにボタンの囲みがあるのが違和感…ぶち抜きにしたくなる
ルール化したときは上手くいくと思ったのに！！
さて、ルールが決まり、デザインを起こして、ついに画面に配置！！という段階で上手くいかなくなってしまいました。
なぜ上手くいかないのでしょうか？
次回の最終記事では、失敗の原因究明と、言語化の見直し〜再構築についてご紹介しようと思います！
お楽しみに〜〜🐰
