$30 off During Our Annual Pro Sale. View Details »

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

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

GREE Tech Conference 2022で発表された資料です。
https://techcon.gree.jp/2022/session/TrackA-2

gree_tech
PRO

October 25, 2022
Tweet

More Decks by gree_tech

Other Decks in Technology

Transcript

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

    View Slide

  2. 2

    2

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

    View Slide

  3. 3

    3

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

    View Slide

  4. 4

    4

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

    View Slide

  5. 5

    5

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

    View Slide

  6. 6

    6

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

    View Slide

  7. 7

    7

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

    1500万 500万
    月間ユーザー数 アプリDL数 月間流通額
    12億円
    aumoについて

    View Slide

  8. 8

    8

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

    View Slide

  9. 9

    9

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

    View Slide

  10. 10

    10

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

    View Slide

  11. 11

    11

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

    View Slide

  12. 12

    12

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

    View Slide

  13. 13

    13

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

    View Slide

  14. 14

    14

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

    View Slide

  15. 15

    15

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

    View Slide

  16. 16

    16

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

    View Slide

  17. 17

    17

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

    View Slide

  18. 18

    18

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

    View Slide

  19. 19

    19

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

    View Slide

  20. 20

    20

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

    View Slide

  21. 21

    21

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

    View Slide

  22. 22

    22

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

    View Slide

  23. 23

    23

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

    View Slide

  24. 24

    どう使う色か
    (Semantic Colors)
    24

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

    View Slide

  25. 25

    25


    View Slide

  26. 26

    26

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

    View Slide

  27. 27

    27

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

    View Slide

  28. 28

    28

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

    View Slide

  29. 29

    29

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

    View Slide

  30. 30

    30

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

    View Slide

  31. 31

    31

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

    View Slide

  32. 32

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

    WebFront開発の流れ

    View Slide

  33. 33

    33

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

    View Slide

  34. 34

    34

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

    View Slide

  35. 35

    35

    pages/organizations/_id/leaflets/_leafletid/index.vue
    【変更後】
    export default {
    layout: 'OrganizationTemplate'
    }
    【変更前】

    header
    img(src="~assets/images/log
    o.svg")
    div お店・施設管理画面
    チラシ入稿画面 - レイアウト
    コンポーネント

    View Slide

  36. 36

    36

    pages/organizations/_id/leaflets/_leafletid/index.vue
    【変更後】

    div
    SidebarOrganization
    【変更前】

    ul
    li NuxtLink(:to="path") 店舗管理
    li NuxtLink(:to="path") 店舗一覧
    チラシ入稿画面 - メニュー
    コンポーネント

    View Slide

  37. 37

    components/molecules/form/shop/FormShopLeafletImages.vue
    【変更後】
    div
    FormShopLeafletImages
    37

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

    View Slide

  38. 38

    ● デザインとソフトウェアの連携を高めることで、再利用可能で変更に強いソフト
    ウェアを開発できるようになった。
    ● 今後はより多くの人と連携することでドメイン知識を共有し、より堅牢なソフト
    ウェアを開発していきたい。
    38

    まとめ
    UI/UX設計を早く確実に実装できるような取り組みを進めています。
    次は、アプリケーションを早く確実にユーザへデリバリーするため、aumoで行ったインフラ環境改
    善事例について説明します。

    View Slide

  39. 39

    39

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

    View Slide

  40. 40

    40

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

    View Slide

  41. 41

    41

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

    View Slide

  42. 42

    42

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

    View Slide

  43. 43

    43

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

    View Slide

  44. 44

    44

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

    View Slide

  45. 45

    45

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

    View Slide

  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 上で環境構築

    View Slide

  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 上で環境構築

    View Slide

  48. 48

    48

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

    View Slide

  49. 49

    49

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

    View Slide

  50. 50

    50

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

    View Slide

  51. 51

    51

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

    View Slide

  52. 52

    52

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

    View Slide

  53. 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
    アセット更新自動化

    View Slide

  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 }}
    アセット更新自動化

    View Slide

  55. 55

    55

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

    View Slide

  56. 56

    56

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

    View Slide

  57. 57

    57

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

    View Slide

  58. 58

    58

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

    View Slide

  59. 59

    59

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

    View Slide

  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 }}
    アセット更新 - 差分で実行有無制御

    View Slide

  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
    }
    ]
    }
    アセット更新 - 差分で実行有無制御

    View Slide

  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
    アセット更新 - 差分で実行有無制御

    View Slide

  63. 63

    63

    ● github APIで 差分取得する
    ○ GET https://api.github.com/repos/{owner}/{repo}/compare/ {basehead}
    ○ {

    “files”:[
    {

    “filename”: XXXXXXXXX
    }
    ]
    }
    アセット更新 - 差分で実行有無制御

    View Slide

  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
    アセット更新 - 差分で実行有無制御

    View Slide

  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’ }}
    # アセット更新処理
    アセット更新 - 差分で実行有無制御

    View Slide

  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’ }}
    # テスト処理
    テスト - 実行有無制御

    View Slide

  67. 67

    67

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

    View Slide

  68. 68

    68

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

    View Slide

  69. 69


    View Slide