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

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

Transcript

1. デザインガイドラインを
 作った話
 みんなのマーケット株式会社 
 デザイナー・福間
 1
2. はじめに
 2 2022年にくらしのマーケットの「デザイン ガイドライン」を新たに作成し、それをもと に「デザインリプレイス」を行いました。 
 一連の流れをまとめます。 
 
 
 
 ※デザインガイドラインは、社内のデザイナー チーム（4名体制）がくらしのマーケットの開発で 参照する想定で作成しました。
 完成したデザインガイドラインの一部

3. 3 まずはデザインリプレイスの Before/Afterをご覧ください。 
 
 TOPページはこんな感じです。 
 余白の取り方やフォントまわりが変 わっていますね。

4. 4 サービス一覧ページはこんな感じで す。
 タップエリアが大きくなり、全体的に ゆったり・スッキリしました。 

5. 5 特に古いデザインが残っていた予約 フォームのBefore/Afterです。 
 
 タップエリアが大きくなっているのが ここでもわかります。 
 また、今回新たにカード型UIを採用 しました。

6. 6 ドロワーメニューです。 
 アイコンやリンクのスタイルが変わ り、borderが無くなりました。 

7. ステップ1：インプットと言葉の整理
 7 ではデザインガイドラインをどうやって決めていったかの過程を振り 返っていきます。
 
 まずインプットから始めました。公開されている他社のガイドライン や事例を収集し、関連書籍で基本概念を確認します。 
 ここで気になったのが、出てくるワードの種類の多さです。 
 そこでデザイナーチーム内で足並みを揃えるため、 言葉の定義の 認識合わせを行いました。その結果、チームで扱うのは「ブランドイ メージ」「デザインガイドライン」「UIコンポーネント」の3つに絞ること にしました。
 
 最初に言葉の認識合わせをしたことで、 最終的なアウトプットの形 についてイメージを合わせる こともできました。

8. 8 デザインガイドラインを作成するにあたっ ての目的も簡単に整理しておきました 👉
 ステップ1：インプットと言葉の整理

9. ステップ2：項目検討
 9 続いて、デザインガイドラインで定めるべき項 目について考えました。 
 
 リサーチ時に良いなと思った他社のガイドライ ンをいくつかピックアップし、定義されている項 目を書き出しました。 
 
 羅列してみると、「当社でもこのあたりは定めた い」「ここまでは用意しなくていい」「このへんは UIコンポーネントで定めよう」という、 当社に 合ったサイズ感が見えてきました。
 

10. ステップ3：ビジュアルデザインキーワード抽出とイメージサンプリング
 10 次に、デザイナーチーム内で「くらしのマーケットを表 す言葉」を洗い出し、「ビジュアルデザインキーワード」 として3つ抽出しました。 
 
 シンプル、ニュートラル 
 信頼感、安心感
 かわいらしい、ユーモアのある 
 
 このビジュアルデザインキーワードをもとにイメージサ ンプリングをし、イメージボードを作成しました。 
 作成したイメージボード

11. ステップ4：キービジュアル作成
 11 続いてキービジュアルを作成しました。 
 くらしのマーケットの特徴である「いろんなサービスを 頼める」ことを表現するイラストで、イメージボードのテ イストをもとにしています。 
 
 キービジュアルに使った配色はデザインガイドラインに も盛り込みました。
 作成したキービジュアル

12. ステップ5：他社調査（トレンド調査）
 12 ここでまた他社調査に戻ります。 
 ステップ2で見えてきた「当社で定義したい項目」について、他社調査 （トレンド調査）をしました。 
 
 ボタンやリンク、口コミや並び替えのコンポーネントをスクショし、サー ビスごとに並べました。 
 
 これら以外にも、font-familyの指定やスペーシング、角丸、font-color のバリエーション、drop-shadowの指定などをテキストベースで一覧に しました。
 様々なコンポーネントを各社サービスごとに並べたもの

