爆速で成長するおでかけ情報サービスの成長を支えるデザインと開発の取り組みについて

by gree_tech

Slide 1

Slide 1 text

アウモ株式会社　デザイナー　笠　峻志爆速で成長するおでかけ情報サービスの成長を支えるデザインと開発の取り組みについてアウモ株式会社　エンジニア　樋口雅拓アウモ株式会社　エンジニア　関谷恒甫

Slide 2

Slide 2 text

2  2  名前樋口雅拓（ひぐちまさひろ）担当ソフトウェア開発 SaaS事業に関するソフトウェア開発業務全般を担当経歴 2022年よりアウモに参加登壇者プロフィール

Slide 3

Slide 3 text

3  3  名前関谷恒甫（せきやこうすけ）担当エンジニアメディア側と比較サイト側のサーバサイドとフロントサイドを主に担当経歴 2020年グリー新卒入社株式会社WFSを経て 2021年12月にアウモに参加登壇者プロフィール

Slide 4

Slide 4 text

4  4  名前笠峻志（かさたかし）担当デザインサービスのUI、aumoに関わるクリエイティブ、営業資料などのビジュアルデザイン全般を担当経歴 2018年よりアウモに参加登壇者プロフィール

Slide 5

Slide 5 text

5  5  アジェンダ ❏ aumoについて ❏ デザインの取り組み ❏ ソフトウェアの取り組み ❏ インフラの取り組み

Slide 6

Slide 6 text

6  6  アジェンダ ❏ aumoについて ❏ デザインの取り組み ❏ ソフトウェアの取り組み ❏ インフラの取り組み

Slide 7

Slide 7 text

7  7  国内最大級のおでかけ情報サービス 80万 60万掲載記事数総口コミ数掲載メディア数 500 appカテゴリランキング両 OS首位「Google Play ベストオブ 2018」ベストアプリ 2018 生活お役立ち部門優秀賞 ※2019年1月時点 1500万 500万月間ユーザー数アプリDL数月間流通額 12億円 aumoについて

Slide 8

Slide 8 text

8  8  おでかけ情報サービスaumoの開発・運営（Web/App）を行うメディア事業飲食店・宿泊施設・小売店など実店舗事業者様向けSaaS事業 aumoマイビジネス SaaS事業メディア事業事業紹介

Slide 9

Slide 9 text

9  9  事業を通じて実現したい未来メディア SaaS 課題ユーザー店舗・施設行きたいお店、施設、場所が見つからない Ex.地元で人気の飲食店に行きたいのに定番のお店しか情報がない価値提供ユーザーとロケーションのマッチング最適化地域情報を網羅的に集めて、求めるユーザーに届ける課題大規模ポータルサイトに広告投下しないと集客ができない、簡単・安価にマーケティングしたい価値提供実店舗のマーケティングをワンストップで提供サイト作成、顧客管理、プロモーション、決済など

Slide 10

Slide 10 text

10  10  メディア事業の提供サービス記事ロケーション施設コミュニティ

Slide 11

Slide 11 text

11  11  メディア事業の特徴 SEOに最適化されたコンテンツ制作位置情報などを利用したレコメンドシステムユーザーの口コミを活用したおでかけCGM

Slide 12

Slide 12 text

12  12  SaaS事業の提供サービス実店舗が必要なマーケティング（ SEO・SNS・MEOなど）をワンプロダクトで管理・運用・分析することで、コストを削減し、集客効果をあげることができるツールです実店舗向けマーケティングSaaS aumoマイビジネス 3万突破導入店舗数

Slide 13

Slide 13 text

13  13  SaaS事業の特徴 SNSのアカウント管理や分析、SNS投稿のサイト掲載ができるフォロワーを増やしたい・認知を広げたいなどのニーズに合わせた広告出稿も可能 SNS ドメインパワーの強いaumoサイト内に施設ページを作成 SEO獲得しているキーワードページに掲載が可能 SEO (検索対策) Googleビジネスプロフィールを一括管理できる MEOの順位をさらに上げたい場合も施策投下可能 MEO (マップ検索対策) 実店舗のマーケティングとして必須と言われるSEO・SNS・MEOの領域で主にサービスを展開

Slide 14

Slide 14 text

