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

GREE Tech Conference 2022の登壇資料です。

Transcript

1. アウモ株式会社　デザイナー　笠　峻志 爆速で成長する おでかけ情報サービスの成長を支えるデ ザインと開発の取り組みについて アウモ株式会社　エンジニア　樋口雅拓 アウモ株式会社　エンジニア　関谷恒甫
2. 2
 2
 名前 樋口雅拓（ひぐち まさひろ） 担当 ソフトウェア開発 SaaS事業に関するソフトウェア開発業務全般を担当 経歴 2022年よりアウモに参加 登壇者プロフィール
3. 3
 3
 名前 関谷恒甫（せきや こうすけ） 担当 エンジニア メディア側と比較サイト側の サーバサイドとフロントサイドを主に担当 経歴 2020年グリー新卒入社株式会社WFSを経て 2021年12月にアウモに参加 登壇者プロフィール
4. 4
 4
 名前 笠 峻志（かさ たかし） 担当 デザイン サービスのUI、aumoに関わるクリエイティブ、営業資 料などのビジュアルデザイン全般を担当 経歴 2018年よりアウモに参加 登壇者プロフィール
5. 5
 5
 アジェンダ ❏ aumoについて ❏ デザインの取り組み ❏ ソフトウェアの取り組み ❏ インフラの取り組み
6. 6
 6
 アジェンダ ❏ aumoについて ❏ デザインの取り組み ❏ ソフトウェアの取り組み ❏ インフラの取り組み
7. 7
 7
 国内最大級の おでかけ情報サービス 80万 60万 掲載記事数 総口コミ数 掲載メディア数 500 appカテゴリランキング両 OS首位 「Google Play ベスト オブ 2018」ベスト アプリ 2018 生活お役立ち部門 優秀賞 ※2019年1月時 点 1500万 500万 月間ユーザー数 アプリDL数 月間流通額 12億円 aumoについて
8. 8
 8
 おでかけ情報サービスaumoの 開発・運営（Web/App）を行う メディア事業 飲食店・宿泊施設・小売店など 実店舗事業者様向けSaaS事業 aumoマイビジネス SaaS事業 メディア事業 事業紹介
9. 9
 9
 事業を通じて実現したい未来 メディア SaaS 課題 ユーザー 店舗・施設 行きたいお店、施設、場所が見つからない Ex.地元で人気の飲食店に行きたいのに定番のお店 しか情報がない 価値 提供 ユーザーとロケーションのマッチング最適化 地域情報を網羅的に集めて、求めるユーザーに届ける 課題 大規模ポータルサイトに広告投下しないと集客ができ ない、簡単・安価にマーケティングしたい 価値 提供 実店舗のマーケティングをワンストップで提供 サイト作成、顧客管理、プロモーション、決済など
10. 10
 10
 メディア事業の提供サービス 記事 ロケーション 施設 コミュニティ
11. 11
 11
 メディア事業の特徴 SEOに最適化された コンテンツ制作 位置情報などを利用した レコメンドシステム ユーザーの口コミを活用した おでかけCGM
12. 12
 12
 SaaS事業の提供サービス 実店舗が必要なマーケティング（ SEO・SNS・MEOなど）をワンプ ロダクトで管理・運用・分析することで、コストを削減し、集客効果 をあげることができるツールです 実店舗向けマーケティングSaaS aumoマイビジネス 3万突破 導入店舗数
13. 13
 13
 SaaS事業の特徴 SNSのアカウント管理や分析、SNS投稿の サイト掲載ができる フォロワーを増やしたい・認知を広げたいな どのニーズに合わせた広告出稿も可能 SNS ドメインパワーの強いaumoサイト内に施設 ページを作成 SEO獲得しているキーワードページに掲載 が可能 SEO (検索対策) Googleビジネスプロフィールを一括管理で きる MEOの順位をさらに上げたい場合も施策投 下可能 MEO (マップ検索対策) 実店舗のマーケティングとして必須と言われるSEO・SNS・MEOの領域で主にサービスを展開
