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

BuriKaigi2023 みんなのヨガ部 開発エピソード

Yosuke Doke
January 21, 2023

BuriKaigi2023 みんなのヨガ部 開発エピソード

BuriKaigi2023 https://burikaigi.dev/ 登壇資料

at2023/01/21 ルーム: ホタルイカ

「サービス企画とUIデザインとWebアプリ開発を全部やってみたら良かった
みんなのヨガ部 開発エピソード」

Yosuke Doke

January 21, 2023
Tweet

More Decks by Yosuke Doke

Other Decks in Design

Transcript

  1. サービス企画とUIデザインと

    Webアプリ開発を全部やってみたら良かった
    2023/1/21 BuriKaigi 2023
    道家 陽介
    みんなのヨガ部 開発エピソード

    View Slide

  2. 自己紹介
    道家 陽介
    金沢在住(2年目)

    Flashエンジニアを経たフロントエンドエンジニア。

    受託制作会社でテクニカルディレクターやPMを経験。

    現在はフリーランス。

    「みんなのヨガ部」というWebサービスを開発・運営。

    View Slide

  3. サマリー
    オンラインヨガサービス「みんなのヨガ部」をWebアプリ化。

    サービス設計とUIデザインとバックエンドをフロントエンドエ
    ンジニアひとりで全部やってみた記録7
    サービス開始とWebアプリ開発までの経Æ
    Å UIデザインと開発でやったこ0
    Ä 全部やってみて感じたこと

    View Slide

  4. みんなのヨガ部とは
    みんなのヨガ部は、「小さく長く続けやすく」をコンセプトにした

    オンラインヨガスクールですB
    0 オンラインで場所や時間の制約がなr
    0 自宅でできる簡単なエクササイt
    0 Zoomで部分参加でも耳だけでも自由な利用を可能にす%
    0 安価なサブスクリプションで長く続けやすい仕組みで提供

    View Slide

  5. サービス開始とWebアプリ開発の経緯
    UIデザインと開発でやったこと

    全部やってみて感じたこと

    View Slide

  6. サービス開始とWebアプリ開発の経緯
    2010年頃 2010年頃  講師の「鈴木めゆ」さんおよびヨガとの出会い
    締切に追われても生きててよいんだ(ちょっと疲れていた)

    View Slide

  7. サービス開始とWebアプリ開発の経緯
    2010年頃 2010年頃  講師の「鈴木めゆ」さんおよびヨガとの出会い
    2018年頃 都内のカフェで開催した呼吸で思考を整えるワークショップ
    締切に追われても生きててよいんだ(ちょっと疲れていた)
    マネジメントやデザインに通じる思想があって面白い!

    View Slide

  8. サービス開始とWebアプリ開発の経緯
    2010年頃 2010年頃  講師の「鈴木めゆ」さんおよびヨガとの出会い
    2018年頃 都内のカフェで開催した呼吸で思考を整えるワークショップ
    2020年4月 新型コロナウイルス流行に伴う緊急事態宣言の発令
    呼吸の病気なのに呼吸を良くするレッスンができない事態に
    締切に追われても生きててよいんだ(疲れていた)
    マネジメントやデザインに通じる思想があって面白い!

    View Slide

  9. サービス開始とWebアプリ開発の経緯
    2020年4月 新型コロナウイルス流行に伴う緊急事態宣言の発令
    2020年5月
    2020年6月
    Zoomを使って知り合いを集めてテストプレイ
    PayPayやPeatixで集金しながら試行錯誤。結果noteサークルを採用
    2021年
    2022年8月
    しばらくはnoteサークル+Peatixで運用
    Webアプリ+Stripeによる課金システムを構築し移行Peatixは営業窓口として継続

    View Slide

  10. UIデザインと開発でやったこと
    全部やってみて感じたこと
    サービス開始とWebアプリ開発の経緯

    View Slide

  11. UIデザインと開発でやったこと
    PH Figmaで画面デザインとコンポーネント設R
    EH Firebase+Nextでアプリケーションを構!
    H Chakra UIに組み込む

    View Slide

  12. UIデザインと開発でやったこと
    前提としてChakra UIの採用を決めていたのでその前提で準備しました8
    s 8dpのグリッドシステムを採用8
    s FigmaのStylesを積極的に使う8
    s コンポーネント化は画面デザインをしながら随時。
    Figmaで画面デザインとコンポーネント設計

    View Slide

  13. UIデザインと開発でやったこと
    8dpのグリッドシステム
    場合によって4pxのサブグリッドを入れることもある
    Figmaで画面デザインとコンポーネント設計
    実際の濃さ

    View Slide

  14. UIデザインと開発でやったこと
    カラーシステム テキストスタイル
    Figmaで画面デザインとコンポーネント設計

    View Slide

  15. コンポーネント
    HSTackやContainerを意識した

    レイアウト用のコンポーネントも

    模擬的に定義してる。

    ガイドとして利用するのと

    実装時のヒントにもなる。

    UIデザインと開発でやったこと
    Figmaで画面デザインとコンポーネント設計

    View Slide

  16. UIデザインと開発でやったこと
    他にFigmaでできないが意識したこと
    — コンポーネントの語彙をChakra UIに合わせるq
    — Border Radius(角丸)なども手入力だがChakra UIの値を利用するq
    — AutoLayoutやConstraintsの利用、ガイドコンポーネントでレイアウトを表明する。


    Figmaで画面デザインとコンポーネント設計

    View Slide

  17. UIデザインと開発でやったこと
    コンポーネントにすることで実装の検証を半分くらい行える例
    例)次回以降の予定コンポーネント
    Figmaで画面デザインとコンポーネント設計
    幅は成り行きでストレッチ
    コンポーネント幅に対して
    どう構造化し、整列、追従
    するかを表現できる。
    幅固定

    View Slide

  18. UIデザインと開発でやったこと
    アプリケーションの構成
    y Next.js でSSR(ホスティングはVercelQ
    y Clean Architecture風味のレイヤードアーキテクチャパターr
    y Firebase Authorization / Firestore Databasu
    y Stripe
    Firebase+Nextでアプリケーションを構築

    View Slide

  19. UIデザインと開発でやったこと
    Next.js でSSR(ホスティングはVercel)
    AWSとかでNext.jsのSSRなどの構築がめんどくさかった。

    App Runnerなどコンテナ技術を使えば構築は可能だがデプロイに20分近くかかる。

    コンテナで利用するパッケージのメンテナンスなども自身がなく負担が大きい。

    個人サービスなので素直にVercelでよいと思った。


    ※GCPやAWSで縛られたらCloud runやApp Runner使うしか無いと思うが情報求ム。
    Firebase+Nextでアプリケーションを構築

    View Slide

  20. UIデザインと開発でやったこと
    Clean Architecture風味のレイヤードアーキテクチャパターン
    Firebase+Nextでアプリケーションを構築
    domain層

    model

    usecase

    repository

    firebase

    stripe

    view

    components

    features

    pages
    model
    usecase
    view
    domain層
    repository
    page
    User
    Firebase
    Stripe

    View Slide

  21. UIデザインと開発でやったこと
    Firebase

    Authorization

    Firestore Database
    GmailのSSOと電話番号の実装


    Account - 登録ユーザー情報とStripeの顧客情報

    Lesson - 曜日ごとのレッスンとプランの紐付け

    Schedule - レッスンに紐づく予定とZoomURL


    あまりユーザーごとのデータを持たない設計。
    Firebase+Nextでアプリケーションを構築

    View Slide

  22. UIデザインと開発でやったこと
    Stripe
    Firebase+Nextでアプリケーションを構築
    サブスクリプションの商品をAPIで取得する。

    Checkout.Session.Createを利用してStripe側で決済処理する。

    コールバックで決済情報を受け取りユーザーに紐付ける。


    ユーザーの顧客IDからSubscriptionを確認して

    該当するプランに紐づく予定のみ表示する仕組み。

    View Slide

  23. UIデザインと開発でやったこと
    Chakra UIに組み込む
    コンポーネント設計 ディレクトリ構造とコンポーネント種別
    views/components 汎用コンポーネント
    views/features/* ドメインコンポーネント
    pages/* ページコンポーネント
    Next.jsの構成を下敷きにレイヤードアー
    キテクチャを意識して構造化する。

    関心を集める・凝縮度を上げやすい構造

    View Slide

  24. UIデザインと開発でやったこと
    Chakra UIに組み込む
    大事なこと
    UIコンポーネント設計 ∋ Figmaで思考したこと
    コンポーネント分割や命名、スタイリングやレイアウトの半分くらいは

    Figmaで決めたことをなぞるだけ。になるようにデザインできる。

    View Slide

  25. UIデザインと開発でやったこと
    Chakra UIに組み込む
    テーマの設定
    Figmaで決めた値をマッピングして入れる。

    メインテーマを して で
    流す。

    メインテーマを更に拡張して管理画面用の

    テーマを用意する。
    export ThemeProvider
    import { breakpoints } from './foundations/breakpoints'

    /* 中略 */

    const = {

    breakpoints,

    /* 中略 */

    }

    const = ( )

    export default theme


    export const = ( , {

    /* 中略 */

    })

    customTheme
    theme customTheme
    adminTheme theme
    extendTheme
    extendTheme

    View Slide

  26. UIデザインと開発でやったこと
    Chakra UIに組み込む
    既存コンポーネントの拡張 export const = {

    : {

    : {

    fontSize: '4xl',

    fontWeight: 'light',

    lineHeight: 10,

    },

    : {

    fontSize: '3xl',

    fontWeight: 'normal',

    lineHeight: 10,

    },

    '2xl': {

    Heading
    '4xl'
    '3xl'
    sizes
    テキストスタイルなどを のvariantに
    割り当てていく。
    Chakra UI

    View Slide

  27. UIデザインと開発でやったこと
    Chakra UIに組み込む
    汎用コンポーネントの実装
    基本的には のみに依存する。

    レイアウトの都合上、 のラッパーとなることが多いので のよう
    に互換性をもたせることが多い。
    Props
    Chakra UI FC

    View Slide

  28. 機能ごとの と に依存する。

    各 側でユースケースを呼び出し外部から取得したデータが流し込まれる想定。

    認証やナビゲーションなど一部の横断的機能も を通じて統合できる。

    こちらもレイアウトの都合で などの を継承することが多い。

    内部で使う単体のUIコンポーネントは分離して 化する。
    Context Props
    Provider
    Context
    Box/Stack Props
    memo
    UIデザインと開発でやったこと
    Chakra UIに組み込む
    ドメインコンポーネントの実装

    View Slide

  29. Provider
    Context
    内でユースケースを呼び出す。

    その に依存するドメインコンポーネントを子要素にしてデータを結合する。

    レイアウトへの流し込みを行う。


    UIデザインと開発でやったこと
    Chakra UIに組み込む
    ページコンポーネントの実装

    View Slide

  30. UIデザインと開発でやったこと
    Chakra UIに組み込む
    あとで気づいたことや考えていきたいこと

    ※とても雑に思っていることなので懇親会とかで話したいです!!
    „ は導入するとコンポーネントの検証が早い。特にレスポンシブh
    „ の分割の仕方をもっと工夫したら再描画を抑えられるh
    „ と の宣言するファイルをうまく分けないと が表示されないh
    „ うまく分けた上で をモックすることで複雑な も実現できそう。
    Storybook
    Context
    Context Provider Story
    Provider Story

    View Slide

  31. 全部やってみて感じたこと
    サービス開始とWebアプリ開発の経緯

    UIデザインと開発でやったこと

    View Slide

  32. 全部やってみて感じたこと
    デザイナーの思考プロセスを理解できた

      決めやすさ決めづらさを知る

      何を決めて何を決めてないか知る

    デザインしながら設計するので開発効率はめちゃくちゃ良い


    ロジックでデザインの品質にコミットする

    デザインへのコンプレックスを単純に減らせる
    フロントエンドエンジニアとして

    View Slide

  33. 全部やってみて感じたこと
    デザインシステムなどシステマチックなデザインは開発に近い

    FigmaやSTUDIOのような思想のあるツールを使う

    UIフレームワークやデザインシステムを熟知する

    デザインに責任を持とういう気持ちでコミットできる


    コードを書かなくとも構造とルールをシステマチックに実装する

    結果、ビジュアルコミュニケーションやスタイリングに集中できる

    UIデザイナーとして

    View Slide

  34. フロントエンドエンジニアがデザインに参加する

    デザイナーがアプリケーション設計に参加する



    月なみですが、双方の立場でのメリットを

    実感できました。

    全部やってみて感じたこと

    View Slide

  35. チームもプロダクトもハッピー
    ひとりでどちらもできるという選択肢が増える。

    分業したとしても、強化スキルとしてどちらの工程の品質を倍加できる。

    できることが増える楽しみをもっと多くの人に知ってもらえたら幸いです。
    全部やってみて感じたこと

    View Slide

  36. 参考書籍
    Micro State Management with React Hooks:
    直近読みはじめました。

    グローバルステートのアプローチの違いや

    Contextの最適化、Jotaiなどのライブラリの

    仕組みや再描画抑制の仕組みなどを詳しく解説

    しています。
    著者: Daishi Kato

    View Slide

  37. 参考書籍
    Figma for UIデザイン

    アプリ開発のためのデザイン、プロトタイプ、ハンドオフ
    これも先日買って読み始めたばかり。

    本日伝えようとしていたことが

    Figmaの活用法を通して書かれているので

    フロントエンドエンジニアなどがデザインに

    より触れていく入門としても良いと思いました。
    著者: 沢田 俊介

    View Slide

  38. 参考書籍
    Firebase Authenticationで学ぶ ソーシャルログイン入門
    ID管理の原則にそった実装のベストプラクティス
    認証・認可の違いといった基本知識や

    Firebaseのやや複雑でドキュメントだけだと

    分かりづらい部分を丁寧に解説しています。

    著者のBOOTH等で販売しているシリーズも

    併せて読むとより詳しく理解できます。
    著者: Auth屋
    https://amzn.to/3J9hirT

    View Slide

  39. PR: Burikaigi2023
    みんなのヨガ部 を使ってみてください!
    https://minnanoyogabu.com/
    BURIKAIGI2023
    お試しクーポン(初回登録時限定)

    View Slide