👒 Kiraku

ファッションを'着'楽に。

「Kiraku」は初心者〜上級者まで誰でも気楽に使えるファッション共有 SNS です。

URL

App

• こちらのページよりテストログインが可能です。
• ファッション投稿サイトとありますが、テストログインアカウントではファッションに限らず自由に機能をお試しください。

GitHub

Storybook

Figma 設計図(UIモデル/画面遷移図/ER図)

Figma デザインカンプ

Technologies

領域	技術やツール
デザイン/設計	Figma/Storybook
フロントエンド	Next.js(React)/TypeScript/
バックエンド	Firebase/Hasura(PostgreSQL)
状態管理/データフェッチ	Apollo
スタイル	ChakraUI/Emotion
Hosting	Vercel/Heroku
API Server	Firebase Functions
認証	Firebase Authentication
ストレージ	Firebase Storage
Linter/Formatter	ESLint/Prettier
Testing	Jest/React Testing Library

その他ライブラリ等

• husky(pre commit時のコードlint)
• graphql-codegen(Hasuraエンドポイントからの自動型生成)
• react-hook-form,yup(フォームバリデーション)
• draft-js,react-draft-wysiwyg(WYSIWYGエディタ実装)
• browser-image-compression(画像圧縮)
• react-image-crop(画像トリミング)
• framer-motion(CSSアニメーション)
• react-tag-input(タグUI実装)

Concept

"着"楽にファッション。

より多くの人にファッションを"気楽"に”着て”ほしいという思いから、その2つを掛け合わせた造語をキャッチコピーにしました。

私自身が、現代のファッション系SNSをユーザとして使って感じていた課題は「敷居が高い」ということです。
他撮り＋高画質＋フルコーディネートの写真ばかりのSNSは、ファッション初心者にとっては参入障壁が高く、
幅広いユーザ獲得に繋がらないのでは、と感じました。

Kirakuではそういった課題を解決すべく幅広いユーザをターゲットとしています。
初心者でも、ファッションの一部分でも文字通り気楽に投稿していただくことで、参入障壁を低くし
より多くの人にファッションを楽しんでもらう機会を与えたいと考え制作しました。

Functions

Aboutページ

Aboutページからアプリの全体像と使用方法を知ることができる。

サインイン/サインアップ

ユーザはTwitter, Google, Emailでの３種類の方法でアカウント作成が可能。
FirebaseAuthenticationによって認証を行う。 それぞれの入力フォームにはreact-hook-formを採用しており、再レンダリングやバリデーションを考慮して実装。

ポスト

1枚の画像付きの短めの文章(250文字以内)で投稿が可能なコンテンツ。
投稿した画像はFirebaseStorageにアップロードされる。
また、投稿前にbrowser-image-compressionを使い圧縮してから格納している。(ブログも同様)

ブログ

画像と文章量に制限がなく投稿ができるコンテンツ。
ブログ感覚で長めの文章を書きたいユーザ向け。
リッチエディタをdraft-js, react-draft-wysiwygによって実装。　

ブランド/トピックス

ポストとブログには、ブランドとトピックスのタグを付与できる。

コメント

ポストとブログにはログイン済みユーザがコメントを付けられる。
GraphQLのSubscriptionsを用いて実装。

いいね

ポストとブログにはログイン済みユーザがいいねをできる。
いいね時のCSSアニメーションにはframer-motionを使用。　

ユーザプロフィール

ユーザ個人のプロフィール画面からは自分の投稿したコンテンツ、自分がいいねしたコンテンツ、
フォロー中ユーザとフォロワーが閲覧可能。
また、自分自身のプロフィール編集が可能で、サムネイル画像の変更では任意の画像を任意のサイズで登録できる。
この際の画像トリミング処理にはreact-image-cropを使用。

ユーザフォロー

他ユーザに対してフォローをすることが可能。

検索

ヘッダーの検索バーへ文字を入力し、虫眼鏡マークを押すことでコンテンツの検索が可能。

• ポストの内容
• ブログのタイトル
• ユーザー名 をそれぞれ検索結果に出力する。

Impressions

設計の進め方

① コンセプトやターゲットを簡単に考える(紙やスプレッドシートで作成)
② 機能の一覧を考える(マインドマップ等で作成)
③ 機能から考えられるUIのモデルと画面遷移を考える(紙やFigma上で作成)
④ ワイヤーフレーム、デザインカンプを作成(Figmaで作成、今回はデザインカンプのみ)
⑤ 作ったUIモデルやワイヤーから必要なデータを考えER図を作成(draw.ioを使用)

ER図

苦労した点、悩んだ点

• 全ページフルレスポンシブ対応
• オブジェクト指向UIを意識したデザイン
• TypeScriptをReactで使う際の型定義
• コンポーネント分割の粒度について
• APIにGraphQLを採用したこと
• FirebaseAuthとHasura連携時のjwt認証
• HasuraのPermissions設定
• Apolloによるグローバルなステート管理とローカルなステート管理
• Apolloによるデータのcacheの取り扱い
• リッチエディタでの記述データをどうDBに格納するか
• SSG/ISRページのデータ更新時の挙動
• 再レンダリングの抑制について(useMemo,React.memo,useCallback等)
• LighthouseによるCoreWebVitalsのポイント監視と改善方法
• 非同期処理
• 設計のやり方

今後の改善点

以下にまとめています。 #65 (comment)