Slide 1

Slide 1 text

サービス企画とUIデザインと Webアプリ開発を全部やってみたら良かった 2023/1/21 BuriKaigi 2023 道家 陽介 みんなのヨガ部 開発エピソード

Slide 2

Slide 2 text

自己紹介 道家 陽介 金沢在住(2年目) Flashエンジニアを経たフロントエンドエンジニア。 受託制作会社でテクニカルディレクターやPMを経験。 現在はフリーランス。 「みんなのヨガ部」というWebサービスを開発・運営。

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

コンポーネント HSTackやContainerを意識した レイアウト用のコンポーネントも 模擬的に定義してる。 ガイドとして利用するのと 実装時のヒントにもなる。 UIデザインと開発でやったこと Figmaで画面デザインとコンポーネント設計

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

UIデザインと開発でやったこと Next.js でSSR(ホスティングはVercel) AWSとかでNext.jsのSSRなどの構築がめんどくさかった。 App Runnerなどコンテナ技術を使えば構築は可能だがデプロイに20分近くかかる。 コンテナで利用するパッケージのメンテナンスなども自身がなく負担が大きい。 個人サービスなので素直にVercelでよいと思った。 ※GCPやAWSで縛られたらCloud runやApp Runner使うしか無いと思うが情報求ム。 Firebase+Nextでアプリケーションを構築

Slide 20

Slide 20 text

UIデザインと開発でやったこと Clean Architecture風味のレイヤードアーキテクチャパターン Firebase+Nextでアプリケーションを構築 domain層 model usecase repository firebase stripe view components features pages model usecase view domain層 repository page User Firebase Stripe

Slide 21

Slide 21 text

UIデザインと開発でやったこと Firebase Authorization Firestore Database GmailのSSOと電話番号の実装 Account - 登録ユーザー情報とStripeの顧客情報 Lesson - 曜日ごとのレッスンとプランの紐付け Schedule - レッスンに紐づく予定とZoomURL あまりユーザーごとのデータを持たない設計。 Firebase+Nextでアプリケーションを構築

Slide 22

Slide 22 text

UIデザインと開発でやったこと Stripe Firebase+Nextでアプリケーションを構築 サブスクリプションの商品をAPIで取得する。 Checkout.Session.Createを利用してStripe側で決済処理する。 コールバックで決済情報を受け取りユーザーに紐付ける。 ユーザーの顧客IDからSubscriptionを確認して 該当するプランに紐づく予定のみ表示する仕組み。

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

UIデザインと開発でやったこと Chakra UIに組み込む 汎用コンポーネントの実装 基本的には のみに依存する。 レイアウトの都合上、 のラッパーとなることが多いので のよう に互換性をもたせることが多い。 Props Chakra UI FC

Slide 28

Slide 28 text

機能ごとの と に依存する。 各 側でユースケースを呼び出し外部から取得したデータが流し込まれる想定。 認証やナビゲーションなど一部の横断的機能も を通じて統合できる。 こちらもレイアウトの都合で などの を継承することが多い。 内部で使う単体のUIコンポーネントは分離して 化する。 Context Props Provider Context Box/Stack Props memo UIデザインと開発でやったこと Chakra UIに組み込む ドメインコンポーネントの実装

Slide 29

Slide 29 text

Provider Context 内でユースケースを呼び出す。 その に依存するドメインコンポーネントを子要素にしてデータを結合する。 レイアウトへの流し込みを行う。 UIデザインと開発でやったこと Chakra UIに組み込む ページコンポーネントの実装

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

全部やってみて感じたこと デザイナーの思考プロセスを理解できた   決めやすさ決めづらさを知る   何を決めて何を決めてないか知る デザインしながら設計するので開発効率はめちゃくちゃ良い ロジックでデザインの品質にコミットする デザインへのコンプレックスを単純に減らせる フロントエンドエンジニアとして

Slide 33

Slide 33 text

全部やってみて感じたこと デザインシステムなどシステマチックなデザインは開発に近い FigmaやSTUDIOのような思想のあるツールを使う UIフレームワークやデザインシステムを熟知する デザインに責任を持とういう気持ちでコミットできる コードを書かなくとも構造とルールをシステマチックに実装する 結果、ビジュアルコミュニケーションやスタイリングに集中できる UIデザイナーとして

Slide 34

Slide 34 text

フロントエンドエンジニアがデザインに参加する デザイナーがアプリケーション設計に参加する 月なみですが、双方の立場でのメリットを 実感できました。 全部やってみて感じたこと

Slide 35

Slide 35 text

チームもプロダクトもハッピー ひとりでどちらもできるという選択肢が増える。 分業したとしても、強化スキルとしてどちらの工程の品質を倍加できる。 できることが増える楽しみをもっと多くの人に知ってもらえたら幸いです。 全部やってみて感じたこと

Slide 36

Slide 36 text

参考書籍 Micro State Management with React Hooks: 直近読みはじめました。 グローバルステートのアプローチの違いや Contextの最適化、Jotaiなどのライブラリの 仕組みや再描画抑制の仕組みなどを詳しく解説 しています。 著者: Daishi Kato

Slide 37

Slide 37 text

参考書籍 Figma for UIデザイン アプリ開発のためのデザイン、プロトタイプ、ハンドオフ これも先日買って読み始めたばかり。 本日伝えようとしていたことが Figmaの活用法を通して書かれているので フロントエンドエンジニアなどがデザインに より触れていく入門としても良いと思いました。 著者: 沢田 俊介

Slide 38

Slide 38 text

参考書籍 Firebase Authenticationで学ぶ ソーシャルログイン入門 ID管理の原則にそった実装のベストプラクティス 認証・認可の違いといった基本知識や Firebaseのやや複雑でドキュメントだけだと 分かりづらい部分を丁寧に解説しています。 著者のBOOTH等で販売しているシリーズも 併せて読むとより詳しく理解できます。 著者: Auth屋 https://amzn.to/3J9hirT

Slide 39

Slide 39 text

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