Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザインガイドラインを作った話/design-guideline

 デザインガイドラインを作った話/design-guideline

引越しや庭木の剪定などの出張・訪問サービスのプラットフォーム「くらしのマーケット」を運営する、みんなのマーケット株式会社です。
2022~2023年にかけて行った、デザインガイドライン作成とデザインリプレイスのお話をまとめました。

More Decks by みんなのマーケット株式会社/ Minma Inc.

Transcript

  1. はじめに
 2 2022年にくらしのマーケットの「デザイン ガイドライン」を新たに作成し、それをもと に「デザインリプレイス」を行いました。 
 一連の流れをまとめます。 
 
 


    
 ※デザインガイドラインは、社内のデザイナー チーム(4名体制)がくらしのマーケットの開発で 参照する想定で作成しました。
 完成したデザインガイドラインの一部

  2. ステップ1:インプットと言葉の整理
 7 ではデザインガイドラインをどうやって決めていったかの過程を振り 返っていきます。
 
 まずインプットから始めました。公開されている他社のガイドライン や事例を収集し、関連書籍で基本概念を確認します。 
 ここで気になったのが、出てくるワードの種類の多さです。 


    そこでデザイナーチーム内で足並みを揃えるため、 言葉の定義の 認識合わせを行いました。その結果、チームで扱うのは「ブランドイ メージ」「デザインガイドライン」「UIコンポーネント」の3つに絞ること にしました。
 
 最初に言葉の認識合わせをしたことで、 最終的なアウトプットの形 についてイメージを合わせる こともできました。

  3. ステップ2:項目検討
 9 続いて、デザインガイドラインで定めるべき項 目について考えました。 
 
 リサーチ時に良いなと思った他社のガイドライ ンをいくつかピックアップし、定義されている項 目を書き出しました。 


    
 羅列してみると、「当社でもこのあたりは定めた い」「ここまでは用意しなくていい」「このへんは UIコンポーネントで定めよう」という、 当社に 合ったサイズ感が見えてきました。
 

  4. ステップ5:他社調査(トレンド調査)
 12 ここでまた他社調査に戻ります。 
 ステップ2で見えてきた「当社で定義したい項目」について、他社調査 (トレンド調査)をしました。 
 
 ボタンやリンク、口コミや並び替えのコンポーネントをスクショし、サー ビスごとに並べました。

    
 
 これら以外にも、font-familyの指定やスペーシング、角丸、font-color のバリエーション、drop-shadowの指定などをテキストベースで一覧に しました。
 様々なコンポーネントを各社サービスごとに並べたもの

  5. デザインリプレイスの実装をする
 16 こうしてデザインガイドラインが完成しましたが、重要なのはここからです。 
 web・アプリの全画面に、デザインガイドラインを反映する必要があります。 
 
 開発や新機能のUI作成をする中で、ガイドラインを参照しながらイチから作ることは実は多くありませ ん。既存のコードやコンポーネントを参照することがほとんどです。 


    
 新機能の開発や既存画面の改善は日々進行しています。コンフリクトを少なく抑えるためにも、 できる だけ早くデザインリプレイスを終わらせる・やり切る 必要がありました。
 影響の大きいところから優先的に、3段階に分けて実装していきました。 
 
 また、デザインリプレイスと同時にコードの整理をしました。今回スタイルのパターンを絞ってシンプル にしたことで、全画面で読んでいるメインの scssを1,200行程度削減 できたという嬉しい側面もありまし た🥳