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

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

mahiguch
October 25, 2022

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

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

mahiguch

October 25, 2022
Tweet

More Decks by mahiguch

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 2

    2

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

    View full-size slide

  3. 3

    3

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

    View full-size slide

  4. 4

    4

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

    View full-size slide

  5. 5

    5

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

    View full-size slide

  6. 6

    6

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

    View full-size slide

  7. 7

    7

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

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

    View full-size slide

  8. 8

    8

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

    View full-size slide

  9. 9

    9

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

    View full-size slide

  10. 10

    10

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

    View full-size slide

  11. 11

    11

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

    View full-size slide

  12. 12

    12

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

    View full-size slide

  13. 13

    13

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

    View full-size slide

  14. 14

    14

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

    View full-size slide

  15. 15

    15

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

    View full-size slide

  16. 16

    16

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

    View full-size slide

  17. 17

    17

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

    View full-size slide

  18. 18

    18

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

    View full-size slide

  19. 19

    19

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

    View full-size slide

  20. 20

    20

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

    View full-size slide

  21. 21

    21

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

    View full-size slide

  22. 22

    22

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

    View full-size slide

  23. 23

    23

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

    View full-size slide

  24. 24

    どう使う色か
    (Semantic Colors)
    24

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

    View full-size slide

  25. 25

    25


    View full-size slide

  26. 26

    26

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

    View full-size slide

  27. 27

    27

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

    View full-size slide

  28. 28

    28

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

    View full-size slide

  29. 29

    29

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

    View full-size slide

  30. 30

    30

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

    View full-size slide

  31. 31

    31

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

    View full-size slide

  32. 32

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

    WebFront開発の流れ

    View full-size 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 full-size slide

  34. 34

    34

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

    View full-size 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 full-size slide

  36. 36

    36

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

    div
    SidebarOrganization
    【変更前】

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

    View full-size slide

  37. 37

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

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

    View full-size slide

  38. 38

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

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

    View full-size slide

  39. 39

    39

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

    View full-size slide

  40. 40

    40

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

    View full-size slide

  41. 41

    41

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

    View full-size slide

  42. 42

    42

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

    View full-size slide

  43. 43

    43

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

    View full-size slide

  44. 44

    44

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

    View full-size slide

  45. 45

    45

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

    View full-size 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 full-size 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 full-size slide

  48. 48

    48

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

    View full-size slide

  49. 49

    49

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

    View full-size slide

  50. 50

    50

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

    View full-size slide

  51. 51

    51

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

    View full-size slide

  52. 52

    52

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

    View full-size 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 full-size 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 full-size slide

  55. 55

    55

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

    View full-size slide

  56. 56

    56

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

    View full-size slide

  57. 57

    57

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

    View full-size slide

  58. 58

    58

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

    View full-size slide

  59. 59

    59

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  63. 63

    63

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

    “files”:[
    {

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  67. 67

    67

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

    View full-size slide

  68. 68

    68

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

    View full-size slide