14. 14
 14
 今後事業の方針 ユーザー規模を3年で3倍にしていく (より多くのユーザーに使ってもらうサービスに ) メディア事業 口コミなど一般ユーザーの生の情報が集まるメ ディアを目指す 投稿したくなるサービスに磨きをかけて、コミュニティを活性化さ せて、ユーザーからの口コミを増やす（UI/UXの改善、ポイント 機能、満足度の高いレコメンド機能など） より多くのユーザーが使える環境づくり 速度改善、SEO改善など 顧客のニーズにあわせた機能開発を爆速 で進めていく SaaS事業 ロイヤルカスタマーを生み出せるための 機能開発 デジタルギフト、プレゼントキャンペーン機能など 店舗・施設の情報を、より多くのユーザーに最適に 届ける仕組みづくり プレスリリース掲載・拡散 Googleビジネスプロフィール管理ツールなど
15. 15
 15
 本題 爆速で成長する おでかけ情報サービスの成長を支える デザインと開発の取り組みについて
16. 16
 16
 アジェンダ ❏ aumoについて ❏ デザインの取り組み ❏ ソフトウェアの取り組み ❏ インフラの取り組み
17. 17
 17
 サービスの成長を支えるための カラーシステムの設計 デザインの取り組み
18. 18
 18
 • 提供サービスが増えスタイルガイドがサービス規 模に合わなくなった • プロダクト開発に関わるメンバーも増え共通認識を 明文化していく必要ができた 背景
19. 19
 19
 • 色の役割の定義が不明確 • 色に拡張性がなく追加・変更に弱い • 実装と連動しにくい 現状の課題 キーカラーのみの定義
20. 20
 20
 課題の具体例 色に拡張性がなく追加・変更に弱い
21. 21
 21
 デザイナー間やプロダクト開発チームの共通言語として 機能する変更に強いカラーシステムの設計 今回達成したいこと
22. 22
 22
 キーカラーを基準にHSLのL（輝度）を調整して11段階のトーンを作成 ※本来は輝度に併せて色相とや彩度を調整するのが理想だが、今回はパレットの拡充を優先 カラーパレットの展開
23. 23
 23
 同じ方法で各色展開してきカラーパレットを構築 カラーパレットの展開
24. 24
 どう使う色か （Semantic Colors） 24
 デザイントークンの概念を導入し「具体値」と「意味」に役割を分け変更に強い仕組 みを作る #fad300 デザイントークンの概念を導入 どんな色か （Primitive Colors）
25. 25
 25
 例
26. 26
 26
 before after 用途がわかりにくい 用途が明確で変更も容易 デザイントークンの概念の導入
27. 27
 27
 できたこと • 色の役割や定義が明確になった • 仕組みと色の具体値をわけて考慮できるようになり、変更に強くなった • デザインとエンジニアリングをつなぐ基盤ができた まとめ
28. 28
 28
 ❏ aumoについて ❏ デザインの取り組み ❏ ソフトウェアの取り組み ❏ インフラの取り組み アジェンダ
29. 29
 29
 サービスの成長を支えるための ソフトウェアの取り組み ソフトウェアの取り組み
30. 30
 30
 • デザインの取り組みにより、スタイルガイドが更新され、デザイン業務が改善さ れた。 • スタイルガイドを使って実装していなかった。 • スタイルガイドを使って実装することで、改善効果を実装に波及させる。 背景と目的
31. 31
 31
 背景と目的 • アウモ株式会社では、Media事業とSaaS事業を行 なっています。今回はSaaS事業の話です。 • SaaS事業は法人向けに業務改善ツールを提供してい ます。 • システム構成はNuxt/RoR/MySQL。今回はNuxtの部 分の話です。 MySQL Rails API Nuxt.js 対象システムについて
32. 32
 • デザイナーがUI設計を行い、 Figmaに書き出す。 • エンジニアがこれに近づけるように 実装していた。 32
 WebFront開発の流れ
