海と冒険者のためのファッション。コバルトラインプレゼントにも最適!写真から作るペットオーダーグッズ。Cobalt Line×mofuno

【Next.js】会員制マンガ閲覧・投稿Webアプリ開発のフロントエンド開発支援

Webアプリケーション
Firebase
Next.js
Typescript
Vercel

マンガを閲覧・投稿できる会員制Webアプリケーションのフロントエンド開発を支援させていただきました。

Webアプリ機能について

マンガの閲覧自体はアカウントがなくても可能ですが、アカウントを作成することでマンガの投稿やブックマークなどの機能が使えるサービスです。

  • アカウント作成/編集/退会
  • ユーザー認証(Google・Twitter・メールアドレス)
  • マンガ投稿/編集/閲覧
  • いいね
  • ブックマーク
  • ユーザーが指定した作者の非表示/再表示

Webアプリ開発について

支援期間

初期リリースまで4ヶ月、リリース後3ヶ月

担当

  • フロントエンド設計・技術選定
  • フロントエンド開発
  • シナリオテスト
  • (UIデザイン)

主な言語・フレームワークなど

ホスティング(デプロイ先)

Vercel

開発後コメント

今回は5人ほどのチームに入り、開発支援させていただきました。
フロントエンドが私一人だったので幅広く担当させていただきました。

2022年10月にNext.js v13がリリースされましたが、issueの挙がり具合を調べ開発スピードへの影響を考慮しv12で開発をしています。

漫画Webアプリサービスということで、画像を多く使用しWebマーケティング施策が不可欠だったため、SEOを考慮し表示速度パフォーマンスやバンドルサイズに気をつけ開発を行いました。

機能のみの提供でスタイリングがされていないmaterialUI Baseを取り入れ、開発スピードの助けになってもらいながらstyled-componentsで独自のスタイリングをあてられるようにしています。

ユーザーはいいねをしたくなること、作者はいいねをされてモチベーションが上がることのサイクルができることを目指し、いいねのアクションをした際にLottieを使用してSVGアニメーションを取り入れました。

リリース少し前からTwitterのAPI制限が出ており、Twitter連携で認証できなくなるトラブルに見舞われながらも着手後4ヶ月でリリースになりました。

リリース後は運用要望として出てきた、管理画面側の機能拡充やユーザー閲覧画面における改良と追加開発を行いました。

デザインリソースが不足していたため、開発途中からは画面デザインを兼任してサポートさせていただきました。

お客さまの声

開発における体力は"屈強さ"を思わせます。

E 様

4.5

開発の紅一点。projectの進行には欠かせない花でした。 一方、開発における体力は"屈強さ"を思わせるほどの一言に尽きます。

Contactお問い合わせ

やりたいことも課題も、
お気軽に聞かせてください。

「相談からはじめたい」という方も
アイディア段階から
共創させていただきます。