GREE Tech Conference 2022で発表された資料です。 https://techcon.gree.jp/2022/session/TrackA-2
アウモ株式会社 デザイナー 笠 峻志爆速で成長するおでかけ情報サービスの成長を支えるデザインと開発の取り組みについてアウモ株式会社 エンジニア 樋口雅拓アウモ株式会社 エンジニア 関谷恒甫
View Slide
2 2 名前 樋口雅拓（ひぐち まさひろ）担当ソフトウェア開発SaaS事業に関するソフトウェア開発業務全般を担当経歴 2022年よりアウモに参加登壇者プロフィール
3 3 名前 関谷恒甫（せきや こうすけ）担当エンジニアメディア側と比較サイト側のサーバサイドとフロントサイドを主に担当経歴2020年グリー新卒入社株式会社WFSを経て2021年12月にアウモに参加登壇者プロフィール
4 4 名前 笠 峻志（かさ たかし）担当デザインサービスのUI、aumoに関わるクリエイティブ、営業資料などのビジュアルデザイン全般を担当経歴 2018年よりアウモに参加登壇者プロフィール
5 5 アジェンダ❏ aumoについて❏ デザインの取り組み❏ ソフトウェアの取り組み❏ インフラの取り組み
6 6 アジェンダ❏ aumoについて❏ デザインの取り組み❏ ソフトウェアの取り組み❏ インフラの取り組み
7 7 国内最大級のおでかけ情報サービス80万 60万掲載記事数 総口コミ数 掲載メディア数500appカテゴリランキング両 OS首位「Google Play ベスト オブ 2018」ベスト アプリ2018 生活お役立ち部門 優秀賞※2019年1月時点1500万 500万月間ユーザー数 アプリDL数 月間流通額12億円aumoについて
8 8 おでかけ情報サービスaumoの開発・運営（Web/App）を行うメディア事業飲食店・宿泊施設・小売店など実店舗事業者様向けSaaS事業aumoマイビジネスSaaS事業メディア事業事業紹介
9 9 事業を通じて実現したい未来メディア SaaS課題ユーザー 店舗・施設行きたいお店、施設、場所が見つからないEx.地元で人気の飲食店に行きたいのに定番のお店しか情報がない価値提供ユーザーとロケーションのマッチング最適化地域情報を網羅的に集めて、求めるユーザーに届ける課題大規模ポータルサイトに広告投下しないと集客ができない、簡単・安価にマーケティングしたい価値提供実店舗のマーケティングをワンストップで提供サイト作成、顧客管理、プロモーション、決済など
10 10 メディア事業の提供サービス記事 ロケーション 施設 コミュニティ
11 11 メディア事業の特徴SEOに最適化されたコンテンツ制作位置情報などを利用したレコメンドシステムユーザーの口コミを活用したおでかけCGM
12 12 SaaS事業の提供サービス実店舗が必要なマーケティング（ SEO・SNS・MEOなど）をワンプロダクトで管理・運用・分析することで、コストを削減し、集客効果をあげることができるツールです実店舗向けマーケティングSaaSaumoマイビジネス3万突破導入店舗数
13 13 SaaS事業の特徴SNSのアカウント管理や分析、SNS投稿のサイト掲載ができるフォロワーを増やしたい・認知を広げたいなどのニーズに合わせた広告出稿も可能SNSドメインパワーの強いaumoサイト内に施設ページを作成SEO獲得しているキーワードページに掲載が可能SEO(検索対策)Googleビジネスプロフィールを一括管理できるMEOの順位をさらに上げたい場合も施策投下可能MEO(マップ検索対策)実店舗のマーケティングとして必須と言われるSEO・SNS・MEOの領域で主にサービスを展開
14 14 今後事業の方針ユーザー規模を3年で3倍にしていく(より多くのユーザーに使ってもらうサービスに )メディア事業口コミなど一般ユーザーの生の情報が集まるメディアを目指す投稿したくなるサービスに磨きをかけて、コミュニティを活性化させて、ユーザーからの口コミを増やす（UI/UXの改善、ポイント機能、満足度の高いレコメンド機能など）より多くのユーザーが使える環境づくり速度改善、SEO改善など顧客のニーズにあわせた機能開発を爆速で進めていくSaaS事業ロイヤルカスタマーを生み出せるための機能開発デジタルギフト、プレゼントキャンペーン機能など店舗・施設の情報を、より多くのユーザーに最適に届ける仕組みづくりプレスリリース掲載・拡散Googleビジネスプロフィール管理ツールなど
15 15 本題爆速で成長するおでかけ情報サービスの成長を支えるデザインと開発の取り組みについて
16 16 アジェンダ❏ aumoについて❏ デザインの取り組み❏ ソフトウェアの取り組み❏ インフラの取り組み
17 17 サービスの成長を支えるためのカラーシステムの設計デザインの取り組み
18 18 ● 提供サービスが増えスタイルガイドがサービス規模に合わなくなった● プロダクト開発に関わるメンバーも増え共通認識を明文化していく必要ができた背景
19 19 • 色の役割の定義が不明確• 色に拡張性がなく追加・変更に弱い• 実装と連動しにくい現状の課題キーカラーのみの定義
20 20 課題の具体例色に拡張性がなく追加・変更に弱い
21 21 デザイナー間やプロダクト開発チームの共通言語として機能する変更に強いカラーシステムの設計今回達成したいこと
22 22 キーカラーを基準にHSLのL（輝度）を調整して11段階のトーンを作成※本来は輝度に併せて色相とや彩度を調整するのが理想だが、今回はパレットの拡充を優先カラーパレットの展開
23 23 同じ方法で各色展開してきカラーパレットを構築カラーパレットの展開
24 どう使う色か（Semantic Colors）24 デザイントークンの概念を導入し「具体値」と「意味」に役割を分け変更に強い仕組みを作る#fad300デザイントークンの概念を導入どんな色か（Primitive Colors）
25 25 例
26 26 before after用途がわかりにくい 用途が明確で変更も容易デザイントークンの概念の導入
27 27 できたこと• 色の役割や定義が明確になった• 仕組みと色の具体値をわけて考慮できるようになり、変更に強くなった• デザインとエンジニアリングをつなぐ基盤ができたまとめ
28 28 ❏ aumoについて❏ デザインの取り組み❏ ソフトウェアの取り組み❏ インフラの取り組みアジェンダ
29 29 サービスの成長を支えるためのソフトウェアの取り組みソフトウェアの取り組み
30 30 ● デザインの取り組みにより、スタイルガイドが更新され、デザイン業務が改善された。● スタイルガイドを使って実装していなかった。● スタイルガイドを使って実装することで、改善効果を実装に波及させる。背景と目的
31 31 背景と目的● アウモ株式会社では、Media事業とSaaS事業を行なっています。今回はSaaS事業の話です。● SaaS事業は法人向けに業務改善ツールを提供しています。● システム構成はNuxt/RoR/MySQL。今回はNuxtの部分の話です。MySQLRailsAPINuxt.js対象システムについて
32 ● デザイナーがUI設計を行い、Figmaに書き出す。● エンジニアがこれに近づけるように実装していた。32 WebFront開発の流れ
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/>
34 34 ● 画面で使う色や形は限られている。● 色や形だけでなく、それらをまとめた部品を作ってもらう。● その部品を実装することで、デザインの意図を早く確実に実装可能としたい。スタイルガイド対応からデザインシステムへ
35 35 pages/organizations/_id/leaflets/_leafletid/index.vue【変更後】export default {layout: 'OrganizationTemplate'}【変更前】headerimg(src="~assets/images/logo.svg")div お店・施設管理画面チラシ入稿画面 - レイアウトコンポーネント
36 36 pages/organizations/_id/leaflets/_leafletid/index.vue【変更後】divSidebarOrganization【変更前】ulli NuxtLink(:to="path") 店舗管理li NuxtLink(:to="path") 店舗一覧チラシ入稿画面 - メニューコンポーネント
37 components/molecules/form/shop/FormShopLeafletImages.vue【変更後】divFormShopLeafletImages37 【変更前】formdiv(v-for="image inleafletImages" :key="image.id")チラシ入稿画面 - コンポーネントコンポーネント
38 ● デザインとソフトウェアの連携を高めることで、再利用可能で変更に強いソフトウェアを開発できるようになった。● 今後はより多くの人と連携することでドメイン知識を共有し、より堅牢なソフトウェアを開発していきたい。38 まとめUI/UX設計を早く確実に実装できるような取り組みを進めています。次は、アプリケーションを早く確実にユーザへデリバリーするため、aumoで行ったインフラ環境改善事例について説明します。
39 39 ❏ aumoについて❏ デザインの取り組み❏ ソフトウェアの取り組み❏ インフラの取り組みアジェンダ
40 40 サービスの成長を支えるためのテストの自動化とデプロイアセット更新の自動化インフラの取り組み
41 41 QCDの最優先がDからQへと変化したため作業の自動化による工数削減と考慮漏れや作業漏れ防止による品質向上をしたいなぜやるのかQCD QCD
42 42 ● デプロイ頻度の高さ○ 開発差分が出来上がる度に各人がデプロイ作業をする体制○ デプロイ先も多い■ qaデプロイの際はqa■ 本番デプロイの際はinternalとproduction● 作業の手間と抜け漏れリスク○ rspecテストによるデータ整合性の確認○ アセット更新によるアセット差分の反映■ gulpでアセット差分を作成してコミット■ aws s3 syncデプロイに関する課題
43 43 ● デプロイ頻度の高さ○ 開発差分が出来上がる度に各人がデプロイ作業をする体制○ デプロイ先も多い■ qaデプロイの際はqa■ 本番デプロイの際はinternalとproduction● 作業の手間と抜け漏れリスク○ rspecテストによるデータ整合性の確認○ アセット更新によるアセット差分の反映■ gulpでアセット差分を作成してコミット■ aws s3 sync→ github actionsで自動化するデプロイに関する課題
44 44 ● github actions上で○ 環境構築○ テスト自動化○ アセット更新自動化github actionsでの作業自動化
45 45 ● github actions上で○ 環境構築○ テスト自動化○ アセット更新自動化github actionsでの作業自動化
46 46 ● リポジトリをcloneする○ aumoの実装やDB周りが入ったaumoリポジトリ- name: Clone Aumo Repositoryuses: actions/checkout@v2with:repository: aumo-repositorytoken: ${{ secrets.ACCESS_TOKEN }}path: aumogithub actions 上で環境構築
47 47 ● testDB準備○ aumoのコンテナでDBのcreateとresetとmigrate- name: migration test_dbworking-directory: ./aumoenv:RAILS_ENV: testrun: |docker-compose run –rm aumo bundle exec rails db:create RAILS_ENV=testdocker-compose run –rm aumo bundle exec rails db:reset RAILS_ENV=testdocker-compose run –rm aumo bundle exec rails aumo:db:migrate RAILS_ENV=testgithub actions 上で環境構築
48 48 ● github actions上で○ 環境構築○ テスト自動化○ アセット更新自動化github actionsでの作業自動化
49 49 ● testする！○ rspecを叩く！- name: Test with Rspecworking-directory: ./aumorun: docker-compose run --rm web bundle exec rspecテスト自動化
50 50 ● github actions上で○ 環境構築○ テスト自動化○ アセット更新自動化github actionsでの作業自動化
51 51 ● gulpとは○ オープンソースのJavaScriptツールキット○ フロントWeb開発でストリーミングビルドシステムとして使用されるTypeScriptPNGSassMarkdownJavascriptWebPCSSHTML
52 52 ● gulpのためにnodeのバージョンを指定してインストールする○ aumoリポジトリのバージョン指定ファイルを読み込んで指定- name: Setup Node.jsuses: actions/setup-node@v3with:node-version-file: ./.node-versionアセット更新自動化
53 53 ● gulpのアセット差分作成とコミット- name: Run Gulp & Commit & Pushrun: |npm run gulp -- releasegit config user.name github-actionsgit config user.email [email protected]git add public/assetsgit commit -m “Update assets[skip actions]”git pushアセット更新自動化
54 54 ● awsとの接続を認証- name: “Configure AWS credentials”uses:aws-actions/configure-aws-credentials@v1with: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 ● gulpのアセットをaws s3にsyncアセット更新自動化- name: Sync S3working-directory: ./public/assetsrun: aws s3 sync . S3://hogehoge..
56 56 ● コンフリクトを回避したい○ aumoではGithub workflowに近い運用をしている○ featureでアセット差分をコミットすると、developやqaへのマージの際にコンフリクトが発生してしまうアセット更新コミットコンフリクトfeature/xxxfeature/yyydevelopmasterアセット更新 - ブランチで実行有無制御
57 57 ● コンフリクトを回避したい○ aumoではGithub workflowに近い運用をしている○ featureでアセット差分をコミットすると、developやqaへのマージの際にコンフリクトが発生してしまうfeature/xxxfeature/yyyqaアセット更新 - ブランチで実行有無制御アセット更新コミットコンフリクト
58 58 ● コンフリクトを回避したい○ aumoではGithub workflowに近い運用をしている○ featureでアセット差分をコミットすると、developやqaへのマージの際にコンフリクトが発生してしまう○ developブランチまたはqa用のブランチでのみアセット更新を行うようにするfeature/xxxfeature/yyyqaアセット更新 - ブランチで実行有無制御アセット更新コミットコンフリクト
59 59 ● コンフリクトを回避したい○ aumoではGithub workflowに近い運用をしている○ featureでアセット差分をコミットすると、developやqaへのマージの際にコンフリクトが発生してしまう○ developブランチまたはqa用のブランチでのみアセット更新を行うようにするif: ${{ github.head_ref == ‘develop’ || contains(github.head_ref, ‘tmp/qa’)) }}アセット更新 - ブランチで実行有無制御
60 60 ● アセットの差分をチェックするworkflowを作成on:workflow_call:inputs:workflow_id:description: APIで取得したいworkflow_id(or filename)type: stringrequired: truegrep_argument:description: 差分にフィルターをかけるgrepの引数(オプション込み)type: stringrequired: truesecrets:access_token:required: trueoutputs:should_run:description: GREP_ARGUMENTに対する差分があったか(呼び出し元で後続処理すべきか)value: ${{ jobs.check.outputs.should_run }}アセット更新 - 差分で実行有無制御
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 ● github APIで 前回成功したworkflowのcommitのSHAを取得する- id: get_shaname: Get the last success workflow sharun: |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 ● github APIで 差分取得する○ GET https://api.github.com/repos/{owner}/{repo}/compare/ {basehead}○ {…“files”:[{…“filename”: XXXXXXXXX}]}アセット更新 - 差分で実行有無制御
64 64 ● github APIで 差分取得しアセットに差分があればtrueを返す- id: checkname: Check Diff Assetsrun: |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 +ediff_filtered=$(echo “$diff_filenames” | grep ${{ inputs.grep_argument }})set -eecho “should_run=`[ -n “$diff_filtered” ] && echo “true” || echo “false”`” >> $GITHUB_OUTPUTアセット更新 - 差分で実行有無制御
65 65 ● 差分チェックworkflowを呼び出し、結果で実行有無制御jobs:check:if: ${{ github.head_ref == ‘develop’ || contains(github.head_ref, ‘tmp/qa’)) }}uses: ./.github/workflows/check_diff.ymlwith:workflow_id: update_assets.ymlgrep_argument: “-E ‘^frontend/’”secrets:access_token: ${{ secrets.ACCESS_TOKEN }}update_assets:needs: checkif: ${{ needs.check.outputs.should_run == ‘true’ }}# アセット更新処理アセット更新 - 差分で実行有無制御
66 66 ● 差分チェックworkflowを呼び出し、結果で実行有無制御jobs:check:if: ${{ !contains(github.head_ref, ‘tmp/qa’)) }}uses: ./.github/workflows/check_diff.ymlwith:workflow_id: test.ymlgrep_argument: “-vE ‘^frontend/’”secrets:access_token: ${{ secrets.ACCESS_TOKEN }}test:needs: checkif: ${{ needs.check.outputs.should_run == ‘true’ }}# テスト処理テスト - 実行有無制御
67 67 ● テストが自動化された○ 作業工数を削減できた○ データ整合性に関する品質の担保がされた● デプロイアセット更新を自動化した○ 作業工数を削減できた○ アセット更新に関する品質の担保ができた● 心理的安全性が向上した● 興味ある開発改善分野のタスクに手を上げて経験をつめた● 今後もさらなる工数削減や品質の担保を進めていきたい作業自動化まとめ
68 68 このセッションのまとめ● aumoについて○ 顧客もユーザもサービスも拡大している● デザインの取り組み○ 用途毎のわかりやすく柔軟なデザインを定義● ソフトウェアの取り組み○ デザイン定義を実装に伝搬● インフラの取り組み○ 作業を自動化● 長期的な工数削減と品質担保で心理的安全性を向上
69
gree_tech
asei
rynsuke
nwiizo
toranoana
palark
kazuhitotakahashi
kddisnowvillage
sugawani
coconala_engineer
fedepaol
smasato
codenote
reverentgeek
geoffreycrofte
geeforr
denniskardys
chrisshort
tenderlove
jnunemaker
holman
jcasabona
jmmastey
myddelton
revolveconf