33. 33
 33
 【変更前】画面ごとの定義 <style lang="scss"> .page-leaflet { &__title { &-text { &.glay { color: #777; } 【変更後】全体で使えるように定義 <style lang="scss"> .color { &-neutral-gray-700 { color: #777; } カラーパレット対応: cssのclass名をFigmaに合わせた
34. 34
 34
 • 画面で使う色や形は限られている。 • 色や形だけでなく、それらをまとめた部品を作ってもらう。 • その部品を実装することで、デザインの意図を早く確実に実装可能としたい。 スタイルガイド対応からデザインシステムへ
35. 35
 35
 pages/organizations/_id/leaflets/_leafletid/index.vue 【変更後】 export default { layout: 'OrganizationTemplate' } 【変更前】 <template lang="pug"> header img(src="~assets/images/log o.svg") div お店・施設管理画面 チラシ入稿画面 - レイアウト コンポーネント
36. 36
 36
 pages/organizations/_id/leaflets/_leafletid/index.vue 【変更後】 <template lang="pug"> div SidebarOrganization 【変更前】 <template lang="pug"> ul li NuxtLink(:to="path") 店舗管理 li NuxtLink(:to="path") 店舗一覧 チラシ入稿画面 - メニュー コンポーネント
37. 37
 components/molecules/form/shop/FormShopLeafletImages.vue 【変更後】 div FormShopLeafletImages 37
 【変更前】 form div(v-for="image in leafletImages" :key="image.id") チラシ入稿画面 - コンポーネント コンポーネント
38. 38
 • デザインとソフトウェアの連携を高めることで、再利用可能で変更に強いソフト ウェアを開発できるようになった。 • 今後はより多くの人と連携することでドメイン知識を共有し、より堅牢なソフト ウェアを開発していきたい。 38
 まとめ UI/UX設計を早く確実に実装できるような取り組みを進めています。 次は、アプリケーションを早く確実にユーザへデリバリーするため、aumoで行ったインフラ環境改 善事例について説明します。
39. 39
 39
 ❏ aumoについて ❏ デザインの取り組み ❏ ソフトウェアの取り組み ❏ インフラの取り組み アジェンダ
40. 40
 40
 サービスの成長を支えるための テストの自動化と デプロイアセット更新の自動化 インフラの取り組み
41. 41
 41
 QCDの最優先がDからQへと変化したため 作業の自動化による工数削減と 考慮漏れや作業漏れ防止による品質向上をしたい なぜやるのか QCD QCD
42. 42
 42
 • デプロイ頻度の高さ ◦ 開発差分が出来上がる度に各人がデプロイ作業をする体制 ◦ デプロイ先も多い ▪ qaデプロイの際はqa ▪ 本番デプロイの際はinternalとproduction • 作業の手間と抜け漏れリスク ◦ rspecテストによるデータ整合性の確認 ◦ アセット更新によるアセット差分の反映 ▪ gulpでアセット差分を作成してコミット ▪ aws s3 sync デプロイに関する課題
43. 43
 43
 • デプロイ頻度の高さ ◦ 開発差分が出来上がる度に各人がデプロイ作業をする体制 ◦ デプロイ先も多い ▪ qaデプロイの際はqa ▪ 本番デプロイの際はinternalとproduction • 作業の手間と抜け漏れリスク ◦ rspecテストによるデータ整合性の確認 ◦ アセット更新によるアセット差分の反映 ▪ gulpでアセット差分を作成してコミット ▪ aws s3 sync →　github actionsで自動化する デプロイに関する課題
44. 44
 44
 • github actions上で ◦ 環境構築 ◦ テスト自動化 ◦ アセット更新自動化 github actionsでの作業自動化
45. 45
 45
 • github actions上で ◦ 環境構築 ◦ テスト自動化 ◦ アセット更新自動化 github actionsでの作業自動化
46. 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 上で環境構築
47. 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 上で環境構築
48. 48
 48
 • github actions上で ◦ 環境構築 ◦ テスト自動化 ◦ アセット更新自動化 github actionsでの作業自動化
49. 49
 49
 • testする！ ◦ rspecを叩く！ - name: Test with Rspec working-directory: ./aumo run: docker-compose run --rm web bundle exec rspec テスト自動化
50. 50
 50
 • github actions上で ◦ 環境構築 ◦ テスト自動化 ◦ アセット更新自動化 github actionsでの作業自動化
51. 51
 51
 • gulpとは ◦ オープンソースのJavaScriptツールキット ◦ フロントWeb開発でストリーミングビルドシステムとして使用される TypeScript PNG Sass Markdown Javascript WebP CSS HTML
52. 52
 52
 • gulpのためにnodeのバージョンを指定してインストールする ◦ aumoリポジトリのバージョン指定ファイルを読み込んで指定 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version-file: ./.node-version アセット更新自動化
53. 53
 53
 • gulpのアセット差分作成とコミット - name: Run Gulp & Commit & Push run: | npm run gulp -- release git config user.name github-actions git config user.email github-actions@github.com git add public/assets git commit -m “Update assets[skip actions]” git push アセット更新自動化
54. 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 }} アセット更新自動化
55. 55
 55
 • gulpのアセットをaws s3にsync アセット更新自動化 - name: Sync S3 working-directory: ./public/assets run: aws s3 sync . S3://hogehoge..
56. 56
 56
 • コンフリクトを回避したい ◦ aumoではGithub workflowに近い運用をしている ◦ featureでアセット差分をコミットすると、developやqaへのマージの際にコンフリクトが発生 してしまう アセット更新コミット コンフリクト feature/xxx feature/yyy develop master アセット更新 - ブランチで実行有無制御
57. 57
 57
 • コンフリクトを回避したい ◦ aumoではGithub workflowに近い運用をしている ◦ featureでアセット差分をコミットすると、developやqaへのマージの際にコンフリクトが発生 してしまう feature/xxx feature/yyy qa アセット更新 - ブランチで実行有無制御 アセット更新コミット コンフリクト
58. 58
 58
 • コンフリクトを回避したい ◦ aumoではGithub workflowに近い運用をしている ◦ featureでアセット差分をコミットすると、developやqaへのマージの際にコンフリクトが発生 してしまう ◦ developブランチまたはqa用のブランチでのみアセット更新を行うようにする feature/xxx feature/yyy qa アセット更新 - ブランチで実行有無制御 アセット更新コミット コンフリクト
59. 59
 59
 • コンフリクトを回避したい ◦ aumoではGithub workflowに近い運用をしている ◦ featureでアセット差分をコミットすると、developやqaへのマージの際にコンフリクトが発生 してしまう ◦ developブランチまたはqa用のブランチでのみアセット更新を行うようにする if: ${{ github.head_ref == ‘develop’ || contains(github.head_ref, ‘tmp/qa’)) }} アセット更新 - ブランチで実行有無制御
60. 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 }} アセット更新 - 差分で実行有無制御
61. 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 } ] } アセット更新 - 差分で実行有無制御
62. 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 アセット更新 - 差分で実行有無制御
63. 63
 63
 • github APIで 差分取得する ◦ GET https://api.github.com/repos/{owner}/{repo}/compare/ {basehead} ◦ { … “files”:[ { … “filename”: XXXXXXXXX } ] } アセット更新 - 差分で実行有無制御
64. 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 アセット更新 - 差分で実行有無制御
65. 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’ }} # アセット更新処理 アセット更新 - 差分で実行有無制御
66. 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’ }} # テスト処理 テスト - 実行有無制御
67. 67
 67
 • テストが自動化された ◦ 作業工数を削減できた ◦ データ整合性に関する品質の担保がされた • デプロイアセット更新を自動化した ◦ 作業工数を削減できた ◦ アセット更新に関する品質の担保ができた • 心理的安全性が向上した • 興味ある開発改善分野のタスクに手を上げて経験をつめた • 今後もさらなる工数削減や品質の担保を進めていきたい 作業自動化まとめ
68. 68
 68
 このセッションのまとめ • aumoについて ◦ 顧客もユーザもサービスも拡大している • デザインの取り組み ◦ 用途毎のわかりやすく柔軟なデザインを定義 • ソフトウェアの取り組み ◦ デザイン定義を実装に伝搬 • インフラの取り組み ◦ 作業を自動化 • 長期的な工数削減と品質担保で心理的安全性を向上