BuriKaigi2023 https://burikaigi.dev/ 登壇資料
at2023/01/21 ルーム: ホタルイカ 「サービス企画とUIデザインとWebアプリ開発を全部やってみたら良かった みんなのヨガ部 開発エピソード」
サービス企画とUIデザインとWebアプリ開発を全部やってみたら良かった2023/1/21 BuriKaigi 2023道家 陽介みんなのヨガ部 開発エピソード
View Slide
自己紹介道家 陽介金沢在住（2年目）Flashエンジニアを経たフロントエンドエンジニア。受託制作会社でテクニカルディレクターやPMを経験。現在はフリーランス。「みんなのヨガ部」というWebサービスを開発・運営。
サマリーオンラインヨガサービス「みんなのヨガ部」をWebアプリ化。サービス設計とUIデザインとバックエンドをフロントエンドエンジニアひとりで全部やってみた記録7 サービス開始とWebアプリ開発までの経ÆÅ UIデザインと開発でやったこ0Ä 全部やってみて感じたこと
みんなのヨガ部とはみんなのヨガ部は、「小さく長く続けやすく」をコンセプトにしたオンラインヨガスクールですB0 オンラインで場所や時間の制約がなr0 自宅でできる簡単なエクササイt0 Zoomで部分参加でも耳だけでも自由な利用を可能にす%0 安価なサブスクリプションで長く続けやすい仕組みで提供
サービス開始とWebアプリ開発の経緯UIデザインと開発でやったこと全部やってみて感じたこと
サービス開始とWebアプリ開発の経緯2010年頃 2010年頃 講師の「鈴木めゆ」さんおよびヨガとの出会い締切に追われても生きててよいんだ（ちょっと疲れていた）
サービス開始とWebアプリ開発の経緯2010年頃 2010年頃 講師の「鈴木めゆ」さんおよびヨガとの出会い2018年頃 都内のカフェで開催した呼吸で思考を整えるワークショップ締切に追われても生きててよいんだ（ちょっと疲れていた）マネジメントやデザインに通じる思想があって面白い！
サービス開始とWebアプリ開発の経緯2010年頃 2010年頃 講師の「鈴木めゆ」さんおよびヨガとの出会い2018年頃 都内のカフェで開催した呼吸で思考を整えるワークショップ2020年4月 新型コロナウイルス流行に伴う緊急事態宣言の発令呼吸の病気なのに呼吸を良くするレッスンができない事態に締切に追われても生きててよいんだ（疲れていた）マネジメントやデザインに通じる思想があって面白い！
サービス開始とWebアプリ開発の経緯2020年4月 新型コロナウイルス流行に伴う緊急事態宣言の発令2020年5月2020年6月Zoomを使って知り合いを集めてテストプレイPayPayやPeatixで集金しながら試行錯誤。結果noteサークルを採用2021年2022年8月しばらくはnoteサークル+Peatixで運用Webアプリ＋Stripeによる課金システムを構築し移行Peatixは営業窓口として継続
UIデザインと開発でやったこと全部やってみて感じたことサービス開始とWebアプリ開発の経緯
UIデザインと開発でやったことPH Figmaで画面デザインとコンポーネント設REH Firebase＋Nextでアプリケーションを構!H Chakra UIに組み込む
UIデザインと開発でやったこと前提としてChakra UIの採用を決めていたのでその前提で準備しました8s 8dpのグリッドシステムを採用8s FigmaのStylesを積極的に使う8s コンポーネント化は画面デザインをしながら随時。Figmaで画面デザインとコンポーネント設計
UIデザインと開発でやったこと8dpのグリッドシステム場合によって4pxのサブグリッドを入れることもあるFigmaで画面デザインとコンポーネント設計実際の濃さ
UIデザインと開発でやったことカラーシステム テキストスタイルFigmaで画面デザインとコンポーネント設計
コンポーネントHSTackやContainerを意識したレイアウト用のコンポーネントも模擬的に定義してる。ガイドとして利用するのと実装時のヒントにもなる。UIデザインと開発でやったことFigmaで画面デザインとコンポーネント設計
UIデザインと開発でやったこと他にFigmaでできないが意識したこと コンポーネントの語彙をChakra UIに合わせるq Border Radius(角丸)なども手入力だがChakra UIの値を利用するq AutoLayoutやConstraintsの利用、ガイドコンポーネントでレイアウトを表明する。Figmaで画面デザインとコンポーネント設計
UIデザインと開発でやったことコンポーネントにすることで実装の検証を半分くらい行える例例）次回以降の予定コンポーネントFigmaで画面デザインとコンポーネント設計幅は成り行きでストレッチコンポーネント幅に対してどう構造化し、整列、追従するかを表現できる。幅固定
UIデザインと開発でやったことアプリケーションの構成y Next.js でSSR(ホスティングはVercelQy Clean Architecture風味のレイヤードアーキテクチャパターry Firebase Authorization / Firestore Databasuy StripeFirebase＋Nextでアプリケーションを構築
UIデザインと開発でやったことNext.js でSSR(ホスティングはVercel)AWSとかでNext.jsのSSRなどの構築がめんどくさかった。App Runnerなどコンテナ技術を使えば構築は可能だがデプロイに20分近くかかる。コンテナで利用するパッケージのメンテナンスなども自身がなく負担が大きい。個人サービスなので素直にVercelでよいと思った。※GCPやAWSで縛られたらCloud runやApp Runner使うしか無いと思うが情報求ム。Firebase＋Nextでアプリケーションを構築
UIデザインと開発でやったことClean Architecture風味のレイヤードアーキテクチャパターンFirebase＋Nextでアプリケーションを構築domain層modelusecaserepositoryfirebasestripeviewcomponentsfeaturespagesmodelusecaseviewdomain層repositorypageUserFirebaseStripe
UIデザインと開発でやったことFirebaseAuthorizationFirestore DatabaseGmailのSSOと電話番号の実装Account - 登録ユーザー情報とStripeの顧客情報Lesson - 曜日ごとのレッスンとプランの紐付けSchedule - レッスンに紐づく予定とZoomURLあまりユーザーごとのデータを持たない設計。Firebase＋Nextでアプリケーションを構築
UIデザインと開発でやったことStripeFirebase＋Nextでアプリケーションを構築サブスクリプションの商品をAPIで取得する。Checkout.Session.Createを利用してStripe側で決済処理する。コールバックで決済情報を受け取りユーザーに紐付ける。ユーザーの顧客IDからSubscriptionを確認して該当するプランに紐づく予定のみ表示する仕組み。
UIデザインと開発でやったことChakra UIに組み込むコンポーネント設計 ディレクトリ構造とコンポーネント種別views/components 汎用コンポーネントviews/features/* ドメインコンポーネントpages/* ページコンポーネントNext.jsの構成を下敷きにレイヤードアーキテクチャを意識して構造化する。関心を集める・凝縮度を上げやすい構造
UIデザインと開発でやったことChakra UIに組み込む大事なことUIコンポーネント設計 ∋ Figmaで思考したことコンポーネント分割や命名、スタイリングやレイアウトの半分くらいはFigmaで決めたことをなぞるだけ。になるようにデザインできる。
UIデザインと開発でやったことChakra UIに組み込むテーマの設定Figmaで決めた値をマッピングして入れる。メインテーマを して で流す。メインテーマを更に拡張して管理画面用のテーマを用意する。export ThemeProviderimport { breakpoints } from './foundations/breakpoints'/* 中略 */const = {breakpoints,/* 中略 */}const = ( )export default themeexport const = ( , {/* 中略 */})customThemetheme customThemeadminTheme themeextendThemeextendTheme
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
UIデザインと開発でやったことChakra UIに組み込む汎用コンポーネントの実装基本的には のみに依存する。レイアウトの都合上、 のラッパーとなることが多いので のように互換性をもたせることが多い。PropsChakra UI FC
機能ごとの と に依存する。各 側でユースケースを呼び出し外部から取得したデータが流し込まれる想定。認証やナビゲーションなど一部の横断的機能も を通じて統合できる。こちらもレイアウトの都合で などの を継承することが多い。内部で使う単体のUIコンポーネントは分離して 化する。Context PropsProviderContextBox/Stack PropsmemoUIデザインと開発でやったことChakra UIに組み込むドメインコンポーネントの実装
ProviderContext内でユースケースを呼び出す。その に依存するドメインコンポーネントを子要素にしてデータを結合する。レイアウトへの流し込みを行う。UIデザインと開発でやったことChakra UIに組み込むページコンポーネントの実装
UIデザインと開発でやったことChakra UIに組み込むあとで気づいたことや考えていきたいこと※とても雑に思っていることなので懇親会とかで話したいです！！ は導入するとコンポーネントの検証が早い。特にレスポンシブh の分割の仕方をもっと工夫したら再描画を抑えられるh と の宣言するファイルをうまく分けないと が表示されないh うまく分けた上で をモックすることで複雑な も実現できそう。StorybookContextContext Provider StoryProvider Story
全部やってみて感じたことサービス開始とWebアプリ開発の経緯UIデザインと開発でやったこと
全部やってみて感じたことデザイナーの思考プロセスを理解できた 決めやすさ決めづらさを知る 何を決めて何を決めてないか知るデザインしながら設計するので開発効率はめちゃくちゃ良いロジックでデザインの品質にコミットするデザインへのコンプレックスを単純に減らせるフロントエンドエンジニアとして
全部やってみて感じたことデザインシステムなどシステマチックなデザインは開発に近いFigmaやSTUDIOのような思想のあるツールを使うUIフレームワークやデザインシステムを熟知するデザインに責任を持とういう気持ちでコミットできるコードを書かなくとも構造とルールをシステマチックに実装する結果、ビジュアルコミュニケーションやスタイリングに集中できるUIデザイナーとして
フロントエンドエンジニアがデザインに参加するデザイナーがアプリケーション設計に参加する月なみですが、双方の立場でのメリットを実感できました。全部やってみて感じたこと
チームもプロダクトもハッピーひとりでどちらもできるという選択肢が増える。分業したとしても、強化スキルとしてどちらの工程の品質を倍加できる。できることが増える楽しみをもっと多くの人に知ってもらえたら幸いです。全部やってみて感じたこと
参考書籍Micro State Management with React Hooks:直近読みはじめました。グローバルステートのアプローチの違いやContextの最適化、Jotaiなどのライブラリの仕組みや再描画抑制の仕組みなどを詳しく解説しています。著者: Daishi Kato
参考書籍Figma for UIデザインアプリ開発のためのデザイン、プロトタイプ、ハンドオフこれも先日買って読み始めたばかり。本日伝えようとしていたことがFigmaの活用法を通して書かれているのでフロントエンドエンジニアなどがデザインにより触れていく入門としても良いと思いました。著者: 沢田 俊介
参考書籍Firebase Authenticationで学ぶ ソーシャルログイン入門ID管理の原則にそった実装のベストプラクティス認証・認可の違いといった基本知識やFirebaseのやや複雑でドキュメントだけだと分かりづらい部分を丁寧に解説しています。著者のBOOTH等で販売しているシリーズも併せて読むとより詳しく理解できます。著者: Auth屋https://amzn.to/3J9hirT
PR: Burikaigi2023みんなのヨガ部 を使ってみてください！https://minnanoyogabu.com/BURIKAIGI2023お試しクーポン（初回登録時限定）
yd_niku
sakito
koel
dieckg
thebloggart
keroyama
akwkm
uxevents
uxaustralia
kenshi_tsukamoto
marset
loglass2019
nonsquared
samanthasiow
malarkey
kneath
jcasabona
sstephenson
holman
pedronauck
tanoku
jonyablonski
aarron
roundedbygravity