ブログサービスを勝手にREDESIGNしてみた① -課題を決定しパーツを分解・分析してみた-
こんにちは！渋谷のIT企業でデザイナーをしているみゆきです！
社内の有志メンバーで、デザインの分析や再構築の方法を学ぶため、某ブログサービスを勝手にREDESIGNしてみました！
何記事かに分けて、今回の活動で得た手法や学びをまとめてみようと思います🐰
この活動の目的
- デザイン分析手法を学び、実践・再構築を通して手法への理解を深める
- 他のサービスでも同じ手法を用いて課題解決できるようにする
- 分析・再構築の方法を発信し、ナレッジを共有する
分析対象・方針の決定
まず、どのサービスをREDESIGNするかというところから話し合いました。
歴史が長く新旧のデザインルールが混ざり合っていそうな、某ブログサービスの記事投稿画面をREDESIGNしようということになりました。
今回はAtomic Designの考え方をベースにし、ボタンにフォーカスして分析・再構築を行なっていきます。
進め方
- 対象の課題発見
- パーツに分解・分析
- 言語化・ルール化
- 再構築
対象の課題発見
最初に、分析対象の画面のスクショを印刷してデスクに並べて、みんなで眺めました。
疑問点やおかしいと思うところに付箋を貼っていきます。
みんなの意見をまとめた結果、対象の課題として以下があがってきました。
- 微妙に違うデザインが多く、共通の部分が少ない
- 古いものと新しいものが混ざってる
- それぞれの色やパーツがルール化されてなく、用途がわかりづらい
「デザインルールを決め、用途をはっきりさせれば、開発もしやすくなりユーザーも使いやすくなり、サービスの質が向上する」という考えのもと、課題解決するべくREDESIGNを進めていきます。
次に、集めた画面スクショから、パーツに分解していきます。
パーツに分解・分析
まずは、インターフェースインベントリを作り、「ボタン」「リスト」「見出し」などのカテゴリに分けてパーツを集めました。
インターフェースインベントリについては下記の記事が参考になります🌟
こうして集めてみると、パーツの量がとにかく多く、似てる見た目だけど微妙に違うものがたくさんあります。
ボールドと細字のルールなども統一されていないことが見えてきました。
インターフェースインベントリを作ってみた結果、一番課題が多そうなボタン部分にフォーカスして進めようということになりました。
分解したパーツに対して、気になる部分にみんなで付箋を貼っていきます。
ボタンの気になる部分として、
- 色のルール
- 太・細のルール
- 形や余白のルール
- 状態（非活性・アクティブなど）のルール
ここら辺が特に意見が多く出ました。
ボタンにフォーカスすることが決まり、いよいよ次はルール作りです！
次回の記事では、世の中のデザインシステムを参考にしながら、言語化・ルール化を進めた部分をご紹介しようと思います！
お楽しみに〜〜🐰