14  14  今後事業の方針ユーザー規模を3年で3倍にしていく (より多くのユーザーに使ってもらうサービスに ) メディア事業口コミなど一般ユーザーの生の情報が集まるメディアを目指す投稿したくなるサービスに磨きをかけて、コミュニティを活性化させて、ユーザーからの口コミを増やす（UI/UXの改善、ポイント機能、満足度の高いレコメンド機能など）より多くのユーザーが使える環境づくり速度改善、SEO改善など顧客のニーズにあわせた機能開発を爆速で進めていく SaaS事業ロイヤルカスタマーを生み出せるための機能開発デジタルギフト、プレゼントキャンペーン機能など店舗・施設の情報を、より多くのユーザーに最適に届ける仕組みづくりプレスリリース掲載・拡散 Googleビジネスプロフィール管理ツールなど

Slide 15

Slide 15 text

15  15  本題爆速で成長するおでかけ情報サービスの成長を支えるデザインと開発の取り組みについて

Slide 16

Slide 16 text

16  16  アジェンダ ❏ aumoについて ❏ デザインの取り組み ❏ ソフトウェアの取り組み ❏ インフラの取り組み

Slide 17

Slide 17 text

17  17  サービスの成長を支えるためのカラーシステムの設計デザインの取り組み

Slide 18

Slide 18 text

18  18  ● 提供サービスが増えスタイルガイドがサービス規模に合わなくなった ● プロダクト開発に関わるメンバーも増え共通認識を明文化していく必要ができた背景

Slide 19

Slide 19 text

19  19  • 色の役割の定義が不明確 • 色に拡張性がなく追加・変更に弱い • 実装と連動しにくい現状の課題キーカラーのみの定義

Slide 20

Slide 20 text

20  20  課題の具体例色に拡張性がなく追加・変更に弱い

Slide 21

Slide 21 text

21  21  デザイナー間やプロダクト開発チームの共通言語として機能する変更に強いカラーシステムの設計今回達成したいこと

Slide 22

Slide 22 text

22  22  キーカラーを基準にHSLのL（輝度）を調整して11段階のトーンを作成 ※本来は輝度に併せて色相とや彩度を調整するのが理想だが、今回はパレットの拡充を優先カラーパレットの展開

Slide 23

Slide 23 text

23  23  同じ方法で各色展開してきカラーパレットを構築カラーパレットの展開

Slide 24

Slide 24 text

24  どう使う色か（Semantic Colors） 24  デザイントークンの概念を導入し「具体値」と「意味」に役割を分け変更に強い仕組みを作る #fad300 デザイントークンの概念を導入どんな色か（Primitive Colors）

Slide 25

Slide 25 text

25  25  例

Slide 26

Slide 26 text

26  26  before after 用途がわかりにくい用途が明確で変更も容易デザイントークンの概念の導入

Slide 27

Slide 27 text

27  27  できたこと • 色の役割や定義が明確になった • 仕組みと色の具体値をわけて考慮できるようになり、変更に強くなった • デザインとエンジニアリングをつなぐ基盤ができたまとめ

Slide 28

Slide 28 text

28  28  ❏ aumoについて ❏ デザインの取り組み ❏ ソフトウェアの取り組み ❏ インフラの取り組みアジェンダ

Slide 29

Slide 29 text

29  29  サービスの成長を支えるためのソフトウェアの取り組みソフトウェアの取り組み

Slide 30

Slide 30 text

30  30  ● デザインの取り組みにより、スタイルガイドが更新され、デザイン業務が改善された。 ● スタイルガイドを使って実装していなかった。 ● スタイルガイドを使って実装することで、改善効果を実装に波及させる。背景と目的

Slide 31

Slide 31 text

31  31  背景と目的 ● アウモ株式会社では、Media事業とSaaS事業を行なっています。今回はSaaS事業の話です。 ● SaaS事業は法人向けに業務改善ツールを提供しています。 ● システム構成はNuxt/RoR/MySQL。今回はNuxtの部分の話です。 MySQL Rails API Nuxt.js 対象システムについて

Slide 32

Slide 32 text

32  ● デザイナーがUI設計を行い、 Figmaに書き出す。 ● エンジニアがこれに近づけるように実装していた。 32  WebFront開発の流れ

Slide 33

Slide 33 text