13. ステップ6：仮定義
 13 仮定義した内容の一部
 他社調査をもとに、当社で採用したい項 目についていったん定義しました。ここで はまだ仮の状態です。 
 
 悩ましい部分については、迷いもそのま まメモしておいて次に進みます。 
 
 

14. ステップ7：仮定義した内容で、主要ページのデザインを作ってみる
 14 ステップ6で仮定義した内容で、主要ペー ジのデザインを作ってみました。 定義した 内容で破綻しないか、例外が多発したり しないかを確認するためです。 
 迷っていた指定についても、この段階で 画面に落としてみて決めていきました。 
 
 この時点でチームに共有し、意見をもら いながら調整していきました。 
 
 主要画面のデザインに落としてみる

15. ステップ8：定義した内容をまとめて完成
 15 いよいよガイドラインとしてまとめに入り ます。
 フォーマットは更新のしやすさを重視し、 共同編集のXDにしました。 
 まとめが終わったら再度チームに共有 し、デザインガイドラインはひとまず完成 となりました。
 
 合わせて、ステップ7で作成したデザイン をもとにUIコンポーネントを整理しまし た。
 
 デザインガイドラインは全17ページになりました

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

17. おわりに
 17 以上、2022年に行った「デザインガイドライン作成」と「デザインリプレイス」についてご紹介しました。 
 
 当社の開発体制に合った、幅を持たせたコンパクトなガイドラインに仕上がったと思います。 
 くらしのマーケットをより使いやすいサービスにするため、見直しと更新を続けていきます！ 
 
 
 
 
 
 次ページからは私たちのプロダクト、会社紹介です。 

18. 私たちのプロダクト 生活の「困った」を解決できるプロが集まる プラットフォーム「くらしのマーケット」 頼める出張サービスの種類 事業者の数 300種類以上！
 70,000事業者を突破！
 エアコンクリーニング、引越し、庭木剪定..などの生活関連サービス 日本全国の事業者が登録、売上を伸ばしている 18
19. 私たちのビジョン 正直者が馬鹿を見ない世界を作る
 テスト前に必死で勉強したのに、先輩から過去問をもらっていた友達が自分よりいい成績を取った…
 会社のことを思って地味な仕事も引き受けてきたのに、上司に気に入られている同期が昇進した…
 
 世の中では、不条理なことが起きます。
 でも、悪賢い人が得をして、正直な人が損をする世界なんて嫌です。
 
 江戸時代の思想家、石田梅岩は「二重の利を取り、甘き毒を喰ひ、自死するようなこと多かるべし」
 つまり、悪賢い者には必ず報いがあると説きました。
 さらに「実の商人は、先も立ち、我も立つことを思うなり」とも表し、
 まず相手の利害を優先し、その結果として自身も利益を得ることが商人の本文だと説きました。
 
 私たちは、先も立ち、我も立つ、正直な人が報われる世の中を作ります。
 19
20. 私たちのミッション 「人と人」が関わるサービスを、
 安心して取引できる仕組みを提供する
 私たちは、くらしのマーケットを通じて、
 世の中のあらゆるサービスをインターネットで安心して取引できる仕組みを提供していきます。
 インターネットでモノを買う時、みんなが楽天市場やAmazonを利用するように、
 サービスを買う時は、みんながくらしのマーケットを利用してくれる…そんな世界を目指します。
 
 多くのベンチャー企業が、自社の成長をアピールしますが、いちばん重要なことは、
 その会社がその時に「どれだけ成長しているか」ではなく、その会社が今後「どこまで成長できるか」です。
 
 みんなのマーケットは巨大な市場に挑んでいます。私たちと一緒に、大きく成長していきましょう。
 20
21. 書いた人 2015年 みんなのマーケット入社。コーポレート兼務やマーケティン グの部署を経てデザイナーをしています。 
 
 福間 デザイナー ハラミを食べる私
 21