33  33  【変更前】画面ごとの定義 .page-leaflet { &__title { &-text { &.glay { color: #777; } 【変更後】全体で使えるように定義 <style lang="scss"> .color { &-neutral-gray-700 { color: #777; } カラーパレット対応: cssのclass名をFigmaに合わせた

Slide 34

Slide 34 text

34  34  ● 画面で使う色や形は限られている。 ● 色や形だけでなく、それらをまとめた部品を作ってもらう。 ● その部品を実装することで、デザインの意図を早く確実に実装可能としたい。スタイルガイド対応からデザインシステムへ

Slide 35

Slide 35 text

35  35  pages/organizations/_id/leaflets/_leafletid/index.vue 【変更後】 export default { layout: 'OrganizationTemplate' } 【変更前】 header img(src="~assets/images/log o.svg") div お店・施設管理画面チラシ入稿画面 - レイアウトコンポーネント

Slide 36

Slide 36 text

36  36  pages/organizations/_id/leaflets/_leafletid/index.vue 【変更後】 div SidebarOrganization 【変更前】 ul li NuxtLink(:to="path") 店舗管理 li NuxtLink(:to="path") 店舗一覧チラシ入稿画面 - メニューコンポーネント

Slide 37

Slide 37 text

37  components/molecules/form/shop/FormShopLeafletImages.vue 【変更後】 div FormShopLeafletImages 37  【変更前】 form div(v-for="image in leafletImages" :key="image.id") チラシ入稿画面 - コンポーネントコンポーネント

Slide 38

Slide 38 text

38  ● デザインとソフトウェアの連携を高めることで、再利用可能で変更に強いソフトウェアを開発できるようになった。 ● 今後はより多くの人と連携することでドメイン知識を共有し、より堅牢なソフトウェアを開発していきたい。 38  まとめ UI/UX設計を早く確実に実装できるような取り組みを進めています。次は、アプリケーションを早く確実にユーザへデリバリーするため、aumoで行ったインフラ環境改善事例について説明します。

Slide 39

Slide 39 text

39  39  ❏ aumoについて ❏ デザインの取り組み ❏ ソフトウェアの取り組み ❏ インフラの取り組みアジェンダ

Slide 40

Slide 40 text

40  40  サービスの成長を支えるためのテストの自動化とデプロイアセット更新の自動化インフラの取り組み

Slide 41

Slide 41 text

41  41  QCDの最優先がDからQへと変化したため作業の自動化による工数削減と考慮漏れや作業漏れ防止による品質向上をしたいなぜやるのか QCD QCD

Slide 42

Slide 42 text

42  42  ● デプロイ頻度の高さ ○ 開発差分が出来上がる度に各人がデプロイ作業をする体制 ○ デプロイ先も多い ■ qaデプロイの際はqa ■ 本番デプロイの際はinternalとproduction ● 作業の手間と抜け漏れリスク ○ rspecテストによるデータ整合性の確認 ○ アセット更新によるアセット差分の反映 ■ gulpでアセット差分を作成してコミット ■ aws s3 sync デプロイに関する課題

Slide 43

Slide 43 text

43  43  ● デプロイ頻度の高さ ○ 開発差分が出来上がる度に各人がデプロイ作業をする体制 ○ デプロイ先も多い ■ qaデプロイの際はqa ■ 本番デプロイの際はinternalとproduction ● 作業の手間と抜け漏れリスク ○ rspecテストによるデータ整合性の確認 ○ アセット更新によるアセット差分の反映 ■ gulpでアセット差分を作成してコミット ■ aws s3 sync →　github actionsで自動化するデプロイに関する課題

Slide 44

Slide 44 text

44  44  ● github actions上で ○ 環境構築 ○ テスト自動化 ○ アセット更新自動化 github actionsでの作業自動化

Slide 45

Slide 45 text

45  45  ● github actions上で ○ 環境構築 ○ テスト自動化 ○ アセット更新自動化 github actionsでの作業自動化

Slide 46

Slide 46 text

46  46  ● リポジトリをcloneする ○ aumoの実装やDB周りが入ったaumoリポジトリ - name: Clone Aumo Repository uses: actions/checkout@v2 with: repository: aumo-repository token: ${{ secrets.ACCESS_TOKEN }} path: aumo github actions 上で環境構築

Slide 47

Slide 47 text

47  47  ● testDB準備 ○ aumoのコンテナでDBのcreateとresetとmigrate - name: migration test_db working-directory: ./aumo env: RAILS_ENV: test run: | docker-compose run –rm aumo bundle exec rails db:create RAILS_ENV=test docker-compose run –rm aumo bundle exec rails db:reset RAILS_ENV=test docker-compose run –rm aumo bundle exec rails aumo:db:migrate RAILS_ENV=test github actions 上で環境構築

Slide 48

Slide 48 text

48  48  ● github actions上で ○ 環境構築 ○ テスト自動化 ○ アセット更新自動化 github actionsでの作業自動化

Slide 49

Slide 49 text

49  49  ● testする！ ○ rspecを叩く！ - name: Test with Rspec working-directory: ./aumo run: docker-compose run --rm web bundle exec rspec テスト自動化

Slide 50

Slide 50 text

50  50  ● github actions上で ○ 環境構築 ○ テスト自動化 ○ アセット更新自動化 github actionsでの作業自動化

Slide 51

Slide 51 text

51  51  ● gulpとは ○ オープンソースのJavaScriptツールキット ○ フロントWeb開発でストリーミングビルドシステムとして使用される TypeScript PNG Sass Markdown Javascript WebP CSS HTML

Slide 52

Slide 52 text

52  52  ● gulpのためにnodeのバージョンを指定してインストールする ○ aumoリポジトリのバージョン指定ファイルを読み込んで指定 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version-file: ./.node-version アセット更新自動化

Slide 53

Slide 53 text

53  53  ● gulpのアセット差分作成とコミット - name: Run Gulp & Commit & Push run: | npm run gulp -- release git config user.name github-actions git config user.email [email protected] git add public/assets git commit -m “Update assets[skip actions]” git push アセット更新自動化

Slide 54

Slide 54 text

54  54  ● awsとの接続を認証 - name: “Configure AWS credentials” uses: aws-actions/configure-aws-credentials@v1 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-region: ${{ secrets.AWS_REGION }} アセット更新自動化

Slide 55

Slide 55 text

55  55  ● gulpのアセットをaws s3にsync アセット更新自動化 - name: Sync S3 working-directory: ./public/assets run: aws s3 sync . S3://hogehoge..

Slide 56

Slide 56 text

56  56  ● コンフリクトを回避したい ○ aumoではGithub workflowに近い運用をしている ○ featureでアセット差分をコミットすると、developやqaへのマージの際にコンフリクトが発生してしまうアセット更新コミットコンフリクト feature/xxx feature/yyy develop master アセット更新 - ブランチで実行有無制御

Slide 57

Slide 57 text

57  57  ● コンフリクトを回避したい ○ aumoではGithub workflowに近い運用をしている ○ featureでアセット差分をコミットすると、developやqaへのマージの際にコンフリクトが発生してしまう feature/xxx feature/yyy qa アセット更新 - ブランチで実行有無制御アセット更新コミットコンフリクト

Slide 58

Slide 58 text

58  58  ● コンフリクトを回避したい ○ aumoではGithub workflowに近い運用をしている ○ featureでアセット差分をコミットすると、developやqaへのマージの際にコンフリクトが発生してしまう ○ developブランチまたはqa用のブランチでのみアセット更新を行うようにする feature/xxx feature/yyy qa アセット更新 - ブランチで実行有無制御アセット更新コミットコンフリクト

Slide 59

Slide 59 text

59  59  ● コンフリクトを回避したい ○ aumoではGithub workflowに近い運用をしている ○ featureでアセット差分をコミットすると、developやqaへのマージの際にコンフリクトが発生してしまう ○ developブランチまたはqa用のブランチでのみアセット更新を行うようにする if: ${{ github.head_ref == ‘develop’ || contains(github.head_ref, ‘tmp/qa’)) }} アセット更新 - ブランチで実行有無制御

Slide 60

Slide 60 text

60  60  ● アセットの差分をチェックするworkflowを作成 on: workflow_call: inputs: workflow_id: description: APIで取得したいworkflow_id(or filename) type: string required: true grep_argument: description: 差分にフィルターをかけるgrepの引数(オプション込み) type: string required: true secrets: access_token: required: true outputs: should_run: description: GREP_ARGUMENTに対する差分があったか(呼び出し元で後続処理すべきか ) value: ${{ jobs.check.outputs.should_run }} アセット更新 - 差分で実行有無制御

Slide 61

Slide 61 text

61  61  ● github APIで前回成功したworkflowのcommitのSHAを取得する ○ GET https://api.github.com/repos/{owner}/{repo}/actions/ workflows/{workflow_id}/runs ○ { … “workflow_runs”:[ { … “head_sha”: XXXXXXXXX } ] } アセット更新 - 差分で実行有無制御

Slide 62

Slide 62 text

62  62  ● github APIで前回成功したworkflowのcommitのSHAを取得する - id: get_sha name: Get the last success workflow sha run: | url=“https://api.github.com/repos/${{ github.repository }}/actions/workflows/${{ inputs.workflow_id }}/runs?status=success&per_page=1&branch=${{ github.head_ref }}” echo “last_success_sha=$(curl -H “Authorization: Bearer ${{secrets.ACCESS_TOKEN}}” -sX GET -G “$url”) | jq -r ‘.workflow_runs[0]?.head_sha // empty’)” >> $GITHUB_OUTPUT アセット更新 - 差分で実行有無制御

Slide 63

Slide 63 text

63  63  ● github APIで差分取得する ○ GET https://api.github.com/repos/{owner}/{repo}/compare/ {basehead} ○ { … “files”:[ { … “filename”: XXXXXXXXX } ] } アセット更新 - 差分で実行有無制御

Slide 64

Slide 64 text

64  64  ● github APIで差分取得しアセットに差分があればtrueを返す - id: check name: Check Diff Assets run: | url=“https://api.github.com/repos/${{ github.repository }}/compare/ ${{ steps.get_sha.outputs.last_success_sha || github.base_ref }}...${{ github.head_ref }}” diff_filenames=$(curl -H “Authorization: Bearer ${{ secrets.access_token }}” -sSLX GET -G “$url” | jq -r ‘.files[]?.filename // empty’) set +e diff_filtered=$(echo “$diff_filenames” | grep ${{ inputs.grep_argument }}) set -e echo “should_run=`[ -n “$diff_filtered” ] && echo “true” || echo “false”`” >> $GITHUB_OUTPUT アセット更新 - 差分で実行有無制御

Slide 65

Slide 65 text

65  65  ● 差分チェックworkflowを呼び出し、結果で実行有無制御 jobs: check: if: ${{ github.head_ref == ‘develop’ || contains(github.head_ref, ‘tmp/qa’)) }} uses: ./.github/workflows/check_diff.yml with: workflow_id: update_assets.yml grep_argument: “-E ‘^frontend/’” secrets: access_token: ${{ secrets.ACCESS_TOKEN }} update_assets: needs: check if: ${{ needs.check.outputs.should_run == ‘true’ }} # アセット更新処理アセット更新 - 差分で実行有無制御

Slide 66

Slide 66 text

66  66  ● 差分チェックworkflowを呼び出し、結果で実行有無制御 jobs: check: if: ${{ !contains(github.head_ref, ‘tmp/qa’)) }} uses: ./.github/workflows/check_diff.yml with: workflow_id: test.yml grep_argument: “-vE ‘^frontend/’” secrets: access_token: ${{ secrets.ACCESS_TOKEN }} test: needs: check if: ${{ needs.check.outputs.should_run == ‘true’ }} # テスト処理テスト - 実行有無制御

Slide 67

Slide 67 text

67  67  ● テストが自動化された ○ 作業工数を削減できた ○ データ整合性に関する品質の担保がされた ● デプロイアセット更新を自動化した ○ 作業工数を削減できた ○ アセット更新に関する品質の担保ができた ● 心理的安全性が向上した ● 興味ある開発改善分野のタスクに手を上げて経験をつめた ● 今後もさらなる工数削減や品質の担保を進めていきたい作業自動化まとめ

Slide 68

Slide 68 text

68  68  このセッションのまとめ ● aumoについて ○ 顧客もユーザもサービスも拡大している ● デザインの取り組み ○ 用途毎のわかりやすく柔軟なデザインを定義 ● ソフトウェアの取り組み ○ デザイン定義を実装に伝搬 ● インフラの取り組み ○ 作業を自動化 ● 長期的な工数削減と品質担保で心理的安全性